diff --git a/.gitignore b/.gitignore index dec0d6c..bb9e955 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,6 @@ upload build *.db-journal logs -web/vite.config.js web/dist .env one-api diff --git a/web/src/pages/Drawing.jsx b/web/src/pages/Drawing.jsx new file mode 100644 index 0000000..37bd8b5 --- /dev/null +++ b/web/src/pages/Drawing.jsx @@ -0,0 +1,33 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { Typography } from '@douyinfe/semi-ui'; +import { useTranslation } from 'react-i18next'; + +const Drawing = () => { + const { t } = useTranslation(); + return ( +
+ {t('Drawing')} +
+ ); +}; + +export default Drawing; diff --git a/web/src/pages/LuckyBag.jsx b/web/src/pages/LuckyBag.jsx new file mode 100644 index 0000000..4b484a6 --- /dev/null +++ b/web/src/pages/LuckyBag.jsx @@ -0,0 +1,33 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { Typography } from '@douyinfe/semi-ui'; +import { useTranslation } from 'react-i18next'; + +const LuckyBag = () => { + const { t } = useTranslation(); + return ( +
+ {t('Lucky Bag')} +
+ ); +}; + +export default LuckyBag; diff --git a/web/src/pages/ProfitDashboard.jsx b/web/src/pages/ProfitDashboard.jsx new file mode 100644 index 0000000..ef26be5 --- /dev/null +++ b/web/src/pages/ProfitDashboard.jsx @@ -0,0 +1,33 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { Typography } from '@douyinfe/semi-ui'; +import { useTranslation } from 'react-i18next'; + +const ProfitDashboard = () => { + const { t } = useTranslation(); + return ( +
+ {t('Profit Dashboard')} +
+ ); +}; + +export default ProfitDashboard; diff --git a/web/src/pages/Setting/Operation/SettingsAntiAbuse.jsx b/web/src/pages/Setting/Operation/SettingsAntiAbuse.jsx new file mode 100644 index 0000000..7ad41d7 --- /dev/null +++ b/web/src/pages/Setting/Operation/SettingsAntiAbuse.jsx @@ -0,0 +1,155 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React, { useEffect, useState, useRef } from 'react'; +import { Button, Col, Form, Row, Spin, Typography } from '@douyinfe/semi-ui'; +import { + compareObjects, + API, + showError, + showSuccess, + showWarning, +} from '../../../helpers'; +import { useTranslation } from 'react-i18next'; + +export default function SettingsAntiAbuse() { + const { t } = useTranslation(); + const [loading, setLoading] = useState(false); + const [inputs, setInputs] = useState({ + 'anti_abuse_setting.enabled': false, + 'anti_abuse_setting.max_requests_per_minute': 60, + 'anti_abuse_setting.max_requests_per_hour': 1000, + 'anti_abuse_setting.max_requests_per_day': 10000, + }); + const refForm = useRef(); + const [inputsRow, setInputsRow] = useState(inputs); + + function handleFieldChange(fieldName) { + return (value) => { + setInputs((inputs) => ({ ...inputs, [fieldName]: value })); + }; + } + + function onSubmit() { + const updateArray = compareObjects(inputs, inputsRow); + if (!updateArray.length) return showWarning(t('You haven\'t made any changes')); + const requestQueue = updateArray.map((item) => { + let value = ''; + if (typeof inputs[item.key] === 'boolean') { + value = String(inputs[item.key]); + } else { + value = String(inputs[item.key]); + } + return API.put('/api/option/', { + key: item.key, + value, + }); + }); + setLoading(true); + Promise.all(requestQueue) + .then((res) => { + if (requestQueue.length === 1) { + if (res.includes(undefined)) return; + } else if (requestQueue.length > 1) { + if (res.includes(undefined)) + return showError(t('Partial save failed, please retry')); + } + showSuccess(t('Saved successfully')); + }) + .catch(() => { + showError(t('Save failed, please retry')); + }) + .finally(() => { + setLoading(false); + }); + } + + useEffect(() => { + setInputsRow(structuredClone(inputs)); + refForm.current.setValues(inputs); + }, []); + + return ( + <> + +
(refForm.current = formAPI)} + style={{ marginBottom: 15 }} + > + + + {t('Configure rate limiting and anti-abuse protection')} + + + + + + + + + + + + + + + + + + + +
+ + + ); +} diff --git a/web/src/semi.css b/web/src/semi.css new file mode 100644 index 0000000..76b4821 --- /dev/null +++ b/web/src/semi.css @@ -0,0 +1,26855 @@ +/* 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; + --semi-ai-purple-0: 248,237,255; + --semi-ai-purple-1: 242,218,255; + --semi-ai-purple-2: 227,181,255; + --semi-ai-purple-3: 209,145,255; + --semi-ai-purple-4: 189,108,255; + --semi-ai-purple-5: 166,71,255; + --semi-ai-purple-6: 134,54,219; + --semi-ai-purple-7: 105,40,184; + --semi-ai-purple-8: 78,28,148; + --semi-ai-purple-9: 54,18,112; + --semi-ai-general-0-3: 239,247,255; + --semi-ai-general-0-2: 244,244,255; + --semi-ai-general-0-1: 248,237,255; + --semi-ai-general-0-0: 255,242,255; + --semi-ai-general-1-3: 213,235,255; + --semi-ai-general-1-2: 223,224,255; + --semi-ai-general-1-1: 242,218,255; + --semi-ai-general-1-0: 255,218,254; + --semi-ai-general-2-3: 171,213,255; + --semi-ai-general-2-2: 193,192,255; + --semi-ai-general-2-1: 227,181,255; + --semi-ai-general-2-0: 254,181,255; + --semi-ai-general-3-3: 130,190,255; + --semi-ai-general-3-2: 163,160,255; + --semi-ai-general-3-1: 209,145,255; + --semi-ai-general-3-0: 249,143,255; + --semi-ai-general-4-3: 88,166,255; + --semi-ai-general-4-2: 134,129,255; + --semi-ai-general-4-1: 189,108,255; + --semi-ai-general-4-0: 242,106,255; + --semi-ai-general-5-3: 46,140,255; + --semi-ai-general-5-2: 107,97,255; + --semi-ai-general-5-1: 166,71,255; + --semi-ai-general-5-0: 233,69,255; + --semi-ai-general-6-3: 33,114,219; + --semi-ai-general-6-2: 88,77,219; + --semi-ai-general-6-1: 134,54,219; + --semi-ai-general-6-0: 194,53,219; + --semi-ai-general-7-3: 22,89,184; + --semi-ai-general-7-2: 71,59,184; + --semi-ai-general-7-1: 105,40,184; + --semi-ai-general-7-0: 157,39,184; + --semi-ai-general-8-3: 13,67,148; + --semi-ai-general-8-2: 55,43,148; + --semi-ai-general-8-1: 78,28,148; + --semi-ai-general-8-0: 121,27,148; + --semi-ai-general-9-3: 7,47,112; + --semi-ai-general-9-2: 40,29,112; + --semi-ai-general-9-1: 54,18,112; + --semi-ai-general-9-0: 88,17,112; + --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%); + --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%); + --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%); + --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%); + --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%); + --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%); + --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%); + --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%); + --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%); + --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%); +} + +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; + --semi-ai-purple-0: 58,23,112; + --semi-ai-purple-1: 83,35,148; + --semi-ai-purple-2: 111,49,184; + --semi-ai-purple-3: 141,65,219; + --semi-ai-purple-4: 167,68,255; + --semi-ai-purple-5: 195,117,255; + --semi-ai-purple-6: 213,152,255; + --semi-ai-purple-7: 229,186,255; + --semi-ai-purple-8: 243,221,255; + --semi-ai-purple-9: 251,243,255; + --semi-ai-general-0-0: 9,44,100; + --semi-ai-general-0-1: 39,29,108; + --semi-ai-general-0-2: 58,23,112; + --semi-ai-general-0-3: 80,18,101; + --semi-ai-general-1-0: 17,64,136; + --semi-ai-general-1-1: 54,43,144; + --semi-ai-general-1-2: 83,35,148; + --semi-ai-general-1-3: 113,28,137; + --semi-ai-general-2-0: 26,86,172; + --semi-ai-general-2-1: 70,59,180; + --semi-ai-general-2-2: 111,49,184; + --semi-ai-general-2-3: 148,41,173; + --semi-ai-general-3-0: 38,111,207; + --semi-ai-general-3-1: 88,78,215; + --semi-ai-general-3-2: 141,65,219; + --semi-ai-general-3-3: 185,55,208; + --semi-ai-general-4-0: 35,127,240; + --semi-ai-general-4-1: 94,84,248; + --semi-ai-general-4-2: 167,68,255; + --semi-ai-general-4-3: 219,56,241; + --semi-ai-general-5-0: 91,162,245; + --semi-ai-general-5-1: 134,129,252; + --semi-ai-general-5-2: 195,117,255; + --semi-ai-general-5-3: 234,107,246; + --semi-ai-general-6-0: 131,187,248; + --semi-ai-general-6-1: 163,160,253; + --semi-ai-general-6-2: 213,152,255; + --semi-ai-general-6-3: 243,143,248; + --semi-ai-general-7-0: 172,210,250; + --semi-ai-general-7-1: 192,192,253; + --semi-ai-general-7-2: 229,186,255; + --semi-ai-general-7-3: 249,180,251; + --semi-ai-general-8-0: 213,233,253; + --semi-ai-general-8-1: 223,223,254; + --semi-ai-general-8-2: 243,221,255; + --semi-ai-general-8-3: 253,217,252; + --semi-ai-general-9-0: 239,247,254; + --semi-ai-general-9-1: 244,244,255; + --semi-ai-general-9-2: 251,243,255; + --semi-ai-general-9-3: 254,241,254; + --semi-ai-general-0: linear-gradient(278deg, rgba(var(--semi-ai-general-0-0)) 0%, rgba(var(--semi-ai-general-0-1)) 30%, rgba(var(--semi-ai-general-0-2)) 60%, rgba(var(--semi-ai-general-0-3)) 100%); + --semi-ai-general-1: linear-gradient(278deg, rgba(var(--semi-ai-general-1-0)) 0%, rgba(var(--semi-ai-general-1-1)) 30%, rgba(var(--semi-ai-general-1-2)) 60%, rgba(var(--semi-ai-general-1-3)) 100%); + --semi-ai-general-2: linear-gradient(278deg, rgba(var(--semi-ai-general-2-0)) 0%, rgba(var(--semi-ai-general-2-1)) 30%, rgba(var(--semi-ai-general-2-2)) 60%, rgba(var(--semi-ai-general-2-3)) 100%); + --semi-ai-general-3: linear-gradient(278deg, rgba(var(--semi-ai-general-3-0)) 0%, rgba(var(--semi-ai-general-3-1)) 30%, rgba(var(--semi-ai-general-3-2)) 60%, rgba(var(--semi-ai-general-3-3)) 100%); + --semi-ai-general-4: linear-gradient(278deg, rgba(var(--semi-ai-general-4-0)) 0%, rgba(var(--semi-ai-general-4-1)) 30%, rgba(var(--semi-ai-general-4-2)) 60%, rgba(var(--semi-ai-general-4-3)) 100%); + --semi-ai-general-5: linear-gradient(278deg, rgba(var(--semi-ai-general-5-0)) 0%, rgba(var(--semi-ai-general-5-1)) 30%, rgba(var(--semi-ai-general-5-2)) 60%, rgba(var(--semi-ai-general-5-3)) 100%); + --semi-ai-general-6: linear-gradient(278deg, rgba(var(--semi-ai-general-6-0)) 0%, rgba(var(--semi-ai-general-6-1)) 30%, rgba(var(--semi-ai-general-6-2)) 60%, rgba(var(--semi-ai-general-6-3)) 100%); + --semi-ai-general-7: linear-gradient(278deg, rgba(var(--semi-ai-general-7-0)) 0%, rgba(var(--semi-ai-general-7-1)) 30%, rgba(var(--semi-ai-general-7-2)) 60%, rgba(var(--semi-ai-general-7-3)) 100%); + --semi-ai-general-8: linear-gradient(278deg, rgba(var(--semi-ai-general-8-0)) 0%, rgba(var(--semi-ai-general-8-1)) 30%, rgba(var(--semi-ai-general-8-2)) 60%, rgba(var(--semi-ai-general-8-3)) 100%); + --semi-ai-general-9: linear-gradient(278deg, rgba(var(--semi-ai-general-9-0)) 0%, rgba(var(--semi-ai-general-9-1)) 30%, rgba(var(--semi-ai-general-9-2)) 60%, rgba(var(--semi-ai-general-9-3)) 100%); +} + +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); + --semi-color-ai-general: var(--semi-ai-general-5); + --semi-color-ai-general-hover: var(--semi-ai-general-6); + --semi-color-ai-general-active: var(--semi-ai-general-7); + --semi-color-ai-general-disabled: var(--semi-ai-general-2); + --semi-color-ai-purple: rgba(var(--semi-ai-purple-5)); + --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6)); + --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7)); + --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2)); + --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 255, 255, 0.04) 6.58%, rgba(255, 226, 138, 0.04) 32.88%, rgba(231, 45, 255, 0.04) 67.93%, rgba(0, 115, 255, 0.04) 94.23%); + --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 255, 255, 0.08) 6.58%, rgba(255, 226, 138, 0.08) 32.88%, rgba(231, 45, 255, 0.08) 67.93%, rgba(0, 115, 255, 0.08) 94.23%); + --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 255, 255, 0.12) 6.58%, rgba(255, 226, 138, 0.12) 32.88%, rgba(231, 45, 255, 0.12) 67.93%, rgba(0, 115, 255, 0.12) 94.23%); + --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.16) 6.58%, rgba(176, 48, 240, 0.096) 32.88%, rgba(231, 45, 255, 0.048) 59.17%, rgba(255, 255, 255, 0) 94.23%); + --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.24) 6.58%, rgba(176, 48, 240, 0.144) 32.88%, rgba(231, 45, 255, 0.072) 59.17%, rgba(255, 255, 255, 0) 94.23%); + --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.32) 6.58%, rgba(176, 48, 240, 0.192) 32.88%, rgba(231, 45, 255, 0.096) 59.17%, rgba(255, 255, 255, 0) 94.23%); +} + +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); + --semi-color-ai-general: var(--semi-ai-general-5); + --semi-color-ai-general-hover: var(--semi-ai-general-6); + --semi-color-ai-general-active: var(--semi-ai-general-7); + --semi-color-ai-general-disabled: var(--semi-ai-general-2); + --semi-color-ai-purple: rgba(var(--semi-ai-purple-5)); + --semi-color-ai-purple-hover: rgba(var(--semi-ai-purple-6)); + --semi-color-ai-purple-active: rgba(var(--semi-ai-purple-7)); + --semi-color-ai-purple-disabled: rgba(var(--semi-ai-purple-2)); + --semi-color-ai-background-bottom: linear-gradient(201.15deg, rgba(255, 226, 138, 0.2) 6.58%, rgba(231, 45, 255, 0.2) 50.4%, rgba(0, 115, 255, 0.2) 94.23%); + --semi-color-ai-background-bottom-hover: linear-gradient(201.15deg, rgba(255, 226, 138, 0.3) 6.58%, rgba(231, 45, 255, 0.3) 50.4%, rgba(0, 115, 255, 0.3) 94.23%); + --semi-color-ai-background-bottom-active: linear-gradient(201.15deg, rgba(255, 226, 138, 0.4) 6.58%, rgba(231, 45, 255, 0.4) 50.4%, rgba(0, 115, 255, 0.4) 94.23%); + --semi-color-ai-background-top: linear-gradient(201.15deg, rgba(83, 56, 255, 0.36) 6.58%, rgba(176, 48, 240, 0.216) 32.88%, rgba(154, 0, 174, 0.108) 59.17%, rgba(0, 0, 0, 0) 94.23%); + --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.54) 6.58%, rgba(176, 48, 240, 0.324) 32.88%, rgba(154, 0, 174, 0.162) 59.17%, rgba(0, 0, 0, 0) 94.23%); + --semi-color-ai-background-top-hover: linear-gradient(201.15deg, rgba(83, 56, 255, 0.72) 6.58%, rgba(176, 48, 240, 0.432) 32.88%, rgba(154, 0, 174, 0.216) 59.17%, rgba(0, 0, 0, 0) 94.23%); +} + +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-ai-chat-dialogue { + display: flex; + flex-direction: column; + height: 100%; +} +.semi-ai-chat-dialogue-list { + flex: 1 1; + position: relative; + overflow-y: scroll; +} +.semi-ai-chat-dialogue-list-scroll-hidden::-webkit-scrollbar { + display: none; +} +.semi-ai-chat-dialogue-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + flex-wrap: nowrap; + padding: 8px 16px; + margin-top: 2px; + column-gap: 16px; +} +.semi-ai-chat-dialogue-wrapper-selected { + background-color: var(--semi-color-fill-0); + border-radius: 16px; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container { + flex: 1 1 auto; + display: flex; + flex-direction: row; + column-gap: 12px; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right { + flex-direction: row-reverse; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-inner { + align-items: flex-end; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-content-no-bubble, .semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-content-user, .semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-content-custom-renderer { + margin-left: auto; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-content-inner { + text-align: right; +} +.semi-ai-chat-dialogue-wrapper .semi-ai-chat-dialogue-container-right .semi-ai-chat-dialogue-content-inner .semi-markdownRender { + text-align: left; +} +.semi-ai-chat-dialogue-wrapper:hover .semi-ai-chat-dialogue-action:not(.semi-ai-chat-dialogue-action-hidden) { + visibility: visible; +} +.semi-ai-chat-dialogue-backBottom { + position: relative; + z-index: 1; +} +.semi-ai-chat-dialogue-backBottom-button { + width: 42px; + height: 42px; + border-radius: 50%; +} +.semi-ai-chat-dialogue-backBottom .semi-button { + position: absolute; + bottom: 10px; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: center; + align-items: center; +} +.semi-ai-chat-dialogue-title { + line-height: 20px; + font-size: 16px; + font-weight: 400; +} +.semi-ai-chat-dialogue-inner { + width: 100%; + display: flex; + flex-direction: column; +} +.semi-ai-chat-dialogue-avatar { + flex-shrink: 0; + width: 24px; + height: 24px; +} +.semi-ai-chat-dialogue-avatar-hidden { + visibility: hidden; +} +.semi-ai-chat-dialogue-content { + max-width: 100%; + font-size: 14px; +} +.semi-ai-chat-dialogue-content pre { + background-color: transparent; +} +.semi-ai-chat-dialogue-content-editing { + width: 100%; +} +.semi-ai-chat-dialogue-content-wrapper { + display: flex; + align-items: end; +} +.semi-ai-chat-dialogue-content-inner { + margin-left: auto; + width: 100%; +} +.semi-ai-chat-dialogue-content-failed { + color: var(--semi-color-danger); + margin-right: 8px; +} +.semi-ai-chat-dialogue-content-user { + display: flex; +} +.semi-ai-chat-dialogue-content-user:hover .semi-ai-chat-dialogue-content-icon-reference { + display: flex; + padding: 0px 8px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} +.semi-ai-chat-dialogue-content-bubble, .semi-ai-chat-dialogue-content-userBubble { + margin-top: 8px; + padding: 12px 16px; + border-radius: var(--semi-border-radius-large); + background-color: var(--semi-color-fill-0); + max-width: 100%; + box-sizing: border-box; + width: fit-content; +} +.semi-ai-chat-dialogue-content-no-bubble { + margin-top: 8px; + width: fit-content; +} +.semi-ai-chat-dialogue-content-loading { + display: flex; + align-items: center; + margin-top: 8px; +} +.semi-ai-chat-dialogue-content-loading > span:nth-child(1) { + animation-delay: -200ms; + background-color: rgb(83, 56, 255); +} +.semi-ai-chat-dialogue-content-loading > span:nth-child(2) { + animation-delay: -100ms; + background-color: rgb(176, 48, 240); +} +.semi-ai-chat-dialogue-content-loading > span:nth-child(3) { + animation-delay: 0ms; + background-color: rgb(231, 45, 255); +} +.semi-ai-chat-dialogue-content-loading-item { + border-radius: var(--semi-border-radius-circle); + height: 3px; + width: 3px; + margin: 1px 1px; + overflow: visible; + position: relative; + animation: semi-ai-chat-dialogue-loading-bounce 1s infinite ease; +} +.semi-ai-chat-dialogue-content-loading-text { + margin-left: 8px; + color: var(--semi-color-text-3); + font-size: 14px; +} +.semi-ai-chat-dialogue-content-icon-reference { + display: none; +} +.semi-ai-chat-dialogue-content-img { + margin-top: 8px; + border-radius: var(--semi-border-radius-medium); +} +.semi-ai-chat-dialogue-content-img img { + width: 256px; + height: 256px; + object-fit: cover; +} +.semi-ai-chat-dialogue-content-img-list { + display: inline-flex; + flex-direction: column; + margin-right: 4px; +} +.semi-ai-chat-dialogue-content-img-list img { + width: 128px; + height: 128px; + object-fit: cover; +} +.semi-ai-chat-dialogue-content-img-last { + margin-right: 0; +} +.semi-ai-chat-dialogue-content-file { + display: inline-flex; + flex-direction: row; + align-items: center; + height: 36px; + width: 224px; + column-gap: 8px; + padding: 8px 8px; + margin-top: 8px; + margin-right: 8px; + border-radius: var(--semi-border-radius-medium); + background: var(--semi-color-fill-0); + text-decoration: none; + vertical-align: top; +} +.semi-ai-chat-dialogue-content-file:hover .semi-ai-chat-dialogue-content-icon-reference { + display: flex; + flex-shrink: 0; + padding: 0px 8px; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; + color: var(--semi-color-text-0); +} +.semi-ai-chat-dialogue-content-file:hover .semi-ai-chat-dialogue-content-file-title-ellipsis { + max-width: 140px; +} +.semi-ai-chat-dialogue-content-file-last { + margin-right: 0; +} +.semi-ai-chat-dialogue-content-file-icon { + color: var(--semi-color-white); +} +.semi-ai-chat-dialogue-content-file-icon-wrapper { + width: 36px; + height: 36px; + border-radius: var(--semi-border-radius-extra-small); + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; +} +.semi-ai-chat-dialogue-content-file-icon-code { + background-color: rgba(var(--semi-teal-4), 1); +} +.semi-ai-chat-dialogue-content-file-icon-word { + background-color: rgba(var(--semi-blue-4), 1); +} +.semi-ai-chat-dialogue-content-file-icon-pdf { + background-color: rgba(var(--semi-red-4), 1); +} +.semi-ai-chat-dialogue-content-file-icon-excel { + background-color: rgba(var(--semi-green-4), 1); +} +.semi-ai-chat-dialogue-content-file-icon-video { + background-color: rgba(var(--semi-purple-4), 1); +} +.semi-ai-chat-dialogue-content-file-icon-image .semi-ai-chat-dialogue-content-file-icon { + background-size: cover; + background-position: center; + width: 36px; + height: 36px; +} +.semi-ai-chat-dialogue-content-file-icon-default { + background-color: rgba(var(--semi-grey-4), 1); +} +.semi-ai-chat-dialogue-content-file-info { + display: flex; + flex-direction: column; + text-align: left; + flex-shrink: 1; +} +.semi-ai-chat-dialogue-content-file-title { + font-size: 16px; + color: var(--semi-color-text-0); + max-width: 180px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.semi-ai-chat-dialogue-content-file-metadata { + font-size: 14px; + color: var(--semi-color-text-2); +} +.semi-ai-chat-dialogue-content-file-type { + text-transform: uppercase; +} +.semi-ai-chat-dialogue-content-tool-call { + display: flex; + color: var(--semi-color-text-2); + padding: 6px 8px; + background-color: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-medium); + width: fit-content; + align-items: center; + justify-content: center; + column-gap: 4px; + margin-top: 8px; +} +.semi-ai-chat-dialogue-content-custom-renderer { + margin-top: 8px; + width: fit-content; +} +.semi-ai-chat-dialogue-action { + margin-top: 8px; + visibility: hidden; +} +.semi-ai-chat-dialogue-action-btn { + width: 24px; + height: 24px; +} +.semi-ai-chat-dialogue-action-icon-flip { + transform: scaleY(-1); +} +.semi-ai-chat-dialogue-action-show { + visibility: visible; +} +.semi-ai-chat-dialogue-action.semi-ai-chat-dialogue-action-hidden, .semi-ai-chat-dialogue-action:hover.semi-ai-chat-dialogue-action-hidden { + visibility: hidden; +} +.semi-ai-chat-dialogue-action-dropdown li { + color: var(--semi-color-danger); +} +.semi-ai-chat-dialogue-action-dropdown .semi-icon { + font-size: 16px; +} +.semi-ai-chat-dialogue-reasoning { + width: 100%; +} +.semi-ai-chat-dialogue-reasoning-wrapper { + width: 100%; + margin-top: 8px; + cursor: pointer; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-large); +} +.semi-ai-chat-dialogue-reasoning-header { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 16px; +} +.semi-ai-chat-dialogue-reasoning-header-prefix, .semi-ai-chat-dialogue-reasoning-header-suffix { + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; +} +.semi-ai-chat-dialogue-reasoning-header-title { + flex: 1 1 auto; + line-height: 22px; + font-weight: 600; +} +.semi-ai-chat-dialogue-reasoning-content { + padding: 12px 16px; + border-top: 1px solid var(--semi-color-border); +} +.semi-ai-chat-dialogue-step { + display: inline-flex; + flex-direction: row; + align-items: center; + line-height: 20px; + padding: 6px 12px; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-medium); + margin-top: 12px; + font-size: 14px; +} +.semi-ai-chat-dialogue-step .semi-ai-chat-dialogue-content-loading { + margin-top: 0; +} +.semi-ai-chat-dialogue-step-completed { + color: var(--semi-color-success); +} +.semi-ai-chat-dialogue-step-summary { + display: inline-block; + width: fit-content; + cursor: pointer; +} +.semi-ai-chat-dialogue-step-prefix { + width: 20px; + height: 20px; + color: var(--semi-color-text-1); + display: flex; + justify-content: center; + align-items: center; + margin-right: 6px; +} +.semi-ai-chat-dialogue-step-suffix { + width: 20px; + height: 20px; + display: flex; + justify-content: center; + align-items: center; + color: var(--semi-color-text-1); + margin-left: 8px; +} +.semi-ai-chat-dialogue-step-panel { + display: flex; + gap: 12px; +} +.semi-ai-chat-dialogue-step-line { + width: 1px; + background-color: var(--semi-color-border); + margin-left: 20px; +} +.semi-ai-chat-dialogue-step-action { + line-height: 20px; + margin-top: 12px; + font-size: 14px; +} +.semi-ai-chat-dialogue-step-action-summary { + margin-bottom: 4px; +} +.semi-ai-chat-dialogue-step-action-desc { + display: inline-flex; + color: var(--semi-color-text-2); + padding: 6px 8px; + background-color: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-medium); + width: fit-content; + align-items: center; + justify-content: center; + column-gap: 4px; +} +.semi-ai-chat-dialogue-step-wrapper > .semi-ai-chat-dialogue-step:first-child { + margin-top: 4px; +} +.semi-ai-chat-dialogue-annotation { + width: 100%; +} +.semi-ai-chat-dialogue-annotation-wrapper { + width: fit-content; + margin-top: 8px; + flex: 1 1 auto; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-medium); + padding: 8px 12px; +} +.semi-ai-chat-dialogue-annotation-wrapper:hover { + background-color: var(--semi-color-fill-0); +} +.semi-ai-chat-dialogue-annotation-content { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + column-gap: 8px; + font-size: 14px; + color: var(--semi-color-text-2); + cursor: pointer; +} +.semi-ai-chat-dialogue-annotation-content .semi-avatar-group { + display: flex; +} +.semi-ai-chat-dialogue-annotation-content-logo { + width: 16px; + height: 16px; + display: flex; +} +.semi-ai-chat-dialogue-annotation-content-logo-renderMore { + width: 16px; + height: 16px; +} +.semi-ai-chat-dialogue-annotation-content-icon { + display: flex; + justify-content: center; + align-items: center; +} +.semi-ai-chat-dialogue-references { + display: flex; + flex-wrap: wrap; + font-size: 12px; + line-height: 16px; + color: var(--semi-color-text-2); + margin-top: 8px; + column-gap: 4px; + row-gap: 4px; +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference { + display: flex; + padding: 8px 12px; + box-sizing: border-box; + width: fit-content; + max-width: 200px; + flex-shrink: 1; + align-items: center; + column-gap: 8px; + background-color: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-medium); + margin-left: auto; +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-content { + display: flex; + align-items: center; + flex-grow: 1; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon { + display: flex; + justify-content: center; + align-items: center; + margin-right: 4px; + color: var(--semi-color-white); + width: 16px; + height: 16px; + border-radius: 2px; +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon-word { + background-color: rgba(var(--semi-blue-4), 1); +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon-pdf { + background-color: rgba(var(--semi-red-4), 1); +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon-excel { + background-color: rgba(var(--semi-green-4), 1); +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon-video { + background-color: rgba(var(--semi-purple-4), 1); +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-icon-code { + background-color: rgba(var(--semi-teal-4), 1); +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-img { + margin-right: 4px; +} +.semi-ai-chat-dialogue-references .semi-ai-chat-dialogue-reference-name { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + word-break: break-all; + max-width: 130px; +} +.semi-ai-chat-dialogue-code { + border-radius: var(--semi-border-radius-large); + overflow: hidden; + border: 1px solid var(--semi-color-border); + line-height: 32px; +} +.semi-ai-chat-dialogue-code .semi-codeHighlight pre { + word-break: break-all; + white-space: pre-wrap; +} +.semi-ai-chat-dialogue-code-topSlot { + display: flex; + justify-content: space-between; + background-color: var(--semi-color-fill-0); + align-items: center; + padding: 8px 16px; + color: var(--semi-color-text-0); + font-size: 14px; +} +.semi-ai-chat-dialogue-code-topSlot-copy { + display: flex; + justify-content: flex-end; + align-items: center; + width: 24px; +} +.semi-ai-chat-dialogue-code-topSlot-copy-wrapper { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background: transparent; + border: none; +} +.semi-ai-chat-dialogue-code .semi-codeHighlight-defaultTheme pre[class*=language-] { + margin: 0px; + background: var(--semi-color-bg-0); +} +.semi-ai-chat-dialogue-hints { + display: flex; + flex-direction: column; + row-gap: 8px; + margin-top: 4px; + margin-bottom: 12px; + margin-left: 52px; +} +.semi-ai-chat-dialogue-hints-selecting { + margin-left: 68px; +} +.semi-ai-chat-dialogue-hint-item { + cursor: pointer; + display: flex; + flex-direction: row; + width: fit-content; + background: var(--semi-color-bg-0); + align-items: center; + border: 1px solid var(--semi-color-border); + padding: 8px 16px; + border-radius: var(--semi-border-radius-medium); +} +.semi-ai-chat-dialogue-hint-item:hover { + background-color: var(--semi-color-fill-0); +} +.semi-ai-chat-dialogue-hint-content { + font-size: 14px; + color: var(--semi-color-text-0); +} + +@keyframes semi-ai-chat-dialogue-loading-bounce { + /* 起点（站在地面） */ + 0% { + transform: translateY(0) scale(1); + } + /* 上升到最高点（略变瘦） */ + 18% { + transform: translateY(-4px) scale(0.96); + } + /* 落地瞬间（略压扁，模拟缓冲） */ + 36% { + transform: translateY(0) scale(1.06); + } + /* 轻微回弹（小幅再向上） */ + 44% { + transform: translateY(-0.5px) scale(0.98); + } + /* 回到静止（消除抖动） */ + 52% { + transform: translateY(0) scale(1); + } + /* 余下时间保持静止，等待下一轮 */ + 100% { + transform: translateY(0) scale(1); + } +} +.semi-rtl .semi-ai-chat-dialogue-wrapper, +.semi-portal-rtl .semi-ai-chat-dialogue-wrapper { + direction: rtl; +} +.semi-rtl .semi-ai-chat-dialogue-wrapper-action-icon-redo, +.semi-portal-rtl .semi-ai-chat-dialogue-wrapper-action-icon-redo { + transform: scaleX(-1); +} + +.semi-aiChatInput { + display: flex; + flex-direction: column; + padding: 20px; + border-radius: 12px; + border: 1px solid var(--semi-color-border); + box-sizing: border-box; +} +.semi-aiChatInput-skill { + padding: 4px 0px; + border-radius: 8px; + overflow: scroll; +} +.semi-aiChatInput-skill-item { + display: flex; + align-items: center; + column-gap: 8px; + padding: 8px 20px; + cursor: pointer; +} +.semi-aiChatInput-skill-item-active { + background-color: var(--semi-color-fill-0); +} +.semi-aiChatInput-popover-suggestion { + box-shadow: none; +} +.semi-aiChatInput-suggestion { + overflow: scroll; +} +.semi-aiChatInput-suggestion-item { + border-radius: 6px; + padding: 8px 20px; + color: var(--semi-color-text-0); + 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; +} +.semi-aiChatInput-suggestion-item-active { + background-color: var(--semi-color-fill-0); +} +.semi-aiChatInput-reference-icon { + width: 16px; + height: 16px; + border-radius: 2px; + margin-right: 4px; +} +.semi-aiChatInput-ref-icon { + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--semi-color-white); + flex-shrink: 0; +} +.semi-aiChatInput-ref-icon-word { + background-color: rgba(var(--semi-blue-4), 1); +} +.semi-aiChatInput-ref-icon-pdf { + background-color: rgba(var(--semi-red-4), 1); +} +.semi-aiChatInput-ref-icon-code { + background-color: rgba(var(--semi-teal-5), 1); +} +.semi-aiChatInput-ref-icon-excel { + background-color: rgba(var(--semi-green-5), 1); +} +.semi-aiChatInput-ref-icon-video { + background-color: rgba(var(--semi-purple-4), 1); +} +.semi-aiChatInput-ref-icon-audio { + background-color: rgba(var(--semi-purple-4), 1); +} +.semi-aiChatInput-ref-icon-unknown { + background-color: rgba(var(--semi-grey-5), 1); +} +.semi-aiChatInput-references { + display: flex; + flex-wrap: wrap; + margin-bottom: 8px; + 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; + color: var(--semi-color-text-2); + column-gap: 4px; + row-gap: 4px; +} +.semi-aiChatInput-references > .semi-aiChatInput-reference:only-child { + width: 100%; +} +.semi-aiChatInput-references > .semi-aiChatInput-reference:nth-last-child(2):first-child, .semi-aiChatInput-references > .semi-aiChatInput-reference:nth-child(2):nth-last-child(1) { + flex-basis: calc(50% - 4px); + max-width: calc(50% - 4px); +} +.semi-aiChatInput-references > .semi-aiChatInput-reference:nth-last-child(n+3):nth-child(1), +.semi-aiChatInput-references > .semi-aiChatInput-reference:nth-last-child(n+3):nth-child(1) ~ .semi-aiChatInput-reference { + width: calc(33.333% - 4px); +} +.semi-aiChatInput-reference { + padding: 8px 12px; + box-sizing: border-box; + border-radius: 6px; + background: var(--semi-color-fill-0); + flex-shrink: 1; + display: flex; + align-items: center; + column-gap: 8px; +} +.semi-aiChatInput-reference-content { + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-aiChatInput-reference-img { + width: 16px; + height: 16px; + margin-right: 4px; +} +.semi-aiChatInput-reference-name { + display: inline-block; + text-overflow: ellipsis; + overflow: hidden; + word-break: break-all; +} +.semi-aiChatInput-reference-delete { + cursor: pointer; + padding: 2px; + border-radius: 50%; +} +.semi-aiChatInput-reference-delete:hover { + background: var(--semi-color-fill-1); +} +.semi-aiChatInput-footer { + display: flex; + justify-content: space-between; + margin-top: 20px; + align-items: center; + user-select: none; + -webkit-user-select: none; +} +.semi-aiChatInput-footer-round .semi-aiChatInput-footer-configure-select, .semi-aiChatInput-footer-round .semi-aiChatInput-footer-configure-button, +.semi-aiChatInput-footer-round .semi-aiChatInput-footer-configure-radio-button, .semi-aiChatInput-footer-round .semi-aiChatInput-footer-configure-mcp-trigger, +.semi-aiChatInput-footer-round .semi-aiChatInput-footer-action-button, .semi-aiChatInput-footer-round .semi-aiChatInput-footer-action-upload, +.semi-aiChatInput-footer-round .semi-radio-addon-buttonRadio { + border-radius: 9999px; +} +.semi-aiChatInput-footer-action { + display: flex; + align-items: center; + column-gap: 8px; +} +.semi-aiChatInput-footer-action button { + padding: 0px; + border: 0px; + display: flex; + align-items: center; + justify-content: center; +} +.semi-aiChatInput-footer-action-button { + width: 32px; + height: 32px; + cursor: pointer; + border-radius: 8px; +} +.semi-aiChatInput-footer-action-send { + background-color: var(--semi-color-primary); + color: rgba(var(--semi-white), 1); +} +.semi-aiChatInput-footer-action-send:hover:not(.semi-aiChatInput-footer-action-send-disabled) { + background-color: var(--semi-color-primary-hover); +} +.semi-aiChatInput-footer-action-send:active:not(.semi-aiChatInput-footer-action-send-disabled) { + background-color: var(--semi-color-primary-active); +} +.semi-aiChatInput-footer-action-send-disabled { + background-color: var(--semi-color-fill-2); +} +.semi-aiChatInput-footer-action-stop { + background-color: var(--semi-color-primary); + color: rgba(var(--semi-white), 1); +} +.semi-aiChatInput-footer-action-stop:hover:not(.semi-aiChatInput-footer-action-send-disabled) { + background-color: var(--semi-color-primary-hover); +} +.semi-aiChatInput-footer-action-stop:active:not(.semi-aiChatInput-footer-action-send-disabled) { + background-color: var(--semi-color-primary-active); +} +.semi-aiChatInput-footer-action-stop-disabled { + background-color: var(--semi-color-fill-2); +} +.semi-aiChatInput-footer-action-upload { + background: transparent; + color: var(--semi-color-text-1); +} +.semi-aiChatInput-footer-action-upload:hover { + background-color: var(--semi-color-fill-0); +} +.semi-aiChatInput-footer-action-upload:active { + background-color: var(--semi-color-fill-1); +} +.semi-aiChatInput-footer-configure { + display: flex; + flex-direction: row; + column-gap: 8px; +} +.semi-aiChatInput-footer-configure-button { + border: 1px solid var(--semi-color-primary); +} +.semi-aiChatInput-footer-configure-button-active.semi-button-tertiary.semi-button-outline { + border: 1px solid var(--semi-color-primary); + color: var(--semi-color-primary); + background-color: var(--semi-color-primary-light-default); +} +.semi-aiChatInput-footer-configure-select { + border: 1px solid var(--semi-color-border); + background: transparent; +} +.semi-aiChatInput-footer-configure-select.semi-select-focus, .semi-aiChatInput-footer-configure-select .semi-select-selection-text { + font-weight: 600; + color: var(--semi-color-text-1); +} +.semi-aiChatInput-footer-configure-select.semi-select:hover { + border-color: var(--semi-color-border); +} +.semi-aiChatInput-footer-configure-select.semi-select:focus { + border: 1px solid var(--semi-color-border); + background: transparent; +} +.semi-aiChatInput-footer-configure-radio-button .semi-radio-addon-buttonRadio { + height: 16px; + padding: 4px; + font-size: 14px; +} +.semi-aiChatInput-footer-configure-radio-button .semi-radio-addon-buttonRadio-checked { + color: var(--semi-color-text-1); + background: var(--semi-color-bg-2); +} +.semi-aiChatInput-footer-configure-mcp-header { + padding: 8px 16px 0px; + 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; + height: 16px; + align-items: center; + display: flex; + justify-content: space-between; + column-gap: 4px; +} +.semi-aiChatInput-footer-configure-mcp-header-title { + color: var(--semi-color-text-2); +} +.semi-aiChatInput-footer-configure-mcp-header-config.semi-button { + padding: 0px; + border: 0px; + height: fit-content; + 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-aiChatInput-attachment { + position: relative; + display: flex; + align-items: center; + column-gap: 8px; + border-radius: 6px; + background: var(--semi-color-fill-0); + padding: 8px; + width: 224px; + height: 36px; + overflow: hidden; + letter-spacing: 0; + flex-shrink: 0; +} +.semi-aiChatInput-attachment-icon, .semi-aiChatInput-attachment-img { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; + border-radius: 3px; + width: 36px; + height: 36px; +} +.semi-aiChatInput-attachment-img { + object-fit: cover; +} +.semi-aiChatInput-attachment-content { + display: flex; + flex-direction: column; + flex-shrink: 0; + align-items: flex-start; + width: 180px; +} +.semi-aiChatInput-attachment-content-name { + flex-shrink: 0; + width: 180px; + height: 20px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--semi-color-text-0); + 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; + font-weight: 600; +} +.semi-aiChatInput-attachment-content-size { + display: flex; + flex-shrink: 0; + align-items: flex-start; + column-gap: 4px; + color: var(--semi-color-text-2); + 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; + text-transform: uppercase; +} +.semi-aiChatInput-attachment-delete { + display: none; +} +.semi-aiChatInput-attachment:hover > .semi-aiChatInput-attachment-delete { + cursor: pointer; + position: absolute; + top: 0px; + right: 0px; + background: rgba(var(--semi-grey-7), 1); + color: var(--semi-color-white); + border-radius: 50%; + width: 16px; + height: 16px; + font-size: 12px; + display: flex; + align-items: center; + justify-content: center; +} +.semi-aiChatInput-attachment-progress.semi-progress-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.semi-aiChatInput-scroll-wrapper { + position: relative; + width: 100%; + display: flex; + align-items: center; + margin-bottom: 8px; +} +.semi-aiChatInput-scroll-container { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + /* Hide scrollbar */ + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + column-gap: 8px; + /* hidden Webkit (Chrome, Safari) scrollbar */ +} +.semi-aiChatInput-scroll-container::-webkit-scrollbar { + display: none; +} +.semi-aiChatInput-scroll-button { + padding: 0px; + border: 0px; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 10; + width: 16px; + height: 16px; + border-radius: 50%; + background: var(--semi-color-white); + box-shadow: var(--semi-shadow-elevated); + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.2s, box-shadow 0.2s; +} +.semi-aiChatInput-scroll-button .semi-icon { + font-size: 12px; + color: var(--semi-color-text-2); +} +.semi-aiChatInput-scroll-button:active { + transform: translateY(-50%) scale(0.95); +} +.semi-aiChatInput-scroll-button-left-icon { + transform: rotate(180deg); +} +.semi-aiChatInput-scroll-button.semi-aiChatInput-scroll-button-left { + left: 10px; +} +.semi-aiChatInput-scroll-button.semi-aiChatInput-scroll-button-right { + right: 10px; +} +.semi-aiChatInput-editor-content { + flex: 1 1 0%; + min-height: 0; + margin-top: -4px; + padding-top: 4px; + overflow: auto; +} +.semi-aiChatInput-editor-content .tiptap { + font-size: 14px; + line-height: 24px; +} +.semi-aiChatInput-editor-content .tiptap p.is-editor-empty:first-child::before { + color: var(--semi-color-text-2); + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} +.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::before { + content: none; +} +.semi-aiChatInput-editor-content .tiptap p.has-skill-slot.is-editor-empty:first-child::after { + color: var(--semi-color-text-2); + content: attr(data-placeholder); + display: inline; + height: 0; + margin-left: 8px; + pointer-events: none; +} +.semi-aiChatInput-editor-content .tiptap p { + margin: 0px; + white-space: pre-wrap; +} +.semi-aiChatInput-editor-content .tiptap:focus { + outline: none; +} +.semi-aiChatInput-editor-content .tiptap .node-inputSlot { + display: inline-block; + font-size: 14px; + line-height: 20px; +} +.semi-aiChatInput-editor-content .tiptap .input-slot { + display: inline-block; + box-sizing: content-box; + background-color: var(--semi-color-primary-light-default); + border-radius: 4px; + padding: 2px 4px; + position: relative; + margin: 2px 2px; + font-weight: 600; + min-width: 2px; +} +.semi-aiChatInput-editor-content .tiptap .input-slot .content { + color: var(--semi-color-primary); +} +.semi-aiChatInput-editor-content .tiptap .input-slot .input-slot-placeholder { + user-select: none; + position: absolute; + top: 2px; + left: 4px; + pointer-events: none; + white-space: pre; + z-index: 1; + color: var(--semi-color-primary-disabled); +} +.semi-aiChatInput-editor-content .tiptap .node-selectSlot { + display: inline-flex; +} +.semi-aiChatInput-editor-content .tiptap .select-slot { + 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; + height: 24px; + padding: 2px 4px; + border-radius: 4px; + background-color: var(--semi-color-primary-light-default); +} +.semi-aiChatInput-editor-content .tiptap .select-slot:first-child { + margin-left: 0px; +} +.semi-aiChatInput-editor-content .tiptap .select-slot-wrapper { + display: inline-flex; + margin: 2px 4px; +} +.semi-aiChatInput-editor-content .tiptap .select-slot .semi-select-selection { + color: var(--semi-color-primary); + font-weight: bold; + margin-left: 0px; +} +.semi-aiChatInput-editor-content .tiptap .select-slot .semi-select-arrow { + color: var(--semi-color-text-2); + width: 16px; +} +.semi-aiChatInput-editor-content .tiptap .select-slot.semi-select-open, .semi-aiChatInput-editor-content .tiptap .select-slot.semi-select-focus { + border-color: transparent; +} +.semi-aiChatInput-editor-content .tiptap .select-slot.semi-select:focus { + border-color: transparent; +} +.semi-aiChatInput-editor-content .tiptap .node-skillSlot { + display: inline-flex; +} +.semi-aiChatInput-editor-content .tiptap .skill-slot { + color: var(--semi-color-primary); + font-weight: 600; + outline: none; +} +.semi-aiChatInput-editor-content .tiptap .skill-slot-wrapper { + display: inline-flex; + position: relative; + padding: 0px 4px; + margin: 2px 2px; + border-radius: 4px; +} +.semi-aiChatInput-editor-content .tiptap .skill-slot-wrapper:hover { + background-color: var(--semi-color-primary-light-default); +} +.semi-aiChatInput-editor-content .tiptap .skill-slot-wrapper:hover .skill-slot-delete { + cursor: pointer; + position: absolute; + top: 0px; + right: 0px; + background: rgba(var(--semi-grey-7), 1); + color: var(--semi-color-white); + transform: translate(50%, -50%); + border-radius: 50%; + width: 12px; + height: 12px; + font-size: 8px; + display: flex; + align-items: center; + justify-content: center; +} +.semi-aiChatInput-editor-content .tiptap .skill-slot-delete { + display: none; +} + +.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); +} +.semi-rtl .semi-avatar-hover, +.semi-portal-rtl .semi-avatar-hover { + left: auto; + right: 0; +} +.semi-rtl .semi-avatar-group, +.semi-portal-rtl .semi-avatar-group { + direction: rtl; +} +.semi-rtl .semi-avatar-group .semi-avatar:first-child, +.semi-portal-rtl .semi-avatar-group .semi-avatar:first-child { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-avatar-group .semi-avatar-extra-large, +.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-large { + margin-left: auto; + margin-right: -32px; +} +.semi-rtl .semi-avatar-group .semi-avatar-large, +.semi-portal-rtl .semi-avatar-group .semi-avatar-large { + margin-left: auto; + margin-right: -18px; +} +.semi-rtl .semi-avatar-group .semi-avatar-medium, +.semi-rtl .semi-avatar-group .semi-avatar-small, +.semi-portal-rtl .semi-avatar-group .semi-avatar-medium, +.semi-portal-rtl .semi-avatar-group .semi-avatar-small { + margin-left: auto; + margin-right: -12px; +} +.semi-rtl .semi-avatar-group .semi-avatar-extra-small, +.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-small { + margin-left: auto; + margin-right: -10px; +} +.semi-rtl .semi-avatar-group .semi-avatar-extra-extra-small, +.semi-portal-rtl .semi-avatar-group .semi-avatar-extra-extra-small { + margin-left: auto; + margin-right: -4px; +} + +.semi-backtop { + position: fixed; + box-sizing: border-box; + right: 100px; + bottom: 50px; + z-index: 10; + cursor: pointer; + text-align: center; + overflow: hidden; +} + +.semi-rtl .semi-backtop, +.semi-portal-rtl .semi-backtop { + direction: rtl; + right: auto; + left: 100px; +} + +.semi-badge { + position: relative; + display: inline-block; +} +.semi-badge-dot { + box-sizing: border-box; + width: 8px; + height: 8px; + border-radius: var(--semi-border-radius-circle); + background-color: var(--semi-color-bg-1); + border: 1px var(--semi-color-bg-1) solid; + z-index: 1; +} +.semi-badge-count { + box-sizing: border-box; + height: 18px; + min-width: 18px; + border-radius: 9px; + padding: 0px 4px; + background-color: var(--semi-color-bg-1); + border: 1px var(--semi-color-bg-1) solid; + z-index: 1; + text-align: center; + 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; + font-weight: 400; + color: var(--semi-color-bg-2); +} +.semi-badge-rightTop { + position: absolute; + top: 0; + right: 0; + transform: translate(50%, -50%); + transform-origin: 100% 0%; +} +.semi-badge-rightBottom { + position: absolute; + right: 0; + bottom: 0; + transform: translate(50%, 50%); + transform-origin: 100% 0%; +} +.semi-badge-leftTop { + position: absolute; + top: 0; + left: 0; + transform: translate(-50%, -50%); + transform-origin: 100% 0%; +} +.semi-badge-leftBottom { + position: absolute; + bottom: 0; + left: 0; + transform: translate(-50%, 50%); + transform-origin: 100% 0%; +} +.semi-badge-custom { + display: flex; +} +.semi-badge-block { + position: static; + display: inline-block; +} +.semi-badge-primary.semi-badge-solid { + background-color: var(--semi-color-primary); +} +.semi-badge-primary.semi-badge-light { + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-primary); +} +.semi-badge-primary.semi-badge-inverted { + color: var(--semi-color-primary); +} +.semi-badge-secondary.semi-badge-solid { + background-color: var(--semi-color-secondary); +} +.semi-badge-secondary.semi-badge-light { + background-color: var(--semi-color-secondary-light-default); + color: var(--semi-color-secondary); +} +.semi-badge-secondary.semi-badge-inverted { + color: var(--semi-color-secondary); +} +.semi-badge-tertiary.semi-badge-solid { + background-color: var(--semi-color-tertiary); +} +.semi-badge-tertiary.semi-badge-light { + background-color: var(--semi-color-tertiary-light-default); + color: var(--semi-color-tertiary); +} +.semi-badge-tertiary.semi-badge-inverted { + color: var(--semi-color-tertiary); +} +.semi-badge-danger.semi-badge-solid { + background-color: var(--semi-color-danger); +} +.semi-badge-danger.semi-badge-light { + background-color: var(--semi-color-danger-light-default); + color: var(--semi-color-danger); +} +.semi-badge-danger.semi-badge-inverted { + color: var(--semi-color-danger); +} +.semi-badge-warning.semi-badge-solid { + background-color: var(--semi-color-warning); +} +.semi-badge-warning.semi-badge-light { + background-color: var(--semi-color-warning-light-default); + color: var(--semi-color-warning); +} +.semi-badge-warning.semi-badge-inverted { + color: var(--semi-color-warning); +} +.semi-badge-success.semi-badge-solid { + background-color: var(--semi-color-success); +} +.semi-badge-success.semi-badge-light { + background-color: var(--semi-color-success-light-default); + color: var(--semi-color-success); +} +.semi-badge-success.semi-badge-inverted { + color: var(--semi-color-success); +} + +.semi-rtl .semi-badge, +.semi-portal-rtl .semi-badge { + direction: rtl; +} + +.semi-banner { + padding: 12px 12px; +} +.semi-banner-content-wrapper { + display: flex; + flex-direction: row; +} +.semi-banner-description { + margin: 0; +} +.semi-banner .semi-banner-content-wrapper .semi-banner-content { + display: flex; + flex: 1; +} +.semi-banner-in-container { + border-radius: var(--semi-border-radius-small); +} +.semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body { + flex: 1; +} +.semi-banner-in-container .semi-banner-content-wrapper .semi-banner-content-body .semi-banner-title + .semi-banner-description { + margin-top: 2px; +} +.semi-banner-full .semi-banner-content-wrapper .semi-banner-content { + justify-content: center; +} +.semi-banner-full .semi-banner-content-wrapper .semi-banner-icon, +.semi-banner-full .semi-banner-content-wrapper .semi-banner-content-body { + display: flex; + align-items: center; +} +.semi-banner-close { + margin-left: 12px; + height: 24px; + width: 24px; +} +.semi-banner-extra { + margin-top: 8px; +} +.semi-banner-icon { + display: flex; + margin-right: 12px; +} +.semi-banner-info { + background-color: var(--semi-color-info-light-default); + color: var(--semi-color-info); +} +.semi-banner-info.semi-banner-bordered { + border: 1px solid var(--semi-color-info); +} +.semi-banner-warning { + background-color: var(--semi-color-warning-light-default); + color: var(--semi-color-warning); +} +.semi-banner-warning.semi-banner-bordered { + border: 1px solid var(--semi-color-warning); +} +.semi-banner-success { + background-color: var(--semi-color-success-light-default); + color: var(--semi-color-success); +} +.semi-banner-success.semi-banner-bordered { + border: 1px solid var(--semi-color-success); +} +.semi-banner-danger { + background-color: var(--semi-color-danger-light-default); + color: var(--semi-color-danger); +} +.semi-banner-danger.semi-banner-bordered { + border: 1px solid var(--semi-color-danger); +} + +.semi-rtl .semi-banner, +.semi-portal-rtl .semi-banner { + direction: rtl; +} +.semi-rtl .semi-banner-close, +.semi-portal-rtl .semi-banner-close { + margin-left: 0; + margin-right: 12px; + height: 24px; + width: 24px; +} +.semi-rtl .semi-banner-icon, +.semi-portal-rtl .semi-banner-icon { + margin-right: 0; + margin-left: 12px; +} + +.semi-light-scrollbar::-webkit-scrollbar, .semi-light-scrollbar *::-webkit-scrollbar { + width: 8px; + height: 8px; +} +.semi-light-scrollbar::-webkit-scrollbar-track, .semi-light-scrollbar *::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0); +} +.semi-light-scrollbar::-webkit-scrollbar-corner, .semi-light-scrollbar *::-webkit-scrollbar-corner { + background-color: rgba(0, 0, 0, 0); +} +.semi-light-scrollbar::-webkit-scrollbar-thumb, .semi-light-scrollbar *::-webkit-scrollbar-thumb { + border-radius: 6px; + background: transparent; + transition: all 1s; +} +.semi-light-scrollbar:hover::-webkit-scrollbar-thumb, .semi-light-scrollbar *:hover::-webkit-scrollbar-thumb { + background: var(--semi-color-fill-2); +} +.semi-light-scrollbar::-webkit-scrollbar-thumb:hover, .semi-light-scrollbar *::-webkit-scrollbar-thumb:hover { + background: var(--semi-color-fill-1); +} + +.semi-breadcrumb { + overflow: hidden; +} +.semi-breadcrumb-wrapper { + display: flex; + flex-wrap: wrap; +} +.semi-breadcrumb-wrapper-loose { + 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-size: 14px; +} +.semi-breadcrumb-wrapper-compact { + 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; + font-size: 12px; +} +.semi-breadcrumb-item-wrap { + display: inline-flex; + align-items: center; + margin: 4px 0px; + margin-right: 4px; +} +.semi-breadcrumb-item { + display: inline-flex; + align-items: center; + column-gap: 4px; + margin-right: 4px; + color: var(--semi-color-text-2); + font-weight: 400; +} +.semi-breadcrumb-item .semi-typography { + color: inherit; +} +.semi-breadcrumb-item-title-inline { + display: inline-flex; +} +.semi-breadcrumb-item-active { + color: var(--semi-color-text-0); + font-weight: 600; +} +.semi-breadcrumb-item-active:hover, .semi-breadcrumb-item-active:active { + border: none; + margin-bottom: 0px; + color: var(--semi-color-text-0); + cursor: default; +} +.semi-breadcrumb-item-active .semi-typography { + font-weight: 600; +} +.semi-breadcrumb-item-icon { + margin-bottom: -1px; +} +.semi-breadcrumb-item-more svg { + vertical-align: middle; +} +.semi-breadcrumb-item-link { + text-decoration: inherit; + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-breadcrumb-item-link:hover { + color: var(--semi-color-link); + cursor: pointer; +} +.semi-breadcrumb-item-link:active { + color: var(--semi-color-link-hover); + cursor: pointer; +} +.semi-breadcrumb-collapse { + display: inline-flex; + flex-shrink: 0; +} +.semi-breadcrumb-separator { + display: flex; + color: var(--semi-color-text-2); +} +.semi-breadcrumb-restItem { + color: var(--semi-color-text-2); + margin-right: 8px; +} + +.semi-rtl .semi-breadcrumb-wrapper, +.semi-portal-rtl .semi-breadcrumb-wrapper { + direction: rtl; +} +.semi-rtl .semi-breadcrumb-item-wrap, +.semi-portal-rtl .semi-breadcrumb-item-wrap { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-breadcrumb-item, +.semi-portal-rtl .semi-breadcrumb-item { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-breadcrumb-restItem, +.semi-portal-rtl .semi-breadcrumb-restItem { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title, +.semi-portal-rtl .semi-breadcrumb-item-icon + .semi-breadcrumb-item-title { + margin-left: 0; + margin-right: 4px; + display: inline-block; +} + +.semi-button-split { + display: inline-block; +} +.semi-button-split .semi-button { + border-radius: 0; + margin-right: 1px; +} +.semi-button-split .semi-button-first { + border-top-left-radius: var(--semi-border-radius-small); + border-bottom-left-radius: var(--semi-border-radius-small); +} +.semi-button-split .semi-button-last { + border-top-right-radius: var(--semi-border-radius-small); + border-bottom-right-radius: var(--semi-border-radius-small); + margin-right: unset; +} +.semi-button-split:hover .semi-button-borderless:active { + background-color: var(--semi-color-fill-1); +} + +.semi-button { + --semi-button-colorful-multiple-fill-0: rgba(var(--semi-ai-general-5-3)); + --semi-button-colorful-multiple-fill-1: rgba(var(--semi-ai-general-5-2)); + --semi-button-colorful-multiple-fill-2: rgba(var(--semi-ai-general-5-1)); + --semi-button-colorful-multiple-fill-3: rgba(var(--semi-ai-general-5-0)); + --semi-button-colorful-disabled-fill: var(--semi-color-disabled-text); + --semi-button-colorful-fill-primary: var(--semi-color-ai-purple); + --semi-button-colorful-fill-secondary: var(--semi-color-text-0); +} + +.semi-button { + box-shadow: none; + height: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; + border: 0 transparent solid; + border-radius: var(--semi-border-radius-small); + padding-left: 12px; + padding-right: 12px; + padding-top: 6px; + padding-bottom: 6px; + font-size: 14px; + line-height: 20px; + font-weight: 600; + outline: none; + vertical-align: middle; + white-space: nowrap; +} +.semi-button.semi-button-primary:focus-visible, .semi-button.semi-button-secondary:focus-visible, .semi-button.semi-button-tertiary:focus-visible, .semi-button.semi-button-warning:focus-visible, .semi-button.semi-button-danger:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-button-content { + display: flex; + align-items: center; +} +.semi-button-danger { + background-color: var(--semi-color-danger); + color: rgba(var(--semi-white), 1); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-danger-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-danger-disabled.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-danger-disabled.semi-button-light { + background-color: var(--semi-color-fill-0); +} +.semi-button-danger:hover { + background-color: var(--semi-color-danger-hover); +} +.semi-button-danger:active { + background-color: var(--semi-color-danger-active); +} +.semi-button-danger.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-danger); +} +.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless { + color: var(--semi-color-danger); +} +.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible { + outline: 2px solid var(--semi-color-danger-light-active); +} +.semi-button-warning { + background-color: var(--semi-color-warning); + color: rgba(var(--semi-white), 1); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-warning-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-warning-disabled.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-warning-disabled.semi-button-light { + background-color: var(--semi-color-fill-0); +} +.semi-button-warning:hover { + background-color: var(--semi-color-warning-hover); +} +.semi-button-warning:active { + background-color: var(--semi-color-warning-active); +} +.semi-button-warning.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-warning); +} +.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless { + color: var(--semi-color-warning); +} +.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible { + outline: 2px solid var(--semi-color-warning-light-active); +} +.semi-button-tertiary { + background-color: var(--semi-color-tertiary); + color: rgba(var(--semi-white), 1); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-tertiary.semi-button-colorful.semi-button-solid { + background: var(--semi-ai-general-0); +} +.semi-button-tertiary.semi-button-colorful.semi-button-solid:hover { + background: var(--semi-ai-general-1); +} +.semi-button-tertiary.semi-button-colorful.semi-button-solid:active { + background: var(--semi-ai-general-2); +} +.semi-button-tertiary.semi-button-colorful.semi-button-solid .semi-button-content-right, .semi-button-tertiary.semi-button-colorful.semi-button-solid .semi-button-content:not(:has(> .semi-button-content-right)) { + background: var(--semi-color-ai-general); + background-clip: text; + color: transparent; +} +.semi-button-tertiary-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-tertiary-disabled.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-tertiary-disabled.semi-button-light { + background-color: var(--semi-color-fill-0); +} +.semi-button-tertiary:hover { + background-color: var(--semi-color-tertiary-hover); +} +.semi-button-tertiary:active { + background-color: var(--semi-color-tertiary-active); +} +.semi-button-tertiary.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless { + color: var(--semi-color-text-1); +} +.semi-button-primary { + background-color: var(--semi-color-primary); + color: rgba(var(--semi-white), 1); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-primary.semi-button-colorful.semi-button-solid { + background: var(--semi-color-ai-general); +} +.semi-button-primary.semi-button-colorful.semi-button-solid:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover { + background: var(--semi-color-ai-general-hover); +} +.semi-button-primary.semi-button-colorful.semi-button-solid:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active { + background: var(--semi-color-ai-general-active); +} +.semi-button-primary.semi-button-colorful.semi-button-light .semi-button-content-right, .semi-button-primary.semi-button-colorful.semi-button-light .semi-button-content:not(:has(> .semi-button-content-right)) { + background: var(--semi-color-ai-general); + background-clip: text; + color: transparent; +} +.semi-button-primary.semi-button-colorful.semi-button-outline { + color: var(--semi-color-ai-purple); + border-color: var(--semi-color-ai-purple); +} +.semi-button-primary.semi-button-colorful.semi-button-borderless .semi-button-content-right, .semi-button-primary.semi-button-colorful.semi-button-borderless .semi-button-content:not(:has(> .semi-button-content-right)) { + background: var(--semi-color-ai-general); + background-clip: text; + color: transparent; +} +.semi-button-primary-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-primary-disabled.semi-button-light { + background: var(--semi-color-fill-0); +} +.semi-button-primary-disabled.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover { + background-color: var(--semi-color-primary-hover); +} +.semi-button-primary.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active { + background-color: var(--semi-color-primary-active); +} +.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless { + color: var(--semi-color-primary); +} +.semi-button-secondary { + background-color: var(--semi-color-secondary); + outline-color: var(--semi-color-secondary); + color: rgba(var(--semi-white), 1); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-secondary-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-secondary-disabled.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-secondary-disabled.semi-button-light { + background-color: var(--semi-color-fill-0); +} +.semi-button-secondary.semi-button-outline { + background-color: transparent; + border: 1px solid var(--semi-color-border); +} +.semi-button-secondary:hover { + background-color: var(--semi-color-secondary-hover); +} +.semi-button-secondary:active { + background-color: var(--semi-color-secondary-active); +} +.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless { + color: var(--semi-color-secondary); +} +.semi-button-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-button-disabled:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover { + color: var(--semi-color-disabled-text); +} +.semi-button-disabled.semi-button-light, .semi-button-disabled.semi-button-borderless { + color: var(--semi-color-disabled-text); +} +.semi-button-disabled.semi-button-outline { + color: var(--semi-color-disabled-text); +} +.semi-button-borderless { + background-color: transparent; + border: 0 transparent solid; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-borderless:not(.semi-button-disabled):hover { + background-color: var(--semi-color-fill-0); + border: 0 transparent solid; +} +.semi-button-borderless:not(.semi-button-disabled):active { + background-color: var(--semi-color-fill-1); + border: 0 transparent solid; +} +.semi-button-outline { + background-color: transparent; +} +.semi-button-outline:not(.semi-button-disabled):hover { + background-color: var(--semi-color-fill-0); +} +.semi-button-outline:not(.semi-button-disabled):active { + background-color: var(--semi-color-fill-1); +} +.semi-button-light { + background-color: var(--semi-color-fill-0); + border: 0 transparent solid; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-button-light:not(.semi-button-disabled):hover { + background-color: var(--semi-color-fill-1); + border: 0 transparent solid; +} +.semi-button-light:not(.semi-button-disabled):active { + background-color: var(--semi-color-fill-2); + border: 0 transparent solid; +} +.semi-button-size-small { + height: 24px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 12px; + padding-right: 12px; + font-size: 14px; + line-height: 20px; + font-weight: 600; +} +.semi-button-size-large { + height: 40px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 16px; + padding-right: 16px; + font-size: 14px; + line-height: 20px; + font-weight: 600; +} +.semi-button-block { + width: 100%; +} +.semi-button-group { + display: flex; + flex-wrap: wrap; +} +.semi-button-group > .semi-button { + margin: 0; + padding-left: 0; + padding-right: 0; + border-radius: 0; +} +.semi-button-group > .semi-button .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-button-group > .semi-button-size-large .semi-button-content { + padding-left: 16px; + padding-right: 16px; +} +.semi-button-group > .semi-button-size-small .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-button-group > .semi-button.semi-button-with-icon-only { + padding-left: 0; + padding-right: 0; +} +.semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { + padding-left: 8px; + padding-right: 8px; +} +.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { + padding-left: 4px; + padding-right: 4px; +} +.semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-button-group > .semi-button:first-child { + border-top-left-radius: var(--semi-border-radius-small); + border-bottom-left-radius: var(--semi-border-radius-small); +} +.semi-button-group > .semi-button:last-child { + border-top-right-radius: var(--semi-border-radius-small); + border-bottom-right-radius: var(--semi-border-radius-small); +} +.semi-button-group > .semi-button-outline:not(:last-child) { + border-right-color: transparent; + margin-right: -1px; +} +.semi-button-group-line { + display: inline-flex; + align-items: center; + background-color: var(--semi-color-border); +} +.semi-button-group-line-primary { + background-color: var(--semi-color-primary); +} +.semi-button-group-line-secondary { + background-color: var(--semi-color-secondary); +} +.semi-button-group-line-tertiary { + background-color: var(--semi-color-tertiary); +} +.semi-button-group-line-warning { + background-color: var(--semi-color-warning); +} +.semi-button-group-line-danger { + background-color: var(--semi-color-danger); +} +.semi-button-group-line-disabled { + background-color: var(--semi-color-disabled-bg); +} +.semi-button-group-line-light { + background-color: var(--semi-color-fill-0); +} +.semi-button-group-line-borderless { + background-color: transparent; +} +.semi-button-group-line::before { + display: block; + content: ""; + width: 1px; + height: 20px; + background-color: var(--semi-color-border); +} + +.semi-rtl .semi-button, +.semi-portal-rtl .semi-button { + direction: rtl; + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-size-small, +.semi-portal-rtl .semi-button-size-small { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-size-large, +.semi-portal-rtl .semi-button-size-large { + padding-left: 16px; + padding-right: 16px; +} +.semi-rtl .semi-button-group, +.semi-portal-rtl .semi-button-group { + direction: rtl; +} +.semi-rtl .semi-button-group > .semi-button, +.semi-portal-rtl .semi-button-group > .semi-button { + padding-left: 0; + padding-right: 0; +} +.semi-rtl .semi-button-group > .semi-button .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { + padding-left: 16px; + padding-right: 16px; +} +.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { + padding-left: 0; + padding-right: 0; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { + padding-left: 8px; + padding-right: 8px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { + padding-left: 4px; + padding-right: 4px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button:first-child, +.semi-portal-rtl .semi-button-group > .semi-button:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--semi-border-radius-small); + border-bottom-right-radius: var(--semi-border-radius-small); +} +.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { + border-left: 1px var(--semi-color-border) solid; + border-right: 0; +} +.semi-rtl .semi-button-group > .semi-button:last-child, +.semi-portal-rtl .semi-button-group > .semi-button:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--semi-border-radius-small); + border-bottom-left-radius: var(--semi-border-radius-small); +} +.semi-rtl .semi-button.semi-button-with-icon-only, +.semi-portal-rtl .semi-button.semi-button-with-icon-only { + padding-left: 8px; + padding-right: 8px; +} +.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, +.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { + padding-left: 4px; + padding-right: 4px; +} +.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, +.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-content-left, +.semi-portal-rtl .semi-button-content-left { + margin-left: 8px; + margin-right: 0; +} +.semi-rtl .semi-button-content-right, +.semi-portal-rtl .semi-button-content-right { + margin-right: 8px; + margin-left: 0; +} + +.semi-calendar-day ul, +.semi-calendar-day li, +.semi-calendar-week ul, +.semi-calendar-week li, +.semi-calendar-month ul, +.semi-calendar-month li { + padding: 0; + margin: 0; + list-style: none; +} +.semi-calendar-day-sticky-top, +.semi-calendar-week-sticky-top, +.semi-calendar-month-sticky-top { + position: sticky; + position: -webkit-sticky; + top: 0; + left: 0; + right: 0; + background-color: var(--semi-color-bg-2); + z-index: 20; +} +.semi-calendar-day .semi-calendar-weekend, +.semi-calendar-week .semi-calendar-weekend, +.semi-calendar-month .semi-calendar-weekend { + background-color: var(--semi-color-fill-0); +} +.semi-calendar-day .semi-calendar-event-items, +.semi-calendar-week .semi-calendar-event-items, +.semi-calendar-month .semi-calendar-event-items { + pointer-events: none; +} +.semi-calendar-day .semi-calendar-event-items > *, +.semi-calendar-week .semi-calendar-event-items > *, +.semi-calendar-month .semi-calendar-event-items > * { + pointer-events: auto; +} +.semi-calendar-day .semi-calendar-event-items .semi-calendar-event-day, +.semi-calendar-week .semi-calendar-event-items .semi-calendar-event-day, +.semi-calendar-month .semi-calendar-event-items .semi-calendar-event-day { + position: absolute; + left: 0; + right: 0; + z-index: 5; + overflow: hidden; +} +.semi-calendar-day .semi-calendar-custom-container, +.semi-calendar-week .semi-calendar-custom-container, +.semi-calendar-month .semi-calendar-custom-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.semi-calendar-day, +.semi-calendar-week { + overflow: auto; +} +.semi-calendar-day-sticky-left, +.semi-calendar-week-sticky-left { + position: sticky; + position: -webkit-sticky; + left: 0; + background-color: var(--semi-color-bg-2); + z-index: 10; +} +.semi-calendar-day .semi-calendar-tag, +.semi-calendar-week .semi-calendar-tag { + 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; + min-width: 70px; + color: var(--semi-color-text-2); +} +.semi-calendar-day-scroll, +.semi-calendar-week-scroll { + display: flex; + flex: 1 1 auto; + position: relative; +} +.semi-calendar-day .semi-calendar-grid, +.semi-calendar-week .semi-calendar-grid { + display: flex; + align-items: flex-start; + flex: 1 1 auto; + position: relative; +} +.semi-calendar-day .semi-calendar-grid-skeleton, +.semi-calendar-week .semi-calendar-grid-skeleton { + position: relative; + box-sizing: border-box; +} +.semi-calendar-day .semi-calendar-grid-skeleton li, +.semi-calendar-week .semi-calendar-grid-skeleton li { + height: 30px; +} +.semi-calendar-day .semi-calendar-grid-skeleton li:last-child, .semi-calendar-day .semi-calendar-grid-skeleton li:nth-last-child(2), +.semi-calendar-week .semi-calendar-grid-skeleton li:last-child, +.semi-calendar-week .semi-calendar-grid-skeleton li:nth-last-child(2) { + height: 0; +} +.semi-calendar-day .semi-calendar-grid-skeleton-row-line::after, +.semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { + content: ""; + border-bottom: 1px solid var(--semi-color-border); + position: absolute; + left: 0; + right: 0; + z-index: 3; + pointer-events: none; +} +.semi-calendar-day .semi-calendar-grid-skeleton-row-line:first-child::after, +.semi-calendar-week .semi-calendar-grid-skeleton-row-line:first-child::after { + border: 0; +} +.semi-calendar-day .semi-calendar-grid-content, +.semi-calendar-week .semi-calendar-grid-content { + flex: 1 0 auto; + min-width: 130px; + height: 100%; +} +.semi-calendar-day .semi-calendar-grid-curr-circle, +.semi-calendar-week .semi-calendar-grid-curr-circle { + background: var(--semi-color-danger); + border-radius: var(--semi-border-radius-circle); + content: ""; + position: absolute; + height: 8px; + width: 8px; + margin-top: -4px; + z-index: 8; +} +.semi-calendar-day .semi-calendar-grid-curr-line, +.semi-calendar-week .semi-calendar-grid-curr-line { + position: absolute; + left: 0; + right: 0; + z-index: 8; + border-top: 1px solid var(--semi-color-danger); + pointer-events: none; +} +.semi-calendar-day .semi-calendar-all-day, +.semi-calendar-week .semi-calendar-all-day { + display: flex; + flex: 1 1 auto; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, +.semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { + text-align: right; + padding-right: 8px; +} +.semi-calendar-day .semi-calendar-all-day .semi-calendar-tag span, +.semi-calendar-week .semi-calendar-all-day .semi-calendar-tag span { + line-height: 26px; +} +.semi-calendar-day .semi-calendar-all-day-content, +.semi-calendar-week .semi-calendar-all-day-content { + display: flex; + flex: 1 0 auto; + height: 100%; + min-height: 26px; + min-width: 130px; +} +.semi-calendar-day .semi-calendar-all-day .semi-calendar-event-items, +.semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { + width: 100%; +} +.semi-calendar-day .semi-calendar-time, +.semi-calendar-week .semi-calendar-time { + height: auto; + display: flex; + flex: none; + align-items: flex-start; + padding-right: 8px; +} +.semi-calendar-day .semi-calendar-time-item, +.semi-calendar-week .semi-calendar-time-item { + position: relative; + height: 60px; + text-align: right; +} +.semi-calendar-day .semi-calendar-time-item span, +.semi-calendar-week .semi-calendar-time-item span { + 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; + display: block; + position: relative; + top: -10px; + color: var(--semi-color-text-2); +} +.semi-calendar-day .semi-calendar-time .semi-calendar-time-items, +.semi-calendar-week .semi-calendar-time .semi-calendar-time-items { + position: relative; + min-width: 70px; + background-color: var(--semi-color-bg-2); + box-sizing: border-box; + margin-left: auto; +} + +.semi-calendar-week .semi-calendar-today .semi-calendar-today-date, +.semi-calendar-month .semi-calendar-today .semi-calendar-today-date { + width: 24px; + height: 24px; + line-height: 24px; + text-align: center; + border-radius: var(--semi-border-radius-circle); + background-color: var(--semi-color-primary); + color: var(--semi-color-bg-1); +} + +.semi-calendar-day-scroll-wrapper { + height: calc(100% - 28px); +} + +.semi-calendar-week { + position: relative; + display: grid; +} +.semi-calendar-week-scroll-wrapper { + height: calc(100% - 55px); +} +.semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { + left: 0; +} +.semi-calendar-week .semi-calendar-grid-skeleton li { + border-right: 1px solid var(--semi-color-border); +} +.semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { + border-right: 0; +} +.semi-calendar-week-header, .semi-calendar-week-grid-row { + display: flex; + align-items: flex-start; + 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; + color: var(--semi-color-text-2); +} +.semi-calendar-week-header { + flex: 1 1 auto; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-calendar-week-grid { + display: flex; + flex: 1 0 auto; +} +.semi-calendar-week-grid-row { + display: flex; + flex: 1 0 auto; +} +.semi-calendar-week-grid-row li { + display: flex; + flex: 1 1 0; + border-right: 1px solid transparent; + height: auto; + box-sizing: border-box; + justify-content: center; + align-items: center; +} +.semi-calendar-week-grid-row li > span { + display: flex; + align-items: center; + justify-content: center; + line-height: 26px; +} +.semi-calendar-week-grid-row li > span:last-child { + padding: 0 4px; +} +.semi-calendar-week .semi-calendar-all-day { + font-size: 26px; +} +.semi-calendar-week .semi-calendar-all-day-content { + padding-left: 0; + position: relative; +} +.semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton { + display: flex; + flex: 1 1 auto; +} +.semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { + flex: 1 1 auto; + min-width: 130px; + box-sizing: border-box; + border-right: 1px solid var(--semi-color-border); +} +.semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { + border-right: 1px solid transparent; +} +.semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items { + position: absolute; +} +.semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday { + position: absolute; +} +.semi-calendar-week .semi-calendar-all-day .semi-calendar-event-items .semi-calendar-event-allday > * { + 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; +} +.semi-calendar-week .semi-calendar-week-tag { + text-align: right; + line-height: 26px; +} +.semi-calendar-week .semi-calendar-week-tag:first-child { + padding-right: 8px; +} + +.semi-calendar-month { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + 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; +} +.semi-calendar-month-grid-wrapper { + height: calc(100% - 27px); +} +.semi-calendar-month-week, .semi-calendar-month-skeleton { + height: 100%; +} +.semi-calendar-month-header { + display: flex; + flex: 1 1 auto; + align-items: flex-start; + color: var(--semi-color-text-2); +} +.semi-calendar-month-grid { + flex: 1 1 auto; + box-sizing: border-box; +} +.semi-calendar-month-grid li { + line-height: 26px; +} +.semi-calendar-month-grid-row, .semi-calendar-month-skeleton { + display: flex; + box-sizing: border-box; +} +.semi-calendar-month-grid-row li, .semi-calendar-month-skeleton li { + flex: 1; + white-space: nowrap; + text-align: right; + padding-right: 8px; + box-sizing: border-box; + border-bottom: 1px solid var(--semi-color-border); + color: var(--semi-color-text-2); +} +.semi-calendar-month-grid-row li span, .semi-calendar-month-skeleton li span { + display: inline-block; + text-align: right; +} +.semi-calendar-month-skeleton { + position: absolute; + overflow: hidden; + left: 0; + right: 0; +} +.semi-calendar-month-skeleton li { + position: relative; + overflow: hidden; + border-right: 1px solid var(--semi-color-border); + height: 100%; + padding-top: 4px; +} +.semi-calendar-month-skeleton li span { + 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; +} +.semi-calendar-month-skeleton li:last-child { + border-right: none; +} +.semi-calendar-month-skeleton .semi-calendar-month-same { + color: var(--semi-color-text-0); +} +.semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { + 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; + display: block; + position: absolute; + right: 8px; + padding-top: 2px; + user-select: none; +} +.semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper:hover { + cursor: pointer; +} +.semi-calendar-month .semi-calendar-event-items { + position: absolute; + top: 31px; + right: 0; + bottom: 20px; + left: 0; + overflow: hidden; +} +.semi-calendar-month-grid-col { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} +.semi-calendar-month-weekrow { + flex: 1 1 auto; + position: relative; +} +.semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month { + position: absolute; + font-size: 24px; + height: 1em; + overflow: hidden; +} +.semi-calendar-month-weekrow .semi-calendar-event-items .semi-calendar-event-month > * { + 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; +} +.semi-calendar-month-date { + position: absolute; + right: 4px; + z-index: 3; +} + +.semi-calendar-month-event-card { + width: 220px; +} +.semi-calendar-month-event-card ul, +.semi-calendar-month-event-card li { + padding: 0; + margin: 0; + list-style: none; +} +.semi-calendar-month-event-card-close { + margin-right: -4px; +} +.semi-calendar-month-event-card-content { + padding: 12px 0; +} +.semi-calendar-month-event-card-header { + display: flex; + flex-direction: row; + margin: 12px 20px; +} +.semi-calendar-month-event-card-header-info { + display: flex; + flex: 1; + flex-direction: column; + align-items: center; +} +.semi-calendar-month-event-card-header-info-weekday { + color: var(--semi-color-text-2); +} +.semi-calendar-month-event-card-header-info-date { + 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; + margin-top: 4px; +} +.semi-calendar-month-event-card-body { + padding: 0 16px; +} +.semi-calendar-month-event-card-body li { + height: 24px; +} + +.semi-rtl .semi-calendar-day, +.semi-rtl .semi-calendar-week, +.semi-rtl .semi-calendar-month, +.semi-portal-rtl .semi-calendar-day, +.semi-portal-rtl .semi-calendar-week, +.semi-portal-rtl .semi-calendar-month { + direction: rtl; +} +.semi-rtl .semi-calendar-day-sticky-left, +.semi-rtl .semi-calendar-week-sticky-left, +.semi-portal-rtl .semi-calendar-day-sticky-left, +.semi-portal-rtl .semi-calendar-week-sticky-left { + left: auto; + right: 0; +} +.semi-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, +.semi-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag, +.semi-portal-rtl .semi-calendar-day .semi-calendar-all-day .semi-calendar-tag, +.semi-portal-rtl .semi-calendar-week .semi-calendar-all-day .semi-calendar-tag { + text-align: left; + padding-right: 0; + padding-left: 8px; +} +.semi-rtl .semi-calendar-day .semi-calendar-time, +.semi-rtl .semi-calendar-week .semi-calendar-time, +.semi-portal-rtl .semi-calendar-day .semi-calendar-time, +.semi-portal-rtl .semi-calendar-week .semi-calendar-time { + padding-right: 0; + padding-left: 8px; +} +.semi-rtl .semi-calendar-day .semi-calendar-time-item, +.semi-rtl .semi-calendar-week .semi-calendar-time-item, +.semi-portal-rtl .semi-calendar-day .semi-calendar-time-item, +.semi-portal-rtl .semi-calendar-week .semi-calendar-time-item { + text-align: left; +} +.semi-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, +.semi-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items, +.semi-portal-rtl .semi-calendar-day .semi-calendar-time .semi-calendar-time-items, +.semi-portal-rtl .semi-calendar-week .semi-calendar-time .semi-calendar-time-items { + margin-left: 0; + margin-right: auto; +} +.semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after, +.semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton-row-line::after { + left: 0; + right: 0; +} +.semi-rtl .semi-calendar-week .semi-calendar-grid-skeleton li, +.semi-portal-rtl .semi-calendar-week .semi-calendar-grid-skeleton li { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li, +.semi-portal-rtl .semi-calendar-week .semi-calendar-grid:last-child .semi-calendar-grid-content li { + border-left: 0; +} +.semi-rtl .semi-calendar-week .semi-calendar-all-day-content, +.semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li, +.semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child, +.semi-portal-rtl .semi-calendar-week .semi-calendar-all-day-content .semi-calendar-all-day-skeleton li:last-child { + border-left: 1px solid transparent; +} +.semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, +.semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag, +.semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag, +.semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag { + text-align: left; +} +.semi-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, +.semi-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child, +.semi-portal-rtl .semi-calendar-week .semi-rtl .semi-calendar-week-tag:first-child, +.semi-portal-rtl .semi-calendar-week .semi-portal-rtl .semi-calendar-week-tag:first-child { + padding-right: auto; + padding-left: 8px; +} +.semi-rtl .semi-calendar-month-grid-row li, .semi-rtl .semi-calendar-month-skeleton li, +.semi-portal-rtl .semi-calendar-month-grid-row li, +.semi-portal-rtl .semi-calendar-month-skeleton li { + text-align: left; + padding-right: auto; + padding-left: 8px; +} +.semi-rtl .semi-calendar-month-grid-row li span, .semi-rtl .semi-calendar-month-skeleton li span, +.semi-portal-rtl .semi-calendar-month-grid-row li span, +.semi-portal-rtl .semi-calendar-month-skeleton li span { + text-align: left; +} +.semi-rtl .semi-calendar-month-skeleton li, +.semi-portal-rtl .semi-calendar-month-skeleton li { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-calendar-month-skeleton li:last-child, +.semi-portal-rtl .semi-calendar-month-skeleton li:last-child { + border-left: none; +} +.semi-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper, +.semi-portal-rtl .semi-calendar-month-skeleton .semi-calendar-month-event-card-wrapper { + right: auto; + left: 8px; +} +.semi-rtl .semi-calendar-month-date, +.semi-portal-rtl .semi-calendar-month-date { + right: auto; + left: 4px; +} +.semi-rtl .semi-calendar-month-event-card-close, +.semi-portal-rtl .semi-calendar-month-event-card-close { + margin-right: 0; + margin-left: -4px; +} + +.semi-card { + box-sizing: border-box; + margin: 0; + padding: 0; + border-radius: var(--semi-border-radius-medium); + overflow: hidden; + background-color: var(--semi-color-bg-0); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; +} +.semi-card-shadows { + cursor: pointer; + transition: box-shadow 300ms; +} +.semi-card-shadows-hover:hover { + box-shadow: var(--semi-shadow-elevated); + z-index: 1; +} +.semi-card-shadows-always { + box-shadow: var(--semi-shadow-elevated); +} +.semi-card-bordered { + border: 1px solid var(--semi-color-border); +} +.semi-card-header { + padding: 20px; +} +.semi-card-header-bordered { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-card-header-wrapper { + display: flex; + align-items: flex-start; + flex-direction: row-reverse; + justify-content: space-between; +} +.semi-card-header-wrapper-spacing { + margin-right: 20px; +} +.semi-card-header-wrapper-title { + width: 100%; + overflow: hidden; +} +.semi-card-header-wrapper-extra { + flex-shrink: 0; + font-size: 16px; + font-style: normal; + font-weight: 700; + letter-spacing: 0em; + color: var(--semi-color-text-0); +} +.semi-card-cover > * { + display: block; + width: 100%; +} +.semi-card-body { + padding: 20px; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + color: var(--semi-color-text-1); +} +.semi-card-body-actions { + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid var(--semi-color-border); +} +.semi-card-footer { + padding: 20px; +} +.semi-card-footer-bordered { + border-top: 1px solid var(--semi-color-border); +} +.semi-card-meta { + display: flex; + align-items: center; + justify-content: flex-start; +} +.semi-card-meta-avatar { + margin-right: 12px; +} +.semi-card-meta-wrapper-title { + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 22px; + letter-spacing: 0em; + color: var(--semi-color-text-0); +} +.semi-card-meta-wrapper-description { + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; + color: var(--semi-color-text-2); +} + +.semi-card-group-grid .semi-card { + border-radius: 0; +} +.semi-card-group-grid .semi-card { + margin-left: -1px; + margin-top: -1px; +} + +.semi-rtl .semi-card, +.semi-portal-rtl .semi-card { + direction: rtl; +} +.semi-rtl .semi-card-header-wrapper, +.semi-portal-rtl .semi-card-header-wrapper { + align-items: flex-end; +} +.semi-rtl .semi-card-header-wrapper-title, +.semi-portal-rtl .semi-card-header-wrapper-title { + display: flex; + align-items: flex-end; +} +.semi-rtl .semi-card-header-wrapper-spacing, +.semi-portal-rtl .semi-card-header-wrapper-spacing { + margin-left: 20px; + margin-right: 0; +} +.semi-rtl .semi-card-meta-avatar, +.semi-portal-rtl .semi-card-meta-avatar { + margin-left: 12px; + margin-right: 0; +} +.semi-rtl .semi-card-group, +.semi-portal-rtl .semi-card-group { + direction: rtl; +} +.semi-rtl .semi-card-group-grid .semi-card, +.semi-portal-rtl .semi-card-group-grid .semi-card { + margin-left: 0; + margin-top: 0; + margin-right: -1px; + margin-bottom: -1px; +} + +.semi-carousel { + position: relative; + overflow: hidden; +} +.semi-carousel-content { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; +} +.semi-carousel-content-item { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; +} +.semi-carousel-content-item-current { + z-index: 1; +} +.semi-carousel-content-fade > * { + opacity: 0; +} +.semi-carousel-content-fade .semi-carousel-content-item-current { + opacity: 1; +} +.semi-carousel-content-slide > *:not(.semi-carousel-content-item-current) { + visibility: hidden; +} +.semi-carousel-content-slide .semi-carousel-content-item-slide-out { + display: block; + animation: semi-carousel-content-item-keyframe-slide-out; + animation-fill-mode: forwards; +} +.semi-carousel-content-slide .semi-carousel-content-item-slide-in { + display: block; + animation: semi-carousel-content-item-keyframe-slide-in; + animation-fill-mode: forwards; +} +.semi-carousel-content-reverse .semi-carousel-content-item-slide-out { + animation: semi-carousel-content-item-keyframe-slide-out-reverse; + animation-fill-mode: forwards; +} +.semi-carousel-content-reverse .semi-carousel-content-item-slide-in { + animation: semi-carousel-content-item-keyframe-slide-in-reverse; + animation-fill-mode: forwards; +} +.semi-carousel-indicator { + display: flex; + align-items: flex-end; + z-index: 2; +} +.semi-carousel-indicator-left { + position: absolute; + left: 32px; + bottom: 32px; +} +.semi-carousel-indicator-center { + position: absolute; + left: 50%; + bottom: 32px; + transform: translate(-50%); +} +.semi-carousel-indicator-right { + position: absolute; + right: 32px; + bottom: 32px; +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item { + border-radius: 50%; + cursor: pointer; +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) { + margin-right: 8px; +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-small { + width: 8px; + height: 8px; +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-medium { + width: 12px; + height: 12px; +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary { + background-color: rgba(var(--semi-blue-6), 0.4); + transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:hover { + background-color: rgba(var(--semi-blue-6), 0.7); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-primary:active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-light { + background-color: rgba(var(--semi-white), 0.4); + transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-light:hover { + background-color: rgba(var(--semi-white), 0.7); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-light:active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark { + background-color: rgba(var(--semi-black), 0.5); + transition: background-color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { + background-color: rgba(var(--semi-black), 1); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:hover { + background-color: rgba(var(--semi-black), 0.7); +} +.semi-carousel-indicator-dot .semi-carousel-indicator-item-dark:active { + background: rgba(var(--semi-black), 1); +} +.semi-carousel-indicator-line { + width: 240px; +} +.semi-carousel-indicator-line .semi-carousel-indicator-item { + flex: 1; + cursor: pointer; +} +.semi-carousel-indicator-line .semi-carousel-indicator-item:not(:last-child) { + margin-right: 4px; +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-small { + height: 4px; +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-medium { + height: 6px; +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-primary { + background-color: rgba(var(--semi-blue-6), 0.4); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-primary:hover { + background-color: rgba(var(--semi-blue-6), 0.7); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-primary:active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-light { + background-color: rgba(var(--semi-white), 0.4); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-light:hover { + background-color: rgba(var(--semi-white), 0.7); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-light:active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-dark { + background-color: rgba(var(--semi-black), 0.5); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { + background: rgba(var(--semi-black), 1); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-dark:hover { + background-color: rgba(var(--semi-black), 0.7); +} +.semi-carousel-indicator-line .semi-carousel-indicator-item-dark:active { + background: rgba(var(--semi-black), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item { + cursor: pointer; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) { + margin-right: 4px; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-small { + width: 4px; + height: 12px; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-small.semi-carousel-indicator-item-active { + height: 20px; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium { + width: 6px; + height: 20px; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-medium.semi-carousel-indicator-item-active { + height: 28px; +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary { + background-color: rgba(var(--semi-blue-6), 0.4); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary.semi-carousel-indicator-item-active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:hover { + background-color: rgba(var(--semi-blue-6), 0.7); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-primary:active { + background: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light { + background-color: rgba(var(--semi-white), 0.4); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light.semi-carousel-indicator-item-active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:hover { + background-color: rgba(var(--semi-white), 0.7); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-light:active { + background: rgba(var(--semi-white), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark { + background-color: rgba(var(--semi-black), 0.5); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark.semi-carousel-indicator-item-active { + background: rgba(var(--semi-black), 1); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:hover { + background-color: rgba(var(--semi-black), 0.7); +} +.semi-carousel-indicator-columnar .semi-carousel-indicator-item-dark:active { + background: rgba(var(--semi-black), 1); +} +.semi-carousel-arrow { + display: flex; + font-size: 32px; + cursor: pointer; +} +.semi-carousel-arrow-prev { + position: absolute; + top: 50%; + left: 20px; + transform: translateY(-50%); + z-index: 2; +} +.semi-carousel-arrow-next { + position: absolute; + top: 50%; + right: 20px; + transform: translateY(-50%); + z-index: 2; +} +.semi-carousel-arrow-light { + color: rgba(var(--semi-white), 0.4); + transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-arrow-light:hover { + color: rgba(var(--semi-white), 1); +} +.semi-carousel-arrow-primary { + color: rgba(var(--semi-blue-6), 0.4); + transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-arrow-primary:hover { + color: rgba(var(--semi-blue-6), 1); +} +.semi-carousel-arrow-dark { + color: rgba(var(--semi-black), 0.5); + transition: color var(--semi-transition_delay-none) var(--semi-transition_function-easeOut) var(--semi-transition_delay-none); +} +.semi-carousel-arrow-dark:hover { + color: rgba(var(--semi-black), 1); +} +.semi-carousel-arrow-hover div { + z-index: 2; + opacity: 0; +} +.semi-carousel:hover .semi-carousel-arrow-hover div { + opacity: 1; +} + +@keyframes semi-carousel-content-item-keyframe-slide-in { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} +@keyframes semi-carousel-content-item-keyframe-slide-out { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} +@keyframes semi-carousel-content-item-keyframe-slide-in-reverse { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} +@keyframes semi-carousel-content-item-keyframe-slide-out-reverse { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} +.semi-rtl .semi-carousel, +.semi-portal-rtl .semi-carousel { + direction: rtl; +} +.semi-rtl .semi-carousel-indicator, +.semi-portal-rtl .semi-carousel-indicator { + display: flex; +} +.semi-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child), +.semi-portal-rtl .semi-carousel-indicator-dot .semi-carousel-indicator-item:not(:last-child) { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child), +.semi-portal-rtl .semi-carousel-indicator-columnar .semi-carousel-indicator-item:not(:last-child) { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-carousel-arrow, +.semi-portal-rtl .semi-carousel-arrow { + flex-direction: row-reverse; +} +.semi-rtl .semi-carousel-arrow-prev, +.semi-portal-rtl .semi-carousel-arrow-prev { + left: auto; + right: 20px; + transform: scaleX(-1) translateY(-50%); + z-index: 2; +} +.semi-rtl .semi-carousel-arrow-next, +.semi-portal-rtl .semi-carousel-arrow-next { + left: 20px; + transform: scaleX(-1) translateY(-50%); + right: auto; + z-index: 2; +} + +.semi-cascader { + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); + border: 1px solid transparent; + min-width: 80px; + min-height: 32px; + height: auto; + line-height: 32px; + font-weight: 400; + background-color: var(--semi-color-fill-0); + display: inline-flex; + align-items: center; + vertical-align: middle; + position: relative; + cursor: pointer; +} +.semi-cascader:hover { + background-color: var(--semi-color-fill-1); + border: 1px transparent solid; +} +.semi-cascader:focus:not(.semi-cascader-disabled) { + border: 1px solid var(--semi-color-focus-border); + background-color: var(--semi-color-fill-0); + outline: 0; +} +.semi-cascader:active { + background-color: var(--semi-color-fill-2); +} +.semi-cascader-small { + min-height: 24px; + line-height: 24px; +} +.semi-cascader-small .semi-cascader-selection { + padding-left: 12px; + padding-right: 12px; +} +.semi-cascader-small .semi-cascader-selection-multiple { + padding-left: 4px; + padding-right: 4px; +} +.semi-cascader-large { + min-height: 40px; + line-height: 40px; +} +.semi-cascader-large .semi-cascader-selection { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.semi-cascader-large .semi-cascader-selection { + padding-left: 12px; + padding-right: 12px; +} +.semi-cascader-large .semi-cascader-selection-multiple { + padding-left: 4px; + padding-right: 4px; +} +.semi-cascader-focus { + border: 1px solid var(--semi-color-focus-border); + outline: 0; +} +.semi-cascader-focus:hover { + background-color: var(--semi-color-fill-0); + border: 1px solid var(--semi-color-focus-border); +} +.semi-cascader-focus:active { + background-color: var(--semi-color-fill-2); +} +.semi-cascader-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-cascader-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-cascader-warning.semi-cascader-focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-cascader-warning:active { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning-light-active); +} +.semi-cascader-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-cascader-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-cascader-error.semi-cascader-focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-cascader-error:active { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger-light-active); +} +.semi-cascader-selection { + 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; + height: 100%; + display: inline-flex; + align-items: center; + flex-wrap: wrap; + flex-grow: 1; + overflow: hidden; + padding-left: 12px; + padding-right: 12px; + cursor: pointer; + color: var(--semi-color-text-0); +} +.semi-cascader-selection-multiple { + padding-left: 4px; + padding-right: 4px; +} +.semi-cascader-selection-placeholder { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--semi-color-text-2); +} +.semi-cascader-selection-tag { + margin: 1px 2px 1px 0; +} +.semi-cascader-selection-tag:first-child { + margin-left: 0; +} +.semi-cascader-selection-tag-disabled.semi-tag { + color: var(--semi-color-disabled-text); + background-color: transparent; + cursor: not-allowed; +} +.semi-cascader-selection-tag-disabled.semi-tag .semi-tag-close { + color: var(--semi-color-disabled-text); + cursor: not-allowed; + pointer-events: none; +} +.semi-cascader-selection-n { + cursor: pointer; + font-size: 12px; + margin-right: 4px; + color: var(--semi-color-text-0); + padding-left: 8px; + padding-right: 8px; +} +.semi-cascader-selection-n-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-cascader-selection span { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.semi-cascader-selection .semi-cascader-tagInput-wrapper { + border: hidden; + background: transparent; + margin-left: -4px; +} +.semi-cascader-selection .semi-tagInput { + min-height: 30px; +} +.semi-cascader-selection .semi-tagInput-small { + min-height: 22px; +} +.semi-cascader-selection .semi-tagInput-large { + min-height: 38px; +} +.semi-cascader-selection .semi-tagInput .semi-input-wrapper { + margin-left: 4px; +} +.semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { + padding-left: 0; +} +.semi-cascader-selection .semi-tagInput .semi-input-wrapper-default { + margin-top: 1px; + margin-bottom: 1px; +} +.semi-cascader-selection .semi-tagInput .semi-input-wrapper-large { + margin-top: 1px; + margin-bottom: 1px; +} +.semi-cascader-selection-text-inactive { + color: var(--semi-color-text-2); +} +.semi-cascader-selection-text-hide { + display: none; +} +.semi-cascader-arrow, .semi-cascader-clearbtn { + display: inline-flex; + align-items: center; + height: 100%; + justify-content: center; + width: 32px; + color: var(--semi-color-text-2); +} +.semi-cascader-clearbtn:hover { + color: var(--semi-color-primary-hover); +} +.semi-cascader-clearbtn:active { + color: var(--semi-color-primary-active); +} +.semi-cascader-prefix, .semi-cascader-suffix { + display: inline; + display: flex; + justify-content: center; + align-items: center; +} +.semi-cascader-prefix-text, .semi-cascader-suffix-text { + margin: 0 12px; + font-weight: 600; + 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; + color: var(--semi-color-text-2); +} +.semi-cascader-prefix-icon, .semi-cascader-suffix-icon { + color: var(--semi-color-text-2); + margin: 0 8px; +} +.semi-cascader-inset-label { + display: inline; + margin: 0 12px; + font-weight: 600; + 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; + color: var(--semi-color-text-2); + flex-shrink: 0; + white-space: nowrap; +} +.semi-cascader.semi-cascader-with-prefix { + display: inline-flex; + align-items: center; +} +.semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { + padding-left: 0; +} +.semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { + padding-right: 0; +} +.semi-cascader-disabled { + cursor: not-allowed; + user-select: none; + background-color: var(--semi-color-disabled-fill); +} +.semi-cascader-disabled .semi-cascader-selection { + cursor: not-allowed; +} +.semi-cascader-disabled:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-cascader-disabled .semi-cascader-selection, +.semi-cascader-disabled .semi-cascader-selection-placeholder, +.semi-cascader-disabled .semi-cascader-prefix, +.semi-cascader-disabled .semi-cascader-suffix { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-cascader-disabled .semi-cascader-arrow { + color: var(--semi-color-disabled-text); +} + +.semi-cascader-popover .semi-cascader-search-wrapper { + padding: 8px 12px; + border-bottom: 1px solid var(--semi-color-fill-0); +} +.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty { + 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; + border-radius: var(--semi-border-radius-medium); + color: var(--semi-color-disabled-text); + margin: 0; + padding: 8px 12px; + user-select: none; + text-align: center; + cursor: not-allowed; +} +.semi-cascader-popover .semi-cascader-option-lists .semi-cascader-option-empty:hover { + background-color: transparent; +} + +.semi-cascader-single.semi-cascader-filterable { + display: inline-flex; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper { + width: 100%; + height: 30px; + display: flex; + align-items: center; + position: relative; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-small { + height: 22px; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper-large { + height: 38px; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper { + position: absolute; + top: 0; + left: 0; + border: none; + background-color: transparent; + height: 100%; + width: 100%; + border: none; + background-color: transparent; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input-wrapper-focus { + border: none; +} +.semi-cascader-single.semi-cascader-filterable .semi-cascader-selection .semi-cascader-search-wrapper .semi-input { + padding-left: 0; + padding-right: 0; +} + +.semi-cascader-option-lists { + display: flex; + overflow: hidden; + padding: 0; + margin: 0; + height: 180px; +} +.semi-cascader-option-lists-empty { + height: auto; + justify-content: center; + cursor: not-allowed; +} +.semi-cascader-option-lists ul, +.semi-cascader-option-lists li { + list-style-type: none; + padding: 0; + margin: 0; +} +.semi-cascader-option-lists ul > li { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 12px; + padding-right: 16px; +} +.semi-cascader-option-lists .semi-cascader-option-list { + box-sizing: border-box; + display: inline-block; + min-width: 150px; + height: 100%; + margin: 0; + padding: 4px 0px; + overflow: auto; + list-style: none; + border-left: 1px solid var(--semi-color-fill-0); +} +.semi-cascader-option-lists .semi-cascader-option-list:first-child { + border-left: none; +} +.semi-cascader-option-lists .semi-cascader-option { + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + 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; + min-width: min-content; + word-break: break-all; + color: var(--semi-color-text-0); + position: relative; +} +.semi-cascader-option-lists .semi-cascader-option:hover { + background-color: var(--semi-color-fill-0); +} +.semi-cascader-option-lists .semi-cascader-option:active { + background-color: var(--semi-color-fill-1); +} +.semi-cascader-option-lists .semi-cascader-option-icon { + display: inline-flex; + flex-shrink: 0; + width: 16px; + color: var(--semi-color-text-2); +} +.semi-cascader-option-lists .semi-cascader-option-icon-active, .semi-cascader-option-lists .semi-cascader-option-icon-empty { + margin-right: 8px; +} +.semi-cascader-option-lists .semi-cascader-option-icon-left { + margin-left: 8px; +} +.semi-cascader-option-lists .semi-cascader-option-spin-icon { + width: 16px; + height: 16px; + line-height: 0; +} +.semi-cascader-option-lists .semi-cascader-option-spin-icon svg { + width: 16px; + height: 16px; +} +.semi-cascader-option-lists .semi-cascader-option-label { + display: flex; + align-items: center; + white-space: pre; +} +.semi-cascader-option-lists .semi-cascader-option-label-checkbox { + margin-right: 8px; +} +.semi-cascader-option-lists .semi-cascader-option-hidden { + display: none; +} +.semi-cascader-option-lists .semi-cascader-option-active { + background-color: var(--semi-color-primary-light-default); +} +.semi-cascader-option-lists .semi-cascader-option-active:hover { + background-color: var(--semi-color-primary-light-default); +} +.semi-cascader-option-lists .semi-cascader-option-select, .semi-cascader-option-lists .semi-cascader-option-label-highlight { + font-weight: 600; + color: var(--semi-color-primary); +} +.semi-cascader-option-lists .semi-cascader-option-disabled { + cursor: not-allowed; +} +.semi-cascader-option-lists .semi-cascader-option-disabled:hover { + background-color: transparent; +} +.semi-cascader-option-lists .semi-cascader-option-disabled:active { + background-color: transparent; +} +.semi-cascader-option-lists .semi-cascader-option-disabled .semi-cascader-option-label { + color: var(--semi-color-disabled-text); +} +.semi-cascader-option-lists .semi-cascader-option-flatten { + padding-right: 64px; +} + +.semi-cascader-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow { + opacity: 0; +} +.semi-cascader-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-cascader-borderless.semi-cascader-error:not(:focus-within) { + border-color: var(--semi-color-danger); +} +.semi-cascader-borderless.semi-cascader-warning:not(:focus-within) { + border-color: var(--semi-color-warning); +} +.semi-cascader-borderless.semi-cascader-error:focus-within { + border-color: var(--semi-color-danger); +} +.semi-cascader-borderless.semi-cascader-warning:focus-within { + border-color: var(--semi-color-warning); +} + +.semi-rtl .semi-cascader, +.semi-portal-rtl .semi-cascader { + direction: rtl; +} +.semi-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection, +.semi-portal-rtl .semi-cascader.semi-cascader-with-prefix .semi-cascader-selection { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection, +.semi-portal-rtl .semi-cascader.semi-cascader-with-suffix .semi-cascader-selection { + padding-right: auto; + padding-left: 0; +} +.semi-rtl .semi-cascader-selection-multiple, +.semi-portal-rtl .semi-cascader-selection-multiple { + padding-right: 4px; + padding-left: 4px; +} +.semi-rtl .semi-cascader-selection-tag:first-child, +.semi-portal-rtl .semi-cascader-selection-tag:first-child { + margin-right: 0; +} +.semi-rtl .semi-cascader-selection-n, +.semi-portal-rtl .semi-cascader-selection-n { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper, +.semi-portal-rtl .semi-cascader-selection .semi-cascader-tagInput-wrapper { + margin-left: 0; + margin-right: -4px; +} +.semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper, +.semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper { + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input, +.semi-portal-rtl .semi-cascader-selection .semi-tagInput .semi-input-wrapper .semi-input { + padding-right: 0; +} + +.semi-cascader-option-label-checkbox { + margin-right: 0; + margin-left: 8px; +} + +.semi-cascader-option-lists-rtl { + direction: rtl; +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl ul > li { + padding-right: 12px; + padding-left: auto; +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list { + border-left: 0; + border-right: 1px solid var(--semi-color-fill-0); +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-list:first-child { + border-right: none; +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-active, .semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-icon-empty { + margin-right: 0; + margin-left: 8px; +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option-flatten { + padding-right: 0; + padding-left: 64px; +} +.semi-cascader-option-lists.semi-cascader-option-lists-rtl .semi-cascader-option .semi-icon-chevron_right { + margin-left: 0; + margin-right: 8px; + transform: scaleX(-1); +} + +.semi-chat { + padding-top: 12px; + padding-bottom: 12px; + display: flex; + flex-direction: column; + height: 100%; + max-width: 800px; + position: relative; + overflow: hidden; +} +.semi-chat-inner { + display: flex; + flex-direction: column; + height: 100%; +} +.semi-chat-dropArea { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(var(--semi-grey-2), 0.9); + z-index: 10; + border: 5px dotted var(--semi-color-border); + display: flex; + align-items: center; + justify-content: center; + border-radius: 16px; +} +.semi-chat-dropArea-text { + font-size: 48px; +} +.semi-chat-content { + overflow: hidden; + flex: 1 1; + position: relative; +} +.semi-chat-toast { + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); +} +.semi-chat-container { + padding-left: 16px; + padding-right: 16px; + height: 100%; + overflow: scroll; +} +.semi-chat-container-scroll-hidden::-webkit-scrollbar { + display: none; +} +.semi-chat-action { + position: relative; + z-index: 1; +} +.semi-chat-action-content.semi-button { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + display: flex; + justify-content: center; + align-items: center; + background: var(--semi-color-bg-0); + border: 1px solid var(--semi-color-border); +} +.semi-chat-action-content.semi-button-light:not(.semi-button-disabled):hover { + background: var(--semi-color-tertiary-light-hover); + border: 1px solid var(--semi-color-border); +} +.semi-chat-action-backBottom.semi-button { + width: 42px; + height: 42px; + border-radius: 50%; +} +.semi-chat-action-stop.semi-button { + user-select: none; + height: 42px; + border-radius: 21px; +} +.semi-chat-divider { + color: var(--semi-color-text-2); + font-size: 12px; + margin-top: 12px; + margin-bottom: 12px; + font-weight: 400; +} +.semi-chat-chatBox { + display: flex; + flex-direction: row; + margin-top: 8px; + margin-bottom: 8px; + column-gap: 12px; +} +.semi-chat-chatBox:hover .semi-chat-chatBox-action:not(.semi-chat-chatBox-action-hidden) { + visibility: visible; +} +.semi-chat-chatBox-right { + flex-direction: row-reverse; +} +.semi-chat-chatBox-right .semi-chat-chatBox-wrap { + align-items: flex-end; +} +.semi-chat-chatBox-avatar { + flex-shrink: 0; + width: 24px; + height: 24px; +} +.semi-chat-chatBox-avatar-hidden { + visibility: hidden; +} +.semi-chat-chatBox-title { + line-height: 20px; + font-size: 16px; + color: var(--semi-color-text-0); + font-weight: 400; + text-overflow: ellipsis; +} +.semi-chat-chatBox-action { + visibility: hidden; + display: flex; + align-items: center; + position: relative; + column-gap: 10px; + margin-left: 10px; + margin-right: 10px; +} +.semi-chat-chatBox-action-btn.semi-button { + height: fit-content; + width: fit-content; +} +.semi-chat-chatBox-action-btn.semi-button.semi-button-with-icon-only { + padding: 0; +} +.semi-chat-chatBox-action-icon-flip { + transform: scaleY(-1); +} +.semi-chat-chatBox-action-show { + visibility: visible; +} +.semi-chat-chatBox-action-delete-wrap { + display: inline-flex; +} +.semi-chat-chatBox-action.semi-chat-chatBox-action-hidden, .semi-chat-chatBox-action:hover.semi-chat-chatBox-action-hidden { + visibility: hidden; +} +.semi-chat-chatBox-action .semi-button-borderless:not(.semi-button-disabled):hover { + background-color: transparent; +} +.semi-chat-chatBox-action .semi-button-tertiary.semi-button-borderless { + color: var(--semi-color-text-2); +} +.semi-chat-chatBox-action .semi-button-tertiary.semi-button-borderless:hover { + color: var(--semi-color-text-0); +} +.semi-chat-chatBox-wrap { + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + row-gap: 8px; + max-width: calc(100% - 12px - 24px); +} +.semi-chat-chatBox-content-bubble, .semi-chat-chatBox-content-userBubble { + padding: 8px 12px; + border-radius: var(--semi-border-radius-large); + background-color: var(--semi-color-fill-0); + max-width: 100%; + box-sizing: border-box; +} +.semi-chat-chatBox-content code { + white-space: pre-wrap; +} +.semi-chat-chatBox-content .semi-typography { + color: var(--semi-color-text-0); +} +.semi-chat-chatBox-content .semi-chat-attachment-file { + background: var(--semi-color-fill-2); +} +.semi-chat-chatBox-content .semi-chat-attachment-file, .semi-chat-chatBox-content .semi-chat-attachment-img { + margin-top: 4px; + margin-bottom: 4px; + margin-right: 4px; +} +.semi-chat-chatBox-content-user { + background: var(--semi-color-primary); + color: var(--semi-color-white); +} +.semi-chat-chatBox-content-user .semi-chat-attachment-file { + background: var(--semi-color-bg-0); +} +.semi-chat-chatBox-content-user .semi-typography, .semi-chat-chatBox-content-user .semi-typography code { + color: var(--semi-color-white); +} +.semi-chat-chatBox-content-user .semi-markdownRender ul, .semi-chat-chatBox-content-user .semi-markdownRender li { + color: var(--semi-color-white); +} +.semi-chat-chatBox-content-user .semi-typography a, .semi-chat-chatBox-content-user .semi-typography a:visited, .semi-chat-chatBox-content-user .semi-typography a:hover { + color: var(--semi-color-white); +} +.semi-chat-chatBox-content-error { + background: var(--semi-color-danger-hover); +} +.semi-chat-chatBox-content-error .semi-typography { + color: var(--semi-color-white); +} +.semi-chat-chatBox-content-loading { + display: flex; + align-items: baseline; +} +.semi-chat-chatBox-content-loading-item { + border-radius: 50%; + height: 8px; + width: 8px; + background-color: var(--semi-color-text-0); + margin: 6px 18px; + overflow: visible; + position: relative; + animation: semi-chat-loading-flashing 0.8s infinite alternate; + animation-delay: -0.2s; + animation-timing-function: ease; +} +.semi-chat-chatBox-content-loading-item::before { + content: ""; + border-radius: 50%; + height: 8px; + width: 8px; + background-color: var(--semi-color-text-0); + position: absolute; + top: 0; + left: -15px; + animation: semi-chat-loading-flashing 0.8s infinite alternate; + animation-timing-function: ease; + animation-delay: -0.4s; +} +.semi-chat-chatBox-content-loading-item::after { + content: ""; + border-radius: 50%; + height: 8px; + width: 8px; + background-color: var(--semi-color-text-0); + position: absolute; + top: 0; + left: 15px; + animation: semi-chat-loading-flashing 0.8s infinite alternate; + animation-delay: 0s; + animation-timing-function: ease; +} +.semi-chat-chatBox-content pre { + background-color: transparent; +} +.semi-chat-chatBox-content-code { + border-radius: var(--semi-border-radius-large); + overflow: hidden; +} +.semi-chat-chatBox-content-code .semi-codeHighlight pre { + word-break: break-all; + white-space: pre-wrap; +} +.semi-chat-chatBox-content-code-topSlot { + display: flex; + justify-content: space-between; + background-color: rgba(var(--semi-grey-4), 1); + align-items: center; + padding: 5px 8px; + color: rgba(var(--semi-white), 1); + font-size: 12px; +} +.semi-chat-chatBox-content-code-topSlot-copy { + min-width: 150px; + display: flex; + justify-content: flex-end; +} +.semi-chat-chatBox-content-code-topSlot-copy-wrapper { + display: flex; + align-items: center; + column-gap: 5px; + cursor: pointer; + background: transparent; + border: none; + color: rgba(var(--semi-white), 1); + line-height: 16px; + padding: 5px; + border-radius: var(--semi-border-radius-large); +} +.semi-chat-chatBox-content-code-topSlot-toCopy:hover { + background: rgba(var(--semi-grey-5), 1); +} +.semi-chat-chatBox-content-code .semi-codeHighlight-defaultTheme pre[class*=language-] { + margin: 0px; + background: var(--semi-color-bg-0); +} +.semi-chat-inputBox { + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; +} +.semi-chat-inputBox-clearButton.semi-button { + border-radius: 50%; + width: 48px; + height: 48px; + margin-top: 4px; + margin-bottom: 4px; +} +.semi-chat-inputBox-clearButton.semi-button .semi-icon { + font-size: 30px; +} +.semi-chat-inputBox-clearButton.semi-button.semi-button-primary.semi-button-borderless { + color: var(--semi-color-text-2); +} +.semi-chat-inputBox-upload .semi-upload-file-list { + display: none; +} +.semi-chat-inputBox-uploadButton.semi-button { + width: 32px; + height: 32px; +} +.semi-chat-inputBox-uploadButton.semi-button.semi-button-primary.semi-button-borderless { + color: var(--semi-color-text-0); +} +.semi-chat-inputBox-sendButton.semi-button { + width: 32px; + height: 32px; +} +.semi-chat-inputBox-sendButton.semi-button-icon { + transform: rotate(45deg); +} +.semi-chat-inputBox-sendButton.semi-button.semi-button-disabled.semi-button-borderless { + color: var(--semi-color-primary-disabled); +} +.semi-chat-inputBox-inner { + display: flex; + flex-direction: row; + align-items: flex-end; + column-gap: 4px; +} +.semi-chat-inputBox-container { + display: flex; + flex-direction: row; + flex-grow: 1; + border-radius: 16px; + padding: 11px; + border: 1px solid var(--semi-color-border); + align-items: flex-end; +} +.semi-chat-inputBox-inputArea { + flex-grow: 1; + display: flex; + flex-direction: column; +} +.semi-chat-inputBox-textarea { + flex-grow: 1; +} +.semi-chat-inputBox-textarea.semi-input-textarea-wrapper, .semi-chat-inputBox-textarea.semi-input-textarea-wrapper:hover, .semi-chat-inputBox-textarea.semi-input-textarea-wrapper:active { + border: none; + background-color: transparent; +} +.semi-chat-attachment { + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 10px; + row-gap: 5px; + margin-left: 12px; + margin-right: 12px; +} +.semi-chat-attachment-item { + position: relative; +} +.semi-chat-attachment-item:hover .semi-chat-inputBox-attachment-clear { + visibility: visible; +} +.semi-chat-attachment-img { + border-radius: var(--semi-border-radius-medium); + vertical-align: top; +} +.semi-chat-attachment-img img { + object-fit: cover; +} +.semi-chat-attachment a { + text-decoration: none; + color: inherit; +} +.semi-chat-attachment-clear { + position: absolute; + top: -8px; + right: -8px; + color: var(--semi-color-text-2); +} +.semi-chat-attachment-process.semi-progress-circle, .semi-chat-attachment-fail { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.semi-chat-attachment-fail { + color: var(--semi-color-danger); +} +.semi-chat-attachment-file { + display: inline-flex; + flex-direction: row; + align-items: center; + height: 50px; + column-gap: 5px; + padding: 5px; + border-radius: var(--semi-border-radius-medium); + background: var(--semi-color-fill-0); + text-decoration: none; +} +.semi-chat-attachment-file-icon { + color: var(--semi-color-text-2); +} +.semi-chat-attachment-file-info { + display: flex; + flex-direction: column; +} +.semi-chat-attachment-file-title { + font-size: 16px; + color: var(--semi-color-text-0); + max-width: 90px; + text-overflow: ellipsis; + overflow: hidden; +} +.semi-chat-attachment-file-metadata { + font-size: 14px; + color: var(--semi-color-text-2); +} +.semi-chat-attachment-file-type { + text-transform: uppercase; +} +.semi-chat .semi-typography a.semi-chat-attachment-file { + display: flex; +} +.semi-chat .semi-typography a.semi-chat-attachment-file .semi-chat-attachment-file-title { + color: var(--semi-color-text-0); +} +.semi-chat-hints { + display: flex; + flex-direction: column; + row-gap: 10px; + margin-top: 12px; + margin-bottom: 12px; + margin-left: 34px; +} +.semi-chat-hint-item { + cursor: pointer; + display: flex; + flex-direction: row; + column-gap: 20px; + width: fit-content; + background: transparent; + align-items: center; + border: 1px solid var(--semi-color-border); + padding: 8px 12px; + border-radius: var(--semi-border-radius-large); +} +.semi-chat-hint-item:hover { + background-color: var(--semi-color-fill-0); +} +.semi-chat-hint-content { + font-size: 14px; + color: var(--semi-color-text-1); +} +.semi-chat-hint-icon { + color: var(--semi-color-text-2); +} + +@keyframes semi-chat-loading-flashing { + 0% { + opacity: 1; + } + 50% { + opacity: 0.1; + } + to { + opacity: 1; + } +} +.semi-rtl .semi-chat, +.semi-portal-rtl .semi-chat { + direction: rtl; +} +.semi-rtl .semi-chat-hint-icon, +.semi-portal-rtl .semi-chat-hint-icon { + transform: scaleX(-1); +} +.semi-rtl .semi-chat-inputBox-sendButton-icon, +.semi-portal-rtl .semi-chat-inputBox-sendButton-icon { + transform: rotate(225deg); +} +.semi-rtl .semi-chat-chatBox-action-icon-redo, +.semi-portal-rtl .semi-chat-chatBox-action-icon-redo { + transform: scaleX(-1); +} + +.semi-checkbox { + box-sizing: border-box; + position: relative; + display: flex; + align-items: flex-start; + 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; + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); + column-gap: 8px; +} +.semi-checkbox input[type=checkbox] { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; +} +.semi-checkbox-content { + flex: 1; + display: flex; + flex-direction: column; + row-gap: 4px; +} +.semi-checkbox-addon { + display: flex; + flex: 1; + align-items: center; + color: var(--semi-color-text-0); + line-height: 20px; + user-select: none; +} +.semi-checkbox:hover .semi-checkbox-inner-display { + background: var(--semi-color-fill-0); + box-shadow: inset 0 0 0 1px var(--semi-color-focus-border); +} +.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary-hover); + box-shadow: none; +} +.semi-checkbox:active .semi-checkbox-inner-display { + background: var(--semi-color-fill-1); +} +.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary-active); + box-shadow: none; +} +.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display { + background: var(--semi-color-disabled-fill); + box-shadow: inset 0 0 0 1px var(--semi-color-border); +} +.semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { + color: var(--semi-color-white); + background: var(--semi-color-primary-disabled); + box-shadow: none; +} +.semi-checkbox-inner { + position: relative; + display: flex; + align-items: center; + width: 16px; + height: 20px; + user-select: none; + cursor: pointer; +} +.semi-checkbox-inner-display { + box-sizing: border-box; + position: relative; + width: 16px; + height: 16px; + margin: 0; + background: transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + box-shadow: inset 0 0 0 1px var(--semi-color-text-3); + border-radius: var(--semi-border-radius-extra-small); +} +.semi-checkbox-inner-display .semi-icon { + font-size: 16px; +} +.semi-checkbox-inner-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary); + color: var(--semi-color-white); + box-shadow: inset 0 0 0 1px var(--semi-color-primary); + border-radius: var(--semi-border-radius-extra-small); +} +.semi-checkbox-inner-checked > .semi-checkbox-addon { + color: var(--semi-color-text-0); +} +.semi-checkbox:hover .semi-checkbox-inner-display { + background: var(--semi-color-fill-0); +} +.semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display { + background: var(--semi-color-primary-hover); + box-shadow: none; + color: var(--semi-color-white); +} +.semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary-hover); + border-color: var(--semi-color-primary-hover); + color: var(--semi-color-white); +} +.semi-checkbox:hover.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display { + background: var(--semi-color-white); +} +.semi-checkbox:active .semi-checkbox-inner-display { + background: var(--semi-color-fill-1); +} +.semi-checkbox:active.semi-checkbox-indeterminate .semi-checkbox-inner-display { + background: var(--semi-color-primary-active); + border-color: var(--semi-color-primary-active); + color: var(--semi-color-white); + box-shadow: none; +} +.semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary-active); + border-color: var(--semi-color-primary-active); + color: var(--semi-color-white); +} +.semi-checkbox:active.semi-checkbox-cardType.semi-checkbox-unChecked.semi-checkbox-cardType_enable .semi-checkbox-inner-display { + background: var(--semi-color-white); +} +.semi-checkbox-cardType { + flex-wrap: nowrap; + align-items: flex-start; + border-radius: 3px; + padding: 12px 16px; + background: transparent; + border: 1px solid transparent; +} +.semi-checkbox-cardType .semi-checkbox-inner { + position: relative; + flex-shrink: 0; +} +.semi-checkbox-cardType .semi-checkbox-inner-display { + background: var(--semi-color-white); +} +.semi-checkbox-cardType .semi-checkbox-inner-pureCardType { + opacity: 0; + width: 0; +} +.semi-checkbox-cardType .semi-checkbox-addon { + font-weight: 600; + font-size: 14px; + line-height: 20px; + color: var(--semi-color-text-0); +} +.semi-checkbox-cardType .semi-checkbox-extra { + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: var(--semi-color-text-2); +} +.semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren { + margin-top: 0; +} +.semi-checkbox-cardType:hover { + background: var(--semi-color-fill-0); +} +.semi-checkbox-cardType:active { + background: var(--semi-color-fill-1); +} +.semi-checkbox-cardType_checked { + background: var(--semi-color-primary-light-default); + border: 1px solid var(--semi-color-primary); +} +.semi-checkbox-cardType_checked:hover { + background: var(--semi-color-primary-light-default); + border-color: var(--semi-color-primary-hover); +} +.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { + box-shadow: none; +} +.semi-checkbox-cardType_checked:active { + background: var(--semi-color-primary-light-default); + border-color: var(--semi-color-primary-active); +} +.semi-checkbox-cardType_disabled:active { + background: transparent; +} +.semi-checkbox-cardType_disabled:hover { + background: transparent; +} +.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType { + background: var(--semi-color-primary-light-default); + border: 1px solid var(--semi-color-primary-disabled); +} +.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display { + box-shadow: none; +} +.semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display { + background: var(--semi-color-primary); + color: var(--semi-color-white); + box-shadow: inset 0 0 0 1px var(--semi-color-primary); + border-radius: var(--semi-border-radius-extra-small); +} +.semi-checkbox-indeterminate .semi-checkbox-inner-display:hover, .semi-checkbox-checked .semi-checkbox-inner-display:hover { + background: var(--semi-color-primary-hover); + border-color: var(--semi-color-primary-hover); + color: var(--semi-color-white); +} +.semi-checkbox-indeterminate .semi-checkbox-inner-display:active, .semi-checkbox-checked .semi-checkbox-inner-display:active { + background: var(--semi-color-primary-active); + border-color: var(--semi-color-primary-active); + color: var(--semi-color-white); +} +.semi-checkbox-indeterminate .semi-checkbox-inner-addon, .semi-checkbox-checked .semi-checkbox-inner-addon { + color: var(--semi-color-text-0); +} +.semi-checkbox-disabled { + cursor: not-allowed; +} +.semi-checkbox-disabled .semi-checkbox-inner { + cursor: not-allowed; +} +.semi-checkbox-disabled .semi-checkbox-inner-display { + color: var(--semi-color-white); + background: var(--semi-color-disabled-fill); + box-shadow: inset 0 0 0 1px var(--semi-color-border); +} +.semi-checkbox-disabled .semi-checkbox-inner-display:hover { + color: var(--semi-color-white); + background: transparent; +} +.semi-checkbox-disabled .semi-checkbox-inner-checked { + color: var(--semi-color-white); +} +.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display { + opacity: 0.75; + background: var(--semi-color-primary-disabled); + box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); +} +.semi-checkbox-disabled .semi-checkbox-inner-checked .semi-checkbox-inner-display:hover { + color: var(--semi-color-white); + background: var(--semi-color-primary-disabled); +} +.semi-checkbox-disabled .semi-checkbox-addon { + color: var(--semi-color-disabled-text); +} +.semi-checkbox-disabled .semi-checkbox-extra { + color: var(--semi-color-disabled-text); +} +.semi-checkbox.semi-checkbox-disabled.semi-checkbox-indeterminate .semi-checkbox-inner-display { + opacity: 0.75; + background: var(--semi-color-primary-disabled); + box-shadow: inset 0 0 0 1px var(--semi-color-primary-disabled); + color: var(--semi-color-white); +} +.semi-checkbox-extra { + flex-shrink: 0; + flex-grow: 1; + flex-basis: 100%; + box-sizing: border-box; + color: var(--semi-color-text-2); +} +.semi-checkbox-focus { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-checkbox-focus-border { + box-shadow: inset 0 0 0 1px var(--semi-color-focus-border); +} + +.semi-checkboxGroup { + 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; + line-height: 14px; +} +.semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical { + margin-bottom: 16px; +} +.semi-checkboxGroup-horizontal { + display: flex; + flex-wrap: wrap; + gap: 16px; +} +.semi-checkboxGroup-horizontal .semi-checkbox { + display: inline-flex; +} +.semi-checkboxGroup-vertical { + display: flex; + flex-direction: column; + row-gap: 12px; +} +.semi-checkboxGroup-vertical-cardType { + row-gap: 16px; +} +.semi-checkboxGroup-vertical-pureCardType .semi-checkbox { + column-gap: 0; +} + +.semi-rtl .semi-checkbox, +.semi-portal-rtl .semi-checkbox { + direction: rtl; +} +.semi-rtl .semi-checkbox input[type=checkbox], +.semi-portal-rtl .semi-checkbox input[type=checkbox] { + left: auto; + right: 0; +} +.semi-rtl .semi-checkboxGroup, +.semi-portal-rtl .semi-checkboxGroup { + direction: rtl; +} + +.semi-codeHighlight-defaultTheme { + /** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +} +.semi-codeHighlight-defaultTheme pre[class*=language-], +.semi-codeHighlight-defaultTheme code[class*=language-] { + color: var(--semi-color-text-0); + font-size: 13px; + text-shadow: none; + font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -moz-hyphens: none; + hyphens: none; +} +.semi-codeHighlight-defaultTheme pre[class*=language-]::selection, +.semi-codeHighlight-defaultTheme code[class*=language-]::selection, +.semi-codeHighlight-defaultTheme pre[class*=language-]::-moz-selection, +.semi-codeHighlight-defaultTheme code[class*=language-]::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} +.semi-codeHighlight-defaultTheme pre[class*=language-] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; + background: var(--semi-color-tertiary-light-default); +} +.semi-codeHighlight-defaultTheme :not(pre) > code[class*=language-] { + display: block; + border-radius: 0.3em; + color: #895fe2; + background: #f9f7f9; +} +.semi-codeHighlight-defaultTheme pre .namespace { + opacity: 0.7; +} +.semi-codeHighlight-defaultTheme pre .token.comment, +.semi-codeHighlight-defaultTheme pre .token.prolog, +.semi-codeHighlight-defaultTheme pre .token.doctype, +.semi-codeHighlight-defaultTheme pre .token.cdata { + color: #6b7075; +} +.semi-codeHighlight-defaultTheme pre .token.punctuation { + color: rgba(var(--semi-grey-8), 1); +} +.semi-codeHighlight-defaultTheme pre .token.property, +.semi-codeHighlight-defaultTheme pre .token.tag, +.semi-codeHighlight-defaultTheme pre .token.boolean, +.semi-codeHighlight-defaultTheme pre .token.number, +.semi-codeHighlight-defaultTheme pre .token.constant, +.semi-codeHighlight-defaultTheme pre .token.symbol, +.semi-codeHighlight-defaultTheme pre .token.deleted { + color: rgba(var(--semi-purple-6), 1); +} +.semi-codeHighlight-defaultTheme pre .token.selector, +.semi-codeHighlight-defaultTheme pre .token.attr-name, +.semi-codeHighlight-defaultTheme pre .token.string, +.semi-codeHighlight-defaultTheme pre .token.char, +.semi-codeHighlight-defaultTheme pre .token.builtin, +.semi-codeHighlight-defaultTheme pre .token.inserted { + color: rgba(var(--semi-green-6), 1); +} +.semi-codeHighlight-defaultTheme pre .token.operator, +.semi-codeHighlight-defaultTheme pre .token.entity, +.semi-codeHighlight-defaultTheme pre .token.url, +.semi-codeHighlight-defaultTheme pre .language-css .token.string, +.semi-codeHighlight-defaultTheme pre .style .token.string { + color: rgba(var(--semi-grey-8), 1); +} +.semi-codeHighlight-defaultTheme pre .token.atrule, +.semi-codeHighlight-defaultTheme pre .token.attr-value, +.semi-codeHighlight-defaultTheme pre .token.keyword { + color: rgba(var(--semi-purple-6), 1); +} +.semi-codeHighlight-defaultTheme pre .token.function { + color: rgba(var(--semi-violet-6), 1); +} +.semi-codeHighlight-defaultTheme pre .token.regex, +.semi-codeHighlight-defaultTheme pre .token.important, +.semi-codeHighlight-defaultTheme pre .token.variable { + color: #d0955f; +} +.semi-codeHighlight-defaultTheme pre .token.important, +.semi-codeHighlight-defaultTheme pre .token.bold { + font-weight: bold; +} +.semi-codeHighlight-defaultTheme pre .token.italic { + font-style: italic; +} +.semi-codeHighlight-defaultTheme pre .token.entity { + cursor: help; +} +.semi-codeHighlight-defaultTheme pre[data-line] { + position: relative; +} +.semi-codeHighlight-defaultTheme pre[class*=language-] > code[class*=language-] { + position: relative; + z-index: 1; +} +.semi-codeHighlight-defaultTheme .line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + background: #ebf4ff; + box-shadow: inset 5px 0 0 #0064d2; + z-index: 0; + pointer-events: none; + line-height: inherit; + white-space: pre; +} +.semi-codeHighlight pre[class*=language-].line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; +} +.semi-codeHighlight pre[class*=language-].line-numbers > code { + position: relative; + white-space: inherit; +} +.semi-codeHighlight .line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.semi-codeHighlight .line-numbers-rows > span { + display: block; + counter-increment: linenumber; +} +.semi-codeHighlight .line-numbers-rows > span:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; +} + +.semi-collapse-item { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-collapse-header { + display: flex; + align-items: center; + justify-content: space-between; + margin: 4px 8px; + padding: 8px; + border-radius: var(--semi-border-radius-small); + outline: none; + cursor: pointer; + color: var(--semi-color-text-0); + font-weight: 600; + 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; +} +.semi-collapse-header-right { + display: flex; + align-items: center; +} +.semi-collapse-header-right span { + display: flex; + padding-right: 8px; +} +.semi-collapse-header-right span:last-child { + padding-right: 0; +} +.semi-collapse-header-icon { + width: 16px; + height: 16px; + color: var(--semi-color-text-2); +} +.semi-collapse-header-iconLeft { + justify-content: flex-start; +} +.semi-collapse-header-iconLeft .semi-collapse-header-icon { + margin-right: 8px; +} +.semi-collapse-header-iconDisabled { + color: var(--semi-color-disabled-text); +} +.semi-collapse-header:hover { + background-color: var(--semi-color-fill-0); +} +.semi-collapse-header:active { + background-color: var(--semi-color-fill-1); +} +.semi-collapse-header-disabled { + color: var(--semi-color-disabled-text); +} +.semi-collapse-header-disabled:hover { + background-color: transparent; +} +.semi-collapse-content { + padding: 4px 16px 8px 16px; + color: var(--semi-color-text-1); + 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; +} +.semi-collapse-content p { + margin: 0; +} + +.semi-rtl .semi-collapse, +.semi-portal-rtl .semi-collapse { + direction: rtl; +} +.semi-rtl .semi-collapse-header-right span, +.semi-portal-rtl .semi-collapse-header-right span { + display: flex; + padding-right: 0; + padding-left: 8px; +} +.semi-rtl .semi-collapse-header-right span:last-child, +.semi-portal-rtl .semi-collapse-header-right span:last-child { + padding-right: 0; + padding-left: 0; +} + +.semi-collapsible-transition { + transition: height 250ms cubic-bezier(0.25, 0.1, 0.25, 1) var(--semi-transition_delay-none), opacity 250ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} + +.semi-colorPicker-colorChooseArea { + /** + * Referrer from https://github.com/web-padawan/vanilla-colorful/blob/5d219ee360ae2f29534864b28ca9e6074233b9ce/src/lib/styles/saturation.css + */ + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); + position: relative; + flex-grow: 1; + border-color: transparent; + border-radius: 8px 8px 0px 0px; + background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); +} +.semi-colorPicker-handle { + border-radius: var(--semi-border-radius-full); + border: 2px solid var(--semi-color-white); + position: absolute; + box-sizing: border-box; + cursor: grab; +} +.semi-colorPicker-alphaSlider { + position: relative; + cursor: pointer; + margin-top: 6px; + border-radius: var(--semi-border-radius-full); + background: url('data:image/svg+xml,'); +} +.semi-colorPicker-alphaSlider .semi-colorPicker-alphaSliderInner { + width: 100%; + height: 100%; + border-radius: 4px; +} +.semi-colorPicker-alphaSlider .semi-colorPicker-alphaHandle { + background: url('data:image/svg+xml,'); + border-radius: var(--semi-border-radius-full); + border: 2px solid var(--semi-color-white); + position: absolute; + box-sizing: border-box; + cursor: grab; +} +.semi-colorPicker-colorSlider { + position: relative; + cursor: pointer; + margin-top: 6px; + border-radius: var(--semi-border-radius-full); + background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); +} +.semi-colorPicker-dataPart { + margin-top: 8px; + display: flex; + align-items: center; +} +.semi-colorPicker-dataPart .semi-colorPicker-colorDemoBlock { + border-radius: 4px; +} +.semi-colorPicker-dataPart .semi-colorPicker-inputGroup { + margin-left: 4px; + width: 100%; + flex: 1; + flex-wrap: nowrap; +} +.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInput { + flex: 1; +} +.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber { + width: 58px; +} +.semi-colorPicker-dataPart .semi-colorPicker-inputGroup .semi-colorPicker-colorPickerInputNumber .semi-colorPicker-inputNumberSuffix { + font-size: 14px; + padding: 4px 4px; +} +.semi-colorPicker-dataPart .semi-colorPicker-formatSelect { + width: 80px; +} +.semi-colorPicker-popover { + padding: 8px; +} +.semi-colorPicker-popover-defaultChildren { + width: 24px; + height: 24px; + border-radius: 4px; + cursor: pointer; +} + +.semi-cropper { + position: relative; +} +.semi-cropper img { + max-width: none; +} +.semi-cropper-img { + position: absolute; + user-select: none; +} +.semi-cropper-img-wrapper { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} +.semi-cropper-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--semi-color-overlay-bg); + cursor: move; +} +.semi-cropper-box { + position: absolute; + outline: 1px solid var(--semi-color-primary); +} +.semi-cropper-box-corner { + position: absolute; + background: var(--semi-color-primary); + width: 10px; + height: 10px; + z-index: 1; +} +.semi-cropper-box-corner-tl { + top: -5px; + left: -5px; + cursor: nwse-resize; +} +.semi-cropper-box-corner-tr { + top: -5px; + right: -5px; + cursor: nesw-resize; +} +.semi-cropper-box-corner-tm { + top: -5px; + left: 50%; + margin-left: -5px; + cursor: ns-resize; +} +.semi-cropper-box-corner-ml { + top: 50%; + left: -5px; + margin-top: -5px; + cursor: ew-resize; +} +.semi-cropper-box-corner-mr { + top: 50%; + right: -5px; + margin-top: -5px; + cursor: ew-resize; +} +.semi-cropper-box-corner-bl { + bottom: -5px; + left: -5px; + cursor: nesw-resize; +} +.semi-cropper-box-corner-bm { + bottom: -5px; + left: 50%; + margin-left: -5px; + cursor: ns-resize; +} +.semi-cropper-box-corner-br { + bottom: -5px; + right: -5px; + cursor: nwse-resize; +} +.semi-cropper-view-box { + position: absolute; + overflow: hidden; + cursor: move; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.semi-cropper-view-box-round { + border-radius: 50%; +} +.semi-cropper-view-img { + user-select: none; +} + +.semi-datepicker { + box-sizing: border-box; + display: inline-block; +} +.semi-datepicker-container { + display: flex; +} +.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.semi-datepicker .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} +.semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.semi-datepicker .semi-scrolllist-body .semi-scrolllist-list-outer::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} +.semi-datepicker-month-grid { + user-select: none; + display: flex; +} +.semi-datepicker-month-grid-left, .semi-datepicker-month-grid-right { + position: relative; + padding: 0; + display: inline-flex; + flex-direction: column; + justify-content: flex-start; +} +.semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-yam { + height: 100%; +} +.semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { + height: calc(100% - 54px); +} +.semi-datepicker-month-grid .semi-datepicker-yam-showing { + min-height: 378px; + min-width: 284px; +} +.semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { + min-height: 325px; +} +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { + min-height: 317px; +} +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { + min-height: 317px; +} +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-navigation { + padding-top: 8px; + padding-bottom: 8px; +} +.semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { + min-height: 100%; +} +.semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { + height: 100%; +} +.semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month { + height: 253px; +} +.semi-datepicker-month-grid .semi-datepicker-yearmonth-header { + background: var(--semi-color-bg-3); + padding: 12px 16px; + border-bottom: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; + display: flex; + align-items: center; +} +.semi-datepicker-month-grid .semi-scrolllist { + background: var(--semi-color-bg-3); + position: relative; + box-shadow: none; + height: auto; + width: 100%; + height: 100%; + overflow: hidden; + flex: 1; +} +.semi-datepicker-month-grid .semi-scrolllist-header, .semi-datepicker-month-grid .semi-scrolllist-body { + box-sizing: border-box; + width: 100%; +} +.semi-datepicker-month-grid .semi-scrolllist-header { + border-bottom: 1px solid var(--semi-color-border); + padding: 16px; +} +.semi-datepicker-month-grid .semi-scrolllist-body { + height: 100%; + overflow: hidden; + padding: 0; + flex: 1; +} +.semi-datepicker-month-grid .semi-scrolllist-line { + display: none; +} +.semi-datepicker-month-grid .semi-scrolllist-header-title { + padding: 0; + 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; + min-height: 24px; + line-height: 24px; +} +.semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { + min-height: 216px; +} +.semi-datepicker-panel-yam { + max-width: 484px; +} +.semi-datepicker-panel-yam[x-type=monthRange] { + max-width: 584px; +} +.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body { + display: flex; +} +.semi-datepicker-panel-yam .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) { + border-left: 1px solid var(--semi-color-border); +} +.semi-datepicker-panel-yam .semi-scrolllist { + box-shadow: none; + height: 266px; +} +.semi-datepicker-panel-yam .semi-scrolllist-list-outer > ul > li { + min-width: 64px; +} +.semi-datepicker-panel-yam .semi-scrolllist-item > ul > li { + min-width: 82px; +} +.semi-datepicker-panel-yam .semi-scrolllist-body { + padding: 0; + overflow: hidden; +} +.semi-datepicker-panel-yam .semi-scrolllist-body .semi-scrolllist-item-wheel:not(#neverExistElement) { + border: none; +} +.semi-datepicker-footer { + padding-top: 10px; + padding-right: 8px; + padding-bottom: 10px; + text-align: right; + background-color: var(--semi-color-fill-0); +} +.semi-datepicker-footer .semi-button:first-of-type { + margin-right: 12px; +} +.semi-datepicker-footer .semi-button:nth-of-type(2) { + margin-right: 8px; +} +.semi-datepicker-yam { + position: absolute; + top: 0; + width: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; +} +.semi-datepicker-tpk { + position: absolute; + top: 0; + height: calc(100% - 54px); + width: 100%; + display: flex; + flex-direction: column; +} +.semi-datepicker-tpk .semi-datepicker-time { + height: 100%; +} +.semi-datepicker-navigation { + display: flex; + align-items: center; + box-sizing: content-box; + height: 32px; + padding: 12px 16px; +} +.semi-datepicker-navigation-left, .semi-datepicker-navigation-right { + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +} +.semi-datepicker-navigation .semi-button { + color: var(--semi-color-text-2); + min-width: 32px; +} +.semi-datepicker-navigation-month { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + flex-grow: 1; + text-align: center; + font-weight: 600; + color: var(--semi-color-text-0); +} +.semi-datepicker-navigation-month .semi-button { + color: var(--semi-color-text-0); +} +.semi-datepicker-month { + width: 252px; + box-sizing: content-box; + padding: 16px; + padding-top: 0; +} +.semi-datepicker-weekday { + 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; + font-weight: 600; + color: var(--semi-color-text-2); + border-bottom: 1px solid var(--semi-color-border); +} +.semi-datepicker-weekday-item { + width: 36px; + height: 36px; + line-height: 36px; + text-align: center; + display: inline-block; +} +.semi-datepicker-weeks { + color: var(--semi-color-text-0); +} +.semi-datepicker-week { + display: flex; + align-items: center; +} +.semi-datepicker-day { + box-sizing: border-box; + display: inline-block; + width: 36px; + height: 36px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +} +.semi-datepicker-day-main { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + height: 32px; + margin: 0 auto; + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); +} +.semi-datepicker-day-main:hover { + background-color: var(--semi-color-fill-0); +} +.semi-datepicker-day-main:active { + background-color: var(--semi-color-fill-1); +} +.semi-datepicker-day-today .semi-datepicker-day-main { + color: var(--semi-color-primary); + background-color: var(--semi-color-fill-0); + font-weight: 600; +} +.semi-datepicker-day-today.semi-datepicker-day-disabled .semi-datepicker-day-main { + color: var(--semi-color-primary-disabled); +} +.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main, .semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { + border-radius: 0; + margin-left: 0; + margin-right: 0; + width: 36px; +} +.semi-datepicker-day-selected .semi-datepicker-day-main { + border-radius: var(--semi-border-radius-small); +} +.semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: var(--semi-border-radius-small); +} +.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + width: 34px; + margin-left: 2px; + margin-right: 0; + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + width: 34px; + margin-right: 2px; + margin-left: 0; + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main { + border-radius: 0; +} +.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + background-color: var(--semi-color-fill-0); +} +.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-hoverday-offset .semi-datepicker-day-main { + background-color: var(--semi-color-fill-1); +} +.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-inhover .semi-datepicker-day-main { + background-color: var(--semi-color-primary-light-default); +} +.semi-datepicker-day-hoverday-inrange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main, .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { + background-color: var(--semi-color-primary-light-active); +} +.semi-datepicker-day-hoverday-around-singleselected .semi-datepicker-day-main { + background-color: var(--semi-color-primary-light-active); +} +.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-selected-end .semi-datepicker-day-main { + background-color: var(--semi-color-primary); + color: var(--semi-color-white); +} +.semi-datepicker-day-selected .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-start .semi-datepicker-day-main:hover, .semi-datepicker-day-selected-end .semi-datepicker-day-main:hover { + background-color: var(--semi-color-primary); +} +.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { + background-color: var(--semi-color-primary-light-hover); +} +.semi-datepicker-day-selected-start-afterhover .semi-datepicker-day-main, .semi-datepicker-day-selected-end-beforehover .semi-datepicker-day-main { + border: 1px solid var(--semi-color-primary-active); +} +.semi-datepicker-day-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-datepicker-day-disabled .semi-datepicker-day-main:hover { + background-color: transparent; +} +.semi-datepicker-day-disabled .semi-datepicker-day-main:active { + background-color: transparent; +} +.semi-datepicker-day-disabled.semi-datepicker-day-selected .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-hoverday-offset .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, .semi-datepicker-day-disabled.semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { + background-color: var(--semi-color-disabled-fill); + color: var(--semi-color-disabled-text); +} +.semi-datepicker-switch { + text-align: center; + display: flex; + border-top: 1px solid var(--semi-color-border); + margin-top: auto; +} +.semi-datepicker-switch-date, .semi-datepicker-switch-time { + width: 50%; + cursor: pointer; + padding-top: 16px; + padding-bottom: 16px; + display: flex; + justify-content: center; + align-items: center; + color: var(--semi-color-text-2); +} +.semi-datepicker-switch-date:not(.semi-datepicker-switch-time-disabled):hover, .semi-datepicker-switch-time:not(.semi-datepicker-switch-time-disabled):hover { + background-color: var(--semi-color-fill-0); +} +.semi-datepicker-switch-date-active, .semi-datepicker-switch-time-active { + color: var(--semi-color-text-0); + font-weight: 600; + cursor: auto; +} +.semi-datepicker-switch-date-active:hover, .semi-datepicker-switch-time-active:hover { + background-color: inherit; +} +.semi-datepicker-switch-date-disabled, .semi-datepicker-switch-time-disabled { + cursor: not-allowed; +} +.semi-datepicker-switch-text { + padding-left: 8px; +} +.semi-datepicker-time .semi-jumperlist { + box-shadow: none; + border-radius: 0; +} +.semi-datepicker-quick-control { + box-sizing: border-box; + background-color: transparent; +} +.semi-datepicker-quick-control-header { + padding: 18px 12px 0; + font-weight: 600; +} +.semi-datepicker-quick-control-left { + border-right: 1px solid var(--semi-color-border); +} +.semi-datepicker-quick-control-right { + border-left: 1px solid var(--semi-color-border); +} +.semi-datepicker-quick-control-top { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-datepicker-quick-control-bottom { + border-top: 1px solid var(--semi-color-border); +} +.semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-quick-control-right-content-wrapper { + max-width: 200px; + margin-top: 14px; + overflow-y: auto; +} +.semi-datepicker-quick-control-top-content-wrapper, .semi-datepicker-quick-control-bottom-content-wrapper { + overflow-y: auto; + max-height: 100px; +} +.semi-datepicker-quick-control-left-content, .semi-datepicker-quick-control-right-content { + box-sizing: border-box; + display: grid; + align-content: flex-start; + grid-gap: 8px; + grid-template-columns: repeat(2, minmax(76.5px, 84px)); + padding: 0 12px 12px; +} +.semi-datepicker-quick-control-left-content-item, .semi-datepicker-quick-control-right-content-item { + max-width: 84px; +} +.semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-quick-control-right-content-item-ellipsis { + width: 68px; + color: var(--semi-color-primary); +} +.semi-datepicker-quick-control-top-content, .semi-datepicker-quick-control-bottom-content { + display: grid; + grid-gap: 8px; + grid-template-columns: repeat(3, minmax(70.924px, 75.924px)); + align-content: flex-start; + padding: 8px 20px; +} +.semi-datepicker-quick-control-top-content-item, .semi-datepicker-quick-control-bottom-content-item { + max-width: 75.924px; +} +.semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-quick-control-bottom-content-item-ellipsis { + width: 59.924px; + color: var(--semi-color-primary); +} +.semi-datepicker-quick-control-top-range-content, .semi-datepicker-quick-control-bottom-range-content { + box-sizing: border-box; + display: grid; + align-content: flex-start; + grid-template-columns: repeat(5, minmax(96.2px, 99.2px)); + grid-gap: 8px; + padding: 8px 20px; +} +.semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-quick-control-bottom-range-content-item { + max-width: 99.2px; +} +.semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-quick-control-bottom-range-content-item-ellipsis { + width: 83.2px; + color: var(--semi-color-primary); +} +.semi-datepicker-quick-control-top-month-content, .semi-datepicker-quick-control-bottom-month-content { + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(2, minmax(51px, 58.5px)); + grid-gap: 8px; + align-content: flex-start; + padding: 8px 20px; +} +.semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-quick-control-bottom-month-content-item { + max-width: 58.5px; +} +.semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-quick-control-bottom-month-content-item-ellipsis { + max-width: 42.5px; + color: var(--semi-color-primary); +} +.semi-datepicker-quick-control-month { + max-width: 284px; +} +.semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 258px; +} +.semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper { + max-height: 214px; +} +.semi-datepicker-quick-control-date { + max-width: 284px; +} +.semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 309px; +} +.semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper { + max-height: 273px; +} +.semi-datepicker-quick-control-dateTime { + max-width: 284px; +} +.semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 309px; +} +.semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper { + max-height: 326px; +} +.semi-datepicker-quick-control-dateRange { + max-width: 568px; +} +.semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 309px; +} +.semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper { + max-height: 273px; +} +.semi-datepicker-quick-control-dateTimeRange { + max-width: 568px; +} +.semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 309px; +} +.semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper { + max-height: 326px; +} +.semi-datepicker-topSlot { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-datepicker-leftSlot { + border-right: 1px solid var(--semi-color-border); +} +.semi-datepicker-rightSlot { + border-left: 1px solid var(--semi-color-border); +} +.semi-datepicker-bottomSlot { + border-top: 1px solid var(--semi-color-border); +} +.semi-datepicker .semi-popover-trigger { + width: 100%; +} +.semi-datepicker .semi-popover-trigger .semi-input-wrapper { + font-size: 13px; +} +.semi-datepicker .semi-popover-trigger .semi-input-suffix { + color: var(--semi-color-primary); +} +.semi-datepicker .semi-datepicker-input-readonly { + cursor: pointer; +} +.semi-datepicker-inset-input-wrapper { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + box-sizing: border-box; + column-gap: 8px; + padding: 12px 16px; + padding-bottom: 0; + width: 284px; +} +.semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { + width: 568px; +} +.semi-datepicker-inset-input-wrapper[x-type=month] { + width: 165px; +} +.semi-datepicker-inset-input-wrapper[x-type=monthRange] { + width: 331px; +} +.semi-datepicker-inset-input-wrapper .semi-input-wrapper { + flex: 1; + flex-shrink: 0; +} +.semi-datepicker-inset-input-separator { + flex-grow: 0; + flex-shrink: 0; + height: 32px; + line-height: 32px; + padding: 0 4px; + color: var(--semi-color-text-3); +} +.semi-datepicker-range-input { + display: flex; + align-items: center; + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); + height: 32px; + color: var(--semi-color-text-2); + background-color: var(--semi-color-fill-0); + border: 0px solid transparent; +} +.semi-datepicker-range-input:hover { + border-color: transparent; +} +.semi-datepicker-range-input:active { + border-color: transparent; +} +.semi-datepicker-range-input:focus-within { + border-color: transparent; +} +.semi-datepicker-range-input .semi-datepicker-monthRange-input { + background-color: transparent; +} +.semi-datepicker-range-input-wrapper { + box-sizing: border-box; + background-color: transparent; + padding: 0 8px; + height: 100%; + width: 100%; + border: 1px solid transparent; + border-radius: var(--semi-border-radius-small); + display: flex; + align-items: center; +} +.semi-datepicker-range-input-wrapper .semi-input-wrapper { + background-color: transparent; + height: fit-content; + border: none; +} +.semi-datepicker-range-input-wrapper .semi-input-wrapper:active:not(#neverExistElement) { + background-color: transparent; +} +.semi-datepicker-range-input-wrapper .semi-input-wrapper:hover:not(#neverExistElement) { + background-color: transparent; +} +.semi-datepicker-range-input-wrapper-focus { + border-color: transparent; + background-color: var(--semi-color-fill-1); + border-radius: var(--semi-border-radius-small); + transition: background-color 0.16s ease-in-out; +} +.semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn { + display: flex; +} +.semi-datepicker-range-input-wrapper-focus ~ .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { + display: none; +} +.semi-datepicker-range-input-wrapper .semi-input { + padding: 2px 4px; +} +.semi-datepicker-range-input-wrapper-icon { + flex-shrink: 0; +} +.semi-datepicker-range-input-wrapper:hover { + background-color: var(--semi-color-fill-1); +} +.semi-datepicker-range-input-wrapper-start { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.semi-datepicker-range-input-wrapper-start-with-prefix { + border-radius: 0; +} +.semi-datepicker-range-input-wrapper-end { + border-radius: 0; +} +.semi-datepicker-range-input-wrapper-active { + border-color: var(--semi-color-focus-border); + background-color: var(--semi-color-fill-1); +} +.semi-datepicker-range-input-separator { + display: flex; + align-items: center; +} +.semi-datepicker-range-input-separator-active { + color: var(--semi-color-text-0); +} +.semi-datepicker-range-input-small { + height: 24px; +} +.semi-datepicker-range-input-large { + height: 40px; +} +.semi-datepicker-range-input-large .semi-input-default { + font-size: 16px; +} +.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn { + display: flex; + cursor: pointer; +} +.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn ~ .semi-datepicker-range-input-suffix { + display: none; +} +.semi-datepicker-range-input:hover .semi-datepicker-range-input-clearbtn:hover { + color: var(--semi-color-primary-hover); +} +.semi-datepicker-range-input-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); + background-color: var(--semi-color-disabled-fill); +} +.semi-datepicker-range-input-disabled .semi-datepicker-range-input-wrapper:hover { + background-color: transparent; +} +.semi-datepicker-range-input-disabled:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-datepicker-range-input-disabled .semi-datepicker-range-input-prefix, +.semi-datepicker-range-input-disabled .semi-datepicker-range-input-suffix, +.semi-datepicker-range-input-disabled .semi-datepicker-range-input-clearbtn { + color: var(--semi-color-disabled-text); +} +.semi-datepicker-range-input-warning { + background-color: var(--semi-color-warning-light-default); +} +.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper:hover { + background-color: var(--semi-color-warning-light-hover); +} +.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active { + border-color: var(--semi-color-warning); + background-color: var(--semi-color-warning-light-hover); +} +.semi-datepicker-range-input-error { + background-color: var(--semi-color-danger-light-default); +} +.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper:hover { + background-color: var(--semi-color-danger-light-hover); +} +.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active { + border-color: var(--semi-color-danger); + background-color: var(--semi-color-danger-light-hover); +} +.semi-datepicker-range-input .semi-datepicker-range-input-clearbtn { + display: none; +} +.semi-datepicker-range-input-prefix, .semi-datepicker-range-input-suffix, .semi-datepicker-range-input-clearbtn { + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + 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; + white-space: nowrap; + color: var(--semi-color-text-2); +} +.semi-datepicker-range-input-prefix { + padding-left: 12px; + padding-right: 8px; +} +.semi-datepicker-range-input-suffix { + padding-left: 8px; + padding-right: 12px; +} +.semi-datepicker-range-input-suffix-hidden { + display: none; +} +.semi-datepicker-range-input-clearbtn { + padding-left: 8px; + padding-right: 12px; +} + +/* +* 小尺寸 DatePicker +*/ +.semi-datepicker-compact { + 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; + line-height: 20px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam { + height: calc(100% - 32px); +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { + border-right: 1px solid var(--semi-color-border); +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam-showing { + min-height: 288px; + min-width: 216px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-type=date] .semi-datepicker-yam-showing { + min-height: 256px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=left][x-insetinput=false] .semi-datepicker-month, .semi-datepicker-compact .semi-datepicker-month-grid[x-preset-position=right][x-insetinput=false] .semi-datepicker-month { + height: 220px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header { + box-sizing: border-box; + height: 48px; + padding: 12px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body { + display: flex; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body .semi-scrolllist:nth-child(2) { + border: 1px solid var(--semi-color-border); +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist { + 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; + line-height: 20px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-header { + display: none; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-list-outer > ul > li { + height: 32px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { + border-right: 0; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-selector { + height: 32px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { + margin-top: -17px; +} +.semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { + margin-top: 17px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=left] .semi-datepicker-weeks, .semi-datepicker-compact .semi-datepicker-month-grid[x-panel-yearandmonth-open-type=right] .semi-datepicker-weeks { + min-height: 168px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=year], +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=year] { + min-height: 256px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-left[x-open-type=time], +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-month-grid-right[x-open-type=time] { + min-height: 256px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-yam-showing { + min-height: 256px; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true] .semi-datepicker-tpk { + min-height: 100%; +} +.semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-insetinput=true][x-type=dateTimeRange] .semi-datepicker-yam { + height: 100%; +} +.semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist { + 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; + line-height: 20px; +} +.semi-datepicker-compact .semi-datepicker-tpk { + height: calc(100% - 32px); +} +.semi-datepicker-compact .semi-datepicker-navigation { + height: 24px; + padding: 12px; + padding-bottom: 0; +} +.semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right { + width: 24px; + height: 24px; +} +.semi-datepicker-compact .semi-datepicker-navigation .semi-button { + min-width: 24px; + min-height: 24px; +} +.semi-datepicker-compact .semi-datepicker-navigation-month .semi-button { + 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; + line-height: 20px; +} +.semi-datepicker-compact .semi-datepicker-month { + width: 216px; + padding: 0; +} +.semi-datepicker-compact .semi-datepicker-weeks { + padding: 10px; + padding-top: 6px; +} +.semi-datepicker-compact .semi-datepicker-weekday { + box-sizing: border-box; + height: 36px; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 8px; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-datepicker-compact .semi-datepicker-weekday-item { + width: 28px; + height: 28px; + line-height: 28px; +} +.semi-datepicker-compact .semi-datepicker-day { + width: 28px; + height: 28px; +} +.semi-datepicker-compact .semi-datepicker-day-main { + width: 24px; + height: 24px; +} +.semi-datepicker-compact .semi-datepicker-day-inrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inhover .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-inoffsetrange .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-hoverday .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-selectedrange-hover .semi-datepicker-day-main { + width: 28px; +} +.semi-datepicker-compact .semi-datepicker-day-selected-start.semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start.semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: 4px; +} +.semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + border-radius: 4px 0 0 4px; +} +.semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: 0 4px 4px 0; +} +.semi-datepicker-compact .semi-datepicker-day-hoverday-beforerange .semi-datepicker-day-main { + border-radius: 4px 0 0 4px; +} +.semi-datepicker-compact .semi-datepicker-day-hoverday-afterrange .semi-datepicker-day-main { + border-radius: 0 4px 4px 0; +} +.semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + width: 34px; + margin-left: 2px; + margin-right: 0; + border-radius: 4px 0 0 4px; +} +.semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + width: 34px; + margin-right: 2px; + margin-left: 0; + border-radius: 0 4px 4px 0; +} +.semi-datepicker-compact .semi-datepicker-switch { + box-sizing: border-box; + height: 32px; +} +.semi-datepicker-compact .semi-datepicker-switch-date, .semi-datepicker-compact .semi-datepicker-switch-time { + padding-top: 6px; + padding-bottom: 6px; +} +.semi-datepicker-compact .semi-datepicker-switch-date { + border-right: 1px solid var(--semi-color-border); +} +.semi-datepicker-compact .semi-datepicker-switch-text { + padding-left: 0; +} +.semi-datepicker-compact .semi-datepicker-quick-control-header { + padding: 16px 12px 0; + font-weight: 600; +} +.semi-datepicker-compact .semi-datepicker-quick-control-left-content-wrapper, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-wrapper { + margin-top: 12px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-left-content, .semi-datepicker-compact .semi-datepicker-quick-control-right-content { + box-sizing: border-box; + display: grid; + align-content: flex-start; + grid-gap: 8px; + grid-template-columns: repeat(2, minmax(76.5px, 84px)); + padding: 0 12px 12px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-left-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item { + max-width: 84px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-left-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-right-content-item-ellipsis { + width: 68px; + font-size: 12px; + color: var(--semi-color-primary); +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content { + box-sizing: border-box; + display: grid; + grid-gap: 8px; + grid-template-columns: repeat(3, minmax(54.94px, 59.94px)); + align-content: flex-start; + padding: 8px 10px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item { + max-width: 59.94px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-content-item-ellipsis { + width: 43.94px; + font-size: 12px; + color: var(--semi-color-primary); +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content { + display: grid; + grid-template-columns: repeat(5, minmax(73px, 76px)); + grid-gap: 8px; + align-content: flex-start; + padding: 8px 10px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item { + max-width: 76px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-range-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-range-content-item-ellipsis { + width: 60px; + font-size: 12px; + color: var(--semi-color-primary); +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content { + display: grid; + grid-template-columns: repeat(2, minmax(61px, 68.5px)); + grid-gap: 8px; + align-content: flex-start; + padding: 8px 10px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item { + max-width: 68.5px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-top-month-content-item-ellipsis, .semi-datepicker-compact .semi-datepicker-quick-control-bottom-month-content-item-ellipsis { + max-width: 52.5px; + font-size: 12px; + color: var(--semi-color-primary); +} +.semi-datepicker-compact .semi-datepicker-quick-control-month { + max-width: 216px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 254px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-month .semi-datepicker-quick-control-left-content-wrapper { + max-height: 218px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-date { + max-width: 216px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 248px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-date .semi-datepicker-quick-control-left-content-wrapper { + max-height: 208px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTime { + max-width: 216px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 248px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateTime .semi-datepicker-quick-control-left-content-wrapper { + max-height: 240px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateRange { + max-width: 432px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 248px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateRange .semi-datepicker-quick-control-left-content-wrapper { + max-height: 208px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange { + max-width: 432px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper { + max-height: 248px; +} +.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-right-content-wrapper, +.semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange .semi-datepicker-quick-control-left-content-wrapper { + max-height: 240px; +} +.semi-datepicker-compact .semi-datepicker-footer { + padding-top: 10px; + padding-right: 8px; + padding-bottom: 10px; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper { + column-gap: 4px; + padding: 8px 8px; + padding-bottom: 0; + width: 216px; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange], .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] { + width: 432px; + padding-top: 0; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateRange] .semi-input-wrapper, .semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=dateTimeRange] .semi-input-wrapper { + margin-top: 8px; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper[x-type=month] { + width: 195px; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper { + height: 28px; + box-sizing: border-box; +} +.semi-datepicker-compact .semi-datepicker-inset-input-wrapper .semi-input-wrapper .semi-input { + font-size: 12px; + line-height: 26px; + height: 26px; + vertical-align: top; +} +.semi-datepicker-compact .semi-datepicker-inset-input-separator { + border-left: 1px solid var(--semi-color-border); + transform: translateX(50%); + height: auto; +} + +.semi-popover-wrapper[x-placement^=top] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker .semi-datepicker-weeks { + min-height: 216px; +} +.semi-popover-wrapper[x-placement^=top] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=leftTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement=rightTop] .semi-datepicker-compact .semi-datepicker-weeks, .semi-popover-wrapper[x-placement*=BottomOver] .semi-datepicker-compact .semi-datepicker-weeks { + min-height: 168px; +} + +.semi-datepicker-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix { + opacity: 0; +} +.semi-datepicker-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active { + border-color: transparent; +} +.semi-datepicker-borderless.semi-datepicker-range-input-error:hover { + background-color: var(--semi-color-danger-light-default); +} +.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within { + background-color: var(--semi-color-danger-light-default); +} +.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) { + border-width: 1px; + border-color: var(--semi-color-danger); +} +.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within { + border-width: 1px; + border-color: var(--semi-color-danger); +} +.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active { + border-color: transparent; +} +.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover { + background-color: var(--semi-color-warning-light-default); +} +.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within { + background-color: var(--semi-color-warning-light-default); +} +.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) { + border-width: 1px; + border-color: var(--semi-color-warning); +} +.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within { + border-width: 1px; + border-color: var(--semi-color-warning); +} + +.semi-rtl, +.semi-portal-rtl { + /* + * 小尺寸 DatePicker + */ +} +.semi-rtl .semi-datepicker, +.semi-portal-rtl .semi-datepicker { + direction: rtl; +} +.semi-rtl .semi-datepicker-footer, +.semi-portal-rtl .semi-datepicker-footer { + padding-right: 0; + padding-left: 8px; + text-align: left; +} +.semi-rtl .semi-datepicker-footer .semi-button:first-of-type, +.semi-portal-rtl .semi-datepicker-footer .semi-button:first-of-type { + margin-left: 0; + margin-right: 0; +} +.semi-rtl .semi-datepicker-footer .semi-button:nth-of-type(2), +.semi-portal-rtl .semi-datepicker-footer .semi-button:nth-of-type(2) { + margin-right: 12px; + margin-left: 0; +} +.semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-selected-start .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-hoverday-before-selectedrange .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + margin-right: 2px; + margin-left: auto; + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, .semi-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-selected-end .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-hoverday-after-selectedrange .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + margin-left: 2px; + margin-right: auto; + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-rtl .semi-datepicker-switch-text, +.semi-portal-rtl .semi-datepicker-switch-text { + padding-left: 0; + padding-right: 8px; +} +.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_left, +.semi-rtl .semi-datepicker-navigation .semi-icon-chevron_right, +.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, +.semi-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, .semi-rtl .semi-datepicker-yam .semi-icon-chevron_left, +.semi-rtl .semi-datepicker-yam .semi-icon-chevron_right, +.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, +.semi-rtl .semi-datepicker-yam .semi-icon-double_chevron_right, +.semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_left, +.semi-portal-rtl .semi-datepicker-navigation .semi-icon-chevron_right, +.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_left, +.semi-portal-rtl .semi-datepicker-navigation .semi-icon-double_chevron_right, +.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_left, +.semi-portal-rtl .semi-datepicker-yam .semi-icon-chevron_right, +.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_left, +.semi-portal-rtl .semi-datepicker-yam .semi-icon-double_chevron_right { + transform: scaleX(-1); +} +.semi-rtl .semi-datepicker-range-input-prefix, +.semi-portal-rtl .semi-datepicker-range-input-prefix { + padding-left: 8px; + padding-right: 12px; +} +.semi-rtl .semi-datepicker-range-input-suffix, +.semi-portal-rtl .semi-datepicker-range-input-suffix { + padding-left: 12px; + padding-right: 8px; +} +.semi-rtl .semi-datepicker-range-input-suffix-hidden, +.semi-portal-rtl .semi-datepicker-range-input-suffix-hidden { + display: none; +} +.semi-rtl .semi-datepicker-range-input-clearbtn, +.semi-portal-rtl .semi-datepicker-range-input-clearbtn { + padding-left: 12px; + padding-right: 8px; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left { + border-left: 1px solid var(--semi-color-border); + border-right: 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-item-wheel { + border-left: 0; + border-right: 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-start .semi-datepicker-day-main { + border-radius: 0 4px 4px 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-offsetrange-end .semi-datepicker-day-main { + border-radius: 4px 0 0 4px; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-start .semi-datepicker-day-main { + margin-left: 0; + margin-right: 2px; + border-radius: 0 4px 4px 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-day-selected-end .semi-datepicker-day-main { + margin-right: 0; + margin-left: 2px; + border-radius: 4px 0 0 4px; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-switch-date, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-date { + border-left: 1px solid var(--semi-color-border); + border-right: 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-switch-text, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-switch-text { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-footer, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-footer { + padding-left: 8px; + padding-right: auto; +} +.semi-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator, +.semi-portal-rtl .semi-datepicker-compact .semi-datepicker-inset-input-separator { + border-right: 1px solid var(--semi-color-border); + border-left: 0; + transform: translateX(-50%); +} + +.semi-descriptions { + line-height: 20px; +} +.semi-descriptions table, +.semi-descriptions tr, +.semi-descriptions th, +.semi-descriptions td { + margin: 0; + padding: 0; + border: 0; +} +.semi-descriptions th { + padding-right: 24px; +} +.semi-descriptions .semi-descriptions-item { + margin: 0; + padding-bottom: 12px; + text-align: left; + vertical-align: top; +} +.semi-descriptions-key { + font-weight: normal; + 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; + min-height: 14px; + white-space: nowrap; + color: var(--semi-color-text-2); +} +.semi-descriptions-value { + font-weight: normal; + 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; + color: var(--semi-color-text-0); +} +.semi-descriptions-center .semi-descriptions-item-th { + text-align: right; +} +.semi-descriptions-center .semi-descriptions-item-td { + text-align: left; +} +.semi-descriptions-left .semi-descriptions-item-th, +.semi-descriptions-left .semi-descriptions-item-td { + text-align: left; +} +.semi-descriptions-justify .semi-descriptions-item-th { + text-align: left; +} +.semi-descriptions-justify .semi-descriptions-item-td { + text-align: right; +} +.semi-descriptions-plain .semi-descriptions-key, +.semi-descriptions-plain .semi-descriptions-value { + display: inline-block; +} +.semi-descriptions-plain .semi-descriptions-value { + padding-left: 8px; +} +.semi-descriptions-plain .semi-descriptions-value .semi-tag { + vertical-align: middle; +} +.semi-descriptions-double tbody { + display: flex; + flex-wrap: wrap; +} +.semi-descriptions-double tr { + display: inline-flex; + flex-direction: column; +} +.semi-descriptions-double .semi-descriptions-item { + padding: 0; + flex: 1; +} +.semi-descriptions-double .semi-descriptions-value { + font-weight: 600; +} +.semi-descriptions-double-small .semi-descriptions-item { + padding-right: 48px; +} +.semi-descriptions-double-small .semi-descriptions-key { + 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; + padding-bottom: 0; + font-size: 12px; +} +.semi-descriptions-double-small .semi-descriptions-value { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 16px; +} +.semi-descriptions-double-medium .semi-descriptions-item { + padding-right: 60px; +} +.semi-descriptions-double-medium .semi-descriptions-key { + padding-bottom: 4px; + font-size: 14px; +} +.semi-descriptions-double-medium .semi-descriptions-value { + 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; + font-size: 20px; +} +.semi-descriptions-double-large .semi-descriptions-item { + padding-right: 80px; +} +.semi-descriptions-double-large .semi-descriptions-key { + padding-bottom: 4px; + font-size: 14px; +} +.semi-descriptions-double-large .semi-descriptions-value { + font-size: 28px; + line-height: 40px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 28px; +} +.semi-descriptions-horizontal table { + table-layout: fixed; +} +.semi-descriptions-horizontal table, .semi-descriptions-horizontal tbody { + width: 100%; +} +.semi-descriptions-horizontal .semi-descriptions-item { + flex: 0; +} + +.semi-rtl .semi-descriptions, +.semi-portal-rtl .semi-descriptions { + direction: rtl; +} +.semi-rtl .semi-descriptions th, +.semi-portal-rtl .semi-descriptions th { + direction: rtl; + padding-right: 0; + padding-left: 24px; +} +.semi-rtl .semi-descriptions .semi-descriptions-item, +.semi-portal-rtl .semi-descriptions .semi-descriptions-item { + text-align: right; +} +.semi-rtl .semi-descriptions-center .semi-descriptions-item-th, +.semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-th { + text-align: left; +} +.semi-rtl .semi-descriptions-center .semi-descriptions-item-td, +.semi-portal-rtl .semi-descriptions-center .semi-descriptions-item-td { + text-align: right; +} +.semi-rtl .semi-descriptions-left .semi-descriptions-item-th, +.semi-rtl .semi-descriptions-left .semi-descriptions-item-td, +.semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-th, +.semi-portal-rtl .semi-descriptions-left .semi-descriptions-item-td { + text-align: left; +} +.semi-rtl .semi-descriptions-justify .semi-descriptions-item-th, +.semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-th { + text-align: right; +} +.semi-rtl .semi-descriptions-justify .semi-descriptions-item-td, +.semi-portal-rtl .semi-descriptions-justify .semi-descriptions-item-td { + text-align: left; +} +.semi-rtl .semi-descriptions-plain .semi-descriptions-key, +.semi-rtl .semi-descriptions-plain .semi-descriptions-value, +.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-key, +.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { + display: inline-block; +} +.semi-rtl .semi-descriptions-plain .semi-descriptions-value, +.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value { + padding-left: 0; + padding-right: 8px; +} +.semi-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag, +.semi-portal-rtl .semi-descriptions-plain .semi-descriptions-value .semi-tag { + vertical-align: middle; +} +.semi-rtl .semi-descriptions-double, +.semi-portal-rtl .semi-descriptions-double { + direction: rtl; +} +.semi-rtl .semi-descriptions-double .semi-descriptions-item, +.semi-portal-rtl .semi-descriptions-double .semi-descriptions-item { + text-align: right; +} +.semi-rtl .semi-descriptions-double-small .semi-descriptions-item, +.semi-portal-rtl .semi-descriptions-double-small .semi-descriptions-item { + padding-right: 0; + padding-left: 48px; +} +.semi-rtl .semi-descriptions-double-medium .semi-descriptions-item, +.semi-portal-rtl .semi-descriptions-double-medium .semi-descriptions-item { + padding-right: 0; + padding-left: 60px; +} +.semi-rtl .semi-descriptions-double-large .semi-descriptions-item, +.semi-portal-rtl .semi-descriptions-double-large .semi-descriptions-item { + padding-right: 0; + padding-left: 80px; +} + +.semi-divider { + margin: 1px 0px 1px 0px; + border-bottom: 1px solid var(--semi-color-border); + color: var(--semi-color-text-0); + box-sizing: border-box; +} +.semi-divider-dashed { + border-bottom-style: dashed; +} +.semi-divider-horizontal { + width: 100%; + display: flex; +} +.semi-divider-vertical { + border-bottom: 0; + display: inline-block; + margin: 0px 1px 0px 1px; + border-left: 1px solid var(--semi-color-border); + height: 20px; + vertical-align: middle; +} +.semi-divider-with-text { + display: flex; + border-bottom: 0; + white-space: nowrap; + align-items: center; +} +.semi-divider-with-text .semi-divider_inner-text { + font-weight: 600; + padding: 0px 8px 0px 8px; + display: inline-block; +} +.semi-divider-with-text::before, .semi-divider-with-text::after { + content: ""; + width: 50%; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-divider-with-text-left::before { + width: 40px; +} +.semi-divider-with-text-left::after { + flex: 1; +} +.semi-divider-with-text-right::before { + flex: 1; +} +.semi-divider-with-text-right::after { + width: 40px; +} + +.semi-divider-dashed::before, .semi-divider-dashed::after { + border-bottom: 1px dashed var(--semi-color-border); +} + +.semi-divider-vertical.semi-divider-dashed { + border-left: 1px dashed var(--semi-color-border); +} + +.semi-dropdown { + 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; +} +.semi-dropdown-wrapper { + overflow-y: auto; + box-shadow: var(--semi-shadow-elevated); + position: relative; + z-index: 1050; + border-radius: var(--semi-border-radius-medium); + background: var(--semi-color-bg-3); + backdrop-filter: none; + opacity: 0; +} +.semi-dropdown-wrapper-show { + opacity: 1; +} +.semi-dropdown-trigger { + display: inline-block; +} +.semi-dropdown-menu { + list-style: none; + padding: 4px 0; + margin: 0; +} +.semi-dropdown-title { + color: var(--semi-color-text-2); + padding-top: 8px; + padding-bottom: 4px; + padding-left: 16px; + padding-right: 16px; + 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; + cursor: default; +} +.semi-dropdown-title-withTick { + padding-left: 31px; +} +.semi-dropdown-item { + padding: 8px 16px; + color: var(--semi-color-text-0); + max-width: 280px; + display: flex; + align-items: center; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; + border-radius: 0px; +} +.semi-dropdown-item-hover { + background-color: var(--semi-color-fill-0); +} +.semi-dropdown-item:not(.semi-dropdown-item-active):hover { + background-color: var(--semi-color-fill-0); + cursor: pointer; +} +.semi-dropdown-item:not(.semi-dropdown-item-active):active { + background-color: var(--semi-color-fill-1); +} +.semi-dropdown-item:focus-visible { + background-color: var(--semi-color-fill-0); + outline: 0; +} +.semi-dropdown-item-icon { + display: inline-flex; + align-items: center; + margin-right: 8px; +} +.semi-dropdown-item-danger { + color: var(--semi-color-danger); +} +.semi-dropdown-item-secondary { + color: var(--semi-color-secondary); +} +.semi-dropdown-item-warning { + color: var(--semi-color-warning); +} +.semi-dropdown-item-tertiary { + color: var(--semi-color-tertiary); +} +.semi-dropdown-item-primary { + color: var(--semi-color-primary); +} +.semi-dropdown-item-withTick { + padding-left: 12px; +} +.semi-dropdown-item > .semi-icon { + flex-shrink: 0; + margin-right: 9px; + font-size: 12px; +} +.semi-dropdown-item-active { + font-weight: 600; +} +.semi-dropdown-item.semi-dropdown-item-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-dropdown-item.semi-dropdown-item-disabled:hover, .semi-dropdown-item.semi-dropdown-item-disabled:active { + cursor: not-allowed; + background-color: transparent; +} +.semi-dropdown-divider { + display: block; + height: 1px; + width: 100%; + min-width: 100%; + clear: both; + background: var(--semi-color-border); + margin: 4px 0; +} + +.semi-rtl .semi-dropdown-wrapper, +.semi-portal-rtl .semi-dropdown-wrapper { + direction: rtl; +} +.semi-rtl .semi-dropdown-title-withTick, +.semi-portal-rtl .semi-dropdown-title-withTick { + padding-left: 0; + padding-right: 31px; +} +.semi-rtl .semi-dropdown-item-withTick, +.semi-portal-rtl .semi-dropdown-item-withTick { + padding-left: auto; + padding-right: 12px; +} +.semi-rtl .semi-dropdown-item > .semi-icon, +.semi-portal-rtl .semi-dropdown-item > .semi-icon { + margin-right: 0; + margin-left: 9px; +} + +.semi-empty { + display: flex; +} +.semi-empty-image { + display: flex; + justify-content: center; + user-select: none; + -webkit-user-drag: none; + pointer-events: none; +} +.semi-empty-vertical { + align-items: center; + flex-direction: column; +} +.semi-empty-vertical .semi-empty-content { + margin-top: 24px; +} +.semi-empty-vertical .semi-empty-title, +.semi-empty-vertical .semi-empty-description { + text-align: center; +} +.semi-empty-horizontal .semi-empty-content { + margin-left: 32px; +} +.semi-empty-title.semi-typography { + display: block; + font-weight: 600; +} +.semi-empty-title + .semi-empty-description { + margin-top: 16px; +} +.semi-empty-description { + color: var(--semi-color-text-1); +} +.semi-empty-footer { + margin-top: 24px; +} + +.semi-rtl .semi-empty, +.semi-portal-rtl .semi-empty { + direction: rtl; +} +.semi-rtl .semi-empty-horizontal .semi-empty-content, +.semi-portal-rtl .semi-empty-horizontal .semi-empty-content { + margin-left: auto; + margin-right: 32px; +} + +.semi-feedback-emoji-container { + display: flex; + justify-content: center; + align-items: center; + column-gap: 24px; + align-self: stretch; + margin-top: 24px; + margin-bottom: 24px; +} +.semi-feedback-emoji-item { + user-select: none; + cursor: pointer; + font-family: Inter; + font-size: 36px; + line-height: 36px; + height: 36px; + font-style: normal; + filter: grayscale(100%); +} +.semi-feedback-emoji-item:hover, .semi-feedback-emoji-item-selected { + filter: none; +} +.semi-feedback-thank-text { + color: var(--semi-color-text-2); + text-align: center; + font-size: 14px; + font-weight: 400; + line-height: 20px; + margin-bottom: 0px; + margin-top: 24px; +} +.semi-feedback .semi-checkboxGroup-vertical { + row-gap: 16px; +} +.semi-feedback-footer { + display: flex; + justify-content: flex-end; + column-gap: 12px; +} +.semi-feedback .semi-modal { + width: 400px; +} +.semi-feedback.semi-feedback-text .semi-modal { + width: 400px; +} +.semi-feedback .semi-sidesheet-inner { + border-radius: 12px; +} +.semi-feedback.semi-sidesheet.semi-sidesheet-size-small { + width: 400px; +} +.semi-feedback.semi-sidesheet.semi-feedback-text { + width: 600px; +} +.semi-feedback.semi-sidesheet-bottom { + right: 20px; + left: auto; +} +.semi-feedback.semi-sidesheet-bottom .semi-sidesheet-inner-wrap { + bottom: 50px; +} +@keyframes semi-sidesheet-slideShow_bottom { + from { + transform: translateY(calc(100% + 50px)); + } + to { + transform: translateY(0); + } +} +@keyframes semi-sidesheet-slideHide_bottom { + from { + transform: translateY(0); + } + to { + transform: translateY(calc(100% + 50px)); + } +} +.semi-feedback.semi-sidesheet .semi-sidesheet-fixed.semi-feedback-bottom { + top: auto; +} +.semi-feedback.semi-sidesheet .semi-sidesheet-fixed.semi-feedback-bottom .semi-sidesheet-inner { + bottom: 50px; +} + +.semi-floatButton { + position: fixed; + bottom: 24px; + right: 24px; + z-index: 1000; + cursor: pointer; +} +.semi-floatButton-body { + background-color: var(--semi-color-fill-0); + box-shadow: var(--semi-shadow-elevated); + color: var(--semi-color-primary); + display: flex; + align-items: center; + justify-content: center; +} +.semi-floatButton-body:hover { + background-color: var(--semi-color-fill-1); +} +.semi-floatButton-body:active { + background-color: var(--semi-color-fill-2); +} +.semi-floatButton-disabled { + background: var(--semi-color-disabled-bg); + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-floatButton-disabled:hover { + background-color: var(--semi-color-disabled-bg); +} +.semi-floatButton-colorful { + background: var(--semi-color-ai-general); + color: var(--semi-color-white); +} +.semi-floatButton-colorful:hover { + background: var(--semi-color-ai-general-hover); +} +.semi-floatButton-colorful:active { + background: var(--semi-color-ai-general-active); +} +.semi-floatButton.semi-floatButton-square .semi-badge-dot, .semi-floatButton.semi-floatButton-square .semi-badge-count { + /* Calculation logic: + The center of the badge is the intersection of two lines. + - The first line is the connecting line between the center of the floatButton and the upper right corner of the enclosing rectangle. + - The second line is the border of the floatButton. + Can be calculated through radius， (√2 - 1）/√2 * R = 0.29 * R + */ + top: 2.32px; + inset-inline-end: 2.32px; +} +.semi-floatButton-default { + width: 32px; + height: 32px; +} +.semi-floatButton-default.semi-floatButton-round .semi-badge-dot, .semi-floatButton-default.semi-floatButton-round .semi-badge-count { + /* Calculation logic: + The center of the badge is the intersection of two lines. + - The first line is the connecting line between the center of the floatButton and the upper right corner of the enclosing rectangle. + - The second line is the border of the floatButton. + Can be calculated through radius (√2 - 1）/√2 * R = 0.29 * R，and R = 0.5 * width + */ + top: 4.64px; + inset-inline-end: 4.64px; +} +.semi-floatButton-small { + width: 24px; + height: 24px; +} +.semi-floatButton-small.semi-floatButton-round .semi-badge-dot, .semi-floatButton-small.semi-floatButton-round .semi-badge-count { + top: 3.48px; + inset-inline-end: 3.48px; +} +.semi-floatButton-large { + width: 40px; + height: 40px; +} +.semi-floatButton-large.semi-floatButton-round .semi-badge-dot, .semi-floatButton-large.semi-floatButton-round .semi-badge-count { + top: 5.8px; + inset-inline-end: 5.8px; +} +.semi-floatButton-square { + border-radius: 8px; +} +.semi-floatButton-round { + border-radius: var(--semi-border-radius-full); +} + +.semi-floatButtonGroup { + position: fixed; + border-radius: 8px; + bottom: 24px; + right: 24px; + z-index: 1000; + background: var(--semi-color-bg-0); + box-shadow: var(--semi-shadow-elevated); + display: inline-flex; + padding: 6px; + gap: 4px; +} +.semi-floatButtonGroup-item { + cursor: pointer; + display: flex; + padding: 6px 12px; + align-items: center; + column-gap: 8px; + border-radius: 4px; + color: var(--semi-color-text-0); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; +} +.semi-floatButtonGroup-item:hover { + background: var(--semi-color-fill-1); +} +.semi-floatButtonGroup-item:active { + background: var(--semi-color-fill-2); +} + +.semi-form .semi-form-field { + box-sizing: border-box; +} +.semi-form-horizontal { + display: flex; + flex-wrap: wrap; +} +.semi-form-horizontal .semi-form-field { + margin-left: 0; + padding-right: 16px; +} +.semi-form-horizontal .semi-form-field:last-child { + margin-right: 16px; +} +.semi-form-horizontal .semi-form-field-group { + padding-right: 16px; +} +.semi-form-horizontal .semi-row { + display: block; +} +.semi-form-vertical .semi-form-field { + margin: 0; + padding-top: 12px; + padding-bottom: 12px; + overflow: hidden; +} +.semi-form-vertical .semi-form-field .semi-form-col-right { + display: flex; + justify-content: flex-end; +} +.semi-form-vertical .semi-form-field .semi-form-col-left { + display: flex; + justify-content: flex-start; +} +.semi-form-vertical .semi-form-field-group .semi-form-col-right { + display: flex; + justify-content: flex-end; +} +.semi-form-vertical .semi-form-field-group .semi-form-col-left { + display: flex; + justify-content: flex-start; +} +.semi-form-field-label { + box-sizing: border-box; + font-weight: 600; + color: var(--semi-color-text-0); + margin-bottom: 4px; + margin-top: 0px; + padding-right: 16px; + display: inline-block; + vertical-align: middle; + 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; + flex-shrink: 0; +} +.semi-form-field-label-disabled { + color: var(--semi-color-disabled-text); +} +.semi-form-field-label-with-extra .semi-form-field-label-text { + display: inline-block; +} +.semi-form-field-label-with-extra .semi-form-field-label-extra { + display: flex; + align-items: center; + margin-left: 4px; +} +.semi-form-field-label-required .semi-form-field-label-text::after { + content: "*"; + margin-left: 4px; + color: var(--semi-color-danger); + font-weight: 600; +} +.semi-form-field-label-required-disabled { + color: var(--semi-color-danger); +} +.semi-form-field-label-optional-text { + color: var(--semi-color-tertiary); +} +.semi-form-field-label-left { + text-align: left; +} +.semi-form-field-label-right { + text-align: right; +} +.semi-form-field-error-message, .semi-form-field-help-text { + 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; + display: flex; + align-items: center; + margin-top: 4px; +} +.semi-form-field-error-message .semi-icon-alert_triangle, .semi-form-field-help-text .semi-icon-alert_triangle { + color: var(--semi-color-warning); +} +.semi-form-field-error-message { + color: var(--semi-color-danger); +} + +.semi-form-field[x-label-pos=top] .semi-form-field-label { + display: block; +} +.semi-form-field[x-label-pos=top] .semi-checkboxGroup, +.semi-form-field[x-label-pos=top] .semi-radioGroup { + padding-top: 4px; + padding-bottom: 4px; +} +.semi-form-field[x-label-pos=top] .semi-radioGroup-buttonRadio, +.semi-form-field[x-label-pos=top] .semi-radioGroup-horizontal-card, +.semi-form-field[x-label-pos=top] .semi-radioGroup-vertical-card { + padding-top: 0; + padding-bottom: 0; +} +.semi-form-field[x-label-pos=top] .semi-form-field-label-with-extra { + display: flex; + align-items: center; +} +.semi-form-field[x-label-pos=left] { + display: flex; +} +.semi-form-field[x-label-pos=left] .semi-form-field-label { + margin-bottom: 0; + margin-right: 0; + padding-top: 6px; + padding-bottom: 6px; +} +.semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra { + display: flex; + align-items: center; +} +.semi-form-field[x-label-pos=left] .semi-form-field-label-with-extra.semi-form-field-label-right { + justify-content: flex-end; +} +.semi-form-field[x-label-pos=left] .semi-checkboxGroup, +.semi-form-field[x-label-pos=left] .semi-radioGroup { + padding-top: 6px; + padding-bottom: 6px; +} +.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio, +.semi-form-field[x-label-pos=left] .semi-radioGroup-horizontal-card, +.semi-form-field[x-label-pos=left] .semi-radioGroup-vertical-card { + padding-top: 0; + padding-bottom: 0; +} +.semi-form-field[x-label-pos=left] .semi-switch, +.semi-form-field[x-label-pos=left] .semi-rating { + vertical-align: middle; + margin-top: 4px; + margin-bottom: 4px; +} +.semi-form-field[x-extra-pos=middle] .semi-form-field-extra { + margin-top: 4px; + margin-bottom: 4px; +} +.semi-form-field[x-extra-pos=bottom] .semi-form-field-extra { + margin-top: 4px; +} +.semi-form-field-main { + width: 100%; +} +.semi-form-field-validate-status-icon { + margin-right: 4px; + flex-shrink: 0; + align-self: flex-start; + position: relative; + top: 2px; +} +.semi-form-field-extra { + color: var(--semi-color-tertiary); +} +.semi-form-field-extra-string { + color: var(--semi-color-tertiary); + 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; +} + +.semi-form-vertical .semi-form-field-group { + margin-top: 0; + margin-bottom: 0; + padding-top: 12px; + padding-bottom: 12px; + overflow: hidden; +} +.semi-form-vertical .semi-form-field-group .semi-form-field { + margin-top: 0; + margin-bottom: 0; +} + +.semi-form-field-group[x-label-pos=left] { + display: flex; +} +.semi-form-field-group[x-label-pos=left] .semi-form-field-label { + margin-bottom: 0; + margin-right: 0; + padding-top: 6px; + padding-bottom: 6px; +} + +.semi-form-section { + width: 100%; + margin-top: 28px; +} +.semi-form-section-text { + margin-block-start: 0; + margin-block-end: 0; + 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; + font-weight: 600; + width: 100%; + padding-bottom: 8px; + padding-top: 0px; + border-bottom: 1px solid var(--semi-color-border); + margin-bottom: 4px; + margin-top: 0px; + color: var(--semi-color-text-0); +} +.semi-form-section:nth-of-type(1) { + margin-top: 0; +} + +.semi-rtl .semi-form, +.semi-portal-rtl .semi-form { + direction: rtl; +} +.semi-rtl .semi-form-horizontal .semi-form-field, +.semi-portal-rtl .semi-form-horizontal .semi-form-field { + margin-left: 0; + margin-right: 0; + padding-right: 0; + padding-left: 16px; +} +.semi-rtl .semi-form-horizontal .semi-form-field:last-child, +.semi-portal-rtl .semi-form-horizontal .semi-form-field:last-child { + margin-left: 16px; +} +.semi-rtl .semi-form-horizontal .semi-form-field-group, +.semi-portal-rtl .semi-form-horizontal .semi-form-field-group { + padding-right: 0; + padding-left: 16px; +} +.semi-rtl .semi-form-field-label, +.semi-portal-rtl .semi-form-field-label { + padding-right: 0; + padding-left: 16px; +} +.semi-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra, +.semi-portal-rtl .semi-form-field-label-with-extra .semi-form-field-label-extra { + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-form-field-label-required .semi-form-field-label-text::after, +.semi-portal-rtl .semi-form-field-label-required .semi-form-field-label-text::after { + content: "*"; + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-form-field-label-left, +.semi-portal-rtl .semi-form-field-label-left { + text-align: right; +} +.semi-rtl .semi-form-field-label-right, +.semi-portal-rtl .semi-form-field-label-right { + text-align: left; +} +.semi-rtl .semi-form-field, +.semi-portal-rtl .semi-form-field { + direction: rtl; +} +.semi-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label, +.semi-portal-rtl .semi-form-field[x-label-pos=left] .semi-form-field-label { + margin-right: 0; + margin-left: 0; +} +.semi-rtl .semi-form-field-validate-status-icon, +.semi-portal-rtl .semi-form-field-validate-status-icon { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-form-section, +.semi-portal-rtl .semi-form-section { + direction: rtl; +} + +.semi-row { + display: block; + box-sizing: border-box; + position: relative; + height: auto; + margin-right: 0; + margin-left: 0; + zoom: 1; +} +.semi-row::before, .semi-row::after { + display: table; + content: ""; +} +.semi-row::after { + clear: both; +} + +.semi-row-flex { + display: flex; + flex-flow: row wrap; +} +.semi-row-flex::before, .semi-row-flex::after { + display: flex; +} + +.semi-col-0, .semi-col-xs-0, .semi-col-sm-0, .semi-col-md-0, .semi-col-lg-0, .semi-col-xl-0, .semi-col-xxl-0 { + display: none; +} + +.semi-row-flex-start { + justify-content: flex-start; +} + +.semi-row-flex-center { + justify-content: center; +} + +.semi-row-flex-end { + justify-content: flex-end; +} + +.semi-row-flex-space-between { + justify-content: space-between; +} + +.semi-row-flex-space-around { + justify-content: space-around; +} + +.semi-row-flex-top { + align-items: flex-start; +} + +.semi-row-flex-middle { + align-items: center; +} + +.semi-row-flex-bottom { + align-items: flex-end; +} + +.semi-col { + position: relative; +} + +.semi-col-1, .semi-col-xs-1, .semi-col-sm-1, .semi-col-md-1, .semi-col-lg-1 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-2, .semi-col-xs-2, .semi-col-sm-2, .semi-col-md-2, .semi-col-lg-2 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-3, .semi-col-xs-3, .semi-col-sm-3, .semi-col-md-3, .semi-col-lg-3 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-4, .semi-col-xs-4, .semi-col-sm-4, .semi-col-md-4, .semi-col-lg-4 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-5, .semi-col-xs-5, .semi-col-sm-5, .semi-col-md-5, .semi-col-lg-5 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-6, .semi-col-xs-6, .semi-col-sm-6, .semi-col-md-6, .semi-col-lg-6 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-7, .semi-col-xs-7, .semi-col-sm-7, .semi-col-md-7, .semi-col-lg-7 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-8, .semi-col-xs-8, .semi-col-sm-8, .semi-col-md-8, .semi-col-lg-8 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-9, .semi-col-xs-9, .semi-col-sm-9, .semi-col-md-9, .semi-col-lg-9 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-10, .semi-col-xs-10, .semi-col-sm-10, .semi-col-md-10, .semi-col-lg-10 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-11, .semi-col-xs-11, .semi-col-sm-11, .semi-col-md-11, .semi-col-lg-11 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-12, .semi-col-xs-12, .semi-col-sm-12, .semi-col-md-12, .semi-col-lg-12 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-13, .semi-col-xs-13, .semi-col-sm-13, .semi-col-md-13, .semi-col-lg-13 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-14, .semi-col-xs-14, .semi-col-sm-14, .semi-col-md-14, .semi-col-lg-14 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-15, .semi-col-xs-15, .semi-col-sm-15, .semi-col-md-15, .semi-col-lg-15 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-16, .semi-col-xs-16, .semi-col-sm-16, .semi-col-md-16, .semi-col-lg-16 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-17, .semi-col-xs-17, .semi-col-sm-17, .semi-col-md-17, .semi-col-lg-17 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-18, .semi-col-xs-18, .semi-col-sm-18, .semi-col-md-18, .semi-col-lg-18 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-19, .semi-col-xs-19, .semi-col-sm-19, .semi-col-md-19, .semi-col-lg-19 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-20, .semi-col-xs-20, .semi-col-sm-20, .semi-col-md-20, .semi-col-lg-20 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-21, .semi-col-xs-21, .semi-col-sm-21, .semi-col-md-21, .semi-col-lg-21 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-22, .semi-col-xs-22, .semi-col-sm-22, .semi-col-md-22, .semi-col-lg-22 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-23, .semi-col-xs-23, .semi-col-sm-23, .semi-col-md-23, .semi-col-lg-23 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-24, .semi-col-xs-24, .semi-col-sm-24, .semi-col-md-24, .semi-col-lg-24 { + position: relative; + min-height: 1px; + padding-right: 0; + padding-left: 0; +} + +.semi-col-1 { + flex: 0 0 auto; + float: left; +} + +.semi-col-2 { + flex: 0 0 auto; + float: left; +} + +.semi-col-3 { + flex: 0 0 auto; + float: left; +} + +.semi-col-4 { + flex: 0 0 auto; + float: left; +} + +.semi-col-5 { + flex: 0 0 auto; + float: left; +} + +.semi-col-6 { + flex: 0 0 auto; + float: left; +} + +.semi-col-7 { + flex: 0 0 auto; + float: left; +} + +.semi-col-8 { + flex: 0 0 auto; + float: left; +} + +.semi-col-9 { + flex: 0 0 auto; + float: left; +} + +.semi-col-10 { + flex: 0 0 auto; + float: left; +} + +.semi-col-11 { + flex: 0 0 auto; + float: left; +} + +.semi-col-12 { + flex: 0 0 auto; + float: left; +} + +.semi-col-13 { + flex: 0 0 auto; + float: left; +} + +.semi-col-14 { + flex: 0 0 auto; + float: left; +} + +.semi-col-15 { + flex: 0 0 auto; + float: left; +} + +.semi-col-16 { + flex: 0 0 auto; + float: left; +} + +.semi-col-17 { + flex: 0 0 auto; + float: left; +} + +.semi-col-18 { + flex: 0 0 auto; + float: left; +} + +.semi-col-19 { + flex: 0 0 auto; + float: left; +} + +.semi-col-20 { + flex: 0 0 auto; + float: left; +} + +.semi-col-21 { + flex: 0 0 auto; + float: left; +} + +.semi-col-22 { + flex: 0 0 auto; + float: left; +} + +.semi-col-23 { + flex: 0 0 auto; + float: left; +} + +.semi-col-24 { + flex: 0 0 auto; + float: left; +} + +.semi-col-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; +} + +.semi-col-push-1 { + left: 4.1666666667%; +} + +.semi-col-pull-1 { + right: 4.1666666667%; +} + +.semi-col-offset-1 { + margin-left: 4.1666666667%; +} + +.semi-col-order-1 { + order: 1; +} + +.semi-col-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; +} + +.semi-col-push-2 { + left: 8.3333333333%; +} + +.semi-col-pull-2 { + right: 8.3333333333%; +} + +.semi-col-offset-2 { + margin-left: 8.3333333333%; +} + +.semi-col-order-2 { + order: 2; +} + +.semi-col-3 { + display: block; + box-sizing: border-box; + width: 12.5%; +} + +.semi-col-push-3 { + left: 12.5%; +} + +.semi-col-pull-3 { + right: 12.5%; +} + +.semi-col-offset-3 { + margin-left: 12.5%; +} + +.semi-col-order-3 { + order: 3; +} + +.semi-col-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; +} + +.semi-col-push-4 { + left: 16.6666666667%; +} + +.semi-col-pull-4 { + right: 16.6666666667%; +} + +.semi-col-offset-4 { + margin-left: 16.6666666667%; +} + +.semi-col-order-4 { + order: 4; +} + +.semi-col-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; +} + +.semi-col-push-5 { + left: 20.8333333333%; +} + +.semi-col-pull-5 { + right: 20.8333333333%; +} + +.semi-col-offset-5 { + margin-left: 20.8333333333%; +} + +.semi-col-order-5 { + order: 5; +} + +.semi-col-6 { + display: block; + box-sizing: border-box; + width: 25%; +} + +.semi-col-push-6 { + left: 25%; +} + +.semi-col-pull-6 { + right: 25%; +} + +.semi-col-offset-6 { + margin-left: 25%; +} + +.semi-col-order-6 { + order: 6; +} + +.semi-col-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; +} + +.semi-col-push-7 { + left: 29.1666666667%; +} + +.semi-col-pull-7 { + right: 29.1666666667%; +} + +.semi-col-offset-7 { + margin-left: 29.1666666667%; +} + +.semi-col-order-7 { + order: 7; +} + +.semi-col-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; +} + +.semi-col-push-8 { + left: 33.3333333333%; +} + +.semi-col-pull-8 { + right: 33.3333333333%; +} + +.semi-col-offset-8 { + margin-left: 33.3333333333%; +} + +.semi-col-order-8 { + order: 8; +} + +.semi-col-9 { + display: block; + box-sizing: border-box; + width: 37.5%; +} + +.semi-col-push-9 { + left: 37.5%; +} + +.semi-col-pull-9 { + right: 37.5%; +} + +.semi-col-offset-9 { + margin-left: 37.5%; +} + +.semi-col-order-9 { + order: 9; +} + +.semi-col-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; +} + +.semi-col-push-10 { + left: 41.6666666667%; +} + +.semi-col-pull-10 { + right: 41.6666666667%; +} + +.semi-col-offset-10 { + margin-left: 41.6666666667%; +} + +.semi-col-order-10 { + order: 10; +} + +.semi-col-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; +} + +.semi-col-push-11 { + left: 45.8333333333%; +} + +.semi-col-pull-11 { + right: 45.8333333333%; +} + +.semi-col-offset-11 { + margin-left: 45.8333333333%; +} + +.semi-col-order-11 { + order: 11; +} + +.semi-col-12 { + display: block; + box-sizing: border-box; + width: 50%; +} + +.semi-col-push-12 { + left: 50%; +} + +.semi-col-pull-12 { + right: 50%; +} + +.semi-col-offset-12 { + margin-left: 50%; +} + +.semi-col-order-12 { + order: 12; +} + +.semi-col-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; +} + +.semi-col-push-13 { + left: 54.1666666667%; +} + +.semi-col-pull-13 { + right: 54.1666666667%; +} + +.semi-col-offset-13 { + margin-left: 54.1666666667%; +} + +.semi-col-order-13 { + order: 13; +} + +.semi-col-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; +} + +.semi-col-push-14 { + left: 58.3333333333%; +} + +.semi-col-pull-14 { + right: 58.3333333333%; +} + +.semi-col-offset-14 { + margin-left: 58.3333333333%; +} + +.semi-col-order-14 { + order: 14; +} + +.semi-col-15 { + display: block; + box-sizing: border-box; + width: 62.5%; +} + +.semi-col-push-15 { + left: 62.5%; +} + +.semi-col-pull-15 { + right: 62.5%; +} + +.semi-col-offset-15 { + margin-left: 62.5%; +} + +.semi-col-order-15 { + order: 15; +} + +.semi-col-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; +} + +.semi-col-push-16 { + left: 66.6666666667%; +} + +.semi-col-pull-16 { + right: 66.6666666667%; +} + +.semi-col-offset-16 { + margin-left: 66.6666666667%; +} + +.semi-col-order-16 { + order: 16; +} + +.semi-col-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; +} + +.semi-col-push-17 { + left: 70.8333333333%; +} + +.semi-col-pull-17 { + right: 70.8333333333%; +} + +.semi-col-offset-17 { + margin-left: 70.8333333333%; +} + +.semi-col-order-17 { + order: 17; +} + +.semi-col-18 { + display: block; + box-sizing: border-box; + width: 75%; +} + +.semi-col-push-18 { + left: 75%; +} + +.semi-col-pull-18 { + right: 75%; +} + +.semi-col-offset-18 { + margin-left: 75%; +} + +.semi-col-order-18 { + order: 18; +} + +.semi-col-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; +} + +.semi-col-push-19 { + left: 79.1666666667%; +} + +.semi-col-pull-19 { + right: 79.1666666667%; +} + +.semi-col-offset-19 { + margin-left: 79.1666666667%; +} + +.semi-col-order-19 { + order: 19; +} + +.semi-col-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; +} + +.semi-col-push-20 { + left: 83.3333333333%; +} + +.semi-col-pull-20 { + right: 83.3333333333%; +} + +.semi-col-offset-20 { + margin-left: 83.3333333333%; +} + +.semi-col-order-20 { + order: 20; +} + +.semi-col-21 { + display: block; + box-sizing: border-box; + width: 87.5%; +} + +.semi-col-push-21 { + left: 87.5%; +} + +.semi-col-pull-21 { + right: 87.5%; +} + +.semi-col-offset-21 { + margin-left: 87.5%; +} + +.semi-col-order-21 { + order: 21; +} + +.semi-col-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; +} + +.semi-col-push-22 { + left: 91.6666666667%; +} + +.semi-col-pull-22 { + right: 91.6666666667%; +} + +.semi-col-offset-22 { + margin-left: 91.6666666667%; +} + +.semi-col-order-22 { + order: 22; +} + +.semi-col-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; +} + +.semi-col-push-23 { + left: 95.8333333333%; +} + +.semi-col-pull-23 { + right: 95.8333333333%; +} + +.semi-col-offset-23 { + margin-left: 95.8333333333%; +} + +.semi-col-order-23 { + order: 23; +} + +.semi-col-24 { + display: block; + box-sizing: border-box; + width: 100%; +} + +.semi-col-push-24 { + left: 100%; +} + +.semi-col-pull-24 { + right: 100%; +} + +.semi-col-offset-24 { + margin-left: 100%; +} + +.semi-col-order-24 { + order: 24; +} + +.semi-rtl .semi-col-1 { + float: right; +} + +.semi-rtl .semi-col-2 { + float: right; +} + +.semi-rtl .semi-col-3 { + float: right; +} + +.semi-rtl .semi-col-4 { + float: right; +} + +.semi-rtl .semi-col-5 { + float: right; +} + +.semi-rtl .semi-col-6 { + float: right; +} + +.semi-rtl .semi-col-7 { + float: right; +} + +.semi-rtl .semi-col-8 { + float: right; +} + +.semi-rtl .semi-col-9 { + float: right; +} + +.semi-rtl .semi-col-10 { + float: right; +} + +.semi-rtl .semi-col-11 { + float: right; +} + +.semi-rtl .semi-col-12 { + float: right; +} + +.semi-rtl .semi-col-13 { + float: right; +} + +.semi-rtl .semi-col-14 { + float: right; +} + +.semi-rtl .semi-col-15 { + float: right; +} + +.semi-rtl .semi-col-16 { + float: right; +} + +.semi-rtl .semi-col-17 { + float: right; +} + +.semi-rtl .semi-col-18 { + float: right; +} + +.semi-rtl .semi-col-19 { + float: right; +} + +.semi-rtl .semi-col-20 { + float: right; +} + +.semi-rtl .semi-col-21 { + float: right; +} + +.semi-rtl .semi-col-22 { + float: right; +} + +.semi-rtl .semi-col-23 { + float: right; +} + +.semi-rtl .semi-col-24 { + float: right; +} + +.semi-rtl .semi-col-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; +} + +.semi-rtl .semi-col-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; +} + +.semi-rtl .semi-col-offset-3 { + margin-left: auto; + margin-right: 12.5%; +} + +.semi-rtl .semi-col-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; +} + +.semi-rtl .semi-col-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; +} + +.semi-rtl .semi-col-offset-6 { + margin-left: auto; + margin-right: 25%; +} + +.semi-rtl .semi-col-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; +} + +.semi-rtl .semi-col-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; +} + +.semi-rtl .semi-col-offset-9 { + margin-left: auto; + margin-right: 37.5%; +} + +.semi-rtl .semi-col-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; +} + +.semi-rtl .semi-col-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; +} + +.semi-rtl .semi-col-offset-12 { + margin-left: auto; + margin-right: 50%; +} + +.semi-rtl .semi-col-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; +} + +.semi-rtl .semi-col-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; +} + +.semi-rtl .semi-col-offset-15 { + margin-left: auto; + margin-right: 62.5%; +} + +.semi-rtl .semi-col-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; +} + +.semi-rtl .semi-col-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; +} + +.semi-rtl .semi-col-offset-18 { + margin-left: auto; + margin-right: 75%; +} + +.semi-rtl .semi-col-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; +} + +.semi-rtl .semi-col-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; +} + +.semi-rtl .semi-col-offset-21 { + margin-left: auto; + margin-right: 87.5%; +} + +.semi-rtl .semi-col-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; +} + +.semi-rtl .semi-col-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; +} + +.semi-rtl .semi-col-offset-24 { + margin-left: auto; + margin-right: 100%; +} + +.semi-col-xs-1 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-2 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-3 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-4 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-5 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-6 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-7 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-8 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-9 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-10 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-11 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-12 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-13 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-14 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-15 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-16 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-17 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-18 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-19 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-20 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-21 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-22 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-23 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-24 { + flex: 0 0 auto; + float: left; +} + +.semi-col-xs-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; +} + +.semi-col-xs-push-1 { + left: 4.1666666667%; +} + +.semi-col-xs-pull-1 { + right: 4.1666666667%; +} + +.semi-col-xs-offset-1 { + margin-left: 4.1666666667%; +} + +.semi-col-xs-order-1 { + order: 1; +} + +.semi-col-xs-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; +} + +.semi-col-xs-push-2 { + left: 8.3333333333%; +} + +.semi-col-xs-pull-2 { + right: 8.3333333333%; +} + +.semi-col-xs-offset-2 { + margin-left: 8.3333333333%; +} + +.semi-col-xs-order-2 { + order: 2; +} + +.semi-col-xs-3 { + display: block; + box-sizing: border-box; + width: 12.5%; +} + +.semi-col-xs-push-3 { + left: 12.5%; +} + +.semi-col-xs-pull-3 { + right: 12.5%; +} + +.semi-col-xs-offset-3 { + margin-left: 12.5%; +} + +.semi-col-xs-order-3 { + order: 3; +} + +.semi-col-xs-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; +} + +.semi-col-xs-push-4 { + left: 16.6666666667%; +} + +.semi-col-xs-pull-4 { + right: 16.6666666667%; +} + +.semi-col-xs-offset-4 { + margin-left: 16.6666666667%; +} + +.semi-col-xs-order-4 { + order: 4; +} + +.semi-col-xs-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; +} + +.semi-col-xs-push-5 { + left: 20.8333333333%; +} + +.semi-col-xs-pull-5 { + right: 20.8333333333%; +} + +.semi-col-xs-offset-5 { + margin-left: 20.8333333333%; +} + +.semi-col-xs-order-5 { + order: 5; +} + +.semi-col-xs-6 { + display: block; + box-sizing: border-box; + width: 25%; +} + +.semi-col-xs-push-6 { + left: 25%; +} + +.semi-col-xs-pull-6 { + right: 25%; +} + +.semi-col-xs-offset-6 { + margin-left: 25%; +} + +.semi-col-xs-order-6 { + order: 6; +} + +.semi-col-xs-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; +} + +.semi-col-xs-push-7 { + left: 29.1666666667%; +} + +.semi-col-xs-pull-7 { + right: 29.1666666667%; +} + +.semi-col-xs-offset-7 { + margin-left: 29.1666666667%; +} + +.semi-col-xs-order-7 { + order: 7; +} + +.semi-col-xs-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; +} + +.semi-col-xs-push-8 { + left: 33.3333333333%; +} + +.semi-col-xs-pull-8 { + right: 33.3333333333%; +} + +.semi-col-xs-offset-8 { + margin-left: 33.3333333333%; +} + +.semi-col-xs-order-8 { + order: 8; +} + +.semi-col-xs-9 { + display: block; + box-sizing: border-box; + width: 37.5%; +} + +.semi-col-xs-push-9 { + left: 37.5%; +} + +.semi-col-xs-pull-9 { + right: 37.5%; +} + +.semi-col-xs-offset-9 { + margin-left: 37.5%; +} + +.semi-col-xs-order-9 { + order: 9; +} + +.semi-col-xs-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; +} + +.semi-col-xs-push-10 { + left: 41.6666666667%; +} + +.semi-col-xs-pull-10 { + right: 41.6666666667%; +} + +.semi-col-xs-offset-10 { + margin-left: 41.6666666667%; +} + +.semi-col-xs-order-10 { + order: 10; +} + +.semi-col-xs-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; +} + +.semi-col-xs-push-11 { + left: 45.8333333333%; +} + +.semi-col-xs-pull-11 { + right: 45.8333333333%; +} + +.semi-col-xs-offset-11 { + margin-left: 45.8333333333%; +} + +.semi-col-xs-order-11 { + order: 11; +} + +.semi-col-xs-12 { + display: block; + box-sizing: border-box; + width: 50%; +} + +.semi-col-xs-push-12 { + left: 50%; +} + +.semi-col-xs-pull-12 { + right: 50%; +} + +.semi-col-xs-offset-12 { + margin-left: 50%; +} + +.semi-col-xs-order-12 { + order: 12; +} + +.semi-col-xs-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; +} + +.semi-col-xs-push-13 { + left: 54.1666666667%; +} + +.semi-col-xs-pull-13 { + right: 54.1666666667%; +} + +.semi-col-xs-offset-13 { + margin-left: 54.1666666667%; +} + +.semi-col-xs-order-13 { + order: 13; +} + +.semi-col-xs-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; +} + +.semi-col-xs-push-14 { + left: 58.3333333333%; +} + +.semi-col-xs-pull-14 { + right: 58.3333333333%; +} + +.semi-col-xs-offset-14 { + margin-left: 58.3333333333%; +} + +.semi-col-xs-order-14 { + order: 14; +} + +.semi-col-xs-15 { + display: block; + box-sizing: border-box; + width: 62.5%; +} + +.semi-col-xs-push-15 { + left: 62.5%; +} + +.semi-col-xs-pull-15 { + right: 62.5%; +} + +.semi-col-xs-offset-15 { + margin-left: 62.5%; +} + +.semi-col-xs-order-15 { + order: 15; +} + +.semi-col-xs-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; +} + +.semi-col-xs-push-16 { + left: 66.6666666667%; +} + +.semi-col-xs-pull-16 { + right: 66.6666666667%; +} + +.semi-col-xs-offset-16 { + margin-left: 66.6666666667%; +} + +.semi-col-xs-order-16 { + order: 16; +} + +.semi-col-xs-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; +} + +.semi-col-xs-push-17 { + left: 70.8333333333%; +} + +.semi-col-xs-pull-17 { + right: 70.8333333333%; +} + +.semi-col-xs-offset-17 { + margin-left: 70.8333333333%; +} + +.semi-col-xs-order-17 { + order: 17; +} + +.semi-col-xs-18 { + display: block; + box-sizing: border-box; + width: 75%; +} + +.semi-col-xs-push-18 { + left: 75%; +} + +.semi-col-xs-pull-18 { + right: 75%; +} + +.semi-col-xs-offset-18 { + margin-left: 75%; +} + +.semi-col-xs-order-18 { + order: 18; +} + +.semi-col-xs-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; +} + +.semi-col-xs-push-19 { + left: 79.1666666667%; +} + +.semi-col-xs-pull-19 { + right: 79.1666666667%; +} + +.semi-col-xs-offset-19 { + margin-left: 79.1666666667%; +} + +.semi-col-xs-order-19 { + order: 19; +} + +.semi-col-xs-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; +} + +.semi-col-xs-push-20 { + left: 83.3333333333%; +} + +.semi-col-xs-pull-20 { + right: 83.3333333333%; +} + +.semi-col-xs-offset-20 { + margin-left: 83.3333333333%; +} + +.semi-col-xs-order-20 { + order: 20; +} + +.semi-col-xs-21 { + display: block; + box-sizing: border-box; + width: 87.5%; +} + +.semi-col-xs-push-21 { + left: 87.5%; +} + +.semi-col-xs-pull-21 { + right: 87.5%; +} + +.semi-col-xs-offset-21 { + margin-left: 87.5%; +} + +.semi-col-xs-order-21 { + order: 21; +} + +.semi-col-xs-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; +} + +.semi-col-xs-push-22 { + left: 91.6666666667%; +} + +.semi-col-xs-pull-22 { + right: 91.6666666667%; +} + +.semi-col-xs-offset-22 { + margin-left: 91.6666666667%; +} + +.semi-col-xs-order-22 { + order: 22; +} + +.semi-col-xs-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; +} + +.semi-col-xs-push-23 { + left: 95.8333333333%; +} + +.semi-col-xs-pull-23 { + right: 95.8333333333%; +} + +.semi-col-xs-offset-23 { + margin-left: 95.8333333333%; +} + +.semi-col-xs-order-23 { + order: 23; +} + +.semi-col-xs-24 { + display: block; + box-sizing: border-box; + width: 100%; +} + +.semi-col-xs-push-24 { + left: 100%; +} + +.semi-col-xs-pull-24 { + right: 100%; +} + +.semi-col-xs-offset-24 { + margin-left: 100%; +} + +.semi-col-xs-order-24 { + order: 24; +} + +.semi-rtl .semi-col-xs-1 { + float: right; +} + +.semi-rtl .semi-col-xs-2 { + float: right; +} + +.semi-rtl .semi-col-xs-3 { + float: right; +} + +.semi-rtl .semi-col-xs-4 { + float: right; +} + +.semi-rtl .semi-col-xs-5 { + float: right; +} + +.semi-rtl .semi-col-xs-6 { + float: right; +} + +.semi-rtl .semi-col-xs-7 { + float: right; +} + +.semi-rtl .semi-col-xs-8 { + float: right; +} + +.semi-rtl .semi-col-xs-9 { + float: right; +} + +.semi-rtl .semi-col-xs-10 { + float: right; +} + +.semi-rtl .semi-col-xs-11 { + float: right; +} + +.semi-rtl .semi-col-xs-12 { + float: right; +} + +.semi-rtl .semi-col-xs-13 { + float: right; +} + +.semi-rtl .semi-col-xs-14 { + float: right; +} + +.semi-rtl .semi-col-xs-15 { + float: right; +} + +.semi-rtl .semi-col-xs-16 { + float: right; +} + +.semi-rtl .semi-col-xs-17 { + float: right; +} + +.semi-rtl .semi-col-xs-18 { + float: right; +} + +.semi-rtl .semi-col-xs-19 { + float: right; +} + +.semi-rtl .semi-col-xs-20 { + float: right; +} + +.semi-rtl .semi-col-xs-21 { + float: right; +} + +.semi-rtl .semi-col-xs-22 { + float: right; +} + +.semi-rtl .semi-col-xs-23 { + float: right; +} + +.semi-rtl .semi-col-xs-24 { + float: right; +} + +.semi-rtl .semi-col-xs-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; +} + +.semi-rtl .semi-col-xs-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; +} + +.semi-rtl .semi-col-xs-offset-3 { + margin-left: auto; + margin-right: 12.5%; +} + +.semi-rtl .semi-col-xs-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; +} + +.semi-rtl .semi-col-xs-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; +} + +.semi-rtl .semi-col-xs-offset-6 { + margin-left: auto; + margin-right: 25%; +} + +.semi-rtl .semi-col-xs-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; +} + +.semi-rtl .semi-col-xs-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; +} + +.semi-rtl .semi-col-xs-offset-9 { + margin-left: auto; + margin-right: 37.5%; +} + +.semi-rtl .semi-col-xs-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; +} + +.semi-rtl .semi-col-xs-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; +} + +.semi-rtl .semi-col-xs-offset-12 { + margin-left: auto; + margin-right: 50%; +} + +.semi-rtl .semi-col-xs-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; +} + +.semi-rtl .semi-col-xs-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; +} + +.semi-rtl .semi-col-xs-offset-15 { + margin-left: auto; + margin-right: 62.5%; +} + +.semi-rtl .semi-col-xs-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; +} + +.semi-rtl .semi-col-xs-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; +} + +.semi-rtl .semi-col-xs-offset-18 { + margin-left: auto; + margin-right: 75%; +} + +.semi-rtl .semi-col-xs-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; +} + +.semi-rtl .semi-col-xs-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; +} + +.semi-rtl .semi-col-xs-offset-21 { + margin-left: auto; + margin-right: 87.5%; +} + +.semi-rtl .semi-col-xs-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; +} + +.semi-rtl .semi-col-xs-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; +} + +.semi-rtl .semi-col-xs-offset-24 { + margin-left: auto; + margin-right: 100%; +} + +@media (min-width: 576px) { + .semi-col-sm-1 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-2 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-3 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-4 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-5 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-6 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-7 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-8 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-9 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-10 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-11 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-12 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-13 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-14 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-15 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-16 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-17 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-18 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-19 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-20 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-21 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-22 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-23 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-24 { + flex: 0 0 auto; + float: left; + } + .semi-col-sm-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; + } + .semi-col-sm-push-1 { + left: 4.1666666667%; + } + .semi-col-sm-pull-1 { + right: 4.1666666667%; + } + .semi-col-sm-offset-1 { + margin-left: 4.1666666667%; + } + .semi-col-sm-order-1 { + order: 1; + } + .semi-col-sm-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; + } + .semi-col-sm-push-2 { + left: 8.3333333333%; + } + .semi-col-sm-pull-2 { + right: 8.3333333333%; + } + .semi-col-sm-offset-2 { + margin-left: 8.3333333333%; + } + .semi-col-sm-order-2 { + order: 2; + } + .semi-col-sm-3 { + display: block; + box-sizing: border-box; + width: 12.5%; + } + .semi-col-sm-push-3 { + left: 12.5%; + } + .semi-col-sm-pull-3 { + right: 12.5%; + } + .semi-col-sm-offset-3 { + margin-left: 12.5%; + } + .semi-col-sm-order-3 { + order: 3; + } + .semi-col-sm-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; + } + .semi-col-sm-push-4 { + left: 16.6666666667%; + } + .semi-col-sm-pull-4 { + right: 16.6666666667%; + } + .semi-col-sm-offset-4 { + margin-left: 16.6666666667%; + } + .semi-col-sm-order-4 { + order: 4; + } + .semi-col-sm-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; + } + .semi-col-sm-push-5 { + left: 20.8333333333%; + } + .semi-col-sm-pull-5 { + right: 20.8333333333%; + } + .semi-col-sm-offset-5 { + margin-left: 20.8333333333%; + } + .semi-col-sm-order-5 { + order: 5; + } + .semi-col-sm-6 { + display: block; + box-sizing: border-box; + width: 25%; + } + .semi-col-sm-push-6 { + left: 25%; + } + .semi-col-sm-pull-6 { + right: 25%; + } + .semi-col-sm-offset-6 { + margin-left: 25%; + } + .semi-col-sm-order-6 { + order: 6; + } + .semi-col-sm-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; + } + .semi-col-sm-push-7 { + left: 29.1666666667%; + } + .semi-col-sm-pull-7 { + right: 29.1666666667%; + } + .semi-col-sm-offset-7 { + margin-left: 29.1666666667%; + } + .semi-col-sm-order-7 { + order: 7; + } + .semi-col-sm-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; + } + .semi-col-sm-push-8 { + left: 33.3333333333%; + } + .semi-col-sm-pull-8 { + right: 33.3333333333%; + } + .semi-col-sm-offset-8 { + margin-left: 33.3333333333%; + } + .semi-col-sm-order-8 { + order: 8; + } + .semi-col-sm-9 { + display: block; + box-sizing: border-box; + width: 37.5%; + } + .semi-col-sm-push-9 { + left: 37.5%; + } + .semi-col-sm-pull-9 { + right: 37.5%; + } + .semi-col-sm-offset-9 { + margin-left: 37.5%; + } + .semi-col-sm-order-9 { + order: 9; + } + .semi-col-sm-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; + } + .semi-col-sm-push-10 { + left: 41.6666666667%; + } + .semi-col-sm-pull-10 { + right: 41.6666666667%; + } + .semi-col-sm-offset-10 { + margin-left: 41.6666666667%; + } + .semi-col-sm-order-10 { + order: 10; + } + .semi-col-sm-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; + } + .semi-col-sm-push-11 { + left: 45.8333333333%; + } + .semi-col-sm-pull-11 { + right: 45.8333333333%; + } + .semi-col-sm-offset-11 { + margin-left: 45.8333333333%; + } + .semi-col-sm-order-11 { + order: 11; + } + .semi-col-sm-12 { + display: block; + box-sizing: border-box; + width: 50%; + } + .semi-col-sm-push-12 { + left: 50%; + } + .semi-col-sm-pull-12 { + right: 50%; + } + .semi-col-sm-offset-12 { + margin-left: 50%; + } + .semi-col-sm-order-12 { + order: 12; + } + .semi-col-sm-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; + } + .semi-col-sm-push-13 { + left: 54.1666666667%; + } + .semi-col-sm-pull-13 { + right: 54.1666666667%; + } + .semi-col-sm-offset-13 { + margin-left: 54.1666666667%; + } + .semi-col-sm-order-13 { + order: 13; + } + .semi-col-sm-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; + } + .semi-col-sm-push-14 { + left: 58.3333333333%; + } + .semi-col-sm-pull-14 { + right: 58.3333333333%; + } + .semi-col-sm-offset-14 { + margin-left: 58.3333333333%; + } + .semi-col-sm-order-14 { + order: 14; + } + .semi-col-sm-15 { + display: block; + box-sizing: border-box; + width: 62.5%; + } + .semi-col-sm-push-15 { + left: 62.5%; + } + .semi-col-sm-pull-15 { + right: 62.5%; + } + .semi-col-sm-offset-15 { + margin-left: 62.5%; + } + .semi-col-sm-order-15 { + order: 15; + } + .semi-col-sm-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; + } + .semi-col-sm-push-16 { + left: 66.6666666667%; + } + .semi-col-sm-pull-16 { + right: 66.6666666667%; + } + .semi-col-sm-offset-16 { + margin-left: 66.6666666667%; + } + .semi-col-sm-order-16 { + order: 16; + } + .semi-col-sm-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; + } + .semi-col-sm-push-17 { + left: 70.8333333333%; + } + .semi-col-sm-pull-17 { + right: 70.8333333333%; + } + .semi-col-sm-offset-17 { + margin-left: 70.8333333333%; + } + .semi-col-sm-order-17 { + order: 17; + } + .semi-col-sm-18 { + display: block; + box-sizing: border-box; + width: 75%; + } + .semi-col-sm-push-18 { + left: 75%; + } + .semi-col-sm-pull-18 { + right: 75%; + } + .semi-col-sm-offset-18 { + margin-left: 75%; + } + .semi-col-sm-order-18 { + order: 18; + } + .semi-col-sm-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; + } + .semi-col-sm-push-19 { + left: 79.1666666667%; + } + .semi-col-sm-pull-19 { + right: 79.1666666667%; + } + .semi-col-sm-offset-19 { + margin-left: 79.1666666667%; + } + .semi-col-sm-order-19 { + order: 19; + } + .semi-col-sm-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; + } + .semi-col-sm-push-20 { + left: 83.3333333333%; + } + .semi-col-sm-pull-20 { + right: 83.3333333333%; + } + .semi-col-sm-offset-20 { + margin-left: 83.3333333333%; + } + .semi-col-sm-order-20 { + order: 20; + } + .semi-col-sm-21 { + display: block; + box-sizing: border-box; + width: 87.5%; + } + .semi-col-sm-push-21 { + left: 87.5%; + } + .semi-col-sm-pull-21 { + right: 87.5%; + } + .semi-col-sm-offset-21 { + margin-left: 87.5%; + } + .semi-col-sm-order-21 { + order: 21; + } + .semi-col-sm-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; + } + .semi-col-sm-push-22 { + left: 91.6666666667%; + } + .semi-col-sm-pull-22 { + right: 91.6666666667%; + } + .semi-col-sm-offset-22 { + margin-left: 91.6666666667%; + } + .semi-col-sm-order-22 { + order: 22; + } + .semi-col-sm-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; + } + .semi-col-sm-push-23 { + left: 95.8333333333%; + } + .semi-col-sm-pull-23 { + right: 95.8333333333%; + } + .semi-col-sm-offset-23 { + margin-left: 95.8333333333%; + } + .semi-col-sm-order-23 { + order: 23; + } + .semi-col-sm-24 { + display: block; + box-sizing: border-box; + width: 100%; + } + .semi-col-sm-push-24 { + left: 100%; + } + .semi-col-sm-pull-24 { + right: 100%; + } + .semi-col-sm-offset-24 { + margin-left: 100%; + } + .semi-col-sm-order-24 { + order: 24; + } + .semi-rtl .semi-col-sm-1 { + float: right; + } + .semi-rtl .semi-col-sm-2 { + float: right; + } + .semi-rtl .semi-col-sm-3 { + float: right; + } + .semi-rtl .semi-col-sm-4 { + float: right; + } + .semi-rtl .semi-col-sm-5 { + float: right; + } + .semi-rtl .semi-col-sm-6 { + float: right; + } + .semi-rtl .semi-col-sm-7 { + float: right; + } + .semi-rtl .semi-col-sm-8 { + float: right; + } + .semi-rtl .semi-col-sm-9 { + float: right; + } + .semi-rtl .semi-col-sm-10 { + float: right; + } + .semi-rtl .semi-col-sm-11 { + float: right; + } + .semi-rtl .semi-col-sm-12 { + float: right; + } + .semi-rtl .semi-col-sm-13 { + float: right; + } + .semi-rtl .semi-col-sm-14 { + float: right; + } + .semi-rtl .semi-col-sm-15 { + float: right; + } + .semi-rtl .semi-col-sm-16 { + float: right; + } + .semi-rtl .semi-col-sm-17 { + float: right; + } + .semi-rtl .semi-col-sm-18 { + float: right; + } + .semi-rtl .semi-col-sm-19 { + float: right; + } + .semi-rtl .semi-col-sm-20 { + float: right; + } + .semi-rtl .semi-col-sm-21 { + float: right; + } + .semi-rtl .semi-col-sm-22 { + float: right; + } + .semi-rtl .semi-col-sm-23 { + float: right; + } + .semi-rtl .semi-col-sm-24 { + float: right; + } + .semi-rtl .semi-col-sm-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; + } + .semi-rtl .semi-col-sm-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; + } + .semi-rtl .semi-col-sm-offset-3 { + margin-left: auto; + margin-right: 12.5%; + } + .semi-rtl .semi-col-sm-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; + } + .semi-rtl .semi-col-sm-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; + } + .semi-rtl .semi-col-sm-offset-6 { + margin-left: auto; + margin-right: 25%; + } + .semi-rtl .semi-col-sm-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; + } + .semi-rtl .semi-col-sm-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; + } + .semi-rtl .semi-col-sm-offset-9 { + margin-left: auto; + margin-right: 37.5%; + } + .semi-rtl .semi-col-sm-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; + } + .semi-rtl .semi-col-sm-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; + } + .semi-rtl .semi-col-sm-offset-12 { + margin-left: auto; + margin-right: 50%; + } + .semi-rtl .semi-col-sm-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; + } + .semi-rtl .semi-col-sm-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; + } + .semi-rtl .semi-col-sm-offset-15 { + margin-left: auto; + margin-right: 62.5%; + } + .semi-rtl .semi-col-sm-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; + } + .semi-rtl .semi-col-sm-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; + } + .semi-rtl .semi-col-sm-offset-18 { + margin-left: auto; + margin-right: 75%; + } + .semi-rtl .semi-col-sm-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; + } + .semi-rtl .semi-col-sm-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; + } + .semi-rtl .semi-col-sm-offset-21 { + margin-left: auto; + margin-right: 87.5%; + } + .semi-rtl .semi-col-sm-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; + } + .semi-rtl .semi-col-sm-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; + } + .semi-rtl .semi-col-sm-offset-24 { + margin-left: auto; + margin-right: 100%; + } +} +@media (min-width: 768px) { + .semi-col-md-1 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-2 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-3 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-4 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-5 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-6 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-7 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-8 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-9 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-10 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-11 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-12 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-13 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-14 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-15 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-16 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-17 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-18 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-19 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-20 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-21 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-22 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-23 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-24 { + flex: 0 0 auto; + float: left; + } + .semi-col-md-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; + } + .semi-col-md-push-1 { + left: 4.1666666667%; + } + .semi-col-md-pull-1 { + right: 4.1666666667%; + } + .semi-col-md-offset-1 { + margin-left: 4.1666666667%; + } + .semi-col-md-order-1 { + order: 1; + } + .semi-col-md-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; + } + .semi-col-md-push-2 { + left: 8.3333333333%; + } + .semi-col-md-pull-2 { + right: 8.3333333333%; + } + .semi-col-md-offset-2 { + margin-left: 8.3333333333%; + } + .semi-col-md-order-2 { + order: 2; + } + .semi-col-md-3 { + display: block; + box-sizing: border-box; + width: 12.5%; + } + .semi-col-md-push-3 { + left: 12.5%; + } + .semi-col-md-pull-3 { + right: 12.5%; + } + .semi-col-md-offset-3 { + margin-left: 12.5%; + } + .semi-col-md-order-3 { + order: 3; + } + .semi-col-md-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; + } + .semi-col-md-push-4 { + left: 16.6666666667%; + } + .semi-col-md-pull-4 { + right: 16.6666666667%; + } + .semi-col-md-offset-4 { + margin-left: 16.6666666667%; + } + .semi-col-md-order-4 { + order: 4; + } + .semi-col-md-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; + } + .semi-col-md-push-5 { + left: 20.8333333333%; + } + .semi-col-md-pull-5 { + right: 20.8333333333%; + } + .semi-col-md-offset-5 { + margin-left: 20.8333333333%; + } + .semi-col-md-order-5 { + order: 5; + } + .semi-col-md-6 { + display: block; + box-sizing: border-box; + width: 25%; + } + .semi-col-md-push-6 { + left: 25%; + } + .semi-col-md-pull-6 { + right: 25%; + } + .semi-col-md-offset-6 { + margin-left: 25%; + } + .semi-col-md-order-6 { + order: 6; + } + .semi-col-md-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; + } + .semi-col-md-push-7 { + left: 29.1666666667%; + } + .semi-col-md-pull-7 { + right: 29.1666666667%; + } + .semi-col-md-offset-7 { + margin-left: 29.1666666667%; + } + .semi-col-md-order-7 { + order: 7; + } + .semi-col-md-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; + } + .semi-col-md-push-8 { + left: 33.3333333333%; + } + .semi-col-md-pull-8 { + right: 33.3333333333%; + } + .semi-col-md-offset-8 { + margin-left: 33.3333333333%; + } + .semi-col-md-order-8 { + order: 8; + } + .semi-col-md-9 { + display: block; + box-sizing: border-box; + width: 37.5%; + } + .semi-col-md-push-9 { + left: 37.5%; + } + .semi-col-md-pull-9 { + right: 37.5%; + } + .semi-col-md-offset-9 { + margin-left: 37.5%; + } + .semi-col-md-order-9 { + order: 9; + } + .semi-col-md-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; + } + .semi-col-md-push-10 { + left: 41.6666666667%; + } + .semi-col-md-pull-10 { + right: 41.6666666667%; + } + .semi-col-md-offset-10 { + margin-left: 41.6666666667%; + } + .semi-col-md-order-10 { + order: 10; + } + .semi-col-md-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; + } + .semi-col-md-push-11 { + left: 45.8333333333%; + } + .semi-col-md-pull-11 { + right: 45.8333333333%; + } + .semi-col-md-offset-11 { + margin-left: 45.8333333333%; + } + .semi-col-md-order-11 { + order: 11; + } + .semi-col-md-12 { + display: block; + box-sizing: border-box; + width: 50%; + } + .semi-col-md-push-12 { + left: 50%; + } + .semi-col-md-pull-12 { + right: 50%; + } + .semi-col-md-offset-12 { + margin-left: 50%; + } + .semi-col-md-order-12 { + order: 12; + } + .semi-col-md-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; + } + .semi-col-md-push-13 { + left: 54.1666666667%; + } + .semi-col-md-pull-13 { + right: 54.1666666667%; + } + .semi-col-md-offset-13 { + margin-left: 54.1666666667%; + } + .semi-col-md-order-13 { + order: 13; + } + .semi-col-md-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; + } + .semi-col-md-push-14 { + left: 58.3333333333%; + } + .semi-col-md-pull-14 { + right: 58.3333333333%; + } + .semi-col-md-offset-14 { + margin-left: 58.3333333333%; + } + .semi-col-md-order-14 { + order: 14; + } + .semi-col-md-15 { + display: block; + box-sizing: border-box; + width: 62.5%; + } + .semi-col-md-push-15 { + left: 62.5%; + } + .semi-col-md-pull-15 { + right: 62.5%; + } + .semi-col-md-offset-15 { + margin-left: 62.5%; + } + .semi-col-md-order-15 { + order: 15; + } + .semi-col-md-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; + } + .semi-col-md-push-16 { + left: 66.6666666667%; + } + .semi-col-md-pull-16 { + right: 66.6666666667%; + } + .semi-col-md-offset-16 { + margin-left: 66.6666666667%; + } + .semi-col-md-order-16 { + order: 16; + } + .semi-col-md-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; + } + .semi-col-md-push-17 { + left: 70.8333333333%; + } + .semi-col-md-pull-17 { + right: 70.8333333333%; + } + .semi-col-md-offset-17 { + margin-left: 70.8333333333%; + } + .semi-col-md-order-17 { + order: 17; + } + .semi-col-md-18 { + display: block; + box-sizing: border-box; + width: 75%; + } + .semi-col-md-push-18 { + left: 75%; + } + .semi-col-md-pull-18 { + right: 75%; + } + .semi-col-md-offset-18 { + margin-left: 75%; + } + .semi-col-md-order-18 { + order: 18; + } + .semi-col-md-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; + } + .semi-col-md-push-19 { + left: 79.1666666667%; + } + .semi-col-md-pull-19 { + right: 79.1666666667%; + } + .semi-col-md-offset-19 { + margin-left: 79.1666666667%; + } + .semi-col-md-order-19 { + order: 19; + } + .semi-col-md-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; + } + .semi-col-md-push-20 { + left: 83.3333333333%; + } + .semi-col-md-pull-20 { + right: 83.3333333333%; + } + .semi-col-md-offset-20 { + margin-left: 83.3333333333%; + } + .semi-col-md-order-20 { + order: 20; + } + .semi-col-md-21 { + display: block; + box-sizing: border-box; + width: 87.5%; + } + .semi-col-md-push-21 { + left: 87.5%; + } + .semi-col-md-pull-21 { + right: 87.5%; + } + .semi-col-md-offset-21 { + margin-left: 87.5%; + } + .semi-col-md-order-21 { + order: 21; + } + .semi-col-md-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; + } + .semi-col-md-push-22 { + left: 91.6666666667%; + } + .semi-col-md-pull-22 { + right: 91.6666666667%; + } + .semi-col-md-offset-22 { + margin-left: 91.6666666667%; + } + .semi-col-md-order-22 { + order: 22; + } + .semi-col-md-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; + } + .semi-col-md-push-23 { + left: 95.8333333333%; + } + .semi-col-md-pull-23 { + right: 95.8333333333%; + } + .semi-col-md-offset-23 { + margin-left: 95.8333333333%; + } + .semi-col-md-order-23 { + order: 23; + } + .semi-col-md-24 { + display: block; + box-sizing: border-box; + width: 100%; + } + .semi-col-md-push-24 { + left: 100%; + } + .semi-col-md-pull-24 { + right: 100%; + } + .semi-col-md-offset-24 { + margin-left: 100%; + } + .semi-col-md-order-24 { + order: 24; + } + .semi-rtl .semi-col-md-1 { + float: right; + } + .semi-rtl .semi-col-md-2 { + float: right; + } + .semi-rtl .semi-col-md-3 { + float: right; + } + .semi-rtl .semi-col-md-4 { + float: right; + } + .semi-rtl .semi-col-md-5 { + float: right; + } + .semi-rtl .semi-col-md-6 { + float: right; + } + .semi-rtl .semi-col-md-7 { + float: right; + } + .semi-rtl .semi-col-md-8 { + float: right; + } + .semi-rtl .semi-col-md-9 { + float: right; + } + .semi-rtl .semi-col-md-10 { + float: right; + } + .semi-rtl .semi-col-md-11 { + float: right; + } + .semi-rtl .semi-col-md-12 { + float: right; + } + .semi-rtl .semi-col-md-13 { + float: right; + } + .semi-rtl .semi-col-md-14 { + float: right; + } + .semi-rtl .semi-col-md-15 { + float: right; + } + .semi-rtl .semi-col-md-16 { + float: right; + } + .semi-rtl .semi-col-md-17 { + float: right; + } + .semi-rtl .semi-col-md-18 { + float: right; + } + .semi-rtl .semi-col-md-19 { + float: right; + } + .semi-rtl .semi-col-md-20 { + float: right; + } + .semi-rtl .semi-col-md-21 { + float: right; + } + .semi-rtl .semi-col-md-22 { + float: right; + } + .semi-rtl .semi-col-md-23 { + float: right; + } + .semi-rtl .semi-col-md-24 { + float: right; + } + .semi-rtl .semi-col-md-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; + } + .semi-rtl .semi-col-md-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; + } + .semi-rtl .semi-col-md-offset-3 { + margin-left: auto; + margin-right: 12.5%; + } + .semi-rtl .semi-col-md-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; + } + .semi-rtl .semi-col-md-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; + } + .semi-rtl .semi-col-md-offset-6 { + margin-left: auto; + margin-right: 25%; + } + .semi-rtl .semi-col-md-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; + } + .semi-rtl .semi-col-md-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; + } + .semi-rtl .semi-col-md-offset-9 { + margin-left: auto; + margin-right: 37.5%; + } + .semi-rtl .semi-col-md-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; + } + .semi-rtl .semi-col-md-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; + } + .semi-rtl .semi-col-md-offset-12 { + margin-left: auto; + margin-right: 50%; + } + .semi-rtl .semi-col-md-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; + } + .semi-rtl .semi-col-md-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; + } + .semi-rtl .semi-col-md-offset-15 { + margin-left: auto; + margin-right: 62.5%; + } + .semi-rtl .semi-col-md-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; + } + .semi-rtl .semi-col-md-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; + } + .semi-rtl .semi-col-md-offset-18 { + margin-left: auto; + margin-right: 75%; + } + .semi-rtl .semi-col-md-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; + } + .semi-rtl .semi-col-md-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; + } + .semi-rtl .semi-col-md-offset-21 { + margin-left: auto; + margin-right: 87.5%; + } + .semi-rtl .semi-col-md-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; + } + .semi-rtl .semi-col-md-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; + } + .semi-rtl .semi-col-md-offset-24 { + margin-left: auto; + margin-right: 100%; + } +} +@media (min-width: 992px) { + .semi-col-lg-1 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-2 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-3 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-4 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-5 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-6 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-7 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-8 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-9 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-10 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-11 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-12 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-13 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-14 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-15 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-16 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-17 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-18 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-19 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-20 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-21 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-22 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-23 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-24 { + flex: 0 0 auto; + float: left; + } + .semi-col-lg-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; + } + .semi-col-lg-push-1 { + left: 4.1666666667%; + } + .semi-col-lg-pull-1 { + right: 4.1666666667%; + } + .semi-col-lg-offset-1 { + margin-left: 4.1666666667%; + } + .semi-col-lg-order-1 { + order: 1; + } + .semi-col-lg-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; + } + .semi-col-lg-push-2 { + left: 8.3333333333%; + } + .semi-col-lg-pull-2 { + right: 8.3333333333%; + } + .semi-col-lg-offset-2 { + margin-left: 8.3333333333%; + } + .semi-col-lg-order-2 { + order: 2; + } + .semi-col-lg-3 { + display: block; + box-sizing: border-box; + width: 12.5%; + } + .semi-col-lg-push-3 { + left: 12.5%; + } + .semi-col-lg-pull-3 { + right: 12.5%; + } + .semi-col-lg-offset-3 { + margin-left: 12.5%; + } + .semi-col-lg-order-3 { + order: 3; + } + .semi-col-lg-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; + } + .semi-col-lg-push-4 { + left: 16.6666666667%; + } + .semi-col-lg-pull-4 { + right: 16.6666666667%; + } + .semi-col-lg-offset-4 { + margin-left: 16.6666666667%; + } + .semi-col-lg-order-4 { + order: 4; + } + .semi-col-lg-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; + } + .semi-col-lg-push-5 { + left: 20.8333333333%; + } + .semi-col-lg-pull-5 { + right: 20.8333333333%; + } + .semi-col-lg-offset-5 { + margin-left: 20.8333333333%; + } + .semi-col-lg-order-5 { + order: 5; + } + .semi-col-lg-6 { + display: block; + box-sizing: border-box; + width: 25%; + } + .semi-col-lg-push-6 { + left: 25%; + } + .semi-col-lg-pull-6 { + right: 25%; + } + .semi-col-lg-offset-6 { + margin-left: 25%; + } + .semi-col-lg-order-6 { + order: 6; + } + .semi-col-lg-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; + } + .semi-col-lg-push-7 { + left: 29.1666666667%; + } + .semi-col-lg-pull-7 { + right: 29.1666666667%; + } + .semi-col-lg-offset-7 { + margin-left: 29.1666666667%; + } + .semi-col-lg-order-7 { + order: 7; + } + .semi-col-lg-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; + } + .semi-col-lg-push-8 { + left: 33.3333333333%; + } + .semi-col-lg-pull-8 { + right: 33.3333333333%; + } + .semi-col-lg-offset-8 { + margin-left: 33.3333333333%; + } + .semi-col-lg-order-8 { + order: 8; + } + .semi-col-lg-9 { + display: block; + box-sizing: border-box; + width: 37.5%; + } + .semi-col-lg-push-9 { + left: 37.5%; + } + .semi-col-lg-pull-9 { + right: 37.5%; + } + .semi-col-lg-offset-9 { + margin-left: 37.5%; + } + .semi-col-lg-order-9 { + order: 9; + } + .semi-col-lg-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; + } + .semi-col-lg-push-10 { + left: 41.6666666667%; + } + .semi-col-lg-pull-10 { + right: 41.6666666667%; + } + .semi-col-lg-offset-10 { + margin-left: 41.6666666667%; + } + .semi-col-lg-order-10 { + order: 10; + } + .semi-col-lg-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; + } + .semi-col-lg-push-11 { + left: 45.8333333333%; + } + .semi-col-lg-pull-11 { + right: 45.8333333333%; + } + .semi-col-lg-offset-11 { + margin-left: 45.8333333333%; + } + .semi-col-lg-order-11 { + order: 11; + } + .semi-col-lg-12 { + display: block; + box-sizing: border-box; + width: 50%; + } + .semi-col-lg-push-12 { + left: 50%; + } + .semi-col-lg-pull-12 { + right: 50%; + } + .semi-col-lg-offset-12 { + margin-left: 50%; + } + .semi-col-lg-order-12 { + order: 12; + } + .semi-col-lg-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; + } + .semi-col-lg-push-13 { + left: 54.1666666667%; + } + .semi-col-lg-pull-13 { + right: 54.1666666667%; + } + .semi-col-lg-offset-13 { + margin-left: 54.1666666667%; + } + .semi-col-lg-order-13 { + order: 13; + } + .semi-col-lg-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; + } + .semi-col-lg-push-14 { + left: 58.3333333333%; + } + .semi-col-lg-pull-14 { + right: 58.3333333333%; + } + .semi-col-lg-offset-14 { + margin-left: 58.3333333333%; + } + .semi-col-lg-order-14 { + order: 14; + } + .semi-col-lg-15 { + display: block; + box-sizing: border-box; + width: 62.5%; + } + .semi-col-lg-push-15 { + left: 62.5%; + } + .semi-col-lg-pull-15 { + right: 62.5%; + } + .semi-col-lg-offset-15 { + margin-left: 62.5%; + } + .semi-col-lg-order-15 { + order: 15; + } + .semi-col-lg-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; + } + .semi-col-lg-push-16 { + left: 66.6666666667%; + } + .semi-col-lg-pull-16 { + right: 66.6666666667%; + } + .semi-col-lg-offset-16 { + margin-left: 66.6666666667%; + } + .semi-col-lg-order-16 { + order: 16; + } + .semi-col-lg-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; + } + .semi-col-lg-push-17 { + left: 70.8333333333%; + } + .semi-col-lg-pull-17 { + right: 70.8333333333%; + } + .semi-col-lg-offset-17 { + margin-left: 70.8333333333%; + } + .semi-col-lg-order-17 { + order: 17; + } + .semi-col-lg-18 { + display: block; + box-sizing: border-box; + width: 75%; + } + .semi-col-lg-push-18 { + left: 75%; + } + .semi-col-lg-pull-18 { + right: 75%; + } + .semi-col-lg-offset-18 { + margin-left: 75%; + } + .semi-col-lg-order-18 { + order: 18; + } + .semi-col-lg-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; + } + .semi-col-lg-push-19 { + left: 79.1666666667%; + } + .semi-col-lg-pull-19 { + right: 79.1666666667%; + } + .semi-col-lg-offset-19 { + margin-left: 79.1666666667%; + } + .semi-col-lg-order-19 { + order: 19; + } + .semi-col-lg-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; + } + .semi-col-lg-push-20 { + left: 83.3333333333%; + } + .semi-col-lg-pull-20 { + right: 83.3333333333%; + } + .semi-col-lg-offset-20 { + margin-left: 83.3333333333%; + } + .semi-col-lg-order-20 { + order: 20; + } + .semi-col-lg-21 { + display: block; + box-sizing: border-box; + width: 87.5%; + } + .semi-col-lg-push-21 { + left: 87.5%; + } + .semi-col-lg-pull-21 { + right: 87.5%; + } + .semi-col-lg-offset-21 { + margin-left: 87.5%; + } + .semi-col-lg-order-21 { + order: 21; + } + .semi-col-lg-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; + } + .semi-col-lg-push-22 { + left: 91.6666666667%; + } + .semi-col-lg-pull-22 { + right: 91.6666666667%; + } + .semi-col-lg-offset-22 { + margin-left: 91.6666666667%; + } + .semi-col-lg-order-22 { + order: 22; + } + .semi-col-lg-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; + } + .semi-col-lg-push-23 { + left: 95.8333333333%; + } + .semi-col-lg-pull-23 { + right: 95.8333333333%; + } + .semi-col-lg-offset-23 { + margin-left: 95.8333333333%; + } + .semi-col-lg-order-23 { + order: 23; + } + .semi-col-lg-24 { + display: block; + box-sizing: border-box; + width: 100%; + } + .semi-col-lg-push-24 { + left: 100%; + } + .semi-col-lg-pull-24 { + right: 100%; + } + .semi-col-lg-offset-24 { + margin-left: 100%; + } + .semi-col-lg-order-24 { + order: 24; + } + .semi-rtl .semi-col-lg-1 { + float: right; + } + .semi-rtl .semi-col-lg-2 { + float: right; + } + .semi-rtl .semi-col-lg-3 { + float: right; + } + .semi-rtl .semi-col-lg-4 { + float: right; + } + .semi-rtl .semi-col-lg-5 { + float: right; + } + .semi-rtl .semi-col-lg-6 { + float: right; + } + .semi-rtl .semi-col-lg-7 { + float: right; + } + .semi-rtl .semi-col-lg-8 { + float: right; + } + .semi-rtl .semi-col-lg-9 { + float: right; + } + .semi-rtl .semi-col-lg-10 { + float: right; + } + .semi-rtl .semi-col-lg-11 { + float: right; + } + .semi-rtl .semi-col-lg-12 { + float: right; + } + .semi-rtl .semi-col-lg-13 { + float: right; + } + .semi-rtl .semi-col-lg-14 { + float: right; + } + .semi-rtl .semi-col-lg-15 { + float: right; + } + .semi-rtl .semi-col-lg-16 { + float: right; + } + .semi-rtl .semi-col-lg-17 { + float: right; + } + .semi-rtl .semi-col-lg-18 { + float: right; + } + .semi-rtl .semi-col-lg-19 { + float: right; + } + .semi-rtl .semi-col-lg-20 { + float: right; + } + .semi-rtl .semi-col-lg-21 { + float: right; + } + .semi-rtl .semi-col-lg-22 { + float: right; + } + .semi-rtl .semi-col-lg-23 { + float: right; + } + .semi-rtl .semi-col-lg-24 { + float: right; + } + .semi-rtl .semi-col-lg-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; + } + .semi-rtl .semi-col-lg-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; + } + .semi-rtl .semi-col-lg-offset-3 { + margin-left: auto; + margin-right: 12.5%; + } + .semi-rtl .semi-col-lg-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; + } + .semi-rtl .semi-col-lg-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; + } + .semi-rtl .semi-col-lg-offset-6 { + margin-left: auto; + margin-right: 25%; + } + .semi-rtl .semi-col-lg-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; + } + .semi-rtl .semi-col-lg-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; + } + .semi-rtl .semi-col-lg-offset-9 { + margin-left: auto; + margin-right: 37.5%; + } + .semi-rtl .semi-col-lg-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; + } + .semi-rtl .semi-col-lg-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; + } + .semi-rtl .semi-col-lg-offset-12 { + margin-left: auto; + margin-right: 50%; + } + .semi-rtl .semi-col-lg-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; + } + .semi-rtl .semi-col-lg-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; + } + .semi-rtl .semi-col-lg-offset-15 { + margin-left: auto; + margin-right: 62.5%; + } + .semi-rtl .semi-col-lg-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; + } + .semi-rtl .semi-col-lg-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; + } + .semi-rtl .semi-col-lg-offset-18 { + margin-left: auto; + margin-right: 75%; + } + .semi-rtl .semi-col-lg-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; + } + .semi-rtl .semi-col-lg-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; + } + .semi-rtl .semi-col-lg-offset-21 { + margin-left: auto; + margin-right: 87.5%; + } + .semi-rtl .semi-col-lg-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; + } + .semi-rtl .semi-col-lg-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; + } + .semi-rtl .semi-col-lg-offset-24 { + margin-left: auto; + margin-right: 100%; + } +} +@media (min-width: 1200px) { + .semi-col-xl-1 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-2 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-3 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-4 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-5 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-6 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-7 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-8 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-9 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-10 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-11 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-12 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-13 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-14 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-15 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-16 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-17 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-18 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-19 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-20 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-21 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-22 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-23 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-24 { + flex: 0 0 auto; + float: left; + } + .semi-col-xl-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; + } + .semi-col-xl-push-1 { + left: 4.1666666667%; + } + .semi-col-xl-pull-1 { + right: 4.1666666667%; + } + .semi-col-xl-offset-1 { + margin-left: 4.1666666667%; + } + .semi-col-xl-order-1 { + order: 1; + } + .semi-col-xl-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; + } + .semi-col-xl-push-2 { + left: 8.3333333333%; + } + .semi-col-xl-pull-2 { + right: 8.3333333333%; + } + .semi-col-xl-offset-2 { + margin-left: 8.3333333333%; + } + .semi-col-xl-order-2 { + order: 2; + } + .semi-col-xl-3 { + display: block; + box-sizing: border-box; + width: 12.5%; + } + .semi-col-xl-push-3 { + left: 12.5%; + } + .semi-col-xl-pull-3 { + right: 12.5%; + } + .semi-col-xl-offset-3 { + margin-left: 12.5%; + } + .semi-col-xl-order-3 { + order: 3; + } + .semi-col-xl-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; + } + .semi-col-xl-push-4 { + left: 16.6666666667%; + } + .semi-col-xl-pull-4 { + right: 16.6666666667%; + } + .semi-col-xl-offset-4 { + margin-left: 16.6666666667%; + } + .semi-col-xl-order-4 { + order: 4; + } + .semi-col-xl-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; + } + .semi-col-xl-push-5 { + left: 20.8333333333%; + } + .semi-col-xl-pull-5 { + right: 20.8333333333%; + } + .semi-col-xl-offset-5 { + margin-left: 20.8333333333%; + } + .semi-col-xl-order-5 { + order: 5; + } + .semi-col-xl-6 { + display: block; + box-sizing: border-box; + width: 25%; + } + .semi-col-xl-push-6 { + left: 25%; + } + .semi-col-xl-pull-6 { + right: 25%; + } + .semi-col-xl-offset-6 { + margin-left: 25%; + } + .semi-col-xl-order-6 { + order: 6; + } + .semi-col-xl-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; + } + .semi-col-xl-push-7 { + left: 29.1666666667%; + } + .semi-col-xl-pull-7 { + right: 29.1666666667%; + } + .semi-col-xl-offset-7 { + margin-left: 29.1666666667%; + } + .semi-col-xl-order-7 { + order: 7; + } + .semi-col-xl-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; + } + .semi-col-xl-push-8 { + left: 33.3333333333%; + } + .semi-col-xl-pull-8 { + right: 33.3333333333%; + } + .semi-col-xl-offset-8 { + margin-left: 33.3333333333%; + } + .semi-col-xl-order-8 { + order: 8; + } + .semi-col-xl-9 { + display: block; + box-sizing: border-box; + width: 37.5%; + } + .semi-col-xl-push-9 { + left: 37.5%; + } + .semi-col-xl-pull-9 { + right: 37.5%; + } + .semi-col-xl-offset-9 { + margin-left: 37.5%; + } + .semi-col-xl-order-9 { + order: 9; + } + .semi-col-xl-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; + } + .semi-col-xl-push-10 { + left: 41.6666666667%; + } + .semi-col-xl-pull-10 { + right: 41.6666666667%; + } + .semi-col-xl-offset-10 { + margin-left: 41.6666666667%; + } + .semi-col-xl-order-10 { + order: 10; + } + .semi-col-xl-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; + } + .semi-col-xl-push-11 { + left: 45.8333333333%; + } + .semi-col-xl-pull-11 { + right: 45.8333333333%; + } + .semi-col-xl-offset-11 { + margin-left: 45.8333333333%; + } + .semi-col-xl-order-11 { + order: 11; + } + .semi-col-xl-12 { + display: block; + box-sizing: border-box; + width: 50%; + } + .semi-col-xl-push-12 { + left: 50%; + } + .semi-col-xl-pull-12 { + right: 50%; + } + .semi-col-xl-offset-12 { + margin-left: 50%; + } + .semi-col-xl-order-12 { + order: 12; + } + .semi-col-xl-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; + } + .semi-col-xl-push-13 { + left: 54.1666666667%; + } + .semi-col-xl-pull-13 { + right: 54.1666666667%; + } + .semi-col-xl-offset-13 { + margin-left: 54.1666666667%; + } + .semi-col-xl-order-13 { + order: 13; + } + .semi-col-xl-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; + } + .semi-col-xl-push-14 { + left: 58.3333333333%; + } + .semi-col-xl-pull-14 { + right: 58.3333333333%; + } + .semi-col-xl-offset-14 { + margin-left: 58.3333333333%; + } + .semi-col-xl-order-14 { + order: 14; + } + .semi-col-xl-15 { + display: block; + box-sizing: border-box; + width: 62.5%; + } + .semi-col-xl-push-15 { + left: 62.5%; + } + .semi-col-xl-pull-15 { + right: 62.5%; + } + .semi-col-xl-offset-15 { + margin-left: 62.5%; + } + .semi-col-xl-order-15 { + order: 15; + } + .semi-col-xl-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; + } + .semi-col-xl-push-16 { + left: 66.6666666667%; + } + .semi-col-xl-pull-16 { + right: 66.6666666667%; + } + .semi-col-xl-offset-16 { + margin-left: 66.6666666667%; + } + .semi-col-xl-order-16 { + order: 16; + } + .semi-col-xl-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; + } + .semi-col-xl-push-17 { + left: 70.8333333333%; + } + .semi-col-xl-pull-17 { + right: 70.8333333333%; + } + .semi-col-xl-offset-17 { + margin-left: 70.8333333333%; + } + .semi-col-xl-order-17 { + order: 17; + } + .semi-col-xl-18 { + display: block; + box-sizing: border-box; + width: 75%; + } + .semi-col-xl-push-18 { + left: 75%; + } + .semi-col-xl-pull-18 { + right: 75%; + } + .semi-col-xl-offset-18 { + margin-left: 75%; + } + .semi-col-xl-order-18 { + order: 18; + } + .semi-col-xl-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; + } + .semi-col-xl-push-19 { + left: 79.1666666667%; + } + .semi-col-xl-pull-19 { + right: 79.1666666667%; + } + .semi-col-xl-offset-19 { + margin-left: 79.1666666667%; + } + .semi-col-xl-order-19 { + order: 19; + } + .semi-col-xl-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; + } + .semi-col-xl-push-20 { + left: 83.3333333333%; + } + .semi-col-xl-pull-20 { + right: 83.3333333333%; + } + .semi-col-xl-offset-20 { + margin-left: 83.3333333333%; + } + .semi-col-xl-order-20 { + order: 20; + } + .semi-col-xl-21 { + display: block; + box-sizing: border-box; + width: 87.5%; + } + .semi-col-xl-push-21 { + left: 87.5%; + } + .semi-col-xl-pull-21 { + right: 87.5%; + } + .semi-col-xl-offset-21 { + margin-left: 87.5%; + } + .semi-col-xl-order-21 { + order: 21; + } + .semi-col-xl-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; + } + .semi-col-xl-push-22 { + left: 91.6666666667%; + } + .semi-col-xl-pull-22 { + right: 91.6666666667%; + } + .semi-col-xl-offset-22 { + margin-left: 91.6666666667%; + } + .semi-col-xl-order-22 { + order: 22; + } + .semi-col-xl-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; + } + .semi-col-xl-push-23 { + left: 95.8333333333%; + } + .semi-col-xl-pull-23 { + right: 95.8333333333%; + } + .semi-col-xl-offset-23 { + margin-left: 95.8333333333%; + } + .semi-col-xl-order-23 { + order: 23; + } + .semi-col-xl-24 { + display: block; + box-sizing: border-box; + width: 100%; + } + .semi-col-xl-push-24 { + left: 100%; + } + .semi-col-xl-pull-24 { + right: 100%; + } + .semi-col-xl-offset-24 { + margin-left: 100%; + } + .semi-col-xl-order-24 { + order: 24; + } + .semi-rtl .semi-col-xl-1 { + float: right; + } + .semi-rtl .semi-col-xl-2 { + float: right; + } + .semi-rtl .semi-col-xl-3 { + float: right; + } + .semi-rtl .semi-col-xl-4 { + float: right; + } + .semi-rtl .semi-col-xl-5 { + float: right; + } + .semi-rtl .semi-col-xl-6 { + float: right; + } + .semi-rtl .semi-col-xl-7 { + float: right; + } + .semi-rtl .semi-col-xl-8 { + float: right; + } + .semi-rtl .semi-col-xl-9 { + float: right; + } + .semi-rtl .semi-col-xl-10 { + float: right; + } + .semi-rtl .semi-col-xl-11 { + float: right; + } + .semi-rtl .semi-col-xl-12 { + float: right; + } + .semi-rtl .semi-col-xl-13 { + float: right; + } + .semi-rtl .semi-col-xl-14 { + float: right; + } + .semi-rtl .semi-col-xl-15 { + float: right; + } + .semi-rtl .semi-col-xl-16 { + float: right; + } + .semi-rtl .semi-col-xl-17 { + float: right; + } + .semi-rtl .semi-col-xl-18 { + float: right; + } + .semi-rtl .semi-col-xl-19 { + float: right; + } + .semi-rtl .semi-col-xl-20 { + float: right; + } + .semi-rtl .semi-col-xl-21 { + float: right; + } + .semi-rtl .semi-col-xl-22 { + float: right; + } + .semi-rtl .semi-col-xl-23 { + float: right; + } + .semi-rtl .semi-col-xl-24 { + float: right; + } + .semi-rtl .semi-col-xl-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; + } + .semi-rtl .semi-col-xl-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; + } + .semi-rtl .semi-col-xl-offset-3 { + margin-left: auto; + margin-right: 12.5%; + } + .semi-rtl .semi-col-xl-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; + } + .semi-rtl .semi-col-xl-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; + } + .semi-rtl .semi-col-xl-offset-6 { + margin-left: auto; + margin-right: 25%; + } + .semi-rtl .semi-col-xl-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; + } + .semi-rtl .semi-col-xl-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; + } + .semi-rtl .semi-col-xl-offset-9 { + margin-left: auto; + margin-right: 37.5%; + } + .semi-rtl .semi-col-xl-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; + } + .semi-rtl .semi-col-xl-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; + } + .semi-rtl .semi-col-xl-offset-12 { + margin-left: auto; + margin-right: 50%; + } + .semi-rtl .semi-col-xl-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; + } + .semi-rtl .semi-col-xl-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; + } + .semi-rtl .semi-col-xl-offset-15 { + margin-left: auto; + margin-right: 62.5%; + } + .semi-rtl .semi-col-xl-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; + } + .semi-rtl .semi-col-xl-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; + } + .semi-rtl .semi-col-xl-offset-18 { + margin-left: auto; + margin-right: 75%; + } + .semi-rtl .semi-col-xl-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; + } + .semi-rtl .semi-col-xl-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; + } + .semi-rtl .semi-col-xl-offset-21 { + margin-left: auto; + margin-right: 87.5%; + } + .semi-rtl .semi-col-xl-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; + } + .semi-rtl .semi-col-xl-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; + } + .semi-rtl .semi-col-xl-offset-24 { + margin-left: auto; + margin-right: 100%; + } +} +@media (min-width: 1600px) { + .semi-col-xxl-1 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-2 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-3 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-4 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-5 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-6 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-7 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-8 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-9 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-10 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-11 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-12 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-13 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-14 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-15 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-16 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-17 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-18 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-19 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-20 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-21 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-22 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-23 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-24 { + flex: 0 0 auto; + float: left; + } + .semi-col-xxl-1 { + display: block; + box-sizing: border-box; + width: 4.1666666667%; + } + .semi-col-xxl-push-1 { + left: 4.1666666667%; + } + .semi-col-xxl-pull-1 { + right: 4.1666666667%; + } + .semi-col-xxl-offset-1 { + margin-left: 4.1666666667%; + } + .semi-col-xxl-order-1 { + order: 1; + } + .semi-col-xxl-2 { + display: block; + box-sizing: border-box; + width: 8.3333333333%; + } + .semi-col-xxl-push-2 { + left: 8.3333333333%; + } + .semi-col-xxl-pull-2 { + right: 8.3333333333%; + } + .semi-col-xxl-offset-2 { + margin-left: 8.3333333333%; + } + .semi-col-xxl-order-2 { + order: 2; + } + .semi-col-xxl-3 { + display: block; + box-sizing: border-box; + width: 12.5%; + } + .semi-col-xxl-push-3 { + left: 12.5%; + } + .semi-col-xxl-pull-3 { + right: 12.5%; + } + .semi-col-xxl-offset-3 { + margin-left: 12.5%; + } + .semi-col-xxl-order-3 { + order: 3; + } + .semi-col-xxl-4 { + display: block; + box-sizing: border-box; + width: 16.6666666667%; + } + .semi-col-xxl-push-4 { + left: 16.6666666667%; + } + .semi-col-xxl-pull-4 { + right: 16.6666666667%; + } + .semi-col-xxl-offset-4 { + margin-left: 16.6666666667%; + } + .semi-col-xxl-order-4 { + order: 4; + } + .semi-col-xxl-5 { + display: block; + box-sizing: border-box; + width: 20.8333333333%; + } + .semi-col-xxl-push-5 { + left: 20.8333333333%; + } + .semi-col-xxl-pull-5 { + right: 20.8333333333%; + } + .semi-col-xxl-offset-5 { + margin-left: 20.8333333333%; + } + .semi-col-xxl-order-5 { + order: 5; + } + .semi-col-xxl-6 { + display: block; + box-sizing: border-box; + width: 25%; + } + .semi-col-xxl-push-6 { + left: 25%; + } + .semi-col-xxl-pull-6 { + right: 25%; + } + .semi-col-xxl-offset-6 { + margin-left: 25%; + } + .semi-col-xxl-order-6 { + order: 6; + } + .semi-col-xxl-7 { + display: block; + box-sizing: border-box; + width: 29.1666666667%; + } + .semi-col-xxl-push-7 { + left: 29.1666666667%; + } + .semi-col-xxl-pull-7 { + right: 29.1666666667%; + } + .semi-col-xxl-offset-7 { + margin-left: 29.1666666667%; + } + .semi-col-xxl-order-7 { + order: 7; + } + .semi-col-xxl-8 { + display: block; + box-sizing: border-box; + width: 33.3333333333%; + } + .semi-col-xxl-push-8 { + left: 33.3333333333%; + } + .semi-col-xxl-pull-8 { + right: 33.3333333333%; + } + .semi-col-xxl-offset-8 { + margin-left: 33.3333333333%; + } + .semi-col-xxl-order-8 { + order: 8; + } + .semi-col-xxl-9 { + display: block; + box-sizing: border-box; + width: 37.5%; + } + .semi-col-xxl-push-9 { + left: 37.5%; + } + .semi-col-xxl-pull-9 { + right: 37.5%; + } + .semi-col-xxl-offset-9 { + margin-left: 37.5%; + } + .semi-col-xxl-order-9 { + order: 9; + } + .semi-col-xxl-10 { + display: block; + box-sizing: border-box; + width: 41.6666666667%; + } + .semi-col-xxl-push-10 { + left: 41.6666666667%; + } + .semi-col-xxl-pull-10 { + right: 41.6666666667%; + } + .semi-col-xxl-offset-10 { + margin-left: 41.6666666667%; + } + .semi-col-xxl-order-10 { + order: 10; + } + .semi-col-xxl-11 { + display: block; + box-sizing: border-box; + width: 45.8333333333%; + } + .semi-col-xxl-push-11 { + left: 45.8333333333%; + } + .semi-col-xxl-pull-11 { + right: 45.8333333333%; + } + .semi-col-xxl-offset-11 { + margin-left: 45.8333333333%; + } + .semi-col-xxl-order-11 { + order: 11; + } + .semi-col-xxl-12 { + display: block; + box-sizing: border-box; + width: 50%; + } + .semi-col-xxl-push-12 { + left: 50%; + } + .semi-col-xxl-pull-12 { + right: 50%; + } + .semi-col-xxl-offset-12 { + margin-left: 50%; + } + .semi-col-xxl-order-12 { + order: 12; + } + .semi-col-xxl-13 { + display: block; + box-sizing: border-box; + width: 54.1666666667%; + } + .semi-col-xxl-push-13 { + left: 54.1666666667%; + } + .semi-col-xxl-pull-13 { + right: 54.1666666667%; + } + .semi-col-xxl-offset-13 { + margin-left: 54.1666666667%; + } + .semi-col-xxl-order-13 { + order: 13; + } + .semi-col-xxl-14 { + display: block; + box-sizing: border-box; + width: 58.3333333333%; + } + .semi-col-xxl-push-14 { + left: 58.3333333333%; + } + .semi-col-xxl-pull-14 { + right: 58.3333333333%; + } + .semi-col-xxl-offset-14 { + margin-left: 58.3333333333%; + } + .semi-col-xxl-order-14 { + order: 14; + } + .semi-col-xxl-15 { + display: block; + box-sizing: border-box; + width: 62.5%; + } + .semi-col-xxl-push-15 { + left: 62.5%; + } + .semi-col-xxl-pull-15 { + right: 62.5%; + } + .semi-col-xxl-offset-15 { + margin-left: 62.5%; + } + .semi-col-xxl-order-15 { + order: 15; + } + .semi-col-xxl-16 { + display: block; + box-sizing: border-box; + width: 66.6666666667%; + } + .semi-col-xxl-push-16 { + left: 66.6666666667%; + } + .semi-col-xxl-pull-16 { + right: 66.6666666667%; + } + .semi-col-xxl-offset-16 { + margin-left: 66.6666666667%; + } + .semi-col-xxl-order-16 { + order: 16; + } + .semi-col-xxl-17 { + display: block; + box-sizing: border-box; + width: 70.8333333333%; + } + .semi-col-xxl-push-17 { + left: 70.8333333333%; + } + .semi-col-xxl-pull-17 { + right: 70.8333333333%; + } + .semi-col-xxl-offset-17 { + margin-left: 70.8333333333%; + } + .semi-col-xxl-order-17 { + order: 17; + } + .semi-col-xxl-18 { + display: block; + box-sizing: border-box; + width: 75%; + } + .semi-col-xxl-push-18 { + left: 75%; + } + .semi-col-xxl-pull-18 { + right: 75%; + } + .semi-col-xxl-offset-18 { + margin-left: 75%; + } + .semi-col-xxl-order-18 { + order: 18; + } + .semi-col-xxl-19 { + display: block; + box-sizing: border-box; + width: 79.1666666667%; + } + .semi-col-xxl-push-19 { + left: 79.1666666667%; + } + .semi-col-xxl-pull-19 { + right: 79.1666666667%; + } + .semi-col-xxl-offset-19 { + margin-left: 79.1666666667%; + } + .semi-col-xxl-order-19 { + order: 19; + } + .semi-col-xxl-20 { + display: block; + box-sizing: border-box; + width: 83.3333333333%; + } + .semi-col-xxl-push-20 { + left: 83.3333333333%; + } + .semi-col-xxl-pull-20 { + right: 83.3333333333%; + } + .semi-col-xxl-offset-20 { + margin-left: 83.3333333333%; + } + .semi-col-xxl-order-20 { + order: 20; + } + .semi-col-xxl-21 { + display: block; + box-sizing: border-box; + width: 87.5%; + } + .semi-col-xxl-push-21 { + left: 87.5%; + } + .semi-col-xxl-pull-21 { + right: 87.5%; + } + .semi-col-xxl-offset-21 { + margin-left: 87.5%; + } + .semi-col-xxl-order-21 { + order: 21; + } + .semi-col-xxl-22 { + display: block; + box-sizing: border-box; + width: 91.6666666667%; + } + .semi-col-xxl-push-22 { + left: 91.6666666667%; + } + .semi-col-xxl-pull-22 { + right: 91.6666666667%; + } + .semi-col-xxl-offset-22 { + margin-left: 91.6666666667%; + } + .semi-col-xxl-order-22 { + order: 22; + } + .semi-col-xxl-23 { + display: block; + box-sizing: border-box; + width: 95.8333333333%; + } + .semi-col-xxl-push-23 { + left: 95.8333333333%; + } + .semi-col-xxl-pull-23 { + right: 95.8333333333%; + } + .semi-col-xxl-offset-23 { + margin-left: 95.8333333333%; + } + .semi-col-xxl-order-23 { + order: 23; + } + .semi-col-xxl-24 { + display: block; + box-sizing: border-box; + width: 100%; + } + .semi-col-xxl-push-24 { + left: 100%; + } + .semi-col-xxl-pull-24 { + right: 100%; + } + .semi-col-xxl-offset-24 { + margin-left: 100%; + } + .semi-col-xxl-order-24 { + order: 24; + } + .semi-rtl .semi-col-xxl-1 { + float: right; + } + .semi-rtl .semi-col-xxl-2 { + float: right; + } + .semi-rtl .semi-col-xxl-3 { + float: right; + } + .semi-rtl .semi-col-xxl-4 { + float: right; + } + .semi-rtl .semi-col-xxl-5 { + float: right; + } + .semi-rtl .semi-col-xxl-6 { + float: right; + } + .semi-rtl .semi-col-xxl-7 { + float: right; + } + .semi-rtl .semi-col-xxl-8 { + float: right; + } + .semi-rtl .semi-col-xxl-9 { + float: right; + } + .semi-rtl .semi-col-xxl-10 { + float: right; + } + .semi-rtl .semi-col-xxl-11 { + float: right; + } + .semi-rtl .semi-col-xxl-12 { + float: right; + } + .semi-rtl .semi-col-xxl-13 { + float: right; + } + .semi-rtl .semi-col-xxl-14 { + float: right; + } + .semi-rtl .semi-col-xxl-15 { + float: right; + } + .semi-rtl .semi-col-xxl-16 { + float: right; + } + .semi-rtl .semi-col-xxl-17 { + float: right; + } + .semi-rtl .semi-col-xxl-18 { + float: right; + } + .semi-rtl .semi-col-xxl-19 { + float: right; + } + .semi-rtl .semi-col-xxl-20 { + float: right; + } + .semi-rtl .semi-col-xxl-21 { + float: right; + } + .semi-rtl .semi-col-xxl-22 { + float: right; + } + .semi-rtl .semi-col-xxl-23 { + float: right; + } + .semi-rtl .semi-col-xxl-24 { + float: right; + } + .semi-rtl .semi-col-xxl-offset-1 { + margin-left: auto; + margin-right: 4.1666666667%; + } + .semi-rtl .semi-col-xxl-offset-2 { + margin-left: auto; + margin-right: 8.3333333333%; + } + .semi-rtl .semi-col-xxl-offset-3 { + margin-left: auto; + margin-right: 12.5%; + } + .semi-rtl .semi-col-xxl-offset-4 { + margin-left: auto; + margin-right: 16.6666666667%; + } + .semi-rtl .semi-col-xxl-offset-5 { + margin-left: auto; + margin-right: 20.8333333333%; + } + .semi-rtl .semi-col-xxl-offset-6 { + margin-left: auto; + margin-right: 25%; + } + .semi-rtl .semi-col-xxl-offset-7 { + margin-left: auto; + margin-right: 29.1666666667%; + } + .semi-rtl .semi-col-xxl-offset-8 { + margin-left: auto; + margin-right: 33.3333333333%; + } + .semi-rtl .semi-col-xxl-offset-9 { + margin-left: auto; + margin-right: 37.5%; + } + .semi-rtl .semi-col-xxl-offset-10 { + margin-left: auto; + margin-right: 41.6666666667%; + } + .semi-rtl .semi-col-xxl-offset-11 { + margin-left: auto; + margin-right: 45.8333333333%; + } + .semi-rtl .semi-col-xxl-offset-12 { + margin-left: auto; + margin-right: 50%; + } + .semi-rtl .semi-col-xxl-offset-13 { + margin-left: auto; + margin-right: 54.1666666667%; + } + .semi-rtl .semi-col-xxl-offset-14 { + margin-left: auto; + margin-right: 58.3333333333%; + } + .semi-rtl .semi-col-xxl-offset-15 { + margin-left: auto; + margin-right: 62.5%; + } + .semi-rtl .semi-col-xxl-offset-16 { + margin-left: auto; + margin-right: 66.6666666667%; + } + .semi-rtl .semi-col-xxl-offset-17 { + margin-left: auto; + margin-right: 70.8333333333%; + } + .semi-rtl .semi-col-xxl-offset-18 { + margin-left: auto; + margin-right: 75%; + } + .semi-rtl .semi-col-xxl-offset-19 { + margin-left: auto; + margin-right: 79.1666666667%; + } + .semi-rtl .semi-col-xxl-offset-20 { + margin-left: auto; + margin-right: 83.3333333333%; + } + .semi-rtl .semi-col-xxl-offset-21 { + margin-left: auto; + margin-right: 87.5%; + } + .semi-rtl .semi-col-xxl-offset-22 { + margin-left: auto; + margin-right: 91.6666666667%; + } + .semi-rtl .semi-col-xxl-offset-23 { + margin-left: auto; + margin-right: 95.8333333333%; + } + .semi-rtl .semi-col-xxl-offset-24 { + margin-left: auto; + margin-right: 100%; + } +} +.semi-rtl .semi-row, +.semi-rtl .semi-row-flex, +.semi-portal-rtl .semi-row, +.semi-portal-rtl .semi-row-flex { + direction: rtl; +} + +.semi-highlight-tag { + color: var(--semi-color-highlight); + background-color: var(--semi-color-highlight-bg); + font-weight: 600; +} + +.semi-hotKeys { + box-sizing: border-box; + position: relative; + user-select: none; + white-space: nowrap; + vertical-align: bottom; + display: flex; + justify-content: center; + align-items: center; + display: inline-flex; +} +.semi-hotKeys-content { + 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; + border-radius: 2px; + height: 20px; + padding: 2px 8px; + border: 1px; + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-2); +} +.semi-hotKeys-split { + 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; + margin: 0 3px; + color: var(--semi-color-text-0); +} + +.semi-image { + border-radius: var(--semi-border-radius-small); + position: relative; + display: inline-block; + overflow: hidden; +} +.semi-image img { + /** + * In tailwind, the max-width of img/video is set to 100%, + * which will affect the amplification effect of the picture. + * So we need to set max-width to none. + */ + max-width: none; +} +.semi-image-tooltip-children-wrapper { + display: inline-flex; + width: fit-content; + height: fit-content; + vertical-align: middle; +} +.semi-image-img { + vertical-align: top; + border-radius: inherit; + user-select: none; +} +.semi-image-img-preview { + cursor: zoom-in; +} +.semi-image-img-error { + opacity: 0; +} +.semi-image-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.semi-image-status { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--semi-border-radius-small); + background-color: var(--semi-color-fill-0); + color: var(--semi-color-disabled-text); +} + +.semi-image-preview { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1070; + background-color: var(--semi-color-overlay-bg); + transition: opacity 500ms; + overflow: hidden; +} +.semi-image-preview-popup { + position: absolute; +} +.semi-image-preview .semi-image-preview-hide { + opacity: 0; +} +.semi-image-preview-icon { + display: flex; + justify-content: center; + align-items: center; + width: 40px; + height: 40px; + border-radius: 50%; + position: absolute; + top: 50%; + transform: translateY(-50%); + background: rgba(0, 0, 0, 0.75); + cursor: pointer; + color: var(--semi-color-white); +} +.semi-image-preview-prev { + left: 24px; +} +.semi-image-preview-next { + right: 24px; +} +.semi-image-preview-header { + position: absolute; + top: 0; + left: 0; + right: 0; + font-weight: normal; + 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; + color: var(--semi-color-white); + height: 60px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 24px; + z-index: 1; + pointer-events: none; +} +.semi-image-preview-header-title { + flex: 1; +} +.semi-image-preview-header-close { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + width: 30px; + height: 30px; + border-radius: 50%; + pointer-events: auto; +} +.semi-image-preview-header-close:hover { + background-color: rgba(0, 0, 0, 0.75); +} +.semi-image-preview-footer { + display: flex; + align-items: center; +} +.semi-image-preview-footer-content { + padding: 0 16px; + background: rgba(0, 0, 0, 0.75); + border-radius: var(--semi-border-radius-medium); + height: 48px; +} +.semi-image-preview-footer-wrapper { + position: absolute; + left: 50%; + bottom: 16px; + transform: translateX(-50%); +} +.semi-image-preview-footer-page { + user-select: none; + color: var(--semi-color-white); + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0 12px; +} +.semi-image-preview-footer .semi-icon { + color: var(--semi-color-white); + cursor: pointer; +} +.semi-image-preview-footer-gap { + margin-left: 16px; +} +.semi-image-preview-footer .semi-slider { + width: 132px; + padding: 0 16px; +} +.semi-image-preview-footer .semi-slider .semi-slider-rail { + color: var(--semi-color-white); + height: 2px; +} +.semi-image-preview-footer .semi-slider .semi-slider-track { + height: 2px; +} +.semi-image-preview-footer .semi-slider .semi-slider-handle { + width: 16px; + height: 16px; + margin-top: 8px; + box-sizing: border-box; +} +.semi-image-preview-footer .semi-divider { + background: rgba(255, 255, 255, 0.5); + margin: 0 16px; +} +.semi-image-preview-footer .semi-image-preview-footer-disabled { + color: rgba(249, 249, 249, 0.35); + cursor: default; + pointer-events: none; +} +.semi-image-preview-image { + position: relative; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.semi-image-preview-image-img { + position: absolute; + transform: scale3d(1, 1, 1) var(--semi-transform-rotate-none); + z-index: 0; + user-select: none; +} +.semi-image-preview-image-spin { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.semi-image-preview-image-spin .semi-spin-wrapper { + color: #ccc; +} +@keyframes spinner { + to { + transform: var(--semi-transform_rotate-clockwise360deg); + } +} + +img[src=""], img:not([src]) { + opacity: 0; +} + +.semi-rtl .semi-image-preview, +.semi-portal-rtl .semi-image-preview { + direction: rtl; +} +.semi-rtl .semi-image-preview-group, +.semi-portal-rtl .semi-image-preview-group { + direction: rtl; +} +.semi-rtl .semi-image-preview-prev, +.semi-portal-rtl .semi-image-preview-prev { + right: 24px; + left: auto; + transform: var(--semi-transform_rotate-clockwise180deg); +} +.semi-rtl .semi-image-preview-next, +.semi-portal-rtl .semi-image-preview-next { + left: 24px; + right: auto; + transform: var(--semi-transform_rotate-clockwise180deg); +} +.semi-rtl .semi-image-preview-footer-page, +.semi-portal-rtl .semi-image-preview-footer-page { + display: flex; + direction: rtl; +} +.semi-rtl .semi-image-preview-footer-gap, +.semi-portal-rtl .semi-image-preview-footer-gap { + margin-right: 16px; + margin-left: 0; +} +.semi-rtl .semi-image-preview-footer .semi-icon-chevron_left, +.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_left { + transform: var(--semi-transform_rotate-clockwise180deg); +} +.semi-rtl .semi-image-preview-footer .semi-icon-chevron_right, +.semi-portal-rtl .semi-image-preview-footer .semi-icon-chevron_right { + transform: var(--semi-transform_rotate-clockwise180deg); +} + +@keyframes semi-input-active { + from { + transform: scale(1); + } + to { + transform: scale(0.97); + } +} +@keyframes semi-input-inactive { + from { + transform: scale(0.97); + } + to { + transform: scale(1); + } +} +.semi-input { + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} + +.semi-input-wrapper { + display: inline-block; + position: relative; + vertical-align: middle; + box-shadow: none; + 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; + background-color: var(--semi-color-fill-0); + border: 1px transparent solid; + border-radius: var(--semi-border-radius-small); + width: 100%; + outline: none; + cursor: text; + box-sizing: border-box; + color: var(--semi-color-text-0); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-input-wrapper-default { + height: 32px; + 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; + line-height: 30px; +} +.semi-input-wrapper-small { + height: 24px; + 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; + line-height: 22px; +} +.semi-input-wrapper-large { + height: 40px; + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 38px; +} +.semi-input-wrapper:hover { + background-color: var(--semi-color-fill-1); + border-color: transparent; +} +.semi-input-wrapper-focus { + background-color: var(--semi-color-fill-0); + border: var(--semi-color-focus-border) solid 1px; +} +.semi-input-wrapper-focus:hover { + background-color: var(--semi-color-fill-0); + border-color: var(--semi-color-focus-border); +} +.semi-input-wrapper-focus:active { + background-color: var(--semi-color-fill-2); + border-color: var(--semi-color-focus-border); +} +.semi-input-wrapper.semi-input-readonly { + cursor: default; +} +.semi-input-wrapper-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-input-wrapper-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-input-wrapper-error.semi-input-wrapper-focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-input-wrapper-error:active { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger); +} +.semi-input-wrapper-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-input-wrapper-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-input-wrapper-warning.semi-input-wrapper-focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-input-wrapper-warning:active { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning); +} +.semi-input-wrapper__with-prefix { + display: inline-flex; + align-items: center; +} +.semi-input-wrapper__with-prefix .semi-input { + padding-left: 0; +} +.semi-input-wrapper__with-suffix { + display: inline-flex; + align-items: center; +} +.semi-input-wrapper__with-suffix .semi-input { + padding-right: 0; +} +.semi-input-wrapper-clearable, .semi-input-wrapper-modebtn { + display: inline-flex; + align-items: center; +} +.semi-input-wrapper-hidden { + border: none; +} +.semi-input-wrapper .semi-icon { + color: var(--semi-color-text-2); +} +.semi-input-wrapper .semi-input-clearbtn, +.semi-input-wrapper .semi-input-modebtn { + color: var(--semi-color-primary-hover); +} +.semi-input-wrapper .semi-input-clearbtn > svg, +.semi-input-wrapper .semi-input-modebtn > svg { + pointer-events: none; +} +.semi-input-wrapper .semi-input-clearbtn:hover, +.semi-input-wrapper .semi-input-modebtn:hover { + cursor: pointer; +} +.semi-input-wrapper .semi-input-clearbtn:hover .semi-icon, +.semi-input-wrapper .semi-input-modebtn:hover .semi-icon { + color: var(--semi-color-primary-hover); +} +.semi-input-wrapper .semi-input-clearbtn:focus-visible, +.semi-input-wrapper .semi-input-modebtn:focus-visible { + border-radius: var(--semi-border-radius-small); + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -1px; +} +.semi-input-wrapper__with-suffix-icon.semi-input-wrapper-clearable:not(.semi-input-wrapper__with-suffix-hidden) .semi-input-clearbtn { + min-width: 24px; + justify-content: flex-end; +} +.semi-input-wrapper-modebtn.semi-input-wrapper-clearable .semi-input-clearbtn { + min-width: 16px; + justify-content: center; +} +.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) { + border-right-style: none; + border-radius: 0; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) { + border-right-style: none; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend, .semi-input-wrapper.semi-input-wrapper__with-append { + display: inline-flex; + align-items: center; + background-color: transparent; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend:hover, .semi-input-wrapper.semi-input-wrapper__with-append:hover { + background-color: transparent; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-focus { + border: 1px transparent solid; + background-color: transparent; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input { + background-color: var(--semi-color-fill-0); + border: 1px transparent solid; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover { + background-color: var(--semi-color-fill-1); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn { + background-color: var(--semi-color-fill-1); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus { + border: 1px var(--semi-color-focus-border) solid; + background-color: var(--semi-color-fill-0); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn { + border-right-style: none; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus.semi-input-sibling-modebtn + .semi-input-clearbtn { + border-right-style: none; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { + box-sizing: border-box; + background-color: var(--semi-color-fill-0); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn { + border: 1px var(--semi-color-focus-border) solid; + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; + border-left-style: none; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) { + border-radius: 0; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn { + border: 1px var(--semi-color-focus-border) solid; + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; + border-left-style: none; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) { + border-radius: 0; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active { + background-color: var(--semi-color-fill-2); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:active ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:active ~ .semi-input-modebtn { + background-color: var(--semi-color-fill-2); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover { + background-color: var(--semi-color-fill-0); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error { + border-color: transparent; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:hover + .semi-input-modebtn { + background-color: var(--semi-color-danger-light-hover); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:focus + .semi-input-modebtn { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active { + background-color: var(--semi-color-danger-light-active); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input:active + .semi-input-modebtn { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover { + background-color: var(--semi-color-danger-light-default); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning { + border-color: transparent; +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:hover + .semi-input-modebtn { + background-color: var(--semi-color-warning-light-hover); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:focus + .semi-input-modebtn { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active { + background-color: var(--semi-color-warning-light-active); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input:active + .semi-input-modebtn { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover { + background-color: var(--semi-color-warning-light-default); +} +.semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-wrapper-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); + background-color: var(--semi-color-disabled-fill); + -webkit-text-fill-color: var(--semi-color-disabled-text); +} +.semi-input-wrapper-disabled:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-input-wrapper-disabled .semi-input-append, +.semi-input-wrapper-disabled .semi-input-prepend, +.semi-input-wrapper-disabled .semi-input-suffix, +.semi-input-wrapper-disabled .semi-input-prefix, +.semi-input-wrapper-disabled .semi-icon { + color: var(--semi-color-disabled-text); +} + +.semi-input { + border: none; + outline: none; + width: 100%; + color: inherit; + padding-left: 12px; + padding-right: 12px; + background-color: transparent; + box-sizing: border-box; +} +.semi-input:placeholder-shown { + text-overflow: ellipsis; +} +.semi-input[type=password]::-ms-reveal, .semi-input[type=password]::-ms-clear { + display: none; +} +.semi-input[type=search]::-webkit-search-cancel-button { + display: none; +} +.semi-input::placeholder { + color: var(--semi-color-text-2); +} +.semi-input-large { + height: 38px; + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 38px; +} +.semi-input-small { + height: 22px; + 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; + line-height: 22px; +} +.semi-input-default { + height: 30px; + 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; + line-height: 30px; +} +.semi-input-disabled { + cursor: not-allowed; + color: inherit; +} +.semi-input-inset-label { + margin: 0 12px; + font-weight: 600; + color: var(--semi-color-text-2); + flex-shrink: 0; + white-space: nowrap; +} +.semi-input-prefix, .semi-input-suffix { + display: flex; + justify-content: center; + align-items: center; +} +.semi-input-prefix-text, .semi-input-suffix-text { + margin: 0 12px; + color: var(--semi-color-text-2); + font-weight: 600; + white-space: nowrap; +} +.semi-input-prefix-icon, .semi-input-suffix-icon { + color: var(--semi-color-text-2); + margin: 0 8px; +} +.semi-input-suffix { + display: flex; + justify-content: center; + align-items: center; +} +.semi-input-clearbtn, .semi-input-modebtn { + display: flex; + align-items: center; + height: 100%; + justify-content: center; + min-width: 32px; +} +.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-text { + margin-left: 0; +} +.semi-input-clearbtn + .semi-input-suffix + .semi-input-suffix-icon { + margin-left: 0; +} +.semi-input-suffix-hidden { + display: none; +} +.semi-input-prepend, .semi-input-append { + height: 100%; + display: flex; + align-items: center; + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-2); + 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; + flex-shrink: 0; +} +.semi-input-prepend-icon, .semi-input-prepend-text, .semi-input-append-icon, .semi-input-append-text { + padding: 0 12px; +} +.semi-input-append { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; + border-left: 1px transparent solid; +} +.semi-input-prepend { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); + border-right: 1px transparent solid; +} +.semi-input-disabled::placeholder { + color: var(--semi-color-disabled-text); +} +.semi-input-group { + display: inline-flex; + align-items: center; + align-content: center; + flex-wrap: wrap; +} +.semi-input-group .semi-select, +.semi-input-group .semi-tagInput, +.semi-input-group .semi-cascader, +.semi-input-group .semi-tree-select, .semi-input-group > .semi-input-wrapper { + border-radius: 0; +} +.semi-input-group .semi-select:first-child, +.semi-input-group .semi-tagInput:first-child, +.semi-input-group .semi-cascader:first-child, +.semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-input-group .semi-select:last-child, +.semi-input-group .semi-tagInput:last-child, +.semi-input-group .semi-cascader:last-child, +.semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-group .semi-select:not(:last-child), +.semi-input-group .semi-tagInput:not(:last-child), +.semi-input-group .semi-cascader:not(:last-child), +.semi-input-group .semi-tree-select:not(:last-child), .semi-input-group > .semi-input-wrapper:not(:last-child) { + position: relative; +} +.semi-input-group .semi-select:not(:last-child)::after, +.semi-input-group .semi-tagInput:not(:last-child)::after, +.semi-input-group .semi-cascader:not(:last-child)::after, +.semi-input-group .semi-tree-select:not(:last-child)::after, .semi-input-group > .semi-input-wrapper:not(:last-child)::after { + content: ""; + background-color: var(--semi-color-border); + width: 1px; + position: absolute; + right: -1px; + top: 1px; + bottom: 1px; +} +.semi-input-group .semi-select { + overflow-y: visible; +} +.semi-input-group .semi-input-number .semi-input-wrapper, +.semi-input-group .semi-input-number .semi-datepicker-range-input, +.semi-input-group .semi-datepicker .semi-input-wrapper, +.semi-input-group .semi-datepicker .semi-datepicker-range-input, +.semi-input-group .semi-timepicker .semi-input-wrapper, +.semi-input-group .semi-timepicker .semi-datepicker-range-input, +.semi-input-group .semi-autocomplete .semi-input-wrapper, +.semi-input-group .semi-autocomplete .semi-datepicker-range-input { + border-radius: 0; +} +.semi-input-group .semi-input-number:first-child .semi-input-wrapper, +.semi-input-group .semi-input-number:first-child .semi-datepicker-range-input, +.semi-input-group .semi-datepicker:first-child .semi-input-wrapper, +.semi-input-group .semi-datepicker:first-child .semi-datepicker-range-input, +.semi-input-group .semi-timepicker:first-child .semi-input-wrapper, +.semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input, +.semi-input-group .semi-autocomplete:first-child .semi-input-wrapper, +.semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input { + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-input-group .semi-input-number:last-child .semi-input-wrapper, +.semi-input-group .semi-input-number:last-child .semi-datepicker-range-input, +.semi-input-group .semi-datepicker:last-child .semi-input-wrapper, +.semi-input-group .semi-datepicker:last-child .semi-datepicker-range-input, +.semi-input-group .semi-timepicker:last-child .semi-input-wrapper, +.semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input, +.semi-input-group .semi-autocomplete:last-child .semi-input-wrapper, +.semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; +} +.semi-input-group .semi-input-number:not(:last-child), +.semi-input-group .semi-datepicker:not(:last-child), +.semi-input-group .semi-timepicker:not(:last-child), +.semi-input-group .semi-autocomplete:not(:last-child) { + position: relative; +} +.semi-input-group .semi-input-number:not(:last-child)::after, +.semi-input-group .semi-datepicker:not(:last-child)::after, +.semi-input-group .semi-timepicker:not(:last-child)::after, +.semi-input-group .semi-autocomplete:not(:last-child)::after { + content: ""; + background-color: var(--semi-color-border); + width: 1px; + position: absolute; + right: -1px; + top: 1px; + bottom: 1px; +} +.semi-input-group-wrapper-with-top-label { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-input-group-wrapper-with-top-label .semi-input-group { + display: flex; +} +.semi-input-group-wrapper-with-top-label .semi-input-group .semi-form-field { + margin-top: 0; + margin-bottom: 0; +} + +.semi-input-only_border { + background: transparent; + border-color: var(--semi-color-border); +} +.semi-input-only_border:hover { + background: transparent; + border-color: var(--semi-color-border); +} +.semi-input-only_border:focus-within { + background: transparent; +} + +.semi-input-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-input-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) { + border-color: var(--semi-color-danger); +} +.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) { + border-color: var(--semi-color-warning); +} + +.semi-rtl .semi-input-wrapper, +.semi-portal-rtl .semi-input-wrapper { + direction: rtl; +} +.semi-rtl .semi-input-wrapper__with-prefix .semi-input, +.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-input-wrapper__with-suffix .semi-input, +.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { + padding-right: auto; + padding-left: 0; +} +.semi-rtl .semi-input, +.semi-portal-rtl .semi-input { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-input-append, +.semi-portal-rtl .semi-input-append { + border-left: 0; + border-right: 1px transparent solid; +} +.semi-rtl .semi-input-prepend, +.semi-portal-rtl .semi-input-prepend { + border-right: 0; + border-left: 1px transparent solid; +} +.semi-rtl .semi-input-group .semi-select:not(:last-child)::after, +.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, +.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, +.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { + right: auto; + left: -1px; +} +.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { + right: auto; + left: -1px; +} +.semi-rtl .semi-input-textarea-wrapper, +.semi-portal-rtl .semi-input-textarea-wrapper { + direction: rtl; +} +.semi-rtl .semi-input-textarea-counter, +.semi-portal-rtl .semi-input-textarea-counter { + text-align: left; +} +.semi-rtl .semi-input-textarea-showClear, +.semi-portal-rtl .semi-input-textarea-showClear { + padding-right: 0; + padding-left: 36px; +} + +.semi-input-number { + display: inline-flex; + align-items: center; + box-sizing: border-box; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-input-number-suffix-btns { + display: inline-flex; + flex-direction: column; + margin-left: 4px; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-small); + background-color: var(--semi-color-bg-2); + box-sizing: border-box; +} +.semi-input-number-suffix-btns > .semi-input-number-button { + height: 50%; + width: 14px; + padding: 0; + margin: 0; + display: inline-flex; + align-items: center; + justify-content: center; + user-select: none; + border-radius: 0; + color: var(--semi-color-text-2); +} +.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):hover, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):hover { + cursor: pointer; + background-color: var(--semi-color-fill-0); +} +.semi-input-number-suffix-btns > .semi-input-number-button-up:not(.semi-input-number-button-up-not-allowed):active, .semi-input-number-suffix-btns > .semi-input-number-button-down:not(.semi-input-number-button-down-not-allowed):active { + cursor: pointer; + background-color: var(--semi-color-fill-1); +} +.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-disabled, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-disabled { + background-color: var(--semi-color-disabled-fill); + color: var(--semi-color-disabled-text); +} +.semi-input-number-suffix-btns > .semi-input-number-button-up.semi-input-number-button-up-not-allowed, .semi-input-number-suffix-btns > .semi-input-number-button-down.semi-input-number-button-down-not-allowed { + cursor: not-allowed; +} +.semi-input-number-suffix-btns-inner-hover { + border-color: var(--semi-color-fill-2); +} +.semi-input-number-suffix-btns-inner { + margin-left: 8px; + border-radius: var(--semi-border-radius-small); + overflow: hidden; +} +.semi-input-number .semi-input-clearbtn + .semi-input-suffix { + margin-left: -4px; +} +.semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { + margin-left: 0; +} +.semi-input-number-size-default .semi-input-number-suffix-btns { + height: 32px; +} +.semi-input-number-size-default .semi-input-number-suffix-btns-inner { + height: 30px; +} +.semi-input-number-size-large .semi-input-number-suffix-btns { + height: 40px; +} +.semi-input-number-size-large .semi-input-number-suffix-btns-inner { + height: 38px; +} +.semi-input-number-size-small .semi-input-number-suffix-btns { + height: 24px; +} +.semi-input-number-size-small .semi-input-number-suffix-btns-inner { + height: 22px; +} + +.semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns { + opacity: 0; +} + +.semi-rtl .semi-input-number, +.semi-portal-rtl .semi-input-number { + direction: rtl; +} +.semi-rtl .semi-input-number-suffix-btns, +.semi-portal-rtl .semi-input-number-suffix-btns { + margin-left: auto; + margin-right: 4px; +} +.semi-rtl .semi-input-number-suffix-btns-inner, +.semi-portal-rtl .semi-input-number-suffix-btns-inner { + margin-left: auto; + margin-right: 8px; +} +.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix, +.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix { + margin-left: auto; + margin-right: -4px; +} +.semi-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner, +.semi-portal-rtl .semi-input-number .semi-input-clearbtn + .semi-input-suffix .semi-input-number-suffix-btns-inner { + margin-left: auto; + margin-right: 0; +} + +.semi-json-viewer { + box-sizing: border-box; + padding: 12px 0; +} +.semi-json-viewer-background { + background-color: var(--semi-color-default); +} +.semi-json-viewer-string-key { + color: rgba(var(--semi-red-5), 1); +} +.semi-json-viewer-string-value { + color: rgba(var(--semi-blue-5), 1); +} +.semi-json-viewer-keyword { + color: rgba(var(--semi-blue-5), 1); +} +.semi-json-viewer-number { + color: rgba(var(--semi-green-5), 1); +} +.semi-json-viewer-delimiter-comma { + color: rgba(var(--semi-blue-6), 1); +} +.semi-json-viewer-delimiter-bracket-0 { + color: rgba(var(--semi-blue-7), 1); +} +.semi-json-viewer-delimiter-bracket-1 { + color: rgba(var(--semi-green-7), 1); +} +.semi-json-viewer-delimiter-bracket-2 { + color: rgba(var(--semi-orange-7), 1); +} +.semi-json-viewer-delimiter-array-0 { + color: rgba(var(--semi-blue-7), 1); +} +.semi-json-viewer-delimiter-array-1 { + color: rgba(var(--semi-green-7), 1); +} +.semi-json-viewer-delimiter-array-2 { + color: rgba(var(--semi-orange-7), 1); +} +.semi-json-viewer-search-result { + background-color: rgba(var(--semi-green-2), 1); +} +.semi-json-viewer-current-search-result { + background-color: rgba(var(--semi-yellow-4), 1) !important; +} +.semi-json-viewer-folding-icon { + opacity: 0.7; + transition: opacity 0.8s; + color: rgba(var(--semi-blue-7), 1); +} +.semi-json-viewer-view-line { + font-family: Menlo, Firecode, Monaco, "Courier New", monospace; + font-weight: normal; + font-size: 12px; + font-feature-settings: "liga" 0, "calt" 0; + font-variation-settings: normal; + letter-spacing: 0px; + color: #237893; + word-break: break-all !important; + white-space: pre-wrap !important; +} +.semi-json-viewer-line-number { + font-family: Menlo, Firecode, Monaco, "Courier New", monospace; + font-weight: normal; + font-size: 12px; + font-feature-settings: "liga" 0, "calt" 0; + font-variation-settings: normal; + letter-spacing: 0px; + color: rgba(var(--semi-grey-5), 1); + text-align: center; + width: 50px; + user-select: none; + word-wrap: normal !important; + overflow-wrap: normal !important; +} +.semi-json-viewer-content-container { + scrollbar-width: none; /* 隐藏滚动条（Firefox） */ + -ms-overflow-style: none; /* 隐藏滚动条（IE 和 Edge） */ +} +.semi-json-viewer-content-container::-webkit-scrollbar { + display: none; /* 隐藏滚动条（Webkit 浏览器） */ +} +.semi-json-viewer-search-bar-container { + width: 458px; + box-sizing: border-box; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-small); + display: flex; + flex-direction: column; + padding: 8px; + gap: 8px; + background-color: var(--semi-color-bg-0); +} +.semi-json-viewer-search-bar { + display: flex; + align-items: flex-start; + gap: 8px; +} +.semi-json-viewer-search-bar-input { + width: 200px !important; + flex-shrink: 0; +} +.semi-json-viewer-search-bar .semi-button-group { + flex-wrap: nowrap; +} +.semi-json-viewer-search-bar .semi-button:nth-of-type(1) { + width: 40px; +} +.semi-json-viewer-search-bar .semi-button:nth-of-type(2) { + width: 40px; +} +.semi-json-viewer-replace-bar { + display: flex; + align-items: flex-start; + gap: 8px; +} +.semi-json-viewer-replace-bar-input { + width: 261px; +} +.semi-json-viewer-replace-bar .semi-button:nth-of-type(1) { + width: 52px; +} +.semi-json-viewer-replace-bar .semi-button:nth-of-type(2) { + width: 80px; +} +.semi-json-viewer-search-options { + display: flex; + align-items: center; + justify-content: center; + list-style: none; + padding-inline-start: 0; + margin-block-start: 0; + margin-block-end: 0; + gap: 8px; +} +.semi-json-viewer-search-options-item { + min-width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: var(--semi-border-radius-small); + color: var(--semi-color-text-2); +} +.semi-json-viewer-search-options-item:hover { + background-color: var(--semi-color-default); +} +.semi-json-viewer-search-options-item-active { + color: var(--semi-color-primary); + background-color: var(--semi-color-primary-light-default); +} +.semi-json-viewer-complete-suggestions-container { + border-radius: var(--semi-border-radius-medium); + background-color: var(--semi-color-bg-3); + box-shadow: var(--semi-shadow-elevated); + z-index: 1000; + min-width: 200px; + max-width: 400px; + list-style: none; + padding: 4px 0; +} +.semi-json-viewer-complete-container { + position: absolute; + z-index: 1000; +} +.semi-json-viewer-complete-suggestions-item { + padding: 8px 16px; + color: var(--semi-color-text-0); + cursor: pointer; +} +.semi-json-viewer-error { + text-decoration: underline wavy var(--semi-color-danger); + text-decoration-thickness: 1px; + text-underline-position: under; +} + +.semi-layout { + display: flex; + flex: auto; + flex-direction: column; + min-height: auto; +} +.semi-layout, .semi-layout-header, .semi-layout-footer, .semi-layout-content, .semi-layout-sider, .semi-layout-sider-children { + box-sizing: border-box; +} +.semi-layout-header, .semi-layout-footer { + flex: 0 0 auto; +} +.semi-layout-content { + flex: auto; + min-height: auto; +} +.semi-layout-sider { + position: relative; + min-width: auto; +} +.semi-layout-sider-children { + height: 100%; + margin-top: -0.1px; + padding-top: 0.1px; +} + +.semi-layout-has-sider { + flex-direction: row; +} +.semi-layout-has-sider > .semi-layout, .semi-layout-has-sider > .semi-layout-content { + overflow-x: hidden; +} + +.semi-rtl .semi-layout, +.semi-portal-rtl .semi-layout { + direction: rtl; +} + +.semi-list { + 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; +} +.semi-list-items { + margin: 0; + padding: 0; + list-style: none; +} +.semi-list-header, .semi-list-footer { + padding: 12px 24px; +} +.semi-list-empty { + padding: 12px 0px; + color: var(--semi-color-text-2); + width: 100%; + text-align: center; +} +.semi-list-item { + display: flex; + flex-wrap: wrap; + align-items: center; + box-sizing: border-box; + padding: 12px 24px; + margin: 0; + list-style: none; +} +.semi-list-item-body { + flex: 1; + display: flex; +} +.semi-list-item-body-header { + margin-right: 20px; +} +.semi-list-item-body-flex-start { + align-items: flex-start; +} +.semi-list-item-body-flex-end { + align-items: flex-end; +} +.semi-list-item-body-center { + align-items: center; +} +.semi-list-item-body-stretch { + align-items: stretch; +} +.semi-list-item-body-baseline { + align-items: baseline; +} +.semi-list-item-extra { + flex: 0 0 auto; + margin-left: 40px; +} +.semi-list-split .semi-list-item { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-list-split .semi-list-item:last-child { + border-bottom: none; +} +.semi-list-split .semi-list-header { + border-bottom: 1px solid var(--semi-color-border); +} +.semi-list-split .semi-list-footer { + border-top: 1px solid var(--semi-color-border); +} +.semi-list-small .semi-list-item, .semi-list-small .semi-list-header, .semi-list-small .semi-list-footer { + padding: 8px 16px; +} +.semi-list-large .semi-list-item, .semi-list-large .semi-list-header, .semi-list-large .semi-list-footer { + padding: 16px 24px; +} +.semi-list.semi-list-grid .semi-list-item { + padding: 0; +} +.semi-list.semi-list-bordered { + border: 1px solid var(--semi-color-border); +} +.semi-list.semi-list-flex .semi-list-items { + display: flex; +} +.semi-list.semi-list-flex.semi-list-split .semi-list-item { + border-bottom: none; + border-right: 1px solid var(--semi-color-border); +} +.semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { + border-right: none; +} + +.semi-rtl .semi-list, +.semi-portal-rtl .semi-list { + direction: rtl; +} +.semi-rtl .semi-list-item, +.semi-portal-rtl .semi-list-item { + direction: rtl; +} +.semi-rtl .semi-list-item-body-header, +.semi-portal-rtl .semi-list-item-body-header { + margin-right: auto; + margin-left: 20px; +} +.semi-rtl .semi-list-item-extra, +.semi-portal-rtl .semi-list-item-extra { + flex: 0 0 auto; + margin-left: 0; + margin-right: 40px; +} +.semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item, +.semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item { + border-bottom: none; + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child, +.semi-portal-rtl .semi-list.semi-list-flex.semi-list-split .semi-list-item:last-child { + border-left: none; +} + +.semi-markdownRender-simple-code { + background: var(--semi-color-fill-0); + color: var(--semi-color-text-1); +} +.semi-markdownRender ul, .semi-markdownRender li { + color: var(--semi-color-text-0); +} +.semi-markdownRender-component-image { + margin: 16px 16px 16px 16px; + max-width: 50%; + max-height: 500px; + display: flex; + flex-direction: column; + justify-content: center; +} +.semi-markdownRender-component-image-alt { + margin-top: 8px; + text-align: center; + color: var(--semi-color-tertiary); +} +.semi-markdownRender-component-header.semi-typography.semi-typography-h1 { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-markdownRender-component-header.semi-typography.semi-typography-h2 { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-markdownRender-component-header.semi-typography.semi-typography-h3 { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-markdownRender-component-header.semi-typography.semi-typography-h4 { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-markdownRender-component-header.semi-typography.semi-typography-h5 { + margin-top: 16px; + margin-bottom: 16px; +} +.semi-markdownRender-component-p strong { + font-weight: 600; +} + +.semi-modal { + 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; + position: relative; + margin: 80px auto; + color: var(--semi-color-text-0); +} +.semi-modal-mask { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-color: var(--semi-color-overlay-bg); + backdrop-filter: none; + height: 100%; + z-index: 1000; +} +.semi-modal-mask-hidden { + display: none; +} +.semi-modal-icon-wrapper { + display: inline-flex; + margin-right: 12px; + width: 24px; +} +.semi-modal-wrap { + position: fixed; + overflow: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1000; + -webkit-overflow-scrolling: touch; + outline: 0; +} +.semi-modal-wrap-center { + display: flex; + align-items: center; +} +.semi-modal-title { + display: inline-flex; + align-items: flex-start; + justify-content: flex-start; + width: 100%; + margin: 0; +} +.semi-modal-content { + position: relative; + display: flex; + height: max-content; + width: 100%; + box-sizing: border-box; + flex-direction: column; + background-color: var(--semi-color-bg-2); + backdrop-filter: none; + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-large); + padding: 0 24px; + background-clip: padding-box; + overflow: hidden; + box-shadow: var(--semi-shadow-elevated); +} +.semi-modal-footerfill { + display: flex; +} +.semi-modal-content-height-set { + height: 100%; +} +.semi-modal-content-fullScreen { + border-radius: 0; + border: none; + height: 100%; + top: 0px; +} +.semi-modal-header { + display: flex; + align-items: flex-start; + margin: 24px 0; + padding: 0 0; + font-size: 14px; + font-weight: 600; + background-color: transparent; + color: var(--semi-color-text-0); + border-bottom: 0 solid transparent; +} +.semi-modal-body-wrapper { + display: flex; + align-items: flex-start; + margin: 24px 0; +} +.semi-modal-body { + flex: 1 1 auto; + margin: 0; + padding: 0; +} +.semi-modal-withIcon { + margin-left: 36px; +} +.semi-modal-footer { + margin: 24px 0; + padding: 0 0; + text-align: right; + border-radius: 0 0 5px 5px; + border-top: 0 solid transparent; + background-color: transparent; +} +.semi-modal-footer .semi-button { + margin-left: 12px; + margin-right: 0; +} +.semi-modal-confirm .semi-modal-header { + margin-bottom: 8px; +} +.semi-modal-confirm-icon-wrapper { + display: inline-flex; + margin-right: 12px; + width: 24px; +} +.semi-modal-confirm-icon { + display: inline-flex; + color: var(--semi-color-primary); +} +.semi-modal-info-icon { + color: var(--semi-color-info); +} +.semi-modal-success-icon { + color: var(--semi-color-success); +} +.semi-modal-error-icon { + color: var(--semi-color-danger); +} +.semi-modal-warning-icon { + color: var(--semi-color-warning); +} +.semi-modal-small { + width: 448px; +} +.semi-modal-medium { + width: 684px; +} +.semi-modal-large { + width: 920px; +} +.semi-modal-full-width { + width: calc(100vw - 64px); +} + +.semi-modal-centered { + margin: 0 auto; +} + +.semi-modal-popup .semi-modal-mask, +.semi-modal-popup .semi-modal-wrap { + position: absolute; + overflow: hidden; +} + +.semi-modal-fixed .semi-modal-mask, +.semi-modal-fixed .semi-modal-wrap { + position: fixed; + overflow: hidden; +} + +.semi-modal-displayNone { + display: none; +} + +.semi-modal-content-animate-show { + animation: 120ms semi-modal-content-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; + animation-fill-mode: forwards; +} + +.semi-modal-content-animate-hide { + animation: 120ms semi-modal-content-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; + animation-fill-mode: forwards; +} + +.semi-modal-mask-animate-show { + animation: 90ms semi-modal-mask-keyframe-show cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; + animation-fill-mode: forwards; +} + +.semi-modal-mask-animate-hide { + animation: 90ms semi-modal-mask-keyframe-hide cubic-bezier(0.215, 0.61, 0.355, 1) 0ms forwards; + animation-fill-mode: forwards; +} + +@keyframes semi-modal-content-keyframe-show { + 0% { + opacity: 0; + transform: scale(0.7); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes semi-modal-content-keyframe-hide { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0.7); + } +} +@keyframes semi-modal-mask-keyframe-show { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes semi-modal-mask-keyframe-hide { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +.semi-modal-rtl { + direction: rtl; +} +.semi-modal-rtl .semi-modal-icon-wrapper, .semi-modal-confirm-rtl .semi-modal-icon-wrapper { + margin-right: 0; + margin-left: 12px; +} +.semi-modal-rtl .semi-modal-withIcon, .semi-modal-confirm-rtl .semi-modal-withIcon { + margin-left: 0; + margin-right: 36px; +} +.semi-modal-rtl .semi-modal-footer, .semi-modal-confirm-rtl .semi-modal-footer { + text-align: left; +} +.semi-modal-rtl .semi-modal-footer .semi-button, .semi-modal-confirm-rtl .semi-modal-footer .semi-button { + margin-left: 0; + margin-right: 12px; +} +.semi-modal-confirm-rtl { + direction: rtl; +} +.semi-modal-confirm .semi-modal-confirm-rtl .semi-button { + margin-left: 0; + margin-right: 12px; +} + +.semi-navigation { + box-sizing: border-box; + display: inline-flex; + width: 240px; + outline: none; + overflow: hidden; + margin: 0; + padding-left: 8px; + padding-right: 8px; + user-select: none; + transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); + border-right: 1px solid var(--semi-color-border); + background-color: var(--semi-color-nav-bg); +} +.semi-navigation-inner { + width: 100%; + height: 100%; + display: flex; + justify-content: space-between; +} +.semi-navigation-list { + margin: 0; + padding: 0; + list-style: none; +} +.semi-navigation-list > .semi-navigation-item-normal { + height: 36px; +} +.semi-navigation-list > .semi-navigation-item { + font-weight: 600; +} +.semi-navigation-list > .semi-navigation-item > .semi-navigation-sub-title { + font-weight: 600; +} +.semi-navigation-collapsed { + width: 60px; + padding-left: 8px; + padding-right: 8px; + transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-navigation-collapsed .semi-navigation-item-text { + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 0; +} +.semi-navigation-collapsed .semi-navigation-item-icon:last-child { + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 0; +} +.semi-navigation-collapsed-wrapper { + display: flex; + width: fit-content; + height: fit-content; +} +.semi-navigation-sub-wrap .semi-navigation-sub-title, .semi-navigation-item { + cursor: pointer; + display: flex; + border-radius: var(--semi-border-radius-small); + padding: 8px 12px; + box-sizing: border-box; + margin-top: 0; + margin-bottom: 8px; + 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: 400; + color: var(--semi-color-text-0); + width: 100%; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-navigation-sub-wrap .semi-navigation-sub-title-text, .semi-navigation-item-text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 1; +} +.semi-navigation-sub-wrap .semi-navigation-sub-title-indent, .semi-navigation-item-indent { + width: 32px; +} +.semi-navigation-sub-wrap .semi-navigation-sub-title:focus-visible, .semi-navigation-item:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-navigation-header-link, .semi-navigation-item-link { + display: flex; + width: 100%; + color: inherit; + text-decoration: none; + align-items: center; + justify-content: flex-start; +} +.semi-navigation-item-has-link { + padding: 0; +} +.semi-navigation-item-has-link .semi-navigation-item-link { + padding: 8px 12px; +} +.semi-navigation-item-sub { + padding: 0; +} +.semi-navigation-sub-wrap > .semi-navigation-item-inner { + width: 100%; +} +.semi-navigation-sub-wrap .semi-navigation-sub-title > .semi-navigation-item-inner { + display: flex; +} +.semi-navigation-item-inner { + display: flex; + align-items: center; + width: 100%; + flex: 0 0 auto; +} +.semi-navigation-item-title { + opacity: 1; + transition: opacity 100ms 100s ease-out; +} +.semi-navigation .semi-navigation-sub-title { + margin-bottom: 0; +} +.semi-navigation-item-icon-info { + display: inline-flex; + color: var(--semi-color-text-2); + margin-right: 12px; + min-width: 20px; + margin-left: 0; +} +.semi-navigation-item-icon-toggle-left { + display: inline-flex; + color: var(--semi-color-text-2); + margin-right: 12px; + min-width: 20px; +} +.semi-navigation-item-icon-toggle-right { + display: inline-flex; + color: var(--semi-color-text-2); + margin-left: auto; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 1; +} +.semi-navigation-item-selected { + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-item-selected.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-primary-disabled); + cursor: not-allowed; +} +.semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary-disabled); +} +.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-inner > .semi-navigation-item { + color: var(--semi-color-text-0); +} +.semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-item-normal:hover.semi-navigation-item-selected { + color: var(--semi-color-text-0); + background-color: var(--semi-color-fill-0); +} +.semi-navigation-item-normal:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-item-normal:hover.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-primary-disabled); + cursor: not-allowed; +} +.semi-navigation-item-normal:hover.semi-navigation-item-selected.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary-disabled); +} +.semi-navigation-item-normal:active:not(.semi-navigation-item-selected), .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { + background-color: var(--semi-color-fill-1); + color: var(--semi-color-text-0); +} +.semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-item-normal:active.semi-navigation-item-selected, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected { + color: var(--semi-color-text-0); + background-color: var(--semi-color-fill-1); +} +.semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-item-normal:active.semi-navigation-item-disabled, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-inner > .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-sub-wrap .semi-navigation-item-inner { + display: block; +} +.semi-navigation-sub-wrap { + display: block; + padding: 0; + margin-top: 0; + height: inherit; +} +.semi-navigation-sub-wrap .semi-navigation-sub-title { + display: flex; + justify-content: flex-start; + height: 36px; + align-items: center; +} +.semi-navigation-sub { + font-weight: 400; + font-size: 14px; + list-style: none; + outline: none; + padding: 0; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +.semi-navigation-sub .semi-navigation-item { + color: var(--semi-color-text-0); + background-color: transparent; + height: 36px; + font-weight: 400; + width: 100%; +} +.semi-navigation-sub .semi-navigation-item:first-child { + margin-top: 8px; +} +.semi-navigation-sub .semi-navigation-item > .semi-navigation-sub .semi-navigation-item-text:first-child { + margin-left: 44px; +} +.semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-navigation-sub .semi-navigation-item:hover:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected { + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-navigation-sub .semi-navigation-item:hover.semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) { + background-color: var(--semi-color-fill-1); + color: var(--semi-color-text-0); +} +.semi-navigation-sub .semi-navigation-item:active:not(.semi-navigation-sub-wrap):not(.semi-navigation-item-selected):not(.semi-navigation-item-disabled) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected { + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-navigation-sub .semi-navigation-item:active.semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-sub .semi-navigation-item-selected { + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-navigation-sub .semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-sub .semi-navigation-item-selected.semi-navigation-item-disabled { + cursor: not-allowed; + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-disabled-text); +} +.semi-navigation-sub .semi-navigation-item-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-sub .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-sub .semi-navigation-sub-wrap { + height: inherit; +} +.semi-navigation-icon-rotate-0 { + transition: transform 200ms ease-in-out; + transform: rotate(0); +} +.semi-navigation-icon-rotate-180 { + transition: transform 200ms ease-in-out; + transform: rotate(-180deg); +} + +/* Header、Footer-Common */ +.semi-navigation-header { + display: inline-flex; + align-items: center; + box-sizing: border-box; +} +.semi-navigation-header-logo { + margin-left: 0; + margin-right: 8px; + display: inline-flex; +} +.semi-navigation-header-logo > .semi-icon, .semi-navigation-header-logo > img { + width: 36px; + height: 36px; + object-fit: scale-down; +} +.semi-navigation-header-text { + 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; + font-weight: 600; + display: inline-flex; + color: var(--semi-color-text-0); + white-space: nowrap; + text-overflow: ellipsis; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 1; +} +.semi-navigation-footer { + box-sizing: border-box; + padding: 16px 24px; + display: inline-flex; + align-items: center; +} +.semi-navigation-footer .semi-navigation-collapse-btn { + text-overflow: ellipsis; + white-space: nowrap; +} + +.semi-navigation-collapsed .semi-navigation-header { + justify-content: center; +} +.semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { + margin-right: 0; + width: 100%; +} +.semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > .semi-icon, .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo > img { + width: 36px; + max-width: 100%; + max-height: 100%; +} +.semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-text { + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); + opacity: 0; +} + +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-item-selected:not(.semi-navigation-item-disabled).semi-navigation-item-normal:hover .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title { + color: var(--semi-color-text-0); + background-color: transparent; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected { + font-weight: 600; + background-color: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected { + background-color: transparent; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled { + background-color: transparent; + color: var(--semi-color-primary-disabled); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary-disabled); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled { + font-weight: 600; + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon, +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected { + color: var(--semi-color-text-0); + background-color: var(--semi-color-fill-0); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) { + background-color: var(--semi-color-fill-1); + color: var(--semi-color-text-0); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected { + color: var(--semi-color-text-0); + background-color: var(--semi-color-fill-1); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected), .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected { + background-color: transparent; + color: var(--semi-color-primary-disabled); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title:active.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary-disabled); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon, +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected { + color: var(--semi-color-text-0); + background-color: var(--semi-color-fill-0); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) { + background-color: transparent; + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon, +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled:not(.semi-navigation-sub-title-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected { + background-color: transparent; + color: var(--semi-color-primary-disabled); + cursor: not-allowed; +} +.semi-navigation-vertical .semi-navigation-list .semi-navigation-sub-wrap > .semi-navigation-sub-title:hover.semi-navigation-sub-title-disabled.semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-primary-disabled); +} +.semi-navigation-vertical .semi-navigation-item:last-of-type { + margin-bottom: 0; +} +.semi-navigation-vertical .semi-navigation-inner { + flex-direction: column; +} +.semi-navigation-vertical .semi-navigation-header-list-outer { + height: 100%; +} +.semi-navigation-vertical .semi-navigation-list-wrapper { + padding-top: 12px; + overflow-y: auto; + overflow-x: hidden; +} +.semi-navigation-vertical .semi-navigation-header { + padding-top: 32px; + padding-bottom: 36px; + padding-left: 3.5px; + padding-right: 8px; + width: 100%; +} +.semi-navigation-vertical .semi-navigation-header-collapsed { + padding-left: 3.5px; + padding-right: 0; + transition: padding-left 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-navigation-vertical .semi-navigation-footer { + color: var(--semi-color-text-2); + padding-left: 8px; + padding-right: 8px; +} +.semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { + margin-left: 12px; + opacity: 1; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); +} +.semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn > .semi-button { + padding-left: 8px; + padding-right: 8px; +} +.semi-navigation-vertical .semi-navigation-footer-collapsed { + justify-content: center; +} +.semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn { + width: 100%; +} +.semi-navigation-vertical .semi-navigation-footer-collapsed .semi-navigation-collapse-btn .semi-button-content-right { + opacity: 0; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); +} + +.semi-navigation-horizontal { + width: 100%; + height: 60px; + border-right: none; + border-bottom: 1px solid var(--semi-color-border); + padding-left: 24px; + padding-right: 24px; +} +.semi-navigation-horizontal .semi-navigation-inner { + flex-direction: row; +} +.semi-navigation-horizontal .semi-navigation-header-list-outer { + display: inline-flex; + align-items: center; +} +.semi-navigation-horizontal .semi-navigation-header-list-outer-collapsed { + align-items: baseline; +} +.semi-navigation-horizontal .semi-navigation-header { + width: inherit; + margin-right: 24px; +} +.semi-navigation-horizontal .semi-navigation-list { + display: inline-flex; + align-items: center; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item { + margin-bottom: 0; + color: var(--semi-color-text-2); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-2); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected { + color: var(--semi-color-text-0); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-selected .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-0); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled { + color: var(--semi-color-disabled-text); + background-color: transparent; + cursor: not-allowed; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) { + color: var(--semi-color-text-1); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-1); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover:not(.semi-navigation-item-selected) .semi-navigation-item-text { + color: var(--semi-color-text-1); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) { + color: var(--semi-color-text-0); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active:not(.semi-navigation-item-selected) .semi-navigation-item-icon:first-child { + color: var(--semi-color-text-0); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled { + color: var(--semi-color-disabled-text); + background-color: transparent; + cursor: not-allowed; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-icon:first-child, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon, +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-icon:first-child { + color: var(--semi-color-disabled-text); +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:hover.semi-navigation-item-disabled .semi-navigation-item-text, .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item-normal:active.semi-navigation-item-disabled .semi-navigation-item-text { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { + margin-right: 8px; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title .semi-navigation-item-text { + color: var(--semi-color-text-2); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child, +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-selected .semi-navigation-item-text { + color: var(--semi-color-text-0); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled { + cursor: not-allowed; +} +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-icon:first-child, +.semi-navigation-horizontal .semi-navigation-list .semi-navigation-sub-title-disabled .semi-navigation-item-text { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-navigation-horizontal .semi-navigation-item-inner { + width: auto; +} +.semi-navigation-horizontal .semi-navigation-item-icon:last-child { + margin-left: 8px; +} +.semi-navigation-horizontal .semi-navigation-item-icon:first-child { + margin-right: 8px; +} +.semi-navigation-horizontal .semi-navigation-item { + width: auto; +} +.semi-navigation-horizontal .semi-navigation-item-collapsed { + word-wrap: none; + text-overflow: ellipsis; +} +.semi-navigation-horizontal .semi-navigation-footer { + border-top: none; + padding-right: 0; +} +.semi-navigation-horizontal .semi-navigation-footer-collapsed { + justify-content: center; + flex-direction: row; + align-items: center; +} + +.semi-navigation-popover .semi-navigation-sub-title { + width: 100%; +} +.semi-navigation-popover .semi-navigation-item-selected { + font-weight: normal; +} + +.semi-dropdown-item .semi-navigation-sub-title { + box-sizing: border-box; + padding: 8px 12px; + width: 100%; +} +.semi-dropdown-item.semi-navigation-item { + margin-top: 0; + margin-bottom: 0; + min-width: 150px; +} + +.semi-dropdown-menu .semi-navigation-item-sub { + padding: 0; +} + +.semi-rtl .semi-navigation, +.semi-portal-rtl .semi-navigation { + direction: rtl; + border-right: 0; + border-left: 1px solid var(--semi-color-border); + transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-rtl .semi-navigation-collapsed, +.semi-portal-rtl .semi-navigation-collapsed { + transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-rtl .semi-navigation-item-icon:first-child, +.semi-portal-rtl .semi-navigation-item-icon:first-child { + margin-right: 0; + margin-left: 12px; +} +.semi-rtl .semi-navigation-item-icon:last-child, +.semi-portal-rtl .semi-navigation-item-icon:last-child { + margin-left: 0; + margin-right: auto; +} +.semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, +.semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, +.semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-rtl .semi-navigation-sub .semi-navigation-item-text:first-child, +.semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-portal-rtl .semi-navigation-sub .semi-navigation-item-text:first-child { + margin-left: auto; + margin-right: 44px; +} +.semi-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child, +.semi-portal-rtl .semi-navigation-sub .semi-navigation-item > .semi-navigation-item-icon:first-child { + margin-right: 12px; +} +.semi-rtl .semi-navigation-header, +.semi-portal-rtl .semi-navigation-header { + display: inline-flex; + align-items: center; + box-sizing: border-box; +} +.semi-rtl .semi-navigation-header-logo, +.semi-portal-rtl .semi-navigation-header-logo { + margin-left: 8px; + margin-right: 0; + display: inline-flex; +} +.semi-rtl .semi-navigation-collapsed, +.semi-portal-rtl .semi-navigation-collapsed { + direction: rtl; +} +.semi-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo, +.semi-portal-rtl .semi-navigation-collapsed .semi-navigation-header .semi-navigation-header-logo { + margin-right: auto; + margin-left: 0; +} +.semi-rtl .semi-navigation-vertical, +.semi-portal-rtl .semi-navigation-vertical { + direction: rtl; +} +.semi-rtl .semi-navigation-vertical .semi-navigation-header, +.semi-portal-rtl .semi-navigation-vertical .semi-navigation-header { + padding-right: 3.5px; + padding-left: 8px; +} +.semi-rtl .semi-navigation-vertical .semi-navigation-header-collapsed, +.semi-portal-rtl .semi-navigation-vertical .semi-navigation-header-collapsed { + padding-right: 3.5px; + padding-left: 0; + transition: padding-right 100ms ease-out, width 200ms cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right, +.semi-portal-rtl .semi-navigation-vertical .semi-navigation-footer .semi-navigation-collapse-btn .semi-button-content-right { + margin-left: auto; + margin-right: 12px; + transition: opacity 0.2s cubic-bezier(0.5, -0.1, 1, 0.4); +} +.semi-rtl .semi-navigation-horizontal, +.semi-portal-rtl .semi-navigation-horizontal { + direction: rtl; + border-right: auto; + border-left: none; + padding-left: 24px; + padding-right: 24px; +} +.semi-rtl .semi-navigation-horizontal .semi-navigation-header, +.semi-portal-rtl .semi-navigation-horizontal .semi-navigation-header { + margin-right: auto; + margin-left: 24px; +} +.semi-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type), +.semi-portal-rtl .semi-navigation-horizontal .semi-navigation-list .semi-navigation-item:not(:last-of-type) { + margin-right: auto; + margin-left: 8px; +} +.semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child, +.semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:last-child { + margin-left: auto; + margin-right: 8px; +} +.semi-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child, +.semi-portal-rtl .semi-navigation-horizontal .semi-navigation-item-icon:first-child { + margin-right: auto; + margin-left: 8px; +} +.semi-rtl .semi-navigation-horizontal .semi-navigation-footer, +.semi-portal-rtl .semi-navigation-horizontal .semi-navigation-footer { + padding-right: auto; + padding-left: 0; +} + +.semi-notification-wrapper { + position: fixed; +} + +.semi-notification-list { + position: fixed; + box-sizing: border-box; + margin: 0; + padding: 0; + z-index: 1010; + pointer-events: none; +} +.semi-notification-list[placement=topRight] { + right: 0; + top: 0; +} +.semi-notification-list[placement=top] { + top: 0; + left: 50%; + transform: translateX(-50%); +} +.semi-notification-list[placement=topLeft] { + left: 0; + top: 0; +} +.semi-notification-list[placement=bottom] { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} +.semi-notification-list[placement=bottomRight] { + bottom: 0; + right: 0; +} +.semi-notification-list[placement=bottomLeft] { + bottom: 0; + left: 0; +} + +.semi-notification-notice { + box-shadow: var(--semi-shadow-elevated); + border-radius: var(--semi-border-radius-medium); + padding-top: 16px; + padding-right: 12px; + padding-bottom: 16px; + padding-left: 20px; + margin: 20px; + width: auto; + min-width: 320px; + background-color: var(--semi-color-bg-3); + position: relative; + display: flex; + pointer-events: auto; +} +.semi-notification-notice-icon { + width: 24px; + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + display: flex; + align-items: flex-start; + justify-content: flex-start; + height: 100%; + margin-right: 12px; +} +.semi-notification-notice-info { + color: var(--semi-color-info); +} +.semi-notification-notice-warning { + color: var(--semi-color-warning); +} +.semi-notification-notice-error { + color: var(--semi-color-danger); +} +.semi-notification-notice-success { + color: var(--semi-color-success); +} +.semi-notification-notice-light.semi-notification-notice-warning { + background-image: linear-gradient(0deg, var(--semi-color-warning-light-default), var(--semi-color-warning-light-default)); + background-color: var(--semi-color-bg-0); + border: 1px solid var(--semi-color-warning); +} +.semi-notification-notice-light.semi-notification-notice-success { + background-image: linear-gradient(0deg, var(--semi-color-success-light-default), var(--semi-color-success-light-default)); + background-color: var(--semi-color-bg-0); + border: 1px solid var(--semi-color-success); +} +.semi-notification-notice-light.semi-notification-notice-info, .semi-notification-notice-light.semi-notification-notice-default { + background-image: linear-gradient(0deg, var(--semi-color-info-light-default), var(--semi-color-info-light-default)); + background-color: var(--semi-color-bg-0); + border: 1px solid var(--semi-color-info); +} +.semi-notification-notice-light.semi-notification-notice-error { + background-image: linear-gradient(0deg, var(--semi-color-danger-light-default), var(--semi-color-danger-light-default)); + background-color: var(--semi-color-bg-0); + border: 1px solid var(--semi-color-danger); +} +.semi-notification-notice-title { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + color: var(--semi-color-text-0); + margin-bottom: 4px; + word-wrap: break-word; + overflow-wrap: break-word; +} +.semi-notification-notice-inner { + display: flex; + width: 100%; + min-width: 0; +} +.semi-notification-notice-content-wrapper { + flex: 1 1 auto; + margin-right: 8px; + min-width: 0; +} +.semi-notification-notice-content { + 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: 400; + color: var(--semi-color-text-1); + word-wrap: break-word; + overflow-wrap: break-word; +} +.semi-notification-notice-icon-close { + height: 24px; +} +.semi-notification-notice-icon-close .semi-icon-close { + color: var(--semi-color-text-2); +} +.semi-notification-notice-controls { + display: flex; + 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; + cursor: pointer; +} +.semi-notification-notice-detail { + text-align: center; + flex-grow: 1; +} +.semi-notification-notice-later { + text-align: center; + flex-grow: 1; +} +@keyframes semi-notification-slideShow_top { + from { + opacity: 0; + transform: translateY(-100%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes semi-notification-slideHide_top { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(-100%); + } +} +@keyframes semi-notification-slideShow_topLeft { + from { + opacity: 0; + transform: translateX(-100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes semi-notification-slideHide_topLeft { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(-100%); + } +} +@keyframes semi-notification-slideShow_topRight { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes semi-notification-slideHide_topRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100%); + } +} +@keyframes semi-notification-slideShow_bottom { + from { + opacity: 0; + transform: translateY(100%); + } + to { + opacity: 1; + transform: translateY(0); + } +} +@keyframes semi-notification-slideHide_bottom { + from { + opacity: 1; + transform: translateY(0); + } + to { + opacity: 0; + transform: translateY(100%); + } +} +@keyframes semi-notification-slideShow_bottomLeft { + from { + opacity: 0; + transform: translateX(-100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes semi-notification-slideHide_bottomLeft { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(-100%); + } +} +@keyframes semi-notification-slideShow_bottomRight { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} +@keyframes semi-notification-slideHide_bottomRight { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100%); + } +} +.semi-notification-notice-animation-show_top { + animation: semi-notification-slideShow_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_top { + animation: semi-notification-slideHide_top 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-show_topLeft { + animation: semi-notification-slideShow_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_topLeft { + animation: semi-notification-slideHide_topLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-show_topRight { + animation: semi-notification-slideShow_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_topRight { + animation: semi-notification-slideHide_topRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-show_bottom { + animation: semi-notification-slideShow_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_bottom { + animation: semi-notification-slideHide_bottom 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-show_bottomLeft { + animation: semi-notification-slideShow_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_bottomLeft { + animation: semi-notification-slideHide_bottomLeft 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-show_bottomRight { + animation: semi-notification-slideShow_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} +.semi-notification-notice-animation-hide_bottomRight { + animation: semi-notification-slideHide_bottomRight 300ms cubic-bezier(0.62, 0.63, 0, 1.13) 0ms; + animation-fill-mode: forwards; +} + +.semi-notification-notice.semi-notification-notice-rtl { + padding-right: 20px; + padding-left: 12px; +} +.semi-notification-notice-rtl { + direction: rtl; +} +.semi-notification-notice-rtl .semi-notification-notice-icon { + margin-right: 12px; +} +.semi-notification-notice-rtl .semi-notification-notice-content-wrapper { + margin-right: 8px; +} + +.semi-overflow-list { + display: flex; + flex-wrap: nowrap; + min-width: 0; +} +.semi-overflow-list-spacer { + flex-shrink: 1; + width: 1px; +} +.semi-overflow-list-scroll-wrapper { + display: flex; + flex: 1; + flex-wrap: nowrap; + overflow-x: scroll; +} + +.semi-rtl .semi-overflow-list, +.semi-portal-rtl .semi-overflow-list { + direction: rtl; +} + +.semi-page { + display: flex; + list-style: none; + padding: 0; + align-items: center; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin-block-start: 0; + margin-block-end: 0; +} +.semi-page-small { + 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: 400; + color: var(--semi-color-text-2); + padding: 0 0; +} +.semi-page-disabled { + cursor: not-allowed; +} +.semi-page-disabled .semi-page-total { + color: var(--semi-color-disabled-text); +} +.semi-page-item { + 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; + min-width: 32px; + border: 0px solid transparent; + cursor: pointer; + user-select: none; + height: 32px; + margin-left: 4px; + margin-right: 4px; + font-weight: 400; + color: var(--semi-color-text-0); + border-radius: var(--semi-border-radius-small); + text-align: center; + line-height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-page-item:hover { + border-color: transparent; + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-page-item-rest-opening { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-text-0); +} +.semi-page-item:active { + border-color: transparent; + background-color: var(--semi-color-fill-1); + color: var(--semi-color-text-0); +} +.semi-page-item-active { + border-color: transparent; + color: var(--semi-color-primary); + font-weight: 600; + background-color: var(--semi-color-primary-light-default); +} +.semi-page-item-active:hover { + border-color: transparent; + color: var(--semi-color-primary); + background-color: var(--semi-color-primary-light-default); +} +.semi-page-item-disabled { + border-color: transparent; + color: var(--semi-color-disabled-text); + background-color: transparent; + cursor: not-allowed; +} +.semi-page-item-disabled:hover { + background-color: transparent; +} +.semi-page-item-small { + min-width: 44px; + margin: 0; +} +.semi-page-item-all-disabled { + border-color: transparent; + color: var(--semi-color-disabled-text); + background-color: transparent; + cursor: not-allowed; +} +.semi-page-item-all-disabled:hover { + background-color: transparent; + color: var(--semi-color-disabled-text); +} +.semi-page-item-all-disabled-active { + background-color: var(--semi-color-disabled-fill); + font-weight: 600; +} +.semi-page-item-all-disabled-active:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-page-total { + 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; + color: var(--semi-color-text-2); +} +.semi-page-prev, .semi-page-next { + color: var(--semi-color-tertiary); + cursor: pointer; +} +.semi-page-prev.semi-page-item-disabled, .semi-page-next.semi-page-item-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-page-quickjump { + margin-left: 24px; + 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; + display: flex; + justify-content: center; + align-items: center; + flex-shrink: 0; + color: var(--semi-color-text-0); +} +.semi-page-quickjump-input-number { + max-width: 50px; + margin-left: 4px; + margin-right: 4px; +} +.semi-page-quickjump-disabled { + color: var(--semi-color-disabled-text); +} +.semi-page .semi-select { + user-select: none; +} + +.semi-select-dropdown { + user-select: none; +} + +.semi-page-rest-list { + padding-top: 4px; + padding-bottom: 4px; +} +.semi-page-rest-list > div { + position: relative; +} +.semi-page-rest-item { + height: 32px; + line-height: 32px; + display: flex; + justify-content: center; + box-sizing: border-box; + cursor: pointer; +} +.semi-page-rest-item:hover { + background-color: var(--semi-color-fill-0); +} +.semi-page-rest-item:active { + background-color: var(--semi-color-fill-1); +} + +.semi-rtl .semi-page, +.semi-portal-rtl .semi-page { + direction: rtl; +} +.semi-rtl .semi-page-item, +.semi-portal-rtl .semi-page-item { + margin-right: 4px; + margin-left: 4px; +} +.semi-rtl .semi-page-prev, .semi-rtl .semi-page-next, +.semi-portal-rtl .semi-page-prev, +.semi-portal-rtl .semi-page-next { + transform: scaleX(-1); +} + +.semi-pincode-wrapper { + display: flex; +} +.semi-pincode-wrapper .semi-input-wrapper-small { + width: 24px; + margin-right: 6px; +} +.semi-pincode-wrapper .semi-input-wrapper-small:last-child { + margin-right: 0px; +} +.semi-pincode-wrapper .semi-input-wrapper-default { + width: 32px; + margin-right: 8px; +} +.semi-pincode-wrapper .semi-input-wrapper-default:last-child { + margin-right: 0px; +} +.semi-pincode-wrapper .semi-input-wrapper-large { + width: 42px; + margin-right: 12px; +} +.semi-pincode-wrapper .semi-input-wrapper-large:last-child { + margin-right: 0px; +} +.semi-pincode-wrapper .semi-input-wrapper input { + padding: 0; + text-align: center; +} + +.semi-popconfirm { + box-sizing: border-box; + max-width: 400px; +} +.semi-popconfirm-inner { + display: flex; + flex-direction: column; + padding: 24px 24px 24px 20px; + position: relative; +} +.semi-popconfirm-header { + display: flex; + justify-content: flex-start; +} +.semi-popconfirm-header-title { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + margin-bottom: 8px; + color: var(--semi-color-text-0); +} +.semi-popconfirm-header-icon { + width: 24px; + height: 24px; + margin-right: 12px; +} +.semi-popconfirm-header .semi-icon-alert_triangle { + color: var(--semi-color-warning); +} +.semi-popconfirm-header-body { + display: inline-flex; + flex-grow: 1; + flex-direction: column; +} +.semi-popconfirm-body { + color: var(--semi-color-text-2); +} +.semi-popconfirm-body-withIcon { + margin-left: 36px; +} +.semi-popconfirm-body > p { + margin: 0; + padding: 0; +} +.semi-popconfirm-footer { + margin-top: 25px; + display: flex; + justify-content: flex-end; +} +.semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { + margin-right: 8px; +} +.semi-popconfirm-popover { + border-radius: var(--semi-border-radius-medium); +} + +.semi-popover-with-arrow .semi-popconfirm-inner { + padding: 12px 12px 12px 8px; +} + +.semi-popconfirm-rtl { + direction: rtl; +} +.semi-popconfirm-rtl .semi-popconfirm-inner { + padding: 24px 20px 24px 24px; +} +.semi-popconfirm-rtl .semi-popconfirm-header { + margin-right: 0; +} +.semi-popconfirm-rtl .semi-popconfirm-header-icon { + margin-right: 0; + margin-left: 12px; +} +.semi-popconfirm-rtl .semi-popconfirm-footer { + justify-content: flex-end; +} +.semi-popconfirm-rtl .semi-popconfirm-footer > .semi-button:first-child:not(:last-child) { + margin-right: 0; + margin-left: 8px; +} + +.semi-popover-with-arrow.semi-popconfirm-rtl { + direction: rtl; +} +.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner { + padding: 12px 8px 12px 12px; +} + +@keyframes semi-popover-zoomIn { + from { + opacity: 0; + transform: scale(0.8, 0.8); + } + 50% { + opacity: 1; + } +} +@keyframes semi-popover-zoomOut { + from { + opacity: 1; + } + 60% { + opacity: 0; + transform: scale(0.8, 0.8); + } + to { + opacity: 0; + } +} +.semi-popover-wrapper { + position: relative; + background-color: var(--semi-color-bg-3); + backdrop-filter: none; + box-shadow: var(--semi-shadow-elevated); + z-index: 1030; + border-radius: var(--semi-border-radius-medium); + 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; + opacity: 0; +} +.semi-popover-wrapper-show { + opacity: 1; +} +.semi-popover-trigger { + display: inline-block; + width: auto; + height: auto; +} +.semi-popover-title { + padding: 8px; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-popover-confirm { + position: absolute; +} +.semi-popover-with-arrow { + padding: 12px; + box-sizing: border-box; +} +.semi-popover-animation-show { + animation: semi-popover-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + animation-fill-mode: forwards; +} +.semi-popover-animation-hide { + animation: semi-popover-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + animation-fill-mode: forwards; +} + +.semi-popover-icon-arrow path:nth-child(1) { + fill: var(--semi-color-border); +} +.semi-popover-icon-arrow path:nth-child(2) { + fill: var(--semi-color-bg-3); +} + +.semi-popover-wrapper .semi-popover-icon-arrow { + height: 8px; + width: 24px; + position: absolute; + color: unset; +} +.semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow { + left: 50%; + transform: translateX(-50%); + bottom: -7px; +} +.semi-popover-wrapper[x-placement=top].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=top] .semi-popover-with-arrow { + min-width: 36px; +} +.semi-popover-wrapper[x-placement=topLeft] .semi-popover-icon-arrow { + bottom: -7px; + left: 6px; +} +.semi-popover-wrapper[x-placement=topLeft].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=topLeft] .semi-popover-with-arrow { + min-width: 36px; +} +.semi-popover-wrapper[x-placement=topRight] .semi-popover-icon-arrow { + bottom: -7px; + right: 6px; +} +.semi-popover-wrapper[x-placement=topRight].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=topRight] .semi-popover-with-arrow { + min-width: 36px; +} +.semi-popover-wrapper[x-placement=leftTop] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + right: -7px; + top: 6px; +} +.semi-popover-wrapper[x-placement=leftTop].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=leftTop] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=left] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + right: -7px; + top: 50%; + transform: translateY(-50%); +} +.semi-popover-wrapper[x-placement=left].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=left] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + right: -7px; + bottom: 6px; +} +.semi-popover-wrapper[x-placement=leftBottom].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=leftBottom] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=rightTop] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + left: -7px; + top: 6px; + transform: rotate(180deg); +} +.semi-popover-wrapper[x-placement=rightTop].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=rightTop] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=right] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + left: -7px; + top: 50%; + transform: translateY(-50%) rotate(180deg); +} +.semi-popover-wrapper[x-placement=right].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=right] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-icon-arrow { + width: 8px; + height: 24px; + left: -7px; + bottom: 6px; + transform: rotate(180deg); +} +.semi-popover-wrapper[x-placement=rightBottom].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=rightBottom] .semi-popover-with-arrow { + min-height: 36px; +} +.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-icon-arrow { + top: -7px; + left: 6px; + transform: rotate(180deg); +} +.semi-popover-wrapper[x-placement=bottomLeft].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=bottomLeft] .semi-popover-with-arrow { + min-width: 36px; +} +.semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow { + top: -7px; + left: 50%; + transform: translateX(-50%) rotate(180deg); +} +.semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=bottom] .semi-popover-with-arrow { + min-width: 36px; +} +.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-icon-arrow { + right: 6px; + top: -7px; + transform: rotate(180deg); +} +.semi-popover-wrapper[x-placement=bottomRight].semi-popover-with-arrow, +.semi-popover-wrapper[x-placement=bottomRight] .semi-popover-with-arrow { + min-width: 36px; +} + +.semi-popover.semi-popover-rtl { + direction: rtl; +} + +.semi-progress { + display: flex; + align-items: center; +} +.semi-progress-track { + background-color: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-small); +} +.semi-progress-horizontal { + height: 4px; + margin-top: 4px; + margin-bottom: 4px; +} +.semi-progress-horizontal.semi-progress-large { + height: 6px; +} +.semi-progress-horizontal .semi-progress-track { + height: 100%; + width: 100%; +} +.semi-progress-horizontal .semi-progress-track-inner { + height: 100%; + background-color: var(--semi-color-success); + border-radius: var(--semi-border-radius-small); + transition: width 0.3s; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-progress-horizontal .semi-progress-line-text { + min-width: 45px; + font-weight: 600; + margin-left: 16px; + color: var(--semi-color-text-0); +} +.semi-progress-vertical { + width: 4px; + display: inline-flex; + height: 100%; + margin-left: 4px; + margin-right: 4px; + flex-direction: column; +} +.semi-progress-vertical.semi-progress-large { + width: 6px; +} +.semi-progress-vertical .semi-progress-track { + height: 100%; + width: 100%; +} +.semi-progress-vertical .semi-progress-track-inner { + background-color: var(--semi-color-success); + border-radius: var(--semi-border-radius-small); + width: 100%; + transition: height 0.3s; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-progress-vertical .semi-progress-line-text { + font-weight: 600; + margin-top: 8px; +} +.semi-progress-circle { + position: relative; + display: inline-block; +} +.semi-progress-circle-ring { + display: block; +} +.semi-progress-circle-ring-track { + stroke: var(--semi-color-fill-0); +} +.semi-progress-circle-ring-inner { + transition: stroke-dashoffset 0.3s; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); + transform: rotate(-90deg); + transform-origin: 50% 50%; + stroke: var(--semi-color-success); +} +.semi-progress-circle-text { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + text-align: center; + transform: translate(-50%, -50%); + user-select: none; + color: var(--semi-color-mode-minor-text); +} + +.semi-rtl .semi-progress, +.semi-portal-rtl .semi-progress { + direction: rtl; +} +.semi-rtl .semi-progress-horizontal .semi-progress-line-text, +.semi-portal-rtl .semi-progress-horizontal .semi-progress-line-text { + margin-left: 0; + margin-right: 16px; +} +.semi-rtl .semi-progress-circle-ring-inner, +.semi-portal-rtl .semi-progress-circle-ring-inner { + transform: rotate(-90deg); + transform-origin: 50% 50%; +} +.semi-rtl .semi-progress-circle-text, +.semi-portal-rtl .semi-progress-circle-text { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} + +.semi-radio { + box-sizing: border-box; + 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; + position: relative; + display: inline-flex; + column-gap: 8px; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + min-height: 20px; + min-width: 16px; + cursor: pointer; + vertical-align: bottom; + text-align: left; +} +.semi-radio.semi-radio-vertical { + display: block; +} +.semi-radio input[type=checkbox], +.semi-radio input[type=radio] { + position: absolute; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 100%; + margin: 0; + cursor: pointer; +} +.semi-radio:hover .semi-radio-inner-display { + background: var(--semi-color-fill-0); + border: solid 1px var(--semi-color-focus-border); +} +.semi-radio:hover.semi-radio-cardRadioGroup .semi-radio-inner-display { + background: var(--semi-color-white); +} +.semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display { + background: var(--semi-color-primary-hover); + border-color: var(--semi-color-primary-hover); +} +.semi-radio:active .semi-radio-inner-display { + background: var(--semi-color-fill-1); +} +.semi-radio:active.semi-radio-cardRadioGroup .semi-radio-inner-display { + background: var(--semi-color-white); +} +.semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display { + background: var(--semi-color-primary-active); + border-color: var(--semi-color-primary-active); +} +.semi-radio-buttonRadioComponent { + padding: 4px; + background: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-small); +} +.semi-radio-buttonRadioGroup { + position: relative; + padding: 4px; + border-radius: var(--semi-border-radius-small); + line-height: 16px; +} +.semi-radio-buttonRadioGroup:not(:last-child) { + padding-right: 0; +} +.semi-radio-buttonRadioGroup-small { + padding: 2px 4px; + line-height: 16px; +} +.semi-radio-buttonRadioGroup-large { + padding: 4px; + line-height: 20px; +} +.semi-radio-cardRadioGroup { + flex-wrap: nowrap; + border-radius: var(--semi-border-radius-small); + padding: 12px 16px; + background: transparent; + border: 1px solid transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-radio-cardRadioGroup .semi-radio-inner { + flex-shrink: 0; +} +.semi-radio-cardRadioGroup .semi-radio-inner-display { + background: var(--semi-color-white); +} +.semi-radio-cardRadioGroup .semi-radio-addon { + font-weight: 600; + font-size: 14px; + line-height: 20px; + color: var(--semi-color-text-0); +} +.semi-radio-cardRadioGroup .semi-radio-extra { + font-weight: normal; + font-size: 14px; + line-height: 20px; + color: var(--semi-color-text-2); + padding-left: 0; +} +.semi-radio-cardRadioGroup:active { + background: var(--semi-color-fill-1); +} +.semi-radio-cardRadioGroup_checked { + background: var(--semi-color-primary-light-default); + border: 1px solid var(--semi-color-primary); +} +.semi-radio-cardRadioGroup_checked:hover { + border: 1px solid var(--semi-color-primary-hover); +} +.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display { + border-color: var(--semi-color-primary-hover); +} +.semi-radio-cardRadioGroup_checked:active { + background: var(--semi-color-primary-light-default); + border: 1px solid var(--semi-color-primary-active); +} +.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display { + border-color: var(--semi-color-primary-active); +} +.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display { + background: var(--semi-color-primary-active); +} +.semi-radio-cardRadioGroup_hover { + background: var(--semi-color-fill-0); +} +.semi-radio-cardRadioGroup_disabled:active { + background: transparent; +} +.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup { + background: var(--semi-color-primary-light-default); + border: 1px solid var(--semi-color-primary-disabled); +} +.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display { + border-color: var(--semi-color-primary-disabled); +} +.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display { + border-color: var(--semi-color-primary-disabled); +} +.semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display { + background: var(--semi-color-disabled-fill); + border: solid 1px var(--semi-color-border); +} +.semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display { + color: rgba(var(--semi-white), 1); + background: var(--semi-color-primary-disabled); + border-color: var(--semi-color-primary-disabled); +} +.semi-radio-inner { + display: inline-flex; + margin-top: 2px; + position: relative; + width: 16px; + height: 16px; + vertical-align: sub; + user-select: none; +} +.semi-radio-inner-display { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + width: 16px; + height: 16px; + border: solid 1px var(--semi-color-text-3); + border-radius: 16px; + background: transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-radio-inner-display .semi-icon { + width: 100%; + height: 100%; + font-size: 14px; +} +.semi-radio-content { + display: flex; + flex-direction: column; + row-gap: 4px; +} +.semi-radio:hover .semi-radio-inner-display { + background: var(--semi-color-fill-0); +} +.semi-radio:active .semi-radio-inner-display { + background: var(--semi-color-fill-1); +} +.semi-radio-addon { + user-select: none; + color: var(--semi-color-text-0); + display: inline-flex; + align-items: center; +} +.semi-radio-addon-buttonRadio { + text-align: center; + border-radius: var(--semi-border-radius-small); + font-weight: 600; + color: var(--semi-color-text-1); + font-size: 12px; + padding: 4px 16px; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-radio-addon-buttonRadio-hover { + font-weight: 600; + background: var(--semi-color-fill-1); +} +.semi-radio-addon-buttonRadio-checked { + font-weight: 600; + background: var(--semi-color-bg-3); + color: var(--semi-color-primary); +} +.semi-radio-addon-buttonRadio-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-radio-addon-buttonRadio-small { + font-size: 12px; + padding: 2px 16px; +} +.semi-radio-addon-buttonRadio-large { + font-size: 14px; + padding: 6px 24px; +} +.semi-radio .semi-radio-inner-checked:hover .semi-radio-inner-display { + background: var(--semi-color-primary-hover); +} +.semi-radio .semi-radio-inner-checked:active .semi-radio-inner-display { + background: var(--semi-color-primary-active); +} +.semi-radio .semi-radio-inner-checked .semi-radio-inner-display { + border: solid 1px var(--semi-color-primary); + background: var(--semi-color-primary); + color: rgba(var(--semi-white), 1); + border-radius: 16px; +} +.semi-radio .semi-radio-inner-checked > .semi-radio-addon { + color: var(--semi-color-text-0); +} +.semi-radio .semi-radio-inner-buttonRadio, +.semi-radio .semi-radio-inner-pureCardRadio { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin-top: 0; + z-index: -1; + opacity: 0; +} +.semi-radio-disabled, .semi-radio-disabled:hover { + cursor: not-allowed; +} +.semi-radio-disabled .semi-radio-inner { + cursor: not-allowed; +} +.semi-radio-disabled .semi-radio-inner-display { + opacity: 0.75; + background: var(--semi-color-disabled-fill); + border-color: var(--semi-color-border); +} +.semi-radio-disabled .semi-radio-inner-display:hover { + background: transparent; +} +.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display { + color: rgba(var(--semi-white), 1); + background: var(--semi-color-primary-disabled); + border-color: var(--semi-color-primary-disabled); +} +.semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover { + color: rgba(var(--semi-white), 1); + background: var(--semi-color-primary-disabled); + border-color: var(--semi-color-primary-disabled); +} +.semi-radio-disabled .semi-radio-addon { + color: var(--semi-color-disabled-text); +} +.semi-radio-disabled .semi-radio-extra { + color: var(--semi-color-disabled-text); +} +.semi-radio-extra { + color: var(--semi-color-text-2); + box-sizing: border-box; +} +.semi-radio-focus { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-radio-focus-border { + border: solid 1px var(--semi-color-focus-border); +} + +.semi-radioGroup { + 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; +} +.semi-radioGroup-vertical { + display: flex; + flex-direction: column; + row-gap: 12px; +} +.semi-radioGroup-vertical-default .semi-radio { + display: flex; +} +.semi-radioGroup-vertical-card .semi-radio { + display: flex; +} +.semi-radioGroup-horizontal { + display: inline-flex; + flex-wrap: wrap; + vertical-align: bottom; + gap: 16px; +} +.semi-radioGroup-buttonRadio { + display: inline-block; + background: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-small); + vertical-align: middle; +} + +.semi-rtl .semi-radio, +.semi-portal-rtl .semi-radio { + direction: rtl; +} +.semi-rtl .semi-radio input[type=checkbox], +.semi-rtl .semi-radio input[type=radio], +.semi-portal-rtl .semi-radio input[type=checkbox], +.semi-portal-rtl .semi-radio input[type=radio] { + left: auto; + right: 0; +} +.semi-rtl .semi-radio-buttonRadioGroup:not(:last-child), +.semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) { + padding-left: 0; +} +.semi-rtl .semi-radioGroup, +.semi-portal-rtl .semi-radioGroup { + direction: rtl; +} + +.semi-rating { + display: inline-block; + margin: 0px; + padding: 0px; + color: rgba(var(--semi-yellow-5), 1); + list-style: none; + outline: none; + border-radius: 3px; +} +.semi-rating-focus { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-rating-no-focus { + outline: none; +} +.semi-rating-disabled .semi-rating-star { + cursor: default; +} +.semi-rating-disabled .semi-rating-star:hover { + transform: scale(1); +} +.semi-rating-star { + position: relative; + display: inline-block; + margin: 0; + padding: 0; + color: inherit; + cursor: pointer; + transition: all 0.5s; + transform: scale(var(--semi-transform_scale-none)); +} +.semi-rating-star:not(:last-child) { + margin-right: 6px; +} +.semi-rating-star > div:hover, .semi-rating-star > div:focus { + transform: scale(1.1); +} +.semi-rating-star > div.semi-rating-star-disabled { + transform: none; +} +.semi-rating-star-small { + width: 16px; + height: 16px; + font-size: 16px; +} +.semi-rating-star-default { + width: 24px; + height: 24px; + font-size: 24px; +} +.semi-rating-star-outer { + display: inline-flex; + width: fit-content; + height: fit-content; +} +.semi-rating-star-wrapper { + position: relative; + overflow: hidden; + border-radius: 3px; + width: 100%; + height: 100%; +} +.semi-rating-star-first, .semi-rating-star-second { + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + color: var(--semi-color-fill-0); + user-select: none; +} +.semi-rating-star-first { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + overflow: hidden; + opacity: 0; +} +.semi-rating-star-half .semi-rating-star-first, .semi-rating-star-half .semi-rating-star-second { + opacity: 1; +} +.semi-rating-star-half .semi-rating-star-first, .semi-rating-star-full .semi-rating-star-second { + color: inherit; +} + +.semi-rtl .semi-rating, +.semi-portal-rtl .semi-rating { + direction: rtl; +} +.semi-rtl .semi-rating-star:not(:last-child), +.semi-portal-rtl .semi-rating-star:not(:last-child) { + margin-right: 0; + margin-left: 6px; +} +.semi-rtl .semi-rating-star-first, +.semi-portal-rtl .semi-rating-star-first { + left: auto; + right: 0; +} + +.semi-resizable-resizable { + position: relative; + box-sizing: border-box; + flex-shrink: 0; +} +.semi-resizable-resizableHandler { + position: absolute; + user-select: none; + z-index: 10; +} +.semi-resizable-resizableHandler-top { + width: 100%; + height: 10px; + top: 0; + left: 0; + cursor: row-resize; + top: -5px; +} +.semi-resizable-resizableHandler-right { + width: 10px; + height: 100%; + top: 0; + left: 0; + cursor: col-resize; + left: auto; + right: -5px; +} +.semi-resizable-resizableHandler-bottom { + width: 100%; + height: 10px; + top: 0; + left: 0; + cursor: row-resize; + top: auto; + bottom: -5px; +} +.semi-resizable-resizableHandler-left { + width: 10px; + height: 100%; + top: 0; + left: 0; + cursor: col-resize; + left: -5px; +} +.semi-resizable-resizableHandler-topRight { + width: 20px; + height: 20px; + position: absolute; + right: -10px; + top: -10px; + cursor: ne-resize; +} +.semi-resizable-resizableHandler-bottomRight { + width: 20px; + height: 20px; + position: absolute; + right: -10px; + bottom: -10px; + cursor: se-resize; +} +.semi-resizable-resizableHandler-bottomLeft { + width: 20px; + height: 20px; + position: absolute; + left: -10px; + bottom: -10px; + cursor: sw-resize; +} +.semi-resizable-resizableHandler-topLeft { + width: 20px; + height: 20px; + position: absolute; + left: -10px; + top: -10px; + cursor: nw-resize; +} +.semi-resizable-group { + display: flex; + position: relative; + box-sizing: border-box; + height: 100%; + width: 100%; +} +.semi-resizable-item { + position: relative; + box-sizing: border-box; + flex-shrink: 0; +} +.semi-resizable-handler { + user-select: none; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--semi-color-fill-0); + opacity: 1; +} +.semi-resizable-handler-vertical { + width: 100%; + height: 10px; + flex-shrink: 0; + cursor: row-resize; +} +.semi-resizable-handler-horizontal { + height: 100%; + width: 10px; + flex-shrink: 0; + cursor: col-resize; +} +.semi-resizable-background { + height: 100%; + width: 100%; + inset: 0; + z-index: 20; + opacity: 0; + position: fixed; +} + +.semi-scrolllist { + width: 100%; + height: 100%; + background: var(--semi-color-bg-3); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1); + border-radius: var(--semi-border-radius-medium); + overflow: hidden; + 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; + user-select: none; + display: flex; + flex-direction: column; +} +.semi-scrolllist-header { + text-align: center; + padding: 0 16px; + background: transparent; +} +.semi-scrolllist-header-title { + padding: 16px 0; + font-weight: 600; + color: var(--semi-color-text-0); + 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; +} +.semi-scrolllist-body { + display: flex; + height: 300px; + padding: 0 16px; + overflow: hidden; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before, +.semi-scrolllist-body .semi-scrolllist-item > ul:before { + content: ""; + display: block; + width: 100%; + height: 132px; +} +.semi-scrolllist-body .semi-scrolllist-item { + position: relative; + flex: 1; + overflow-x: hidden; + overflow-y: auto; +} +.semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { + border-right: 1px solid var(--semi-color-border); +} +.semi-scrolllist-body .semi-scrolllist-item > ul, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul { + box-sizing: border-box; + width: 100%; + margin: 0; + padding: 0; + padding-bottom: 132px; + list-style: none; +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li { + list-style: none; + height: 36px; + box-sizing: border-box; + color: var(--semi-color-text-0); + text-align: center; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + background-color: transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel { + background: var(--semi-color-primary-light-default); + color: var(--semi-color-text-0); +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { + color: var(--semi-color-text-2); + width: 16px; + height: 16px; + margin-right: 12px; +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected), +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected) { + cursor: pointer; +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):hover { + background-color: var(--semi-color-fill-1); +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li:not(.disabled):not(.semi-scrolllist-item-disabled):not(.semi-scrolllist-item-sel):not(.semi-scrolllist-item-selected):active { + background-color: var(--semi-color-fill-2); +} +.semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-disabled, +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel { + position: relative; + flex: 1; + overflow: hidden; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { + border-right: 1px solid var(--semi-color-border); +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-item-selected { + font-weight: 600; + color: var(--semi-color-primary) !important; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { + overflow-x: hidden; + overflow-y: auto; + height: 100%; + width: 100%; + padding-right: 18px; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade { + width: 100%; + height: 50%; + pointer-events: none; + position: absolute; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-pre { + top: 0; + margin-top: -19px; + background: var(--semi-color-bg-3); + opacity: 0.5; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-shade-post { + top: 50%; + margin-top: 19px; + background: var(--semi-color-bg-3); + opacity: 0.5; +} +.semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-selector { + pointer-events: none; + position: absolute; + top: 50%; + border-top: 1px solid var(--semi-color-border); + border-bottom: 1px solid var(--semi-color-border); + height: 36px; + width: 100%; + transform: translateY(-50%); +} +.semi-scrolllist .semi-scrolllist-footer { + border-top: 1px solid var(--semi-color-border); + padding: 10px; +} +.semi-scrolllist .semi-scrolllist-line { + background: var(--semi-color-border); + height: 1px; +} + +.semi-rtl .semi-scrolllist, +.semi-portal-rtl .semi-scrolllist { + direction: rtl; +} +.semi-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child), +.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item:not(:last-child) { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, +.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg, +.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item > ul > li.semi-scrolllist-item-sel > svg, +.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul > li.semi-scrolllist-item-sel > svg { + margin-right: 0; + margin-left: 12px; +} +.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child), +.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel:not(:last-child) { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer, +.semi-portal-rtl .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { + padding-right: 0; + padding-left: 18px; +} + +.semi-select-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-select-option-icon { + width: 12px; + color: transparent; + margin-right: 8px; + display: flex; + justify-content: center; + align-content: center; +} +.semi-select-option-text { + display: flex; + flex-wrap: wrap; + white-space: pre; +} +.semi-select-option-keyword { + color: var(--semi-color-primary); + background-color: inherit; + font-weight: 600; +} +.semi-select-option:active { + background-color: var(--semi-color-fill-1); +} +.semi-select-option-empty { + cursor: not-allowed; + color: var(--semi-color-disabled-text); + justify-content: center; +} +.semi-select-option-empty:hover { + background-color: inherit; +} +.semi-select-option-empty:active { + background-color: inherit; +} +.semi-select-option-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-select-option-disabled:hover { + background-color: var(--semi-color-fill-0); +} +.semi-select-option-selected { + font-weight: 600; + background: transparent; +} +.semi-select-option-selected .semi-select-option-icon { + color: var(--semi-color-text-2); +} +.semi-select-option-focused { + background-color: var(--semi-color-fill-0); +} + +.semi-select { + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); + border: 1px solid transparent; + height: 32px; + font-weight: 400; + background-color: var(--semi-color-fill-0); + display: inline-flex; + vertical-align: middle; + position: relative; + outline: none; + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); + max-height: 300px; + overflow-y: auto; +} +.semi-select:hover { + background-color: var(--semi-color-fill-1); + border: 1px solid transparent; +} +.semi-select:focus { + border: 1px solid var(--semi-color-focus-border); + background-color: var(--semi-color-fill-0); + outline: 0; +} +.semi-select:active { + background-color: var(--semi-color-fill-2); +} +.semi-select-small { + height: 24px; + line-height: 24px; +} +.semi-select-large { + min-height: 40px; + line-height: 40px; +} +.semi-select-large .semi-select-selection { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.semi-select-open, .semi-select-focus { + border: 1px solid var(--semi-color-focus-border); + outline: 0; +} +.semi-select-open:hover, .semi-select-focus:hover { + background-color: var(--semi-color-fill-0); + border: 1px solid var(--semi-color-focus-border); +} +.semi-select-open:active, .semi-select-focus:active { + background-color: var(--semi-color-fill-2); + border: 1px solid var(--semi-color-focus-border); +} +.semi-select-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-select-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-select-warning:focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-select-warning:active { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning-light-active); +} +.semi-select-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-select-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-select-error:focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-select-error:active { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger-light-active); +} +.semi-select-disabled { + cursor: not-allowed; + background-color: var(--semi-color-disabled-fill); +} +.semi-select-disabled:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-select-disabled:focus { + border: 1px solid transparent; + background-color: var(--semi-color-disabled-fill); +} +.semi-select-disabled .semi-select-selection, +.semi-select-disabled .semi-select-selection-placeholder { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-select-disabled .semi-select-arrow, +.semi-select-disabled .semi-select-prefix, +.semi-select-disabled .semi-select-suffix { + color: var(--semi-color-disabled-text); +} +.semi-select-disabled .semi-tag { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-select-selection { + 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; + height: 100%; + display: flex; + align-items: center; + flex-grow: 1; + overflow: hidden; + margin-left: 12px; + cursor: pointer; + color: var(--semi-color-text-0); +} +.semi-select-selection-text { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; +} +.semi-select-selection-text-inactive { + display: flex; + opacity: 0.4; +} +.semi-select-selection-text-hide { + display: none; +} +.semi-select-selection-placeholder { + color: var(--semi-color-text-2); +} +.semi-select-selection .semi-tag { + margin-top: 1px; + margin-right: 4px; + margin-bottom: 1px; +} +.semi-select-selection .semi-tag:nth-of-type(1) { + margin-left: 0; +} +.semi-select-selection .semi-tag-group { + height: inherit; +} +.semi-select-selection .semi-tag-group .semi-tag { + margin-top: 1px; + margin-right: 4px; + margin-bottom: 1px; +} +.semi-select-content-wrapper { + white-space: nowrap; + overflow: hidden; + display: flex; + align-items: center; + height: 100%; +} +.semi-select-content-wrapper-collapse { + display: inline-flex; + flex-shrink: 0; + width: 100%; +} +.semi-select-content-wrapper-collapse .semi-overflow-list-overflow { + max-width: 100%; + min-width: 50px; +} +.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-tag { + background-color: transparent; +} +.semi-select-content-wrapper-collapse > .semi-select-content-wrapper-collapse-N { + background-color: transparent; + padding: 4px; + color: var(--semi-color-text-0); + font-size: 12px; +} +.semi-select-multiple { + height: auto; +} +.semi-select-multiple .semi-select-selection { + margin-left: 4px; +} +.semi-select-multiple .semi-select-content-wrapper { + width: 100%; + min-height: 30px; + flex-wrap: wrap; +} +.semi-select-multiple .semi-select-content-wrapper-empty { + margin-left: 8px; +} +.semi-select-multiple .semi-select-content-wrapper .semi-tag-group { + display: flex; + align-items: center; +} +.semi-select-multiple .semi-select-content-wrapper-one-line { + flex-wrap: nowrap; +} +.semi-select-multiple .semi-select-content-wrapper-one-line .semi-tag-group { + flex-wrap: nowrap; + justify-content: flex-start; + overflow: hidden; + flex-shrink: 0; +} +.semi-select-multiple .semi-select-inline-label-wrapper { + flex-shrink: 0; +} +.semi-select-multiple.semi-select-large .semi-select-content-wrapper { + min-height: 38px; +} +.semi-select-multiple.semi-select-small .semi-select-content-wrapper { + min-height: 22px; +} +.semi-select-arrow { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + color: var(--semi-color-text-2); + flex-shrink: 0; + transform: rotate(var(--semi-transform-rotate-none)); +} +.semi-select-arrow-empty { + display: flex; + width: 12px; +} +.semi-select-prefix, .semi-select-suffix { + display: flex; + justify-content: center; + align-items: center; +} +.semi-select-prefix-text, .semi-select-suffix-text { + margin: 0px 12px; + color: var(--semi-color-text-2); + 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-select-prefix-icon, .semi-select-suffix-icon { + color: var(--semi-color-text-2); + margin: 0px 8px; +} +.semi-select-suffix { + display: flex; + justify-content: center; + align-items: center; +} +.semi-select-clear { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + color: var(--semi-color-text-2); + flex-shrink: 0; +} +.semi-select-clear:hover { + color: var(--semi-color-primary); +} +.semi-select-inset-label-wrapper { + display: inline; +} +.semi-select-inset-label { + margin: 0px 12px; + font-weight: 600; + 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; + color: var(--semi-color-text-2); + flex-shrink: 0; + white-space: nowrap; +} +.semi-select-create-tips { + color: var(--semi-color-text-2); + margin-right: 4px; +} + +.semi-select-with-prefix .semi-select-selection { + margin-left: 0; +} + +.semi-select-single.semi-select-filterable .semi-select-content-wrapper { + flex-grow: 1; + height: 100%; + overflow: hidden; + position: relative; +} +.semi-select-single.semi-select-filterable .semi-input-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + border: none; + background-color: transparent; +} +.semi-select-single.semi-select-filterable .semi-input-wrapper-focus { + border: none; +} +.semi-select-single.semi-select-filterable .semi-input { + padding-left: 0; + padding-right: 0; + height: 100%; +} + +.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper { + flex-grow: 1; + height: 100%; + overflow: hidden; + position: relative; +} +.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper { + height: 24px; + line-height: 24px; +} +.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-default { + height: 24px; +} +.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { + position: absolute; + top: 0; + left: 0; + height: 100%; +} +.semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper .semi-input-default { + height: 100%; +} +.semi-select-multiple.semi-select-filterable .semi-input-wrapper { + height: 100%; + width: 100%; + border: none; + background-color: transparent; +} +.semi-select-multiple.semi-select-filterable .semi-input-wrapper-focus { + border: none; +} +.semi-select-multiple.semi-select-filterable .semi-input { + padding-left: 0; + padding-right: 0; +} + +.semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large { + height: 24px; + line-height: 24px; +} +.semi-select-multiple.semi-select-filterable.semi-select-large .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper-large .semi-input-large { + height: 24px; +} + +.semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper { + height: 20px; + line-height: 20px; +} +.semi-select-multiple.semi-select-filterable.semi-select-small .semi-select-content-wrapper:not(.semi-select-content-wrapper-empty) .semi-input-wrapper .semi-input-small { + height: 20px; +} + +.semi-select-option-list-wrapper { + padding-top: 4px; + padding-bottom: 4px; + padding-left: 0px; + padding-right: 0px; +} + +.semi-select-option-list { + overflow-x: hidden; + overflow-y: auto; +} +.semi-select-option-list-chosen .semi-select-option-icon { + display: flex; +} + +.semi-select-group { + color: var(--semi-color-text-2); + padding-top: 12px; + margin-top: 4px; + padding-bottom: 4px; + padding-left: 32px; + padding-right: 16px; + 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; + cursor: default; +} +.semi-select-group:not(:nth-of-type(1)) { + border-top: 1px solid var(--semi-color-border); +} + +.semi-select-loading-wrapper { + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + cursor: not-allowed; + height: 20px; + box-sizing: content-box; +} + +.semi-select-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow { + opacity: 0; +} +.semi-select-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-select-borderless.semi-select-error:not(:focus-within) { + border-color: var(--semi-color-danger); +} +.semi-select-borderless.semi-select-warning:not(:focus-within) { + border-color: var(--semi-color-warning); +} +.semi-select-borderless.semi-select-error:focus-within { + border-color: var(--semi-color-danger); +} +.semi-select-borderless.semi-select-warning:focus-within { + border-color: var(--semi-color-warning); +} + +.semi-select-dropdown-search-wrapper { + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-top: 8px; + padding-left: 12px; + border-bottom: 1px solid transparent; +} + +.semi-rtl .semi-select, +.semi-portal-rtl .semi-select { + direction: rtl; +} +.semi-rtl .semi-select-selection, +.semi-portal-rtl .semi-select-selection { + margin-left: 0; + margin-right: 12px; +} +.semi-rtl .semi-select-selection .semi-tag:nth-of-type(1), +.semi-portal-rtl .semi-select-selection .semi-tag:nth-of-type(1) { + margin-right: 0; +} +.semi-rtl .semi-select-selection .semi-tag-group .semi-tag, +.semi-portal-rtl .semi-select-selection .semi-tag-group .semi-tag { + margin-left: 4px; + margin-right: 0; +} +.semi-rtl .semi-select-multiple .semi-select-selection, +.semi-portal-rtl .semi-select-multiple .semi-select-selection { + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-select-multiple .semi-select-content-wrapper-empty, +.semi-portal-rtl .semi-select-multiple .semi-select-content-wrapper-empty { + margin-left: 0; + margin-right: 8px; +} +.semi-rtl .semi-select-create-tips, +.semi-portal-rtl .semi-select-create-tips { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-select-with-prefix .semi-select-selection, +.semi-portal-rtl .semi-select-with-prefix .semi-select-selection { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper, +.semi-portal-rtl .semi-select-single.semi-select-filterable .semi-input-wrapper { + left: auto; + right: 0; +} +.semi-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper, +.semi-portal-rtl .semi-select-multiple.semi-select-filterable .semi-select-content-wrapper-empty .semi-input-wrapper { + left: auto; + right: 0; +} +.semi-rtl .semi-select-group, +.semi-portal-rtl .semi-select-group { + padding-left: 32px; + padding-right: 16px; +} +.semi-rtl .semi-select-option-icon, +.semi-portal-rtl .semi-select-option-icon { + margin-right: 0; + margin-left: 8px; +} + +.semi-sidesheet { + 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; + position: fixed; + margin: 0; + top: 0; + left: 0; + height: 100%; +} +.semi-sidesheet-inner:focus, .semi-sidesheet-content:focus { + outline: none; +} +.semi-sidesheet-inner-wrap { + position: absolute; +} +.semi-sidesheet-left, .semi-sidesheet-right { + top: 0; + width: 0%; + height: 100%; +} +.semi-sidesheet-left .semi-sidesheet-inner-wrap, .semi-sidesheet-right .semi-sidesheet-inner-wrap { + height: 100%; +} +.semi-sidesheet-left.semi-sidesheet, .semi-sidesheet-right.semi-sidesheet { + width: 100%; +} +.semi-sidesheet-right { + right: 0; +} +.semi-sidesheet-right .semi-sidesheet-inner-wrap { + right: 0; +} +.semi-sidesheet-top, .semi-sidesheet-bottom { + left: 0; + width: 100%; + height: 0%; +} +.semi-sidesheet-top .semi-sidesheet-inner-wrap, .semi-sidesheet-bottom .semi-sidesheet-inner-wrap { + width: 100%; +} +.semi-sidesheet-top.semi-sidesheet, .semi-sidesheet-bottom.semi-sidesheet { + height: 100%; +} +.semi-sidesheet-top { + top: 0; +} +.semi-sidesheet-bottom { + bottom: 0; +} +.semi-sidesheet-bottom .semi-sidesheet-inner-wrap { + bottom: 0; +} +.semi-sidesheet-title { + flex: 1 0 auto; + margin: 0; + 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; + font-weight: 600; + font-size: 18px; + color: var(--semi-color-text-0); + text-align: left; +} +.semi-sidesheet-inner { + z-index: 1; + overflow: auto; + background-color: var(--semi-color-bg-2); + backdrop-filter: none; + border: 0; +} +.semi-sidesheet-header { + display: flex; + align-items: flex-start; + padding: 24px; + padding-bottom: 20px; + border-bottom: 0px solid var(--semi-color-border); +} +.semi-sidesheet-body { + padding: 0 24px; + flex: 1; + overflow: auto; +} +.semi-sidesheet-size-small { + width: 448px; +} +.semi-sidesheet-size-medium { + width: 684px; +} +.semi-sidesheet-size-large { + width: 920px; +} +.semi-sidesheet-size-small.semi-sidesheet { + width: 448px; +} +.semi-sidesheet-size-medium.semi-sidesheet { + width: 684px; +} +.semi-sidesheet-size-large.semi-sidesheet { + width: 920px; +} +.semi-sidesheet-content { + height: 100%; + display: flex; + flex-direction: column; + box-sizing: border-box; + overflow: hidden; +} +.semi-sidesheet-mask { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: var(--semi-color-overlay-bg); + backdrop-filter: none; + opacity: 1; +} +.semi-sidesheet-mask-hidden { + opacity: 0; + display: none; +} +.semi-sidesheet-footer { + padding: 24px; +} +@keyframes semi-sidesheet-slideShow_top { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } +} +@keyframes semi-sidesheet-slideHide_top { + from { + transform: translateY(0); + } + to { + transform: translateY(-100%); + } +} +@keyframes semi-sidesheet-slideShow_bottom { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} +@keyframes semi-sidesheet-slideHide_bottom { + from { + transform: translateY(0); + } + to { + transform: translateY(100%); + } +} +@keyframes semi-sidesheet-slideShow_left { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} +@keyframes semi-sidesheet-slideHide_left { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } +} +@keyframes semi-sidesheet-slideShow_right { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} +@keyframes semi-sidesheet-slideHide_right { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} +@keyframes semi-sidesheet-opacityShow { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes semi-sidesheet-opacityHide { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.semi-sidesheet-animation-content_show_top { + animation: semi-sidesheet-slideShow_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_hide_top { + animation: semi-sidesheet-slideHide_top 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_show_bottom { + animation: semi-sidesheet-slideShow_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_hide_bottom { + animation: semi-sidesheet-slideHide_bottom 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_show_left { + animation: semi-sidesheet-slideShow_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_hide_left { + animation: semi-sidesheet-slideHide_left 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_show_right { + animation: semi-sidesheet-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-content_hide_right { + animation: semi-sidesheet-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-mask_show { + animation: semi-sidesheet-opacityShow 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidesheet-animation-mask_hide { + animation: semi-sidesheet-opacityHide 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} + +.semi-sidesheet-fixed .semi-sidesheet-inner { + box-shadow: var(--semi-shadow-elevated); +} +.semi-sidesheet-fixed.semi-sidesheet-left { + left: 0; +} +.semi-sidesheet-fixed.semi-sidesheet-left .semi-sidesheet-inner { + left: 0; +} +.semi-sidesheet-fixed.semi-sidesheet-right { + left: auto; +} +.semi-sidesheet-fixed.semi-sidesheet-right .semi-sidesheet-inner { + right: 0; +} +.semi-sidesheet-fixed.semi-sidesheet-top, .semi-sidesheet-fixed.semi-sidesheet-bottom { + height: auto; +} +.semi-sidesheet-fixed.semi-sidesheet-bottom { + top: auto; +} +.semi-sidesheet-fixed.semi-sidesheet-bottom .semi-sidesheet-inner { + bottom: 0; +} + +.semi-sidesheet.semi-sidesheet-popup { + position: absolute; +} + +.semi-sidesheet-hidden { + display: none; +} + +.semi-sidesheet-rtl .semi-sidesheet-inner { + direction: rtl; +} +.semi-sidesheet-rtl .semi-sidesheet-title { + text-align: right; +} + +.semi-sidebar-main .semi-sidebar-container-content { + overflow: hidden; +} +.semi-sidebar-main-content-wrapper { + display: flex; + flex-direction: column; + height: 100%; +} +.semi-sidebar-main-content { + padding: 12px; + height: 100%; + box-sizing: border-box; + overflow: auto; +} +.semi-sidebar-container { + height: 100%; + border-left: 1px solid var(--semi-color-border); + box-sizing: border-box; + display: flex; + flex-direction: column; + overflow: hidden; + position: relative; +} +.semi-sidebar-container-header { + display: flex; + align-items: center; + padding: 12px 12px 12px 20px; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-sidebar-container-header-title { + flex: 1; + font-size: 16px; + line-height: 22px; + 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-sidebar-container-header-closeBtn { + flex-shrink: 0; +} +.semi-sidebar-container-content { + flex: 1 1; + overflow: hidden; +} +.semi-sidebar-container .semi-toast-wrapper { + position: absolute; +} +@keyframes semi-sidebar-slideShow_right { + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } +} +@keyframes semi-sidebar-slideHide_right { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} +.semi-sidebar-animation-content_show { + animation: semi-sidebar-slideShow_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidebar-animation-content_hide { + animation: semi-sidebar-slideHide_right 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + animation-fill-mode: forwards; +} +.semi-sidebar-mcp-configure-content { + padding: 20px 16px; + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; +} +.semi-sidebar-mcp-configure-content-header { + display: flex; + align-items: center; + justify-content: space-between; +} +.semi-sidebar-mcp-configure-content-header-count { + 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; + vertical-align: middle; + color: var(--semi-color-text-2); +} +.semi-sidebar-mcp-configure-content-search { + margin: 16px 0; +} +.semi-sidebar-mcp-configure-content-search-container { + display: flex; + column-gap: 8px; +} +.semi-sidebar-mcp-configure-content-item-container { + overflow-y: auto; +} +.semi-sidebar-mcp-configure-content-item { + padding: 8px 16px; + display: flex; + align-items: center; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-sidebar-mcp-configure-content-item-sign { + width: 32px; + height: 32px; + margin-right: 12px; + flex-shrink: 0; +} +.semi-sidebar-mcp-configure-content-item-sign .semi-icon { + font-size: 32px; +} +.semi-sidebar-mcp-configure-content-item-content { + justify-content: center; + flex: 1; + min-width: 0; + margin-right: 24px; +} +.semi-sidebar-mcp-configure-content-item-content-label { + 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; + color: var(--semi-color-text-0); +} +.semi-sidebar-mcp-configure-content-item-content-desc { + 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; + color: var(--semi-color-text-0); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; +} +.semi-sidebar-mcp-configure-content-item-button { + flex-shrink: 0; +} +.semi-sidebar-mcp-configure-content-item-button-configure { + margin-right: 12px; +} +.semi-sidebar-mcp-configure-content-item-button.semi-button.semi-button-with-icon-only { + width: 24px; + height: 24px; +} +.semi-sidebar-mcp-configure-content-custom-empty { + margin-top: 64px; +} +.semi-sidebar-annotation .semi-sidebar-container-content { + padding: 12px; + overflow: auto; +} +.semi-sidebar-annotation-content { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 8px; + width: 100%; +} +.semi-sidebar-annotation-item { + cursor: pointer; +} +.semi-sidebar-annotation-item-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + max-width: 100%; + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + 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; + color: var(--semi-color-text-0); + font-weight: 600; +} +.semi-sidebar-annotation-item-footer { + display: flex; + column-gap: 4px; + align-items: center; +} +.semi-sidebar-annotation-item-footer-logo { + font-size: 14px; + width: 14px; + height: 14px; +} +.semi-sidebar-annotation-item-footer-text { + 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; + color: var(--semi-color-text-0); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; +} +.semi-sidebar-annotation-item-footer-order { + box-sizing: border-box; + min-width: 16px; + padding: 0 2px; + height: 16px; + border-radius: 8px; + background-color: var(--semi-color-fill-1); + display: flex; + align-items: center; + justify-content: center; + 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; + color: var(--semi-color-text-2); +} +.semi-sidebar-annotation-item-text { + padding: 3px 12px; + width: 100%; + row-gap: 8px; + display: flex; + flex-direction: column; +} +.semi-sidebar-annotation-item-text-detail { + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + max-width: 100%; + display: -webkit-box; + line-clamp: 4; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + 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; + color: var(--semi-color-text-2); +} +.semi-sidebar-annotation-item-video { + border-radius: 6px; + border: 1px solid var(--semi-color-border); + overflow: hidden; + width: calc((100% - 8px) / 2); + box-sizing: border-box; +} +.semi-sidebar-annotation-item-video-content { + padding: 8px 8px 12px 8px; + display: flex; + flex-direction: column; + row-gap: 8px; +} +.semi-sidebar-annotation-item-video .semi-sidebar-annotation-item-title { + height: 40px; +} +.semi-sidebar-annotation-item-video-img { + width: 100%; + height: 100%; + object-fit: cover; +} +.semi-sidebar-annotation-item-video-img-wrapper { + position: relative; + width: 100%; + height: 107px; +} +.semi-sidebar-annotation-item-video-play { + position: absolute; + top: 6px; + right: 6px; + border: 1px solid var(--semi-color-bg-0); + background: var(--semi-color-text-2); + color: var(--semi-color-bg-0); + border-radius: 50%; + width: 20px; + height: 20px; +} +.semi-sidebar-annotation-item-video-play.semi-icon { + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 12px; +} +.semi-sidebar-annotation-item-video-duration { + padding: 2px 4px; + position: absolute; + bottom: 6px; + right: 6px; + background-color: rgba(var(--semi-grey-7), 0.7); + border-radius: 4px; + 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; + color: var(--semi-color-bg-0); +} +.semi-sidebar-annotation-item-video-title { + 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; + color: var(--semi-color-text-0); +} +.semi-sidebar-code-content { + height: 100%; +} +.semi-sidebar-code-content .semi-codeHighlight-defaultTheme pre[class*=language-], .semi-sidebar-main-content .semi-codeHighlight-defaultTheme pre[class*=language-] { + margin: 0px; + padding-top: 0px; + padding-bottom: 0px; + background-color: transparent; + overflow-y: hidden; + overflow-x: auto; +} +.semi-sidebar-code-content .semi-codeHighlight .line-numbers .line-numbers-rows, .semi-sidebar-main-content .semi-codeHighlight .line-numbers .line-numbers-rows { + border-right: none; +} +.semi-sidebar-code-content .semi-json-viewer, .semi-sidebar-main-content .semi-json-viewer { + padding-top: 0px; + padding-bottom: 0px; + background-color: transparent; +} +.semi-sidebar-collapse .semi-collapse-item { + border: 1px solid var(--semi-color-border); + border-radius: 8px; +} +.semi-sidebar-collapse .semi-collapse-item:not(:last-child) { + margin-bottom: 8px; +} +.semi-sidebar-collapse .semi-collapse-header { + padding: 8px 16px; + margin: 0px; + font-weight: 400; +} +.semi-sidebar-collapse-header-content { + display: flex; + align-items: center; + gap: 8px; + width: 100%; + padding-right: 8px; +} +.semi-sidebar-collapse-header-content .semi-icon { + color: var(--semi-color-text-1); +} +.semi-sidebar-collapse-header-text { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-sidebar-collapse-header-expand-btn { + flex-shrink: 0; +} +.semi-sidebar-collapse-header-expand-btn.semi-button.semi-button-with-icon-only { + padding: 4px; + width: 24px; + height: 24px; +} +.semi-sidebar-collapse .semi-collapse-item-active .semi-collapsible-wrapper { + border-top: 1px solid var(--semi-color-border); +} +.semi-sidebar-collapse-code .semi-collapse-content { + padding: 12px 0px; +} +.semi-sidebar-options { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 8px; + padding: 8px 12px; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-sidebar-options-button .semi-button-content-right { + margin-left: 4px; +} +.semi-sidebar-options-normal.semi-button-primary.semi-button-light { + color: var(--semi-color-text-2); + font-weight: 400; +} +.semi-sidebar-file .tiptap { + font-size: 14px; + line-height: 24px; +} +.semi-sidebar-file .tiptap ::selection { + background: rgba(var(--semi-light-blue-1), 1); +} +.semi-sidebar-file .tiptap ::-moz-selection { + background: rgba(var(--semi-light-blue-1), 1); +} +.semi-sidebar-file .tiptap p.is-editor-empty:first-child::before { + color: var(--semi-color-text-2); + content: attr(data-placeholder); + float: left; + height: 0; + pointer-events: none; +} +.semi-sidebar-file .tiptap p { + margin: 0px; + white-space: pre-wrap; + color: var(--semi-color-text-0); +} +.semi-sidebar-file .tiptap blockquote { + border-left: 3px solid var(--semi-color-border); + margin: 24px 0; + padding-left: 16px; +} +.semi-sidebar-file .tiptap:focus { + outline: none; +} +.semi-sidebar-file .tiptap pre { + background-color: var(--semi-color-fill-0); + padding: 2px 4px; + border-radius: 4px; + overflow: auto; + font-size: 14px; + line-height: 24px; + border: 1px solid var(--semi-color-border); +} +.semi-sidebar-file .tiptap pre code { + background-color: transparent; +} +.semi-sidebar-file .tiptap code { + background-color: var(--semi-color-border); + padding: 2px 4px; +} +.semi-sidebar-file .tiptap hr { + border: none; + border-top: 1px solid var(--semi-color-border); +} +.semi-sidebar-file .tiptap span.select { + display: inline-block; + background-color: rgba(var(--semi-light-blue-1), 1); + line-height: 24px; +} +.semi-sidebar-file .tiptap.ProseMirror img:not([data-type=emoji] img) { + outline: 0.125rem solid transparent; + margin: 12px 0; +} +.semi-sidebar-file .tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode { + outline-color: var(--semi-color-text-0); +} +.semi-sidebar-file .tiptap .tiptap-image-slot .uploadFail .semi-upload-drag-area, .semi-sidebar-file .tiptap .tiptap-image-slot .validateFail .semi-upload-drag-area, .semi-sidebar-file .tiptap .tiptap-image-slot .uploading .semi-upload-drag-area, .semi-sidebar-file .tiptap .tiptap-image-slot .success .semi-upload-drag-area { + display: none; +} +.semi-sidebar-file-menu-bar { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 2px; + border-top: 1px solid var(--semi-color-border); + border-bottom: 1px solid var(--semi-color-border); + padding: 2px 12px; +} +.semi-sidebar-file-menu-bar-dropdown-item-active { + color: var(--semi-color-primary); + background: var(--semi-color-fill-0); +} +.semi-sidebar-file-menu-bar .semi-divider-vertical { + margin: 0px; +} +.semi-sidebar-file-menu-bar-btn-active.semi-button-tertiary.semi-button-borderless { + background: var(--semi-color-fill-0); +} +.semi-sidebar-file-menu-bar-btn-codeblock { + font-size: 12px; + line-height: 16px; + padding: 8px; +} +.semi-sidebar-file-menu-bar-link-dropdown { + padding: 8px; + display: flex; + align-items: center; + justify-content: center; +} +.semi-sidebar-file-menu-bar-link-dropdown-btn-active.semi-button-tertiary.semi-button-borderless { + color: var(--semi-color-primary); +} +.semi-sidebar-detail .semi-sidebar-file { + height: 100%; + display: flex; + flex-direction: column; +} +.semi-sidebar-detail .semi-sidebar-file-content { + height: 100%; +} +.semi-sidebar-detail .semi-sidebar-file-editor { + overflow: auto; + flex: 1; + padding: 0 12px; +} +.semi-sidebar-detail .semi-sidebar-code-content { + overflow: auto; +} +.semi-sidebar-main .semi-sidebar-code-content { + height: 200px; + overflow: auto; +} +.semi-sidebar-main .semi-sidebar-collapse-file .semi-collapse-content { + max-height: 400px; + overflow: auto; +} +.semi-sidebar-main .semi-sidebar-collapse-code .semi-collapse-content { + max-height: 200px; + overflow: auto; +} +.semi-sidebar-main .semi-codeHighlight { + height: 200px; + overflow: auto; +} +.semi-sidebar-detail-header { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + color: var(--semi-color-text-0); + padding: 12px; +} +.semi-sidebar-detail-header-left { + display: flex; + flex-direction: row; + column-gap: 8px; + align-items: center; +} +.semi-sidebar-detail-header-title { + font-size: 16px; + line-height: 22px; + 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-sidebar-detail-header-right { + display: flex; + flex-direction: row; + column-gap: 4px; + align-items: center; +} + +.semi-skeleton-avatar, .semi-skeleton-image, .semi-skeleton-title, .semi-skeleton-button { + background: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-small); +} +.semi-skeleton-avatar-circle { + border-radius: 50%; +} +.semi-skeleton-avatar-extra-extra-small { + width: 20px; + height: 20px; +} +.semi-skeleton-avatar-extra-small { + width: 24px; + height: 24px; +} +.semi-skeleton-avatar-medium { + width: 48px; + height: 48px; +} +.semi-skeleton-avatar-small { + width: 32px; + height: 32px; +} +.semi-skeleton-avatar-large { + width: 72px; + height: 72px; +} +.semi-skeleton-avatar-extra-large { + width: 128px; + height: 128px; +} +.semi-skeleton-paragraph { + margin: 0; + padding: 0; + list-style-type: none; +} +.semi-skeleton-paragraph li { + background: var(--semi-color-fill-0); + border-radius: var(--semi-border-radius-small); + width: 100%; + height: 16px; + margin-bottom: 10px; +} +.semi-skeleton-paragraph li:last-child { + width: 60%; + margin-bottom: 0; +} +.semi-skeleton-paragraph li:first-child { + width: 100%; +} +.semi-skeleton-title { + width: 100%; + height: 24px; +} +.semi-skeleton-button { + width: 115px; + height: 32px; +} +.semi-skeleton-image { + width: 100%; + height: 100%; +} +.semi-skeleton-active .semi-skeleton-avatar, +.semi-skeleton-active .semi-skeleton-image, +.semi-skeleton-active .semi-skeleton-title, +.semi-skeleton-active .semi-skeleton-button, +.semi-skeleton-active .semi-skeleton-paragraph li { + background: linear-gradient(90deg, var(--semi-color-fill-0) 25%, var(--semi-color-fill-1) 44%, var(--semi-color-fill-0) 88%); + background-size: 400% 100%; + animation: 1400ms skeleton-loading ease infinite; + animation-fill-mode: forwards; +} +@keyframes skeleton-loading { + 0% { + background-position: 100% 50%; + } + 100% { + background-position: 0 50%; + } +} + +.semi-rtl .semi-skeleton, +.semi-portal-rtl .semi-skeleton { + direction: rtl; +} + +.semi-slider { + padding: 0px 13px; + margin: 0px; +} +.semi-slider-wrapper { + box-sizing: border-box; + position: relative; + height: 32px; + width: 100%; + display: inline-block; + vertical-align: bottom; +} +.semi-slider-rail { + box-sizing: border-box; + margin: 0px; + padding: 0px; + color: rgba(0, 0, 0, 0.65); + font-size: 14px; + font-variant: tabular-nums; + line-height: 1.5; + list-style: none; + font-feature-settings: "tnum"; + position: absolute; + height: 4px; + cursor: pointer; + touch-action: none; + background-color: var(--semi-color-fill-0); + width: 100%; + border-radius: var(--semi-border-radius-small); + top: 14px; +} +.semi-slider-handle { + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); + box-sizing: border-box; + touch-action: none; + position: absolute; + width: 24px; + height: 24px; + margin-top: 4px; + background-color: var(--semi-color-white); + border: none; + border-radius: 50%; + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px); + display: inline-flex; + justify-content: center; + align-items: center; +} +.semi-slider-handle:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-slider-handle-dot { + background: var(--semi-color-primary); + width: 4px; + height: 4px; + border-radius: var(--semi-border-radius-circle); +} +.semi-slider-handle:hover { + background-color: var(--semi-color-white); +} +.semi-slider-handle-clicked { + border: solid 1px var(--semi-color-focus-border); + cursor: grabbing; +} +.semi-slider-track { + height: 4px; + background: var(--semi-color-primary); + border-radius: var(--semi-border-radius-small); + position: absolute; + cursor: pointer; + top: 14px; +} +.semi-slider-tooltip { + position: absolute; + top: -40px; +} +.semi-slider-dots { + width: 100%; + background: transparent; +} +.semi-slider-dot { + position: absolute; + top: 14px; + width: 4px; + height: 4px; + background-color: var(--semi-color-white); + border-radius: 50%; + cursor: pointer; + transform: translateX(0px); +} +.semi-slider-dot-active { + background-color: var(--semi-color-white); +} +.semi-slider-marks { + position: absolute; + top: 23px; + left: 0px; + width: 100%; + font-size: 14px; +} +.semi-slider-mark { + position: absolute; + display: inline-block; + color: var(--semi-color-text-2); + text-align: center; + cursor: pointer; + transform: translate(-50%, 0); +} +.semi-slider-marks-reverse { + position: absolute; + top: 23px; + left: 0px; + width: 100%; + font-size: 14px; +} +.semi-slider-mark-reverse { + position: absolute; + display: inline-block; + color: var(--semi-color-text-2); + text-align: center; + cursor: pointer; + transform: translate(-50%, 0) rotate(-180deg); +} +.semi-slider-boundary { + position: relative; + font-size: 12px; + color: var(--semi-color-text-0); + visibility: hidden; + top: 30px; +} +.semi-slider-boundary span { + position: absolute; + display: inline-block; +} +.semi-slider-boundary-min { + left: 0px; +} +.semi-slider-boundary-max { + right: 0px; +} +.semi-slider-boundary-show { + visibility: visible; +} + +.semi-slider-vertical-wrapper { + width: 4px; + height: 100%; +} +.semi-slider-vertical-wrapper .semi-slider-track { + width: 4px; +} +.semi-slider-vertical-wrapper .semi-slider-marks { + height: 100%; + margin-top: -30px; + margin-left: 29px; +} +.semi-slider-vertical-wrapper .semi-slider-marks-reverse { + height: 100%; + margin-top: -30px; + margin-left: -26px; +} +.semi-slider-vertical-wrapper .semi-slider-rail { + width: 4px; + height: 100%; + top: 0px; +} +.semi-slider-vertical-wrapper .semi-slider-handle { + margin-top: 0px; + margin-left: -10px; + transform: var(--semi-transform_scale-small) translateY(-50%) translateX(0px); +} +.semi-slider-vertical-wrapper .semi-slider-dot { + transform: translateY(0px); +} + +.semi-slider-disabled { + cursor: not-allowed; +} +.semi-slider-disabled .semi-slider-handle { + cursor: not-allowed; + box-shadow: none; + border: 1px var(--semi-color-border) solid; +} +.semi-slider-disabled .semi-slider-handle:hover { + background-color: var(--semi-color-white); +} +.semi-slider-disabled .semi-slider-rail { + cursor: not-allowed; +} +.semi-slider-disabled .semi-slider-track { + cursor: not-allowed; + background-color: var(--semi-color-primary-disabled); +} +.semi-slider-disabled .semi-slider-dot { + cursor: not-allowed; + background-color: var(--semi-color-white); + border-color: var(--semi-color-white); + box-shadow: none; +} + +.semi-slider-handle-tooltip { + text-align: center; +} + +.semi-slider-reverse { + transform: rotate(180deg); +} + +.semi-space { + display: inline-flex; +} +.semi-space-vertical { + flex-direction: column; +} +.semi-space-horizontal { + flex-direction: row; +} +.semi-space-align-center { + align-items: center; +} +.semi-space-align-end { + align-items: flex-end; +} +.semi-space-align-start { + align-items: flex-start; +} +.semi-space-align-baseline { + align-items: baseline; +} +.semi-space-wrap { + flex-wrap: wrap; +} +.semi-space-tight-horizontal { + column-gap: 8px; +} +.semi-space-tight-vertical { + row-gap: 8px; +} +.semi-space-medium-horizontal { + column-gap: 16px; +} +.semi-space-medium-vertical { + row-gap: 16px; +} +.semi-space-loose-horizontal { + column-gap: 24px; +} +.semi-space-loose-vertical { + row-gap: 24px; +} + +.semi-rtl .semi-space, +.semi-portal-rtl .semi-space { + direction: rtl; +} + +.semi-spin { + position: relative; + display: inline-block; + width: 20px; + height: 20px; +} +@keyframes semi-animation-rotate { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +.semi-spin-wrapper { + text-align: center; + position: absolute; + width: 100%; + transform: translateY(-50%); + top: 50%; + color: var(--semi-color-primary); +} +.semi-spin-wrapper > svg { + display: inline; + animation: 600ms linear infinite semi-animation-rotate; + animation-fill-mode: forwards; + vertical-align: top; + width: 20px; + height: 20px; +} +.semi-spin-animate { + display: inline-flex; + animation: 1600ms linear infinite semi-animation-rotate; + animation-fill-mode: forwards; +} +.semi-spin-children { + opacity: 0.5; + user-select: none; +} +.semi-spin-block { + display: block; +} +.semi-spin-block::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} +.semi-spin-block .semi-spin-wrapper { + display: block; +} +.semi-spin-block.semi-spin { + height: auto; + width: auto; +} +.semi-spin-hidden::after { + content: none; +} +.semi-spin-hidden > .semi-spin-children { + opacity: 1; + user-select: auto; +} + +.semi-spin-small { + width: 14px; + height: 14px; +} +.semi-spin-small > .semi-spin-wrapper svg { + width: 14px; + height: 14px; +} + +.semi-spin-middle { + width: 20px; + height: 20px; +} +.semi-spin-middle > .semi-spin-wrapper svg { + width: 20px; + height: 20px; +} + +.semi-spin-large { + width: 32px; + height: 32px; +} +.semi-spin-large > .semi-spin-wrapper svg { + width: 32px; + height: 32px; +} + +.semi-spin-container { + overflow: hidden; +} + +.semi-rtl .semi-spin, +.semi-portal-rtl .semi-spin { + direction: rtl; +} +.semi-rtl .semi-spin-container, +.semi-portal-rtl .semi-spin-container { + direction: rtl; +} + +.semi-steps .semi-col { + flex: 1; +} +.semi-steps-vertical .semi-row-flex { + flex-direction: column; +} +.semi-steps .semi-steps-item { + box-sizing: border-box; + display: flex; + height: 72px; + position: relative; + overflow: hidden; + margin-right: 16px; + border: 1px solid transparent; + border-radius: var(--semi-border-radius-medium); + padding: 12px 16px; + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-small)); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-steps .semi-steps-item .semi-steps-item-title { + position: relative; + 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; + font-weight: 600; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--semi-color-text-0); + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-steps .semi-steps-item .semi-steps-item-description { + 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; + color: var(--semi-color-text-2); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-steps .semi-steps-item-process { + background-color: var(--semi-color-primary-light-default); +} +.semi-steps .semi-steps-item-process .semi-steps-item-left:not(.semi-steps-item-icon) { + background: var(--semi-color-primary); +} +.semi-steps .semi-steps-item-process .semi-steps-item-title, +.semi-steps .semi-steps-item-process .semi-steps-item-icon { + color: var(--semi-color-primary); +} +.semi-steps .semi-steps-item-wait .semi-steps-item-left:not(.semi-steps-item-icon) { + background: var(--semi-color-text-2); +} +.semi-steps .semi-steps-item-wait .semi-steps-item-icon { + color: var(--semi-color-text-2); +} +.semi-steps .semi-steps-item-finish .semi-icon, +.semi-steps .semi-steps-item-finish .semi-steps-item-title { + color: var(--semi-color-success); +} +.semi-steps .semi-steps-item-finish-hover:hover { + background-color: var(--semi-color-fill-0); +} +.semi-steps .semi-steps-item-finish-hover:hover .semi-icon, +.semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title { + color: var(--semi-color-success-hover); +} +.semi-steps .semi-steps-item-finish-active:active { + background-color: var(--semi-color-fill-1); +} +.semi-steps .semi-steps-item-finish-active:active .semi-icon, +.semi-steps .semi-steps-item-finish-active:active .semi-steps-item-title { + color: var(--semi-color-success-active); +} +.semi-steps .semi-steps-item-error .semi-icon, +.semi-steps .semi-steps-item-error .semi-steps-item-title { + color: var(--semi-color-danger); +} +.semi-steps .semi-steps-item-error-hover:hover { + background: var(--semi-color-fill-0); +} +.semi-steps .semi-steps-item-error-hover:hover .semi-icon, +.semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title { + color: var(--semi-color-danger-hover); +} +.semi-steps .semi-steps-item-error-active:active { + background-color: var(--semi-color-fill-1); +} +.semi-steps .semi-steps-item-error-active:active .semi-icon, +.semi-steps .semi-steps-item-error-active:active .semi-steps-item-title { + color: var(--semi-color-danger-active); +} +.semi-steps .semi-steps-item-warning .semi-steps-item-title, +.semi-steps .semi-steps-item-warning .semi-icon { + color: var(--semi-color-warning); +} +.semi-steps .semi-steps-item-warning-hover:hover { + background: var(--semi-color-fill-0); +} +.semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title, +.semi-steps .semi-steps-item-warning-hover:hover .semi-icon { + color: var(--semi-color-warning-hover); +} +.semi-steps .semi-steps-item-warning-active:active { + background-color: var(--semi-color-fill-1); +} +.semi-steps .semi-steps-item-warning-active:active .semi-steps-item-title, +.semi-steps .semi-steps-item-warning-active:active .semi-icon { + color: var(--semi-color-warning-active); +} +.semi-steps .semi-steps-item-clickable { + cursor: pointer; +} +.semi-steps .semi-steps-item-left { + width: 24px; + height: 24px; + line-height: 32px; + text-align: center; + border-radius: 32px; + display: flex; + align-items: center; + justify-content: center; + 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; + font-weight: 600; + flex-grow: 0; +} +.semi-steps .semi-steps-item-left.semi-steps-item-plain { + color: rgba(var(--semi-white), 1); +} +.semi-steps .semi-steps-item-left-process { + background: var(--semi-color-primary-light-default); +} +.semi-steps .semi-steps-item-content { + margin-left: 16px; + flex: 1; + overflow: hidden; +} + +.semi-steps-basic.semi-steps-horizontal { + display: flex; + flex-flow: row nowrap; +} +.semi-steps-basic.semi-steps-horizontal.semi-steps-hasline .semi-steps-item-title::after { + content: ""; + position: absolute; + top: 50%; + left: 100%; + display: block; + width: 9999px; + height: 1px; + background: var(--semi-color-fill-2); +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item { + padding-left: 16px; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item:first-child { + padding-left: 0; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child { + flex: none; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title { + max-width: 100%; + padding-right: 0; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item:last-child .semi-steps-item-title::after { + display: none; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item-done .semi-steps-item-container .semi-steps-item-title::after { + background: var(--semi-color-primary); +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-content { + flex: 1; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-description { + 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; + color: var(--semi-color-text-2); + width: 100%; + max-width: 268px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { + max-width: 80%; + min-height: 24px; + display: inline-flex; + align-items: center; +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text-empty { + width: 0; +} +.semi-steps-basic.semi-steps-vertical { + display: flex; + flex-flow: column nowrap; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item-icon { + box-sizing: content-box; +} +.semi-steps-basic.semi-steps-vertical.semi-steps-small .semi-steps-item .semi-steps-item-content { + min-height: 40px; +} +.semi-steps-basic.semi-steps-vertical.semi-steps-hasline .semi-steps-item-icon::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + display: block; + width: 1px; + height: 9999px; + background: var(--semi-color-fill-2); +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item { + padding-top: 9px; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item:first-child { + padding-top: 0; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item:last-child .semi-steps-item-icon::after { + display: none; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item-done .semi-steps-item-icon::after { + background: var(--semi-color-primary); +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-content { + min-height: 42px; + padding-bottom: 22px; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-icon { + display: inline-flex; + position: relative; + padding-bottom: 9px; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-description { + 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; + color: var(--semi-color-text-2); + width: 100%; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title { + max-width: 100%; +} +.semi-steps-basic.semi-steps-vertical .semi-steps-item .semi-steps-item-title .semi-steps-item-title-text { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-steps-basic .semi-steps-item { + box-sizing: border-box; + position: relative; + display: inline-block; + vertical-align: top; + overflow: hidden; + flex: 1; + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-small)); +} +.semi-steps-basic .semi-steps-item-clickable { + cursor: pointer; +} +.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-title { + color: var(--semi-color-focus-border); +} +.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description { + color: var(--semi-color-focus-border); +} +.semi-steps-basic .semi-steps-item .semi-steps-item-container { + display: flex; + align-items: flex-start; +} +.semi-steps-basic .semi-steps-item .semi-steps-item-left { + display: flex; + justify-content: center; + align-items: center; + margin-right: 8px; +} +.semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { + display: flex; + height: 24px; + align-items: center; +} +.semi-steps-basic .semi-steps-item .semi-steps-item-left .semi-steps-item-number-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + background: var(--semi-color-primary); + border-radius: var(--semi-border-radius-circle); + color: var(--semi-color-white); + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-steps-basic .semi-steps-item .semi-steps-item-title { + position: relative; + display: inline-block; + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + line-height: 24px; + font-weight: 600; + color: var(--semi-color-text-0); + vertical-align: top; + padding-right: 16px; + margin-bottom: 4px; + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon { + color: var(--semi-color-primary); +} +.semi-steps-basic .semi-steps-item-finish .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + color: var(--semi-color-white); +} +.semi-steps-basic .semi-steps-item-wait .semi-steps-item-title { + color: var(--semi-color-text-2); +} +.semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon { + color: var(--semi-color-text-2); +} +.semi-steps-basic .semi-steps-item-wait .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + background: var(--semi-color-fill-0); + color: var(--semi-color-text-2); +} +.semi-steps-basic .semi-steps-item-wait-hover:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + background: var(--semi-color-secondary-light-default); + color: var(--semi-color-focus-border); +} +.semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon { + color: var(--semi-color-primary); +} +.semi-steps-basic .semi-steps-item-process .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + color: var(--semi-color-white); +} +.semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon { + color: var(--semi-color-danger); +} +.semi-steps-basic .semi-steps-item-error .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + color: var(--semi-color-primary); +} +.semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon { + color: var(--semi-color-warning); +} +.semi-steps-basic .semi-steps-item-warning .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + color: var(--semi-color-white); +} +.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-title { + 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; +} +.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon { + height: 20px; +} +.semi-steps-basic.semi-steps-small .semi-steps-item .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon { + 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; + width: 20px; + height: 20px; +} + +.semi-steps-nav { + display: inline-flex; + flex-flow: row nowrap; +} +.semi-steps-nav .semi-steps-item { + box-sizing: border-box; +} +.semi-steps-nav .semi-steps-item:last-child { + flex: none; +} +.semi-steps-nav .semi-steps-item:last-child .semi-steps-item-content { + width: auto; +} +.semi-steps-nav .semi-steps-item .semi-steps-item-container { + display: flex; + align-items: center; + color: var(--semi-color-text-2); +} +.semi-steps-nav .semi-steps-item .semi-steps-item-container .semi-steps-item-icon { + display: inline-flex; + flex: 1; + justify-content: center; + color: var(--semi-grey-3); + min-width: 60px; +} +.semi-steps-nav .semi-steps-item .semi-steps-item-content { + flex: 1; + display: inline-block; +} +.semi-steps-nav .semi-steps-item .semi-steps-item-title { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + max-width: 17em; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 400; +} +.semi-steps-nav .semi-steps-item-active .semi-steps-item-title { + color: var(--semi-color-text-0); + font-weight: 600; +} +.semi-steps-nav.semi-steps-small .semi-steps-item .semi-steps-item-title { + 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; +} + +.semi-rtl .semi-steps, +.semi-portal-rtl .semi-steps { + direction: rtl; +} +.semi-rtl .semi-steps-item, +.semi-portal-rtl .semi-steps-item { + margin-right: auto; + margin-left: 16px; +} +.semi-rtl .semi-steps-item-content, +.semi-portal-rtl .semi-steps-item-content { + margin-left: auto; + margin-right: 16px; +} +.semi-rtl .semi-steps-basic, +.semi-portal-rtl .semi-steps-basic { + direction: rtl; +} +.semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title, +.semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title { + padding-left: 16px; +} +.semi-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after, +.semi-portal-rtl .semi-steps-basic.semi-steps-horizontal .semi-steps-item .semi-steps-item-title::after { + right: 100%; +} +.semi-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item, +.semi-portal-rtl .semi-steps-basic.semi-steps-vertical .semi-steps-item { + margin: 0; +} +.semi-rtl .semi-steps-nav, +.semi-portal-rtl .semi-steps-nav { + direction: rtl; +} + +.semi-switch { + box-sizing: border-box; + display: inline-block; + border-radius: 12px; + border: 1px transparent solid; + position: relative; + cursor: pointer; + background-color: var(--semi-color-fill-0); + transition: background-color 200ms var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + width: 40px; + height: 24px; +} +.semi-switch:hover { + background-color: var(--semi-color-fill-1); +} +.semi-switch:active { + border: 1px var(--semi-color-fill-2) solid; +} +.semi-switch:active .semi-switch-knob { + width: 24px; +} +.semi-switch-focus { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-switch-checked { + background-color: var(--semi-color-success); +} +.semi-switch-checked:hover { + background-color: var(--semi-color-success-hover); +} +.semi-switch-checked .semi-switch-knob { + transform: translateX(18px); +} +.semi-switch-checked:active .semi-switch-knob { + transform: translateX(12px); +} +.semi-switch-active { + background-color: var(--semi-color-success-active); +} +.semi-switch-disabled { + cursor: not-allowed; + background-color: transparent; + border: 1px var(--semi-color-border) solid; +} +.semi-switch-disabled:hover { + background-color: transparent; +} +.semi-switch-disabled:active { + background-color: transparent; +} +.semi-switch-disabled:active .semi-switch-knob { + width: 18px; +} +.semi-switch-disabled .semi-switch-knob { + cursor: not-allowed; + box-shadow: none; + border: 1px var(--semi-color-border) solid; +} +.semi-switch-disabled .semi-switch-native-control { + pointer-events: none; + cursor: not-allowed; +} +.semi-switch-disabled.semi-switch-checked { + border-color: transparent; + background-color: var(--semi-color-success-disabled); +} +.semi-switch-disabled.semi-switch-checked:active .semi-switch-knob { + transform: translateX(18px); +} +.semi-switch-disabled.semi-switch-checked .semi-switch-knob { + box-shadow: none; + border: none; +} +.semi-switch-disabled.semi-switch-loading:not(.semi-switch-checked):hover { + background-color: var(--semi-color-fill-1); +} +.semi-switch-knob { + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3); + cursor: pointer; + border-radius: 9px; + background-color: rgba(var(--semi-white), 1); + box-sizing: border-box; + position: absolute; + left: 0px; + right: auto; + transition: transform 200ms ease-in-out, width 200ms ease-in-out; + width: 18px; + height: 18px; + top: 2px; + transform: translateX(2px); +} +.semi-switch-native-control { + width: 100%; + height: 100%; + opacity: 0; + cursor: inherit; + pointer-events: auto; + margin: 0; + position: absolute; + top: 0; + left: 0; +} +.semi-switch-native-control[type=checkbox] { + width: inherit; + height: inherit; +} +.semi-switch-checked-text, .semi-switch-unchecked-text { + position: absolute; + font-size: 12px; + height: 100%; + width: 20px; + display: flex; + justify-content: center; + align-items: center; +} +.semi-switch-checked-text { + color: var(--semi-color-white); +} +.semi-switch-unchecked-text { + color: var(--semi-color-text-2); + right: 0; +} +.semi-switch-loading { + display: inline-flex; + align-items: center; + background-color: var(--semi-color-fill-1); +} +.semi-switch-loading-spin .semi-spin-wrapper { + display: inline-flex; + align-items: center; + color: var(--semi-color-white); +} + +.semi-switch-loading .semi-switch-loading-spin { + transform: translateX(2px); +} +.semi-switch-loading .semi-switch-loading-spin > .semi-spin-wrapper > svg { + width: 18px; + height: 18px; +} +.semi-switch-loading.semi-switch-checked { + background-color: var(--semi-color-success-hover); +} +.semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(16px); +} + +.semi-switch-loading.semi-switch-small .semi-switch-loading-spin { + transform: translateX(2px); +} +.semi-switch-loading.semi-switch-small .semi-switch-loading-spin > .semi-spin-wrapper > svg { + width: 10px; + height: 10px; +} +.semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(10px); +} + +.semi-switch-loading.semi-switch-large .semi-switch-loading-spin { + transform: translateX(2px); +} +.semi-switch-loading.semi-switch-large .semi-switch-loading-spin > .semi-spin-wrapper > svg { + width: 28px; + height: 28px; +} +.semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(22px); +} + +.semi-switch-disabled.semi-switch-checked { + background-color: var(--semi-color-success-disabled); +} + +.semi-switch-large { + width: 54px; + height: 32px; + border-radius: 16px; +} +.semi-switch-large .semi-switch-knob { + width: 24px; + height: 24px; + top: 3px; + border-radius: 12px; + transform: translateX(3px); +} +.semi-switch-large.semi-switch-checked .semi-switch-knob { + transform: translateX(26px); +} +.semi-switch-large.semi-switch-checked:active .semi-switch-knob { + transform: translateX(16px); +} +.semi-switch-large:active .semi-switch-knob { + width: 34px; +} +.semi-switch-large .semi-switch-checked-text, +.semi-switch-large .semi-switch-unchecked-text { + width: 26px; + font-size: 14px; +} + +.semi-switch-small { + width: 26px; + height: 16px; + border-radius: 8px; +} +.semi-switch-small .semi-switch-knob { + width: 12px; + height: 12px; + top: 1px; + border-radius: 6px; + transform: translateX(1px); +} +.semi-switch-small.semi-switch-checked .semi-switch-knob { + transform: translateX(11px); +} +.semi-switch-small.semi-switch-checked:active .semi-switch-knob { + transform: translateX(9px); +} +.semi-switch-small:active .semi-switch-knob { + width: 14px; +} + +.semi-form .semi-switch-native-control { + width: 100%; + height: 100%; +} + +.semi-rtl .semi-switch, +.semi-portal-rtl .semi-switch { + direction: rtl; +} +.semi-rtl .semi-switch-checked .semi-switch-knob, +.semi-portal-rtl .semi-switch-checked .semi-switch-knob { + transform: translateX(-18px); +} +.semi-rtl .semi-switch-checked:active .semi-switch-knob, +.semi-portal-rtl .semi-switch-checked:active .semi-switch-knob { + transform: translateX(-12px); +} +.semi-rtl .semi-switch-knob, +.semi-portal-rtl .semi-switch-knob { + right: 0; + left: auto; + transform: translateX(-2px); +} +.semi-rtl .semi-switch-native-control, +.semi-portal-rtl .semi-switch-native-control { + right: 0; +} +.semi-rtl .semi-switch-unchecked-text, +.semi-portal-rtl .semi-switch-unchecked-text { + left: 0; +} +.semi-rtl .semi-switch-loading .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading .semi-switch-loading-spin { + transform: translateX(-2px); +} +.semi-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(-16px); +} +.semi-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading.semi-switch-small .semi-switch-loading-spin { + transform: translateX(-2px); +} +.semi-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading.semi-switch-small.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(-10px); +} +.semi-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading.semi-switch-large .semi-switch-loading-spin { + transform: translateX(-2px); +} +.semi-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin, +.semi-portal-rtl .semi-switch-loading.semi-switch-large.semi-switch-checked .semi-switch-loading-spin { + transform: translateX(-22px); +} +.semi-rtl .semi-switch-large .semi-switch-knob, +.semi-portal-rtl .semi-switch-large .semi-switch-knob { + transform: translateX(-3px); +} +.semi-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob, +.semi-portal-rtl .semi-switch-large.semi-switch-checked .semi-switch-knob { + transform: translateX(-26px); +} +.semi-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob, +.semi-portal-rtl .semi-switch-large.semi-switch-checked:active .semi-switch-knob { + transform: translateX(-16px); +} +.semi-rtl .semi-switch-small .semi-switch-knob, +.semi-portal-rtl .semi-switch-small .semi-switch-knob { + transform: translateX(-1px); +} +.semi-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob, +.semi-portal-rtl .semi-switch-small.semi-switch-checked .semi-switch-knob { + transform: translateX(-11px); +} +.semi-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob, +.semi-portal-rtl .semi-switch-small.semi-switch-checked:active .semi-switch-knob { + transform: translateX(-9px); +} + +.semi-table-panel-operation { + background-color: var(--semi-color-primary); + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + display: flex; + justify-content: space-between; + color: var(--semi-color-text-2); +} +.semi-table-panel-operation-right, .semi-table-panel-operation-left { + display: flex; + justify-content: space-between; +} +.semi-table-panel-operation-selected { + color: var(--semi-color-primary-light-active); +} + +.semi-table-pagination-info { + 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: 400; +} +.semi-table-pagination-outer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.semi-table { + width: 100%; + text-align: left; + border-collapse: separate; + border-spacing: 0; + font-size: inherit; + display: table; +} +.semi-table-wrapper { + zoom: 1; + position: relative; + clear: both; + box-sizing: border-box; + margin: 0; + padding: 0; + 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; + color: var(--semi-color-text-0); + width: 100%; +} +.semi-table-wrapper[data-column-fixed=true] { + z-index: 1; +} +.semi-table-wrapper-ltr { + direction: ltr; +} +.semi-table-wrapper-ltr .semi-spin { + direction: ltr; +} +.semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + padding-top: 12px; + padding-bottom: 12px; +} +.semi-table-small .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + padding-top: 8px; + padding-bottom: 8px; +} +.semi-table-title { + position: relative; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 0; + padding-right: 0; +} +.semi-table-container { + position: relative; +} +.semi-table-header { + overflow: hidden; + scrollbar-base-color: transparent; +} +.semi-table-header::-webkit-scrollbar { + background-color: transparent; + border-bottom: 2px solid var(--semi-color-border); +} +.semi-table-header-sticky { + position: sticky; + z-index: 102; +} +.semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head { + background-color: var(--semi-color-bg-1); +} +.semi-table-header-hidden { + height: 0; +} +.semi-table-align-center .semi-table-operate-wrapper { + justify-content: center; +} +.semi-table-align-right .semi-table-operate-wrapper { + justify-content: flex-end; +} +.semi-table-operate-wrapper { + display: flex; + justify-content: flex-start; +} +.semi-table-body { + overflow: auto; + width: 100%; + box-sizing: border-box; +} +.semi-table-colgroup { + display: table-column-group; +} +.semi-table-colgroup .semi-table-col { + display: table-column; +} +.semi-table-colgroup .semi-table-column-expand, .semi-table-colgroup .semi-table-column-selection { + width: 48px; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head { + background-color: var(--semi-color-bg-1); + color: var(--semi-color-text-2); + font-weight: 600; + text-align: left; + border-bottom: 2px solid var(--semi-color-border); + padding-left: 16px; + padding-right: 16px; + padding-top: 8px; + padding-bottom: 8px; + vertical-align: middle; + overflow-wrap: break-word; + position: relative; + transition: background-color var(--semi-transition_duration-none) linear; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort { + cursor: pointer; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-row-head-clickSort:hover { + background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0)); + background-color: var(--semi-color-bg-0); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right { + z-index: 101; + position: sticky; + background-color: var(--semi-color-bg-1); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { + border-right: 1px solid var(--semi-color-border); + box-shadow: 3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { + border-right: 2px solid var(--semi-color-primary); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing .react-resizable-handle:hover { + background-color: unset; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { + border-left: 1px solid var(--semi-color-border); + box-shadow: -3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { + border-right: 2px solid var(--semi-color-primary); +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing .react-resizable-handle:hover { + background-color: unset; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { + box-shadow: none; + border-left: transparent; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-column-selection { + text-align: center; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head[colspan]:not([colspan="1"]) { + text-align: center; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head .semi-table-header-column { + display: inline-flex; + align-items: center; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis .semi-table-row-head-title { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-table-thead > .semi-table-row .react-resizable { + position: relative; + background-clip: padding-box; +} +.semi-table-thead > .semi-table-row .resizing { + border-right: 2px solid var(--semi-color-primary); +} +.semi-table-thead > .semi-table-row .resizing .react-resizable-handle:hover { + background-color: unset; +} +.semi-table-thead > .semi-table-row .react-resizable-handle { + position: absolute; + width: 9px; + height: calc(100% - 4px * 2); + background-color: var(--semi-color-border); + bottom: 4px; + right: -1px; + cursor: col-resize; + z-index: 0; +} +.semi-table-thead > .semi-table-row .react-resizable-handle:hover { + background-color: var(--semi-color-primary); +} +.semi-table-tbody { + display: table-row-group; +} +.semi-table-tbody > .semi-table-row { + display: table-row; + background-color: var(--semi-color-bg-1); +} +.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { + background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0)); + background-color: var(--semi-color-bg-0); +} +.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right { + background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0)); + background-color: var(--semi-color-bg-1); +} +.semi-table-tbody > .semi-table-row > .semi-table-row-cell { + display: table-cell; + overflow-wrap: break-word; + border-left: none; + border-right: none; + border-bottom: 1px solid var(--semi-color-border); + padding: 16px; + box-sizing: border-box; + position: relative; + vertical-align: middle; +} +.semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { + border-right: 2px solid var(--semi-color-primary); +} +.semi-table-tbody > .semi-table-row > .semi-table-row-cell-ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell { + background-color: var(--semi-color-fill-0); +} +.semi-table-tbody > .semi-table-row.semi-table-row-hidden { + display: none; +} +.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right { + z-index: 101; + position: sticky; + background-color: var(--semi-color-bg-1); +} +.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { + border-right: 1px solid var(--semi-color-border); + box-shadow: 3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { + border-left: 1px solid var(--semi-color-border); + box-shadow: -3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-tbody > .semi-table-row > .semi-table-cell-fixed > * { + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; +} +.semi-table-tbody > .semi-table-row > * { + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms; +} +.semi-table-tbody > .semi-table-row-section { + display: table-row; +} +.semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { + background-color: rgba(var(--semi-grey-0), 1); + border-bottom: 1px solid var(--semi-color-border); +} +.semi-table-tbody > .semi-table-row-section > .semi-table-row-cell:not(.semi-table-column-selection) { + padding: 10px 16px; +} +.semi-table-tbody > .semi-table-row-section .semi-table-section-inner { + display: inline-flex; + align-items: center; +} +.semi-table-virtualized .semi-table-tbody { + display: block; +} +.semi-table-virtualized .semi-table-tbody > .semi-table-row { + display: flex; +} +.semi-table-virtualized .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + word-wrap: unset; + word-break: unset; + white-space: nowrap; + display: inline-flex; + align-items: center; + overflow: hidden; +} +.semi-table-virtualized .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell { + padding-top: 16px; + padding-bottom: 16px; + display: flex; +} +.semi-table-virtualized .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell { + padding: 0; + overflow: unset; +} +.semi-table-footer { + background-color: var(--semi-color-fill-0); + padding: 16px; + margin: 0; + position: relative; +} +.semi-table .semi-table-selection-wrap { + display: inline-flex; + vertical-align: bottom; +} +.semi-table .semi-table-selection-disabled { + cursor: not-allowed; +} +.semi-table .semi-table-selection-disabled > .semi-checkbox { + pointer-events: none; +} +.semi-table .semi-table-column-hidden { + display: none; +} +.semi-table .semi-table-column-selection { + text-align: center; +} +.semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { + left: 0; + top: 0; +} +.semi-table .semi-table-column-expand .semi-table-expand-icon { + transform: translateY(2px); +} +.semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { + margin-right: 0; +} +.semi-table .semi-table-column-sorter { + display: inline-block; + width: 16px; + height: 16px; + vertical-align: middle; + text-align: center; +} +.semi-table .semi-table-column-sorter-wrapper { + display: flex; + gap: 4px; + align-items: center; + cursor: pointer; + overflow: hidden; +} +.semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down { + height: 0; + display: block; + color: var(--semi-color-text-2); +} +.semi-table .semi-table-column-sorter-up:hover .anticon, .semi-table .semi-table-column-sorter-down:hover .anticon { + color: var(--semi-color-text-2); +} +.semi-table .semi-table-column-sorter-up svg, .semi-table .semi-table-column-sorter-down svg { + width: 16px; + height: 16px; +} +.semi-table .semi-table-column-sorter-up.on .semi-icon-caretup, +.semi-table .semi-table-column-sorter-up.on .semi-icon-caretdown, .semi-table .semi-table-column-sorter-down.on .semi-icon-caretup, +.semi-table .semi-table-column-sorter-down.on .semi-icon-caretdown { + color: var(--semi-color-primary); +} +.semi-table .semi-table-column-filter { + margin-left: 4px; + display: inline-flex; + cursor: pointer; + color: var(--semi-color-text-2); + align-items: center; +} +.semi-table .semi-table-column-filter svg { + width: 16px; + height: 16px; +} +.semi-table .semi-table-column-filter.on { + color: var(--semi-color-primary); +} +.semi-table-bordered > .semi-table-title { + padding-left: 16px; + padding-right: 16px; + border-top: 1px solid var(--semi-color-border); + border-right: 1px solid var(--semi-color-border); + border-left: 1px solid var(--semi-color-border); +} +.semi-table-bordered > .semi-table-container { + border: 1px solid var(--semi-color-border); + border-right: 0; + border-bottom: 0; +} +:where(.semi-table-bordered) > .semi-table-container > .semi-table-header::-webkit-scrollbar { + border-right: 1px solid var(--semi-color-border); +} +:where(.semi-table-bordered) > .semi-table-container > .semi-table-footer { + border-left: 1px solid var(--semi-color-border); + border-right: 1px solid var(--semi-color-border); + border-bottom: 1px solid var(--semi-color-border); +} +:where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder { + border-right: 1px solid var(--semi-color-border); +} +:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle { + background-color: transparent; +} +:where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head, :where(.semi-table-bordered > .semi-table-container > .semi-table-body) > .semi-table > .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + border-right: 1px solid var(--semi-color-border); +} +:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head { + border-right: 1px solid var(--semi-color-border); +} +:where(.semi-table-bordered > .semi-table-container > .semi-table-header) > .semi-table > .semi-table-thead > .semi-table-row > .semi-table-row-head .react-resizable-handle { + background-color: transparent; +} +.semi-table-placeholder { + position: sticky; + left: 0px; + z-index: 1; + padding: 16px 12px; + color: var(--semi-color-text-2); + font-size: 14px; + text-align: center; + background: transparent; + border-bottom: 1px solid var(--semi-color-border); +} +.semi-table-fixed { + table-layout: fixed; + min-width: 100%; +} +.semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { + position: sticky; + overflow: auto; + left: 0; + margin-left: -16px; + margin-right: -16px; + padding-left: 16px; + padding-right: 16px; + height: 100%; + display: flex; + align-items: center; +} +.semi-table-fixed-header table { + table-layout: fixed; +} +.semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, +.semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { + box-shadow: none; +} +.semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, +.semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { + box-shadow: none; +} +.semi-table-pagination-outer { + color: var(--semi-color-text-2); + min-height: 60px; +} + +.semi-table-expand-icon { + color: var(--semi-color-text-2); + cursor: pointer; + display: inline-flex; + align-items: center; + user-select: none; + background: transparent; + position: relative; + margin-right: 8px; +} +.semi-table-expand-icon-cell { + display: inline-flex; + align-items: center; + justify-content: center; +} +.semi-table-expand-icon .semi-table-expandedIcon-show { + transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95); + transform: rotate(90deg); +} +.semi-table-expand-icon .semi-table-expandedIcon-hide { + transition: transform 150ms cubic-bezier(0.62, 0.05, 0.36, 0.95); + transform: rotate(0deg); +} + +.semi-table-column-filter-dropdown .semi-dropdown-menu { + max-height: 290px; + overflow-y: auto; +} + +.semi-table-wrapper-rtl .semi-table { + direction: rtl; + text-align: right; +} +.semi-table-wrapper-rtl .semi-table-align-left .semi-table-operate-wrapper { + justify-content: flex-end; +} +.semi-table-wrapper-rtl .semi-table-align-right .semi-table-operate-wrapper { + justify-content: flex-start; +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head { + text-align: right; +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left-last.resizing { + border-left: 2px solid var(--semi-color-primary); +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first { + border-left: 0; + border-right: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first.resizing { + border-left: 2px solid var(--semi-color-primary); +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right-first[x-type=column-scrollbar] { + box-shadow: none; + border-right: transparent; +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .resizing { + border-left: 2px solid var(--semi-color-primary); +} +.semi-table-wrapper-rtl .semi-table-thead > .semi-table-row .react-resizable-handle { + right: auto; + left: -1px; +} +.semi-table-wrapper-rtl .semi-table-tbody { + display: table-row-group; +} +.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing { + border-right: 0; + border-left: 2px solid var(--semi-color-primary); +} +.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first { + border-left: 0; + border-right: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table .semi-table-column-selection .semi-checkbox-inner-display .semi-icon { + left: auto; + right: 0; +} +.semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon { + transform: scaleX(-1) translateY(2px); +} +.semi-table-wrapper-rtl .semi-table .semi-table-column-expand .semi-table-expand-icon:last-child { + margin-right: auto; + margin-left: 0; +} +.semi-table-wrapper-rtl .semi-table .semi-table-column-sorter { + margin-left: 0; + margin-right: 4px; +} +.semi-table-wrapper-rtl .semi-table .semi-table-column-filter { + margin-left: 0; + margin-right: 4px; +} +.semi-table-wrapper-rtl .semi-table-bordered .semi-table-container { + border-left: 0; + border-right: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-bordered .semi-table-thead > .semi-table-row > .semi-table-row-head, +.semi-table-wrapper-rtl .semi-table-bordered .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-bordered .semi-table-placeholder { + border-left: 1px solid var(--semi-color-border); + border-right: 0; +} +.semi-table-wrapper-rtl .semi-table-bordered .semi-table-header::-webkit-scrollbar { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner { + left: auto; + right: 0; + margin-right: -16px; + margin-left: -16px; + padding-right: 16px; + padding-left: 16px; +} +.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, +.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { + box-shadow: 3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, +.semi-table-wrapper-rtl .semi-table-scroll-position-left .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { + box-shadow: none; +} +.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last, +.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-left-last { + box-shadow: none; +} +.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right-first, +.semi-table-wrapper-rtl .semi-table-scroll-position-right .semi-table-thead > .semi-table-row > .semi-table-cell-fixed-right-first { + box-shadow: -3px 0 0 0 var(--semi-color-shadow); +} +.semi-table-wrapper-rtl .semi-table-expand-icon { + margin-right: auto; + margin-left: 8px; + transform: scaleX(-1) translateY(2px); +} +.semi-table-wrapper-rtl .semi-spin { + direction: rtl; +} + +.semi-tabs { + box-sizing: border-box; + position: relative; +} +.semi-tabs-left { + display: flex; + flex-direction: row; +} +.semi-tabs-bar { + position: relative; + white-space: nowrap; + outline: none; +} +.semi-tabs-bar-left { + display: flex; + flex-direction: column; +} +.semi-tabs-bar-extra { + padding: 0px 5px; +} +.semi-tabs-bar-more-trigger { + display: inline-block; + cursor: pointer; + color: var(--semi-color-text-2); +} +.semi-tabs-bar-more-trigger-content { + display: flex; + align-content: center; +} +.semi-tabs-bar-more-trigger-content-icon:not(:not(.semi-tabs-bar-more-trigger-content-icon)) { + margin-top: 0px; + margin-bottom: 0px; + margin-left: 8px; + margin-right: 8px; + flex-shrink: 0; + display: flex; + align-items: center; +} +.semi-tabs-bar-more-trigger-line { + padding: 16px 4px 14px 4px; +} +.semi-tabs-bar-more-trigger-card { + padding: 8px 12px; +} +.semi-tabs-bar-more-trigger-button { + padding: 8px 12px; +} +.semi-tabs-bar .semi-tabs-tab { + 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; + cursor: pointer; + box-sizing: border-box; + position: relative; + display: block; + float: left; + font-weight: 400; + color: var(--semi-color-text-2); + user-select: none; +} +.semi-tabs-bar .semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + position: relative; + margin-right: 8px; + top: 3px; + color: var(--semi-color-text-2); + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-tabs-bar .semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close { + margin-right: 0; + font-size: 14px; + color: var(--semi-color-text-2); + margin-left: 10px; + cursor: pointer; +} +.semi-tabs-bar .semi-tabs-tab:hover { + color: var(--semi-color-text-0); +} +.semi-tabs-bar .semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-text-0); +} +.semi-tabs-bar .semi-tabs-tab:active { + color: var(--semi-color-text-0); +} +.semi-tabs-bar .semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-text-0); +} +.semi-tabs-bar .semi-tabs-tab-active, .semi-tabs-bar .semi-tabs-tab-active:hover { + cursor: default; + font-weight: 600; + color: var(--semi-color-text-0); +} +.semi-tabs-bar .semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-primary); +} +.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-bar .semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close { + color: var(--semi-color-text-2); +} +.semi-tabs-bar .semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover { + color: var(--semi-color-text-1); +} +.semi-tabs-bar .semi-tabs-tab-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-tabs-bar .semi-tabs-tab-disabled:hover { + color: var(--semi-color-disabled-text); + border-bottom: none; +} +.semi-tabs-tab-single.semi-tabs-tab { + 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; + cursor: pointer; + box-sizing: border-box; + position: relative; + display: inline-block; + font-weight: 400; + color: var(--semi-color-text-2); + user-select: none; +} +.semi-tabs-tab-single.semi-tabs-tab .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + position: relative; + margin-right: 8px; + top: 3px; + color: var(--semi-color-text-2); + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close { + margin-right: 0; + font-size: 14px; + color: var(--semi-color-text-2); + margin-left: 10px; + cursor: pointer; +} +.semi-tabs-tab-single.semi-tabs-tab .semi-icon.semi-tabs-tab-icon-close.semi-icon-close:hover { + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab:hover { + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab:hover .semi-icon.semi-tabs-tab-icon-close { + color: var(--semi-color-text-2); +} +.semi-tabs-tab-single.semi-tabs-tab:active { + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab:active .semi-icon.semi-tabs-tab-icon-close { + color: var(--semi-color-text-2); +} +.semi-tabs-tab-single.semi-tabs-tab-active, .semi-tabs-tab-single.semi-tabs-tab-active:hover { + cursor: default; + font-weight: 600; + color: var(--semi-color-text-0); +} +.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate), .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon:not(.semi-icon-checkbox_tick, .semi-icon-radio, .semi-icon-checkbox_indeterminate) { + color: var(--semi-color-primary); +} +.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close, .semi-tabs-tab-single.semi-tabs-tab-active:hover .semi-icon.semi-tabs-tab-icon-close { + color: var(--semi-color-text-2); +} +.semi-tabs-tab-single.semi-tabs-tab-active .semi-icon.semi-tabs-tab-icon-close:hover { + color: var(--semi-color-text-1); +} +.semi-tabs-tab-single.semi-tabs-tab-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-tabs-tab-single.semi-tabs-tab-disabled:hover { + color: var(--semi-color-disabled-text); + border-bottom: none; +} +.semi-tabs-bar-collapse, +.semi-tabs-bar-collapse .semi-tabs-bar-overflow-list { + display: flex; + align-items: center; +} +.semi-tabs-bar-collapse .semi-overflow-list { + flex: 1; +} +.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper::-webkit-scrollbar { + display: none; /* Safari and Chrome */ + width: 0; + height: 0; +} +.semi-tabs-bar-collapse .semi-overflow-list .semi-overflow-list-scroll-wrapper:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-tabs-bar-collapse .semi-overflow-list > .semi-button-disabled:hover { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { + margin-right: 4px; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false] { + color: var(--semi-color-primary); + padding: 8px; + border: 0px solid transparent; + background-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:hover { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-primary); + border-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-start > .semi-button[aria-disabled=false]:active { + background-color: var(--semi-color-fill-1); + color: var(--semi-color-primary); + border-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { + margin-left: 4px; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false] { + color: var(--semi-color-primary); + padding: 8px; + border: 0px solid transparent; + background-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:hover { + background-color: var(--semi-color-fill-0); + color: var(--semi-color-primary); + border-color: transparent; +} +.semi-tabs-bar-collapse .semi-tabs-bar-arrow-end > .semi-button[aria-disabled=false]:active { + background-color: var(--semi-color-fill-1); + color: var(--semi-color-primary); + border-color: transparent; +} +.semi-tabs-bar-dropdown { + max-height: 300px; + overflow-y: auto; +} +.semi-tabs-bar:after { + content: ""; + height: 0; + display: block; + clear: both; +} +.semi-tabs-bar-line.semi-tabs-bar-top { + border-bottom: 1px solid var(--semi-color-border); + transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab { + padding: 16px 4px 14px 4px; + transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + border-bottom: 2px solid transparent; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:nth-of-type(1) { + padding-left: 0; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:hover { + border-bottom: 2px solid var(--semi-color-fill-0); +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -1px; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:active { + border-bottom: 2px solid var(--semi-color-fill-1); +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-right: 24px; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-small { + padding: 8px 4px 6px 4px; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-medium { + padding: 12px 4px 10px 4px; +} +.semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab-active:hover { + border-bottom: 2px solid var(--semi-color-primary); +} +.semi-tabs-bar-line.semi-tabs-bar-left { + border-right: 1px solid var(--semi-color-border); +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { + padding: 12px; + border-left: 2px solid transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { + border-left: 2px solid var(--semi-color-fill-0); + background-color: var(--semi-color-fill-0); +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { + border-left: 2px solid var(--semi-color-fill-1); + background-color: var(--semi-color-fill-1); +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-small { + padding: 6px; +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-medium { + padding: 10px; +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { + border-left: 2px solid var(--semi-color-primary); + background-color: var(--semi-color-primary-light-default); +} +.semi-tabs-bar-line .semi-tabs-bar-extra { + height: 50px; + line-height: 50px; +} +.semi-tabs-bar-line .semi-tabs-bar-line-extra-small { + height: 36px; + line-height: 36px; +} +.semi-tabs-bar-card.semi-tabs-bar-top::before { + position: absolute; + right: 0; + left: 0; + bottom: 0; + border-bottom: 1px solid var(--semi-color-border); + content: ""; +} +.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab { + border: 1px solid transparent; + border-bottom: none; + border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; +} +.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:hover { + border-bottom: none; +} +.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-right: 8px; +} +.semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab-active:hover { + padding: 8px 12px 7px 12px; + border: 1px solid var(--semi-color-border); + border-bottom: 1px solid var(--semi-color-bg-1); + background: transparent; +} +.semi-tabs-bar-card.semi-tabs-bar-left { + border-right: 1px solid var(--semi-color-border); +} +.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { + border: 1px solid transparent; + border-right: none; + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { + border-right: none; +} +.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { + margin-bottom: 8px; +} +.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { + content: " "; + width: 1px; + position: absolute; + right: -1px; + top: 0; + bottom: 0; + background: var(--semi-color-bg-1); +} +.semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active, .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:hover { + padding: 8px 12px; + border: 1px solid var(--semi-color-border); + border-right: none; + background: transparent; +} +.semi-tabs-bar-card .semi-tabs-tab { + padding: 8px 12px; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-tabs-bar-card .semi-tabs-tab:hover { + background: var(--semi-color-fill-0); +} +.semi-tabs-bar-card .semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-bar-card .semi-tabs-tab:active { + background: var(--semi-color-fill-1); +} +.semi-tabs-bar-button { + border: none; +} +.semi-tabs-bar-button.semi-tabs-bar-left .semi-tabs-tab:not(:last-of-type) { + margin-bottom: 8px; +} +.semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-right: 8px; +} +.semi-tabs-bar-button .semi-tabs-tab { + padding: 8px 12px; + border-radius: var(--semi-border-radius-small); + color: var(--semi-color-text-2); + border: none; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-tabs-bar-button .semi-tabs-tab:hover { + border: none; + background-color: var(--semi-color-fill-0); +} +.semi-tabs-bar-button .semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-bar-button .semi-tabs-tab:active { + background-color: var(--semi-color-fill-1); +} +.semi-tabs-bar-button .semi-tabs-tab-active, .semi-tabs-bar-button .semi-tabs-tab-active:hover { + color: var(--semi-color-primary); + border: none; + background-color: var(--semi-color-primary-light-default); +} +.semi-tabs-bar-slash .semi-tabs-tab { + padding: 12px 0px; +} +.semi-tabs-bar-slash .semi-tabs-tab:nth-of-type(1) { + padding-left: 0; +} +.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type) { + margin-right: 16px; +} +.semi-tabs-bar-slash .semi-tabs-tab:not(:last-of-type):after { + content: ""; + margin-left: 16px; + display: inline-block; + height: 14px; + width: 8px; + margin-top: 3px; + margin-bottom: 3px; + vertical-align: bottom; + background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 1px), var(--semi-color-text-2) 50%, transparent calc(50% + 1px), transparent 100%); +} +.semi-tabs-content { + width: 100%; + padding: 5px 0; +} +.semi-tabs-content-left { + height: 100%; + padding: 0 5px; +} +.semi-tabs-pane { + width: 100%; + overflow: hidden; + color: var(--semi-color-text-0); +} +.semi-tabs-pane:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-tabs-pane-inactive, .semi-tabs-content-no-animated .semi-tabs-pane-inactive { + display: none; +} +@keyframes semi-tabs-panel-keyframe-leftShow { + 0% { + transform: translateX(60px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} +@keyframes semi-tabs-panel-keyframe-rightShow { + 0% { + transform: translateX(-60px); + opacity: 0; + } + 100% { + transform: translateX(0); + opacity: 1; + } +} +@keyframes semi-tabs-panel-keyframe-topShow { + 0% { + transform: translateY(60px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +@keyframes semi-tabs-panel-keyframe-bottomShow { + 0% { + transform: translateY(-60px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} +.semi-tabs-pane-animate-leftShow { + animation: 200ms semi-tabs-panel-keyframe-leftShow ease-in-out 0s; + animation-fill-mode: forwards; +} +.semi-tabs-pane-animate-rightShow { + animation: 200ms semi-tabs-panel-keyframe-rightShow ease-in-out 0s; + animation-fill-mode: forwards; +} +.semi-tabs-pane-animate-topShow { + animation: 200ms semi-tabs-panel-keyframe-topShow ease-in-out 0s; + animation-fill-mode: forwards; +} +.semi-tabs-pane-animate-bottomShow { + animation: 200ms semi-tabs-panel-keyframe-bottomShow ease-in-out 0s; + animation-fill-mode: forwards; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab { + font-size: 14px; + padding: 16px 4px 14px 4px; + transition: border-bottom-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + border-bottom: 2px solid transparent; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:nth-of-type(1) { + padding-left: 0; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:hover { + border-bottom: 2px solid var(--semi-color-fill-0); +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -1px; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab:active { + border-bottom: 2px solid var(--semi-color-fill-1); +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-small { + font-size: 14px; + padding: 8px 4px 6px 4px; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-medium { + font-size: 14px; + padding: 12px 4px 10px 4px; +} +.semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-top.semi-tabs-tab-active:hover { + border-bottom: 2px solid var(--semi-color-primary); +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab { + padding: 12px; + border-left: 2px solid transparent; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:hover { + border-left: 2px solid var(--semi-color-fill-0); + background-color: var(--semi-color-fill-0); +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab:active { + border-left: 2px solid var(--semi-color-fill-1); + background-color: var(--semi-color-fill-1); +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-small { + padding: 6px; +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-medium { + padding: 10px; +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-line.semi-tabs-tab-left.semi-tabs-tab-active:hover { + border-left: 2px solid var(--semi-color-primary); + background-color: var(--semi-color-primary-light-default); +} +.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab { + border: 1px solid transparent; + border-bottom: none; + border-radius: var(--semi-border-radius-small) var(--semi-border-radius-small) 0 0; +} +.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab:hover { + border-bottom: none; +} +.semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-top.semi-tabs-tab-active:hover { + padding: 8px 12px 7px 12px; + border: 1px solid var(--semi-color-border); + border-bottom: 1px solid var(--semi-color-bg-1); + background: transparent; +} +.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab { + border: 1px solid transparent; + border-right: none; + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); +} +.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab:hover { + border-right: none; +} +.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:after { + content: " "; + width: 1px; + position: absolute; + right: -1px; + top: 0; + bottom: 0; + background: var(--semi-color-bg-1); +} +.semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active, .semi-tabs-tab-card.semi-tabs-tab-left.semi-tabs-tab-active:hover { + padding: 8px 12px; + border: 1px solid var(--semi-color-border); + border-right: none; + background: transparent; +} +.semi-tabs-tab-card.semi-tabs-tab { + padding: 8px 12px; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-tabs-tab-card.semi-tabs-tab:hover { + background: var(--semi-color-fill-0); +} +.semi-tabs-tab-card.semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-tab-card.semi-tabs-tab:active { + background: var(--semi-color-fill-1); +} +.semi-tabs-tab-button { + border: none; +} +.semi-tabs-tab-button.semi-tabs-tab { + padding: 8px 12px; + border-radius: var(--semi-border-radius-small); + color: var(--semi-color-text-2); + border: none; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); +} +.semi-tabs-tab-button.semi-tabs-tab:hover { + border: none; + background-color: var(--semi-color-fill-0); +} +.semi-tabs-tab-button.semi-tabs-tab:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); + outline-offset: -2px; +} +.semi-tabs-tab-button.semi-tabs-tab:active { + background-color: var(--semi-color-fill-1); +} +.semi-tabs-tab-button.semi-tabs-tab-active, .semi-tabs-tab-button.semi-tabs-tab-active:hover { + color: var(--semi-color-primary); + border: none; + background-color: var(--semi-color-primary-light-default); +} + +.semi-rtl .semi-tabs, +.semi-portal-rtl .semi-tabs { + direction: rtl; +} +.semi-rtl .semi-tabs-bar .semi-tabs-tab, +.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab { + float: right; +} +.semi-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon, +.semi-portal-rtl .semi-tabs-bar .semi-tabs-tab .semi-icon { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start, +.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-start { + margin-right: 0; + margin-left: 4px; +} +.semi-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end, +.semi-portal-rtl .semi-tabs-bar-collapse .semi-tabs-bar-arrow-end { + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, +.semi-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left, +.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_right, +.semi-portal-rtl .semi-tabs-bar-collapse .semi-icon-chevron_left { + transform: scaleX(-1); +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-right: 0; + margin-left: 24px; +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab { + border-left: 0; + border-right: 2px solid transparent; +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:hover { + border-left: 0; + border-right: 2px solid var(--semi-color-fill-0); +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab:active { + border-left: 0; + border-right: 2px solid var(--semi-color-fill-1); +} +.semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, .semi-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active, +.semi-portal-rtl .semi-tabs-bar-line.semi-tabs-bar-left .semi-tabs-tab-active:hover { + border-left: 0; + border-right: 2px solid var(--semi-color-primary); +} +.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), +.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-left: 0; + margin-right: 8px; +} +.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left, +.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab, +.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab { + border: 1px solid transparent; + border-left: none; +} +.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover, +.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab:hover { + border-left: none; +} +.semi-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after, +.semi-portal-rtl .semi-tabs-bar-card.semi-tabs-bar-left .semi-tabs-tab-active:after { + right: auto; + left: -1px; +} +.semi-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type), +.semi-portal-rtl .semi-tabs-bar-button.semi-tabs-bar-top .semi-tabs-tab:not(:last-of-type) { + margin-right: auto; + margin-left: 8px; +} + +.semi-tag { + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); + background-color: transparent; + position: relative; + user-select: none; + overflow: hidden; + white-space: nowrap; + vertical-align: bottom; + display: flex; + justify-content: center; + align-items: center; + display: inline-flex; +} +.semi-tag-default, .semi-tag-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; + height: 20px; + padding: 2px 8px; +} +.semi-tag-default:focus-visible, .semi-tag-small:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-tag-square { + border-radius: var(--semi-border-radius-small); +} +.semi-tag-circle { + border-radius: var(--semi-border-radius-full); +} +.semi-tag-large { + 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; + padding: 4px 8px; + height: 24px; +} +.semi-tag-large:focus-visible { + outline: 2px solid var(--semi-color-primary-light-active); +} +.semi-tag-invisible { + display: none; +} +.semi-tag-prefix-icon { + display: flex; + padding-right: 4px; +} +.semi-tag-suffix-icon { + display: flex; + padding-left: 4px; +} +.semi-tag-content { + flex: 1; +} +.semi-tag-content-ellipsis { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.semi-tag-content-center { + display: flex; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + min-width: 0; +} +.semi-tag-close { + display: flex; + justify-content: center; + align-items: center; + color: var(--semi-color-text-2); + padding-left: 4px; + cursor: pointer; +} +.semi-tag-close:hover { + color: var(--semi-color-text-1); +} +.semi-tag-close:active { + color: var(--semi-color-text-0); +} +.semi-tag-closable { + padding: 4px 4px 4px 8px; +} +.semi-tag-avatar-square .semi-avatar, .semi-tag-avatar-circle .semi-avatar { + margin-right: 4px; +} +.semi-tag-avatar-square { + padding: 0 4px 0 0; +} +.semi-tag-avatar-square .semi-avatar > img { + background-color: var(--semi-color-default); +} +.semi-tag-avatar-circle { + padding: 2px 4px 2px 2px; +} +.semi-tag-avatar-square.semi-tag-default .semi-avatar, .semi-tag-avatar-square.semi-tag-small .semi-avatar { + width: 20px; + height: 20px; +} +.semi-tag-avatar-square.semi-tag-large .semi-avatar { + width: 24px; + height: 24px; +} +.semi-tag-avatar-circle.semi-tag-small, .semi-tag-avatar-circle.semi-tag-default { + border-radius: 11px; +} +.semi-tag-avatar-circle.semi-tag-small .semi-avatar, .semi-tag-avatar-circle.semi-tag-default .semi-avatar { + width: 16px; + height: 16px; +} +.semi-tag-avatar-circle.semi-tag-large { + border-radius: 13px; +} +.semi-tag-avatar-circle.semi-tag-large .semi-avatar { + width: 20px; + height: 20px; +} +.semi-tag-colorful { + font-weight: 600; +} +.semi-tag-colorful.semi-tag-solid { + background: var(--semi-color-ai-purple); + color: var(--semi-color-white); +} +.semi-tag-colorful.semi-tag-solid.semi-tag-gradient { + background: var(--semi-color-ai-general); +} +.semi-tag-colorful.semi-tag-light { + background: rgba(var(--semi-ai-purple-0), 1); + color: var(--semi-color-ai-purple); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient { + background: var(--semi-ai-general-0); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(1) { + stop-color: rgba(var(--semi-ai-general-5-0), 1); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(2) { + stop-color: rgba(var(--semi-ai-general-5-1), 1); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(3) { + stop-color: rgba(var(--semi-ai-general-5-2), 1); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(4) { + stop-color: rgba(var(--semi-ai-general-5-3), 1); +} +.semi-tag-colorful.semi-tag-light.semi-tag-gradient .semi-tag-content { + background: var(--semi-color-ai-general); + background-clip: text; + color: transparent; +} +.semi-tag-colorful.semi-tag-ghost { + background: var(--semi-color-white); + color: var(--semi-color-ai-purple); + border-color: var(--semi-color-ai-general); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient { + border: none; +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(1) { + stop-color: rgba(var(--semi-ai-general-5-0), 1); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(2) { + stop-color: rgba(var(--semi-ai-general-5-1), 1); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(3) { + stop-color: rgba(var(--semi-ai-general-5-2), 1); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient .semi-tag-prefix-icon svg stop:nth-child(4) { + stop-color: rgba(var(--semi-ai-general-5-3), 1); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient.semi-tag-circle::before { + border-radius: var(--semi-border-radius-full); +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient::before { + content: ""; + position: absolute; + inset: 0; + border-radius: var(--semi-border-radius-small); + padding: 1px; + background: var(--semi-color-ai-general); + -webkit-mask: linear-gradient(var(--semi-color-white) 0 0) content-box, linear-gradient(var(--semi-color-white) 0 0); + mask: linear-gradient(var(--semi-color-white) 0 0) content-box, linear-gradient(var(--semi-color-white) 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; +} +.semi-tag-colorful.semi-tag-ghost.semi-tag-gradient .semi-tag-content { + background: var(--semi-color-ai-general); + background-clip: text; + color: transparent; +} + +.semi-tag-group { + display: block; + height: auto; +} +.semi-tag-group .semi-tag { + margin-bottom: 0; + margin-right: 8px; +} +.semi-tag-group-max.semi-tag-group-small { + height: 22px; +} +.semi-tag-group-max.semi-tag-group-large { + height: 26px; +} + +.semi-tag-rest-group-popover .semi-tag { + margin-right: 8px; + margin-bottom: 0; +} +.semi-tag-rest-group-popover .semi-tag:last-of-type { + margin-right: 0; +} + +.semi-tag-amber-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-amber-4), 1); + color: rgba(var(--semi-amber-5), 1); +} + +.semi-tag-amber-solid { + background-color: rgba(var(--semi-amber-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-amber-light { + background-color: rgba(var(--semi-amber-5), 0.15); + color: rgba(var(--semi-amber-8), 1); +} + +.semi-tag-blue-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-blue-4), 1); + color: rgba(var(--semi-blue-5), 1); +} + +.semi-tag-blue-solid { + background-color: rgba(var(--semi-blue-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-blue-light { + background-color: rgba(var(--semi-blue-5), 0.15); + color: rgba(var(--semi-blue-8), 1); +} + +.semi-tag-cyan-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-cyan-4), 1); + color: rgba(var(--semi-cyan-5), 1); +} + +.semi-tag-cyan-solid { + background-color: rgba(var(--semi-cyan-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-cyan-light { + background-color: rgba(var(--semi-cyan-5), 0.15); + color: rgba(var(--semi-cyan-8), 1); +} + +.semi-tag-green-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-green-4), 1); + color: rgba(var(--semi-green-5), 1); +} + +.semi-tag-green-solid { + background-color: rgba(var(--semi-green-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-green-light { + background-color: rgba(var(--semi-green-5), 0.15); + color: rgba(var(--semi-green-8), 1); +} + +.semi-tag-grey-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-grey-4), 1); + color: rgba(var(--semi-grey-5), 1); +} + +.semi-tag-grey-solid { + background-color: rgba(var(--semi-grey-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-grey-light { + background-color: rgba(var(--semi-grey-5), 0.15); + color: rgba(var(--semi-grey-8), 1); +} + +.semi-tag-indigo-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-indigo-4), 1); + color: rgba(var(--semi-indigo-5), 1); +} + +.semi-tag-indigo-solid { + background-color: rgba(var(--semi-indigo-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-indigo-light { + background-color: rgba(var(--semi-indigo-5), 0.15); + color: rgba(var(--semi-indigo-8), 1); +} + +.semi-tag-light-blue-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-light-blue-4), 1); + color: rgba(var(--semi-light-blue-5), 1); +} + +.semi-tag-light-blue-solid { + background-color: rgba(var(--semi-light-blue-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-light-blue-light { + background-color: rgba(var(--semi-light-blue-5), 0.15); + color: rgba(var(--semi-light-blue-8), 1); +} + +.semi-tag-light-green-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-light-green-4), 1); + color: rgba(var(--semi-light-green-5), 1); +} + +.semi-tag-light-green-solid { + background-color: rgba(var(--semi-light-green-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-light-green-light { + background-color: rgba(var(--semi-light-green-5), 0.15); + color: rgba(var(--semi-light-green-8), 1); +} + +.semi-tag-lime-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-lime-4), 1); + color: rgba(var(--semi-lime-5), 1); +} + +.semi-tag-lime-solid { + background-color: rgba(var(--semi-lime-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-lime-light { + background-color: rgba(var(--semi-lime-5), 0.15); + color: rgba(var(--semi-lime-8), 1); +} + +.semi-tag-orange-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-orange-4), 1); + color: rgba(var(--semi-orange-5), 1); +} + +.semi-tag-orange-solid { + background-color: rgba(var(--semi-orange-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-orange-light { + background-color: rgba(var(--semi-orange-5), 0.15); + color: rgba(var(--semi-orange-8), 1); +} + +.semi-tag-pink-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-pink-4), 1); + color: rgba(var(--semi-pink-5), 1); +} + +.semi-tag-pink-solid { + background-color: rgba(var(--semi-pink-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-pink-light { + background-color: rgba(var(--semi-pink-5), 0.15); + color: rgba(var(--semi-pink-8), 1); +} + +.semi-tag-purple-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-purple-4), 1); + color: rgba(var(--semi-purple-5), 1); +} + +.semi-tag-purple-solid { + background-color: rgba(var(--semi-purple-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-purple-light { + background-color: rgba(var(--semi-purple-5), 0.15); + color: rgba(var(--semi-purple-8), 1); +} + +.semi-tag-red-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-red-4), 1); + color: rgba(var(--semi-red-5), 1); +} + +.semi-tag-red-solid { + background-color: rgba(var(--semi-red-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-red-light { + background-color: rgba(var(--semi-red-5), 0.15); + color: rgba(var(--semi-red-8), 1); +} + +.semi-tag-teal-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-teal-4), 1); + color: rgba(var(--semi-teal-5), 1); +} + +.semi-tag-teal-solid { + background-color: rgba(var(--semi-teal-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-teal-light { + background-color: rgba(var(--semi-teal-5), 0.15); + color: rgba(var(--semi-teal-8), 1); +} + +.semi-tag-violet-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-violet-4), 1); + color: rgba(var(--semi-violet-5), 1); +} + +.semi-tag-violet-solid { + background-color: rgba(var(--semi-violet-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-violet-light { + background-color: rgba(var(--semi-violet-5), 0.15); + color: rgba(var(--semi-violet-8), 1); +} + +.semi-tag-yellow-ghost { + background-color: transparent; + border: 1px solid rgba(var(--semi-yellow-4), 1); + color: rgba(var(--semi-yellow-5), 1); +} + +.semi-tag-yellow-solid { + background-color: rgba(var(--semi-yellow-5), 1); + color: rgba(var(--semi-white), 1); +} + +.semi-tag-yellow-light { + background-color: rgba(var(--semi-yellow-5), 0.15); + color: rgba(var(--semi-yellow-8), 1); +} + +.semi-tag-white-ghost { + background-color: var(--semi-color-bg-4); + border: 1px solid rgba(var(--semi-grey-2), 0.7); + color: var(--semi-color-text-0); +} + +.semi-tag-white-solid { + background-color: var(--semi-color-bg-4); + border: 1px solid rgba(var(--semi-grey-2), 0.7); + color: var(--semi-color-text-0); +} + +.semi-tag-white-light { + background-color: var(--semi-color-bg-4); + border: 1px solid rgba(var(--semi-grey-2), 0.7); + color: var(--semi-color-text-0); +} + +.semi-tag-white-ghost .semi-tag-close, +.semi-tag-white-light .semi-tag-close, +.semi-tag-white-solid .semi-tag-close { + color: var(--semi-color-text-2); +} + +.semi-tag-avatar-square, +.semi-tag-avatar-circle { + background-color: var(--semi-color-bg-4); + border: 1px solid var(--semi-color-border); + color: var(--semi-color-text-0); +} + +.semi-rtl .semi-tag, +.semi-portal-rtl .semi-tag { + direction: rtl; +} +.semi-rtl .semi-tag-close, +.semi-portal-rtl .semi-tag-close { + padding-left: auto; + padding-right: 4px; +} +.semi-rtl .semi-tag-closable, +.semi-portal-rtl .semi-tag-closable { + padding: 4px 8px 4px 4px; +} +.semi-rtl .semi-tag-avatar-square .semi-avatar, .semi-rtl .semi-tag-avatar-circle .semi-avatar, +.semi-portal-rtl .semi-tag-avatar-square .semi-avatar, +.semi-portal-rtl .semi-tag-avatar-circle .semi-avatar { + margin-right: auto; + margin-left: 4px; +} +.semi-rtl .semi-tag-avatar-square, +.semi-portal-rtl .semi-tag-avatar-square { + padding-right: auto; + padding-left: 4px; +} +.semi-rtl .semi-tag-avatar-circle, +.semi-portal-rtl .semi-tag-avatar-circle { + padding: 2px 2px 2px 4px; +} +.semi-rtl .semi-tag-group, +.semi-portal-rtl .semi-tag-group { + direction: rtl; +} +.semi-rtl .semi-tag-group .semi-tag, +.semi-portal-rtl .semi-tag-group .semi-tag { + margin-right: auto; + margin-left: 8px; +} +.semi-rtl .semi-tag-rest-group-popover, +.semi-portal-rtl .semi-tag-rest-group-popover { + direction: rtl; +} +.semi-rtl .semi-tag-rest-group-popover .semi-tag, +.semi-portal-rtl .semi-tag-rest-group-popover .semi-tag { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type, +.semi-portal-rtl .semi-tag-rest-group-popover .semi-tag:last-of-type { + margin-right: auto; + margin-left: 0; +} + +.semi-tagInput { + background-color: var(--semi-color-fill-0); + border: 1px transparent solid; + border-radius: var(--semi-border-radius-small); + display: inline-flex; + font-weight: 400; + width: 100%; + min-height: 32px; + box-sizing: border-box; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-tagInput-small { + min-height: 24px; +} +.semi-tagInput-large { + min-height: 40px; +} +.semi-tagInput-drag-item { + display: flex; + align-items: center; +} +.semi-tagInput-drag-item-move { + z-index: 2000; +} +.semi-tagInput-drag-handler { + color: var(--semi-color-text-2); + margin-right: 4px; + cursor: move; +} +.semi-tagInput-sortable-item { + position: relative; + max-width: 100%; +} +.semi-tagInput-sortable-item-over { + overflow: visible; +} +.semi-tagInput-sortable-item-over::before { + content: ""; + display: block; + height: 100%; + width: 2px; + background-color: var(--semi-color-primary); + position: absolute; + left: -2px; + top: 0; +} +.semi-tagInput-sortable-item-active { + opacity: 0.5; +} +.semi-tagInput-hover { + background-color: var(--semi-color-fill-1); + border: 1px transparent solid; +} +.semi-tagInput-focus { + background-color: var(--semi-color-fill-0); + border: 1px var(--semi-color-focus-border) solid; +} +.semi-tagInput-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-tagInput-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-tagInput-warning.semi-tagInput-focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-tagInput-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-tagInput-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-tagInput-error.semi-tagInput-focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-tagInput-disabled { + background-color: var(--semi-color-disabled-fill); + cursor: not-allowed; +} +.semi-tagInput-disabled .semi-tagInput-clearBtn, +.semi-tagInput-disabled .semi-tagInput-prefix, +.semi-tagInput-disabled .semi-tagInput-suffix { + color: var(--semi-color-disabled-text); +} +.semi-tagInput-disabled .semi-tagInput-wrapper { + cursor: not-allowed; +} +.semi-tagInput-disabled .semi-tagInput-wrapper-tag { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-tagInput-disabled .semi-tagInput-wrapper-input { + cursor: not-allowed; +} +.semi-tagInput-disabled .semi-tagInput-wrapper-input::placeholder { + color: var(--semi-color-disabled-text); +} +.semi-tagInput-wrapper { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + align-items: center; + padding-left: 4px; + padding-right: 4px; + overflow: hidden; +} +.semi-tagInput-wrapper-tag { + margin-right: 4px; + white-space: pre; + max-width: 100%; +} +.semi-tagInput-wrapper-tag-size-small { + margin-top: 1px; + margin-bottom: 1px; +} +.semi-tagInput-wrapper-tag-size-default { + margin-top: 2px; + margin-bottom: 2px; +} +.semi-tagInput-wrapper-tag-size-large { + margin-top: 3px; + margin-bottom: 3px; +} +.semi-tagInput-wrapper-tag-icon { + padding-left: 4px; +} +.semi-tagInput-wrapper-typo { + font-size: 12px; +} +.semi-tagInput-wrapper-typo-disabled { + color: var(--semi-color-disabled-text); +} +.semi-tagInput-wrapper-n { + cursor: pointer; + font-size: 12px; + margin-right: 4px; + color: var(--semi-color-text-0); + padding-left: 8px; + padding-right: 8px; +} +.semi-tagInput-wrapper-n-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input { + flex-grow: 1; + width: min-content; + border: none; + outline: none; + background-color: transparent; + font-size: 14px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input:hover { + background-color: transparent; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input:not(:first-child) > input { + padding-left: 0; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small { + height: 20px; + margin-top: 1px; + margin-bottom: 1px; + line-height: 20px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-small .semi-input-small { + height: 20px; + line-height: 20px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default { + height: 24px; + margin-top: 2px; + margin-bottom: 2px; + line-height: 24px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-default .semi-input-default { + height: 24px; + line-height: 24px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large { + height: 24px; + margin-top: 3px; + margin-bottom: 3px; + line-height: 24px; +} +.semi-tagInput-wrapper .semi-tagInput-wrapper-input-large .semi-input-large { + height: 24px; + line-height: 24px; +} +.semi-tagInput-clearBtn { + display: flex; + justify-content: center; + align-items: center; + width: 32px; + flex-shrink: 0; + color: var(--semi-color-text-2); +} +.semi-tagInput-clearBtn:hover { + cursor: pointer; + color: var(--semi-color-primary-hover); +} +.semi-tagInput-clearBtn-invisible { + visibility: hidden; +} +.semi-tagInput-inset-label { + margin: 0 12px; + font-weight: 600; + 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; + color: var(--semi-color-text-2); + flex-shrink: 0; + white-space: nowrap; +} +.semi-tagInput-prefix, .semi-tagInput-suffix { + display: flex; + justify-content: center; + align-items: center; +} +.semi-tagInput-prefix-text, .semi-tagInput-suffix-text { + margin: 0 12px; + font-weight: 600; + white-space: nowrap; + 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; +} +.semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon { + color: var(--semi-color-text-2); + margin: 0 8px; +} +.semi-tagInput-prefix-text { + color: var(--semi-color-text-2); +} +.semi-tagInput-suffix-text { + color: var(--semi-color-text-2); +} +.semi-tagInput-with-prefix .semi-input { + padding-left: 0; +} +.semi-tagInput-tag-content-wrapper { + display: flex; + align-items: center; +} +.semi-tagInput-sortable-list { + display: flex; + flex-flow: row wrap; + width: 100%; +} + +.semi-rtl .semi-tagInput, +.semi-portal-rtl .semi-tagInput { + direction: rtl; +} +.semi-rtl .semi-tagInput-wrapper-tag, +.semi-portal-rtl .semi-tagInput-wrapper-tag { + margin-left: 4px; + margin-right: 0; +} +.semi-rtl .semi-tagInput-wrapper-input:not(:first-child) > input, +.semi-portal-rtl .semi-tagInput-wrapper-input:not(:first-child) > input { + padding-right: 0; +} + +.semi-timepicker { + display: inline-block; +} +.semi-timepicker-panel .semi-scrolllist-body { + height: 252px; +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer-nocycle > ul:before, +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul:before { + height: 108px; +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item, +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar, +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item > ul, +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item-wheel .semi-scrolllist-list-outer > ul { + padding-bottom: 108px; +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item { + -ms-overflow-style: none; /* Internet Explorer 10+ */ + scrollbar-width: none; /* Firefox */ +} +.semi-timepicker-panel .semi-scrolllist-body .semi-scrolllist-item::-webkit-scrollbar { + display: none; + width: 0; + height: 0; +} +.semi-timepicker-panel .semi-scrolllist-item, +.semi-timepicker-panel .semi-scrolllist-item-wheel { + flex: none; +} +.semi-timepicker-panel .semi-scrolllist-item-wheel, +.semi-timepicker-panel .semi-scrolllist-item-wheel:not(:last-child) { + border: none; +} +.semi-timepicker-panel-list-ampm { + width: 72px; +} +.semi-timepicker-panel-list-hour { + width: 64px; +} +.semi-timepicker-panel-list-minute { + width: 64px; +} +.semi-timepicker-panel-list-second { + width: 64px; +} +.semi-timepicker-range-panel .semi-timepicker-lists { + display: flex; + box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: var(--semi-border-radius-medium); +} +.semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:first-of-type { + border-radius: var(--semi-border-radius-medium) 0 0 var(--semi-border-radius-medium); +} +.semi-timepicker-range-panel .semi-timepicker-lists .semi-scrolllist:last-of-type { + border-radius: 0 var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0; +} +.semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { + border-right: 2px solid var(--semi-color-border); +} +.semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist { + box-shadow: none; +} +.semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-body, .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist .semi-scrolllist-header { + padding: 0; +} +.semi-timepicker .semi-timepicker-input { + 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; + border-radius: var(--semi-border-radius-small); + align-items: center; +} +.semi-timepicker .semi-input-readonly { + cursor: pointer; +} + +.semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix { + opacity: 0; +} + +.semi-rtl .semi-timepicker, +.semi-portal-rtl .semi-timepicker { + direction: rtl; +} +.semi-rtl .semi-timepicker-panel, +.semi-portal-rtl .semi-timepicker-panel { + direction: rtl; +} +.semi-rtl .semi-timepicker-range, +.semi-portal-rtl .semi-timepicker-range { + direction: rtl; +} +.semi-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body, +.semi-portal-rtl .semi-timepicker-range-panel .semi-timepicker-lists > .semi-scrolllist:not(:last-child) .semi-scrolllist-body { + border-right: 0; + border-left: 2px solid var(--semi-color-border); +} + +.semi-timeline { + margin: 0; + padding: 8px; + width: 100%; + list-style: none; +} +.semi-timeline-item { + position: relative; + margin: 0; + padding: 0 0 24px 0; + list-style: none; +} +.semi-timeline-item-tail { + position: absolute; + top: 20px; + left: 4px; + height: calc(100% - 20px); + border-left: 1px solid var(--semi-color-text-3); +} +.semi-timeline-item-head { + position: absolute; + top: 5px; + width: 9px; + height: 9px; + border-radius: var(--semi-border-radius-circle); +} +.semi-timeline-item-head-ongoing { + background-color: var(--semi-color-primary); +} +.semi-timeline-item-head-default { + background-color: var(--semi-color-tertiary-light-active); +} +.semi-timeline-item-head-success { + background-color: var(--semi-color-success); +} +.semi-timeline-item-head-warning { + background-color: var(--semi-color-warning); +} +.semi-timeline-item-head-error { + background-color: var(--semi-color-danger); +} +.semi-timeline-item-head-custom { + position: absolute; + display: flex; + align-self: center; + top: 10px; + left: 5px; + width: auto; + height: auto; + border: 0; + border-radius: 0; + transform: translate(-50%, -50%); +} +.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-ongoing { + background-color: transparent; + color: var(--semi-color-primary); +} +.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-success { + background-color: transparent; + color: var(--semi-color-success); +} +.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-warning { + background-color: transparent; + color: var(--semi-color-warning); +} +.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-error { + background-color: transparent; + color: var(--semi-color-danger); +} +.semi-timeline-item .semi-timeline-item-head-custom.semi-timeline-item-head-default { + background-color: transparent; + color: var(--semi-color-tertiary-light-active); +} +.semi-timeline-item-content { + 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; + position: relative; + margin: 0 0 0 25px; + word-break: break-word; + color: var(--semi-color-text-0); +} +.semi-timeline-item-content-extra, .semi-timeline-item-content-time { + 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; + color: var(--semi-color-text-2); + margin-top: 4px; +} +.semi-timeline-item:last-child > .semi-timeline-item-tail { + border-left: none; +} +.semi-timeline-alternate .semi-timeline-item-tail, .semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-tail, .semi-timeline-center .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head-custom { + left: 50%; +} +.semi-timeline-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-center .semi-timeline-item-head.semi-timeline-item-head-custom { + margin-left: 0; +} +.semi-timeline-alternate .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-head, .semi-timeline-center .semi-timeline-item-head { + margin-left: -4px; +} +.semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { + left: calc(50% - 4px); + width: calc(50% - 14px); + text-align: left; +} +.semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { + width: calc(50% - 20px); + margin: 0; + text-align: right; +} +.semi-timeline-center .semi-timeline-item-content-time { + position: absolute; + top: -2px; + margin-left: calc(-40px - 100%); + width: 100%; + text-align: right; +} +.semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { + left: calc(100% - 9px); +} +.semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content { + width: calc(100% - 28px); +} + +.semi-rtl .semi-timeline, +.semi-portal-rtl .semi-timeline { + direction: rtl; +} +.semi-rtl .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-item-tail { + left: auto; + right: 4px; + border-left: 0; + border-right: 1px solid var(--semi-color-text-3); +} +.semi-rtl .semi-timeline-item-head-custom, +.semi-portal-rtl .semi-timeline-item-head-custom { + left: auto; + right: 5px; + transform: translate(50%, -50%); +} +.semi-rtl .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-item-content { + margin: 0 25px 0 0; +} +.semi-rtl .semi-timeline-item:last-child .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-item:last-child .semi-timeline-item-tail { + border-right: none; +} +.semi-rtl .semi-timeline-alternate .semi-timeline-item-tail, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head-custom, .semi-rtl .semi-timeline-center .semi-timeline-item-tail, .semi-rtl .semi-timeline-center .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head-custom, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head-custom, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head-custom, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head-custom { + left: auto; + right: 50%; +} +.semi-rtl .semi-timeline-alternate .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-head, .semi-rtl .semi-timeline-center .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-head { + margin-left: 0; + margin-right: -4px; +} +.semi-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-left .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-left .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-left .semi-timeline-item-content { + left: auto; + right: calc(50% - 4px); + text-align: right; +} +.semi-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, .semi-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-alternate .semi-timeline-item-right .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-content, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-right .semi-timeline-item-content { + text-align: left; +} +.semi-rtl .semi-timeline-center .semi-timeline-item-content-time, +.semi-portal-rtl .semi-timeline-center .semi-timeline-item-content-time { + margin-left: 0; + margin-right: calc(-40px - 100%); + text-align: left; +} +.semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, .semi-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-tail, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head, +.semi-portal-rtl .semi-timeline-right .semi-timeline-item-right .semi-timeline-item-head-custom { + left: 0; + right: calc(100% - 9px); +} + +.semi-toast { + pointer-events: none; +} +.semi-toast-wrapper { + position: fixed; + height: 0; + top: 0; + width: 100%; + display: flex; + justify-content: center; + z-index: 1010; +} +.semi-toast-wrapper .semi-toast-innerWrapper { + width: fit-content; + height: fit-content; + text-align: center; +} +.semi-toast-wrapper .semi-toast-innerWrapper-hover .semi-toast-zero-height-wrapper { + perspective: unset; + perspective-origin: center center; +} +.semi-toast-zero-height-wrapper { + transition: all 300ms cubic-bezier(0.22, 0.57, 0.02, 1.2); + perspective-origin: center 280px; + perspective: 280px; + height: 0; + overflow: visible; +} +.semi-toast-content { + pointer-events: all; + box-shadow: var(--semi-shadow-elevated); + 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; + background-color: var(--semi-color-bg-3); + border-radius: var(--semi-border-radius-medium); + padding: 12px 8px 12px 8px; + display: inline-flex; + align-items: flex-start; + justify-content: center; + margin: 12px; + font-weight: 600; + color: var(--semi-color-text-0); +} +.semi-toast-content .semi-toast-close-button { + margin-top: -2px; + height: 20px; +} +.semi-toast-content .semi-toast-content-text { + margin-left: 12px; + margin-right: 12px; + text-align: left; + word-wrap: break-word; + overflow-wrap: break-word; +} +.semi-toast-light.semi-toast-warning .semi-toast-content { + background-color: var(--semi-color-warning-light-default); + border: 1px solid var(--semi-color-warning); +} +.semi-toast-light.semi-toast-warning .semi-toast-icon-warning { + color: var(--semi-color-warning); +} +.semi-toast-light.semi-toast-success .semi-toast-content { + background-color: var(--semi-color-success-light-default); + border: 1px solid var(--semi-color-success); +} +.semi-toast-light.semi-toast-success .semi-toast-icon-success { + color: var(--semi-color-success); +} +.semi-toast-light.semi-toast-info .semi-toast-content { + background-color: var(--semi-color-info-light-default); + border: 1px solid var(--semi-color-info); +} +.semi-toast-light.semi-toast-info .semi-toast-icon-info { + color: var(--semi-color-info); +} +.semi-toast-light.semi-toast-error .semi-toast-content { + background-color: var(--semi-color-danger-light-default); + border: 1px solid var(--semi-color-danger); +} +.semi-toast-light.semi-toast-error .semi-toast-icon-error { + color: var(--semi-color-danger); +} +.semi-toast .semi-toast-icon-warning { + color: var(--semi-color-warning); +} +.semi-toast .semi-toast-icon-success { + color: var(--semi-color-success); +} +.semi-toast .semi-toast-icon-info { + color: var(--semi-color-info); +} +.semi-toast .semi-toast-icon-error { + color: var(--semi-color-danger); +} +.semi-toast-animation-show { + animation: 300ms semi-toast-keyframe-toast-show cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s; + animation-fill-mode: forwards; +} +.semi-toast-animation-hide { + animation: 300ms semi-toast-keyframe-toast-hide cubic-bezier(0.22, 0.57, 0.02, 1.2) 0s; + animation-fill-mode: forwards; +} +@keyframes semi-toast-keyframe-toast-show { + 0% { + opacity: 0; + transform: translateY(-100%); + } + 100% { + opacity: 1; + } +} +@keyframes semi-toast-keyframe-toast-hide { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + transform: translateY(-100%); + } +} + +.semi-toast-rtl { + direction: rtl; +} +.semi-toast-rtl .semi-toast-content .semi-toast-content-text { + text-align: right; + margin-left: 12px; + margin-right: 12px; +} + +@keyframes semi-tooltip-zoomIn { + from { + opacity: 0; + transform: scale(0.8, 0.8); + } + 50% { + opacity: 1; + } +} +@keyframes semi-tooltip-bounceIn { + from { + opacity: 0; + transform: scale(0.6, 0.6); + } + 70% { + opacity: 1; + transform: scale(1.01, 1.01); + } + to { + opacity: 1; + transform: scale(1, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } +} +@keyframes semi-tooltip-zoomOut { + from { + opacity: 1; + } + 60% { + opacity: 0; + transform: scale(0.8, 0.8); + } + to { + opacity: 0; + } +} +.semi-tooltip-wrapper { + position: relative; + background-color: rgba(var(--semi-grey-7), 1); + backdrop-filter: none; + color: var(--semi-color-bg-0); + border-radius: var(--semi-border-radius-medium); + padding-top: 8px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; + font-size: 14px; + left: 0; + top: 0; + word-wrap: break-word; + overflow-wrap: break-word; + 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; + opacity: 0; + max-width: 240px; +} +.semi-tooltip-wrapper-show { + opacity: 1; +} +.semi-tooltip-content { + min-width: 0; +} +.semi-tooltip-trigger { + display: inline-block; + width: auto; + height: auto; +} +.semi-tooltip-with-arrow { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; +} +.semi-tooltip-animation-show { + animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + animation-fill-mode: forwards; +} +.semi-tooltip-animation-hide { + animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + animation-fill-mode: forwards; +} + +.semi-tooltip-wrapper .semi-tooltip-icon-arrow { + height: 7px; + width: 24px; + position: absolute; + color: rgba(var(--semi-grey-7), 1); +} +.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow { + left: 50%; + transform: translateX(-50%); + bottom: -6px; +} +.semi-tooltip-wrapper[x-placement=top].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=top] .semi-tooltip-with-arrow { + min-width: 36px; +} +.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-icon-arrow { + bottom: -6px; + left: 6px; +} +.semi-tooltip-wrapper[x-placement=topLeft].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=topLeft] .semi-tooltip-with-arrow { + min-width: 36px; +} +.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-icon-arrow { + bottom: -6px; + right: 6px; +} +.semi-tooltip-wrapper[x-placement=topRight].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=topRight] .semi-tooltip-with-arrow { + min-width: 36px; +} +.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + right: -6px; + top: 5px; +} +.semi-tooltip-wrapper[x-placement=leftTop].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=leftTop] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + right: -6px; + top: 50%; + transform: translateY(-50%); +} +.semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=left] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + right: -6px; + bottom: 5px; +} +.semi-tooltip-wrapper[x-placement=leftBottom].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=leftBottom] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + left: -6px; + top: 5px; + transform: rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=rightTop].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=rightTop] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + left: -6px; + top: 50%; + transform: translateY(-50%) rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=right] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-icon-arrow { + width: 7px; + height: 24px; + left: -6px; + bottom: 5px; + transform: rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=rightBottom].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=rightBottom] .semi-tooltip-with-arrow { + min-height: 34px; +} +.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-icon-arrow { + top: -6px; + left: 6px; + transform: rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=bottomLeft].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=bottomLeft] .semi-tooltip-with-arrow { + min-width: 36px; +} +.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow { + top: -6px; + left: 50%; + transform: translateX(-50%) rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-with-arrow { + min-width: 36px; +} +.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-icon-arrow { + right: 6px; + top: -6px; + transform: rotate(180deg); +} +.semi-tooltip-wrapper[x-placement=bottomRight].semi-tooltip-with-arrow, +.semi-tooltip-wrapper[x-placement=bottomRight] .semi-tooltip-with-arrow { + min-width: 36px; +} + +.semi-rtl .semi-tooltip-wrapper, +.semi-portal-rtl .semi-tooltip-wrapper { + direction: rtl; + padding-right: 12px; + padding-left: 12px; + left: auto; + right: 0; +} + +.semi-transfer { + background-color: var(--semi-color-bg-1); + border: 1px solid var(--semi-color-border); + border-radius: var(--semi-border-radius-medium); + min-width: 402px; + height: 400px; + box-sizing: border-box; + display: flex; +} +.semi-transfer-disabled .semi-transfer-header { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-transfer-disabled .semi-transfer-item { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-transfer-disabled .semi-transfer-item:hover { + background-color: inherit; +} +.semi-transfer-disabled .semi-transfer-item:hover .semi-transfer-item-close-icon { + visibility: hidden; +} +.semi-transfer-disabled .semi-transfer-item:active { + background-color: inherit; +} +.semi-transfer-custom-panel { + border: none; + min-width: inherit; + height: inherit; +} +.semi-transfer-header { + 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; + display: flex; + align-items: center; + height: 24px; + margin-top: 12px; + margin-right: 12px; + margin-bottom: 8px; + margin-left: 12px; + color: var(--semi-color-text-2); + flex-shrink: 0; +} +.semi-transfer-header-all { + font-weight: 600; + margin-left: 16px; +} +.semi-transfer-header .semi-button { + 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-transfer-item { + min-height: 36px; + box-sizing: border-box; + padding-top: 8px; + padding-right: 9px; + padding-bottom: 8px; + padding-left: 12px; + user-select: none; + 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; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: nowrap; + color: var(--semi-color-text-1); + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-transfer-item:hover { + background-color: var(--semi-color-fill-0); +} +.semi-transfer-item:active { + background-color: var(--semi-color-fill-1); +} +.semi-transfer-item-disabled { + cursor: not-allowed; +} +.semi-transfer-item-disabled:hover { + background-color: inherit; +} +.semi-transfer-item .semi-transfer-item-close-icon { + font-size: 12px; + cursor: pointer; + visibility: hidden; + color: var(--semi-color-text-2); +} +.semi-transfer-left { + width: 50%; + border-right: 1px solid var(--semi-color-border); + display: flex; + flex-direction: column; +} +.semi-transfer-left-list { + overflow: auto; + flex-grow: 1; +} +.semi-transfer-left-empty { + height: 36px; +} +.semi-transfer-left > .semi-spin { + width: 100%; + flex-grow: 1; +} +.semi-transfer-right { + width: 50%; + display: flex; + flex-direction: column; + position: relative; +} +.semi-transfer-right-header { + margin-top: 12px; + margin-bottom: 0; + height: 32px; + flex-shrink: 0; +} +.semi-transfer-right-list { + overflow: auto; + flex-grow: 1; +} +.semi-transfer-right-item { + color: var(--semi-color-text-0); + cursor: auto; +} +.semi-transfer-right-item:hover .semi-transfer-item-close-icon { + flex-shrink: 0; + visibility: visible; + cursor: pointer; +} +.semi-transfer-right-item:hover .semi-transfer-item-close-icon.semi-transfer-item-close-icon-disabled { + visibility: hidden; +} +.semi-transfer-right-item-text { + flex: 1; + word-break: break-all; +} +.semi-transfer-right-item-drag-handler { + margin-right: 4px; + flex-shrink: 0; + cursor: move; +} +.semi-transfer-right-item-drag-item-move { + z-index: 2000; +} +.semi-transfer-right-item-sortable-item-active { + opacity: 0; +} +.semi-transfer-right-empty { + position: absolute; + height: 100%; +} +.semi-transfer-empty { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + 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; + color: var(--semi-color-text-2); +} +.semi-transfer-filter { + margin-top: 12px; + margin-right: 12px; + margin-bottom: 0; + margin-left: 12px; +} +.semi-transfer-group-title { + color: var(--semi-color-text-2); + padding-left: 12px; + 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; + height: 28px; + display: flex; + align-items: center; +} + +.semi-rtl .semi-transfer, +.semi-portal-rtl .semi-transfer { + direction: rtl; +} +.semi-rtl .semi-transfer-header-all, +.semi-portal-rtl .semi-transfer-header-all { + margin-left: 0; + margin-right: 16px; +} +.semi-rtl .semi-transfer-item, +.semi-portal-rtl .semi-transfer-item { + padding-left: 9px; + padding-right: 12px; +} +.semi-rtl .semi-transfer-left, +.semi-portal-rtl .semi-transfer-left { + border-right: 0; + border-left: 1px solid var(--semi-color-border); +} +.semi-rtl .semi-transfer-group-title, +.semi-portal-rtl .semi-transfer-group-title { + padding-left: 0; + padding-right: 12px; +} + +.semi-tree-search-wrapper { + padding: 8px 12px; +} + +.semi-tree-wrapper { + display: flex; + flex-direction: column; +} + +.semi-tree-option-list { + overflow-x: hidden; + overflow-y: auto; + box-sizing: border-box; + flex: 1; + padding: 8px 0; +} +.semi-tree-option-list ul, +.semi-tree-option-list li { + list-style-type: none; + padding: 0; + margin: 0; +} +.semi-tree-option-list li.semi-tree-option { + box-sizing: border-box; + padding-top: 4px; + padding-bottom: 4px; + padding-left: 8px; +} +.semi-tree-option-list li > .semi-tree-option-label { + list-style-type: none; + padding: 0; +} +.semi-tree-option-list .semi-tree-option-expand-icon, +.semi-tree-option-list .semi-tree-option-empty-icon { + box-sizing: border-box; + width: 12px; + color: var(--semi-color-text-2); + margin-right: 8px; + display: flex; + flex-shrink: 0; +} +.semi-tree-option-list .semi-tree-option { + display: flex; + align-items: center; + cursor: pointer; + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); + transform: scale(var(--semi-transform_scale-none)); + 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-word; + color: var(--semi-color-text-0); + position: relative; +} +.semi-tree-option-list .semi-tree-option-label { + display: flex; + align-items: center; +} +.semi-tree-option-list .semi-tree-option-label > .semi-icon { + margin-right: 8px; +} +.semi-tree-option-list .semi-tree-option-label .semi-checkbox { + margin-right: 8px; +} +.semi-tree-option-list .semi-tree-option-label-text { + display: block; + flex: 1; +} +.semi-tree-option-list .semi-tree-option-ellipsis .semi-tree-option-label-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.semi-tree-option-list .semi-tree-option-label-text, +.semi-tree-option-list .semi-tree-option .semi-checkbox-addon { + border-radius: var(--semi-border-radius-small); +} +.semi-tree-option-list .semi-tree-option-label-text:hover, +.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:hover { + background-color: var(--semi-color-fill-0); +} +.semi-tree-option-list .semi-tree-option-label-text:active, +.semi-tree-option-list .semi-tree-option .semi-checkbox-addon:active { + background-color: var(--semi-color-fill-1); +} +.semi-tree-option-list .semi-tree-option-item-icon { + color: var(--semi-color-text-2); +} +.semi-tree-option-list .semi-tree-option-active .semi-tree-option-label-text { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list .semi-tree-option-active:hover, .semi-tree-option-list .semi-tree-option-active:active { + background-color: transparent; +} +.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list .semi-tree-option-selected .semi-tree-option-label:active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { + transform: rotate(270deg); +} +.semi-tree-option-list .semi-tree-option-highlight { + font-weight: 600; + color: var(--semi-color-primary); + background-color: inherit; +} +.semi-tree-option-list .semi-tree-option-hidden { + display: none; +} +.semi-tree-option-list .semi-tree-option-disabled .semi-tree-option-label { + color: var(--semi-color-disabled-text); +} +.semi-tree-option-list .semi-tree-option-fullLabel-draggable, .semi-tree-option-list .semi-tree-option-draggable { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; + /* Required to make elements draggable in old WebKit */ + -khtml-user-drag: element; + -webkit-user-drag: element; +} +.semi-tree-option-list .semi-tree-option-draggable { + box-sizing: border-box; + border-left: 2px solid transparent; +} +.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-label { + border-top: 2px transparent solid; + border-bottom: 2px transparent solid; +} +.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-top { + border-top: 2px var(--semi-color-primary) solid; +} +.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-drag-over-gap-bottom { + border-bottom: 2px var(--semi-color-primary) solid; +} +.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-indent .semi-tree-option-indent-unit:before { + top: 0px; + bottom: 0px; +} +.semi-tree-option-list .semi-tree-option-draggable .semi-tree-option-switcher-leaf-line::before { + top: 0px; + bottom: 0px; +} +.semi-tree-option-list .semi-tree-option-draggable.semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before { + height: 50%; +} +.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-top { + border-top: 2px var(--semi-color-primary) solid; +} +.semi-tree-option-list .semi-tree-option-fullLabel-draggable.semi-tree-option-fullLabel-drag-over-gap-bottom { + border-bottom: 2px var(--semi-color-primary) solid; +} +.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable { + border: 2px solid var(--semi-color-primary); +} +.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable .semi-tree-option-label, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable .semi-tree-option-label { + border-top: 0; + border-bottom: 0; +} +.semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-draggable + .semi-tree-option-selected::after, .semi-tree-option-list .semi-tree-option-drag-over.semi-tree-option-fullLabel-draggable + .semi-tree-option-selected::after { + content: ""; + position: absolute; + top: 0; + left: -2px; + bottom: 0; + right: -1px; + border-top: 2px solid var(--semi-color-primary); +} +.semi-tree-option-list .semi-tree-option-indent { + align-self: stretch; + white-space: nowrap; + user-select: none; +} +.semi-tree-option-list .semi-tree-option-indent-unit { + display: inline-block; + width: 20px; +} +.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit { + position: relative; + height: 100%; +} +.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit::before { + position: absolute; + top: -4px; + inset-inline-start: 6px; + bottom: -4px; + border-inline-end: 1px solid var(--semi-color-text-3); + content: ""; +} +.semi-tree-option-list .semi-tree-option-indent-show-line .semi-tree-option-indent-unit-end::before { + display: none; +} +.semi-tree-option-list .semi-tree-option-switcher { + position: relative; + flex: none; + align-self: stretch; + width: 12px; + margin: 0; + text-align: center; + cursor: pointer; + user-select: none; + margin-right: 8px; +} +.semi-tree-option-list .semi-tree-option-switcher-leaf-line { + z-index: 1; + position: relative; + display: inline-block; + width: 100%; + height: 100%; +} +.semi-tree-option-list .semi-tree-option-switcher-leaf-line::before { + position: absolute; + top: -4px; + inset-inline-start: 6px; + bottom: -4px; + border-inline-end: 1px solid var(--semi-color-text-3); + content: ""; +} +.semi-tree-option-list .semi-tree-option-switcher-leaf-line::after { + box-sizing: border-box; + position: absolute; + width: 8px; + height: 50%; + border-bottom: 1px solid var(--semi-color-text-3); + content: ""; + margin-inline-start: 1px; +} +.semi-tree-option-list .semi-tree-option-tree-node-last-leaf .semi-tree-option-switcher-leaf-line::before { + height: calc(50% + 4px); +} +.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option { + padding-top: 0px; + padding-bottom: 0px; +} +.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-label { + padding: 2px 0; +} +.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected { + background-color: transparent; +} +.semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:hover, .semi-tree-option-list li.semi-tree-option-draggable.semi-tree-option .semi-tree-option-selected:active { + background-color: transparent; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-1 { + padding-left: 8px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-2 { + padding-left: 28px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-3 { + padding-left: 48px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-4 { + padding-left: 68px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-5 { + padding-left: 88px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-6 { + padding-left: 108px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-7 { + padding-left: 128px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-8 { + padding-left: 148px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-9 { + padding-left: 168px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-10 { + padding-left: 188px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-11 { + padding-left: 208px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-12 { + padding-left: 228px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-13 { + padding-left: 248px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-14 { + padding-left: 268px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-15 { + padding-left: 288px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-16 { + padding-left: 308px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-17 { + padding-left: 328px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-18 { + padding-left: 348px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-19 { + padding-left: 368px; +} +.semi-tree-option-list .semi-tree-option.semi-tree-option-fullLabel-level-20 { + padding-left: 388px; +} +.semi-tree-option-list .semi-tree-option-empty:hover, .semi-tree-option-list .semi-tree-option-empty:active { + background-color: transparent; +} +.semi-tree-option-list .semi-tree-option-label-empty { + padding-left: 0; + justify-content: center; + color: var(--semi-color-disabled-text); + user-select: none; + cursor: not-allowed; +} +.semi-tree-option-list .semi-checkboxGroup-vertical { + row-gap: 0; +} + +.semi-tree-option-list-block .semi-tree-option:hover { + background-color: var(--semi-color-fill-0); +} +.semi-tree-option-list-block .semi-tree-option:active { + background-color: var(--semi-color-fill-1); +} +.semi-tree-option-list-block .semi-tree-option-label { + flex: 1; +} +.semi-tree-option-list-block .semi-tree-option-active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list-block .semi-tree-option-active:hover, .semi-tree-option-list-block .semi-tree-option-active:active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list-block .semi-tree-option-active .semi-tree-option-label-text { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-expand-icon { + flex-shrink: 0; + box-sizing: content-box; +} +.semi-tree-option-list-block .semi-tree-option-expand-icon:hover { + color: var(--semi-color-text-0); +} +.semi-tree-option-list-block .semi-tree-option-expand-icon:active { + color: var(--semi-color-black); +} +.semi-tree-option-list-block .semi-tree-option-spin-icon { + display: flex; + line-height: 0; + color: var(--semi-color-primary); +} +.semi-tree-option-list-block .semi-tree-option-spin-icon svg { + width: 12px; + height: 12px; +} +.semi-tree-option-list-block .semi-tree-option-selected { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:hover, .semi-tree-option-list-block .semi-tree-option-selected .semi-tree-option-label:active { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-selected .semi-checkbox-addon { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-selected:hover, .semi-tree-option-list-block .semi-tree-option-selected:active { + background-color: var(--semi-color-primary-light-default); +} +.semi-tree-option-list-block .semi-tree-option-label-text, +.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon { + padding: 0; + border-radius: var(--semi-border-radius-small); +} +.semi-tree-option-list-block .semi-tree-option-label-text:hover, +.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:hover { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-label-text:active, +.semi-tree-option-list-block .semi-tree-option .semi-checkbox-addon:active { + background-color: transparent; +} +.semi-tree-option-list-block .semi-tree-option-label-text { + width: 0; +} +.semi-tree-option-list-block .semi-tree-option-empty:hover, .semi-tree-option-list-block .semi-tree-option-empty:active { + background-color: transparent; +} + +.semi-rtl .semi-tree, +.semi-popover-rtl .semi-tree { + direction: rtl; +} +.semi-rtl .semi-tree-wrapper, +.semi-popover-rtl .semi-tree-wrapper { + direction: rtl; +} +.semi-rtl .semi-tree-option-list, +.semi-popover-rtl .semi-tree-option-list { + direction: rtl; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-expand-icon, +.semi-rtl .semi-tree-option-list .semi-tree-option-empty-icon, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-expand-icon, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-empty-icon { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tree-option-list .semi-tree-option, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option { + padding-left: 0; + padding-right: 8px; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label > .semi-icon { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label .semi-checkbox { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-collapsed .semi-tree-option-expand-icon { + transform: rotate(90deg); +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-1 { + padding-left: 0; + padding-right: 8px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-2 { + padding-left: 0; + padding-right: 28px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-3 { + padding-left: 0; + padding-right: 48px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-4 { + padding-left: 0; + padding-right: 68px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-5 { + padding-left: 0; + padding-right: 88px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-6 { + padding-left: 0; + padding-right: 108px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-7 { + padding-left: 0; + padding-right: 128px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-8 { + padding-left: 0; + padding-right: 148px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-9 { + padding-left: 0; + padding-right: 168px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-10 { + padding-left: 0; + padding-right: 188px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-11 { + padding-left: 0; + padding-right: 208px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-12 { + padding-left: 0; + padding-right: 228px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-13 { + padding-left: 0; + padding-right: 248px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-14 { + padding-left: 0; + padding-right: 268px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-15 { + padding-left: 0; + padding-right: 288px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-16 { + padding-left: 0; + padding-right: 308px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-17 { + padding-left: 0; + padding-right: 328px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-18 { + padding-left: 0; + padding-right: 348px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-19 { + padding-left: 0; + padding-right: 368px; +} +.semi-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20, +.semi-popover-rtl .semi-tree-option-list li.semi-tree-option.semi-tree-option-fullLabel-level-20 { + padding-left: 0; + padding-right: 388px; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-label-empty, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-label-empty { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-tree-option-list .semi-tree-option-switcher, +.semi-popover-rtl .semi-tree-option-list .semi-tree-option-switcher { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-tree-option-list-block, +.semi-popover-rtl .semi-tree-option-list-block { + direction: rtl; +} + +.semi-tree-select { + box-sizing: border-box; + border-radius: var(--semi-border-radius-small); + border: 1px solid transparent; + min-width: 80px; + min-height: 32px; + line-height: 32px; + font-weight: 400; + background-color: var(--semi-color-fill-0); + display: inline-flex; + align-items: center; + position: relative; + cursor: pointer; +} +.semi-tree-select:hover { + background-color: var(--semi-color-fill-1); + border: 1px solid transparent; +} +.semi-tree-select:active { + background-color: var(--semi-color-fill-2); +} +.semi-tree-select-focus { + background-color: var(--semi-color-fill-0); + border: 1px solid var(--semi-color-focus-border); + outline: 0; +} +.semi-tree-select-focus:hover { + background-color: var(--semi-color-fill-0); + border: 1px solid var(--semi-color-focus-border); + outline: 0; +} +.semi-tree-select-focus:active { + background-color: var(--semi-color-fill-2); +} +.semi-tree-select-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-tree-select-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-tree-select-warning.semi-tree-select-focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-tree-select-warning:active { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning-light-active); +} +.semi-tree-select-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-tree-select-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-tree-select-error.semi-tree-select-focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-tree-select-error:active { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger-light-active); +} +.semi-tree-select-disabled { + cursor: not-allowed; + user-select: none; + background-color: var(--semi-color-disabled-fill); +} +.semi-tree-select-disabled:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-tree-select-disabled .semi-tree-select-selection, +.semi-tree-select-disabled .semi-tree-select-selection-placeholder { + color: var(--semi-color-disabled-text); + cursor: not-allowed; +} +.semi-tree-select-disabled .semi-tree-select-arrow, +.semi-tree-select-disabled .semi-tree-select-prefix, +.semi-tree-select-disabled .semi-tree-select-suffix { + color: var(--semi-color-disabled-text); +} +.semi-tree-select-disabled .semi-tag { + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-tree-select-selection { + 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; + height: 100%; + display: inline-flex; + align-items: center; + flex-wrap: wrap; + flex-grow: 1; + overflow: hidden; + padding-left: 12px; + padding-right: 0; + cursor: pointer; + color: var(--semi-color-text-0); + position: relative; +} +.semi-tree-select-selection-content { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.semi-tree-select-selection-placeholder { + color: var(--semi-color-text-2); +} +.semi-tree-select-selection .semi-tag-group { + height: inherit; + display: inline-flex; + align-items: center; + flex-wrap: wrap; +} +.semi-tree-select-selection .semi-tag { + margin: 1px 2px; +} +.semi-tree-select-selection-TriggerSearchItem { + position: absolute; + max-width: calc(100% - 12px); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.semi-tree-select-selection-TriggerSearchItem-placeholder { + opacity: 0.6; +} +.semi-tree-select-selection-TriggerSearchItem-disabled { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-upper { + z-index: 1; +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper { + width: 100%; +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-tree-select-inputTrigger .semi-input-wrapper { + background: transparent; +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper { + height: 100%; + width: 100%; + border: none; + background-color: transparent; +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input-wrapper-focus { + border: none; +} +.semi-tree-select-selection .semi-tree-select-triggerSingleSearch-wrapper .semi-input { + padding-left: 0; + padding-right: 0; +} +.semi-tree-select-selection .semi-tagInput { + border: hidden; + background: transparent; + min-height: 30px; +} +.semi-tree-select-selection .semi-tagInput-small { + min-height: 22px; +} +.semi-tree-select-selection .semi-tagInput-large { + min-height: 38px; +} +.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper { + padding-left: 4px; + padding-right: 4px; +} +.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper .semi-input { + padding-left: 0; +} +.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-default { + margin-top: 1px; + margin-bottom: 1px; +} +.semi-tree-select-selection .semi-tagInput .semi-tagInput-wrapper .semi-input-wrapper-large { + margin-top: 1px; + margin-bottom: 1px; +} +.semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { + margin-left: -4px; +} +.semi-tree-select-multiple-tagInput-empty .semi-tagInput { + margin-left: 4px; +} +.semi-tree-select-multiple { + display: inline-flex; +} +.semi-tree-select-multiple .semi-tree-select-selection { + padding-left: 4px; + padding-right: 0; +} +.semi-tree-select-multiple .semi-tree-select-selection-placeholder { + padding-left: 8px; +} +.semi-tree-select-small { + min-height: 24px; + line-height: 24px; +} +.semi-tree-select-large { + min-height: 40px; + line-height: 40px; +} +.semi-tree-select-large .semi-tree-select-selection { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +} +.semi-tree-select-arrow { + display: inline-flex; + align-items: center; + flex-shrink: 0; + height: 100%; + justify-content: center; + width: 32px; + color: var(--semi-color-text-2); +} +.semi-tree-select-inset-label { + display: inline; + margin: 0px 12px; + font-weight: 600; + 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; + color: var(--semi-color-text-2); + flex-shrink: 0; + white-space: nowrap; +} +.semi-tree-select.semi-tree-select-with-prefix { + display: inline-flex; + align-items: center; +} +.semi-tree-select-arrow, .semi-tree-select-clearbtn { + display: inline-flex; + align-items: center; + height: 100%; + flex-shrink: 0; + justify-content: center; + width: 32px; + color: var(--semi-color-text-2); +} +.semi-tree-select-clearbtn:hover { + color: var(--semi-color-primary-hover); +} +.semi-tree-select-clearbtn:active { + color: var(--semi-color-primary-active); +} +.semi-tree-select-prefix, .semi-tree-select-suffix { + display: inline; + display: flex; + justify-content: center; + align-items: center; +} +.semi-tree-select-prefix-text, .semi-tree-select-suffix-text { + color: var(--semi-color-text-2); + font-weight: 600; + 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; + margin: 0px 12px; +} +.semi-tree-select-prefix-icon, .semi-tree-select-suffix-icon { + color: var(--semi-color-text-2); + margin: 0px 8px; +} +.semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { + padding-right: 0px; +} +.semi-tree-select-prefix-search-wrapper, .semi-tree-select-suffix-search-wrapper { + padding: 8px 12px; + border-bottom: 1px solid var(--semi-color-fill-0); +} +.semi-tree-select-prefix-maxTagCount, .semi-tree-select-suffix-maxTagCount { + color: var(--semi-color-text-2); + font-size: 14px; +} +.semi-tree-select-prefix-popover, .semi-tree-select-suffix-popover { + max-height: 300px; + overflow: auto; +} + +.semi-tree-select-popover .semi-tree-wrapper { + height: 100%; + display: flex; + flex-direction: column; +} +.semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list { + flex: 1; + min-width: 230px; +} +.semi-tree-select-popover .semi-tree-wrapper .semi-tree-option-list-hidden { + padding: 0; +} +.semi-tree-select-popover .semi-tree-wrapper .semi-tree-search-wrapper { + border-bottom: 1px var(--semi-color-fill-0) solid; +} + +.semi-tree-select-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow { + opacity: 0; +} +.semi-tree-select-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) { + border-color: var(--semi-color-danger); +} +.semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) { + border-color: var(--semi-color-warning); +} +.semi-tree-select-borderless.semi-tree-select-error:focus-within { + border-color: var(--semi-color-danger); +} +.semi-tree-select-borderless.semi-tree-select-warning:focus-within { + border-color: var(--semi-color-warning); +} + +.semi-rtl .semi-tree-select, +.semi-portal-rtl .semi-tree-select { + direction: rtl; +} +.semi-rtl .semi-tree-select .semi-tagInput .semi-input, +.semi-portal-rtl .semi-tree-select .semi-tagInput .semi-input { + padding-right: 0; +} +.semi-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput, +.semi-portal-rtl .semi-tree-select-multiple-tagInput-notEmpty .semi-tagInput { + margin-left: 0; + margin-right: -4px; +} +.semi-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput, +.semi-portal-rtl .semi-tree-select-multiple-tagInput-empty .semi-tagInput { + margin-left: 0; + margin-right: 4px; +} +.semi-rtl .semi-tree-select-selection, +.semi-portal-rtl .semi-tree-select-selection { + padding-right: 12px; + padding-left: 0; +} +.semi-rtl .semi-tree-select-multiple .semi-tree-select-selection, +.semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection { + padding-left: 0; + padding-right: 4px; +} +.semi-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder, +.semi-portal-rtl .semi-tree-select-multiple .semi-tree-select-selection-placeholder { + padding-left: 0; + padding-right: 8px; +} +.semi-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, .semi-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection, +.semi-portal-rtl .semi-tree-select-prefix.semi-tree-select-with-suffix .semi-tree-select-selection, +.semi-portal-rtl .semi-tree-select-suffix.semi-tree-select-with-suffix .semi-tree-select-selection { + padding-right: auto; + padding-left: 0; +} +.semi-rtl .semi-tree-select-popover, +.semi-portal-rtl .semi-tree-select-popover { + direction: rtl; +} + +.semi-typography { + color: var(--semi-color-text-0); + 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; +} +.semi-typography.semi-typography-secondary { + color: var(--semi-color-text-1); +} +.semi-typography.semi-typography-tertiary { + color: var(--semi-color-text-2); +} +.semi-typography.semi-typography-quaternary { + color: var(--semi-color-text-3); +} +.semi-typography.semi-typography-warning { + color: var(--semi-color-warning); +} +.semi-typography.semi-typography-success { + color: var(--semi-color-success); +} +.semi-typography.semi-typography-danger { + color: var(--semi-color-danger); +} +.semi-typography.semi-typography-link { + color: var(--semi-color-link); + font-weight: 600; +} +.semi-typography.semi-typography-disabled { + color: var(--semi-color-disabled-text); + cursor: not-allowed; + user-select: none; +} +.semi-typography.semi-typography-disabled.semi-typography-link { + color: var(--semi-color-link); +} +.semi-typography-icon { + margin-right: 4px; + vertical-align: middle; + color: inherit; +} +.semi-typography-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; + font-weight: 400; +} +.semi-typography-small.semi-typography-paragraph { + font-weight: 400; +} +.semi-typography code { + border: 1px solid var(--semi-color-border); + border-radius: 2px; + color: var(--semi-color-text-2); + background-color: var(--semi-color-fill-1); + padding: 2px 4px; +} +.semi-typography mark { + background-color: var(--semi-color-primary-light-default); +} +.semi-typography u { + text-decoration: underline; + text-decoration-skip-ink: auto; +} +.semi-typography del { + text-decoration: line-through; +} +.semi-typography strong { + font-weight: 600; +} +.semi-typography a { + display: inline; + color: var(--semi-color-link); + cursor: pointer; + text-decoration: none; +} +.semi-typography a:visited { + color: var(--semi-color-link-visited); +} +.semi-typography a:hover { + color: var(--semi-color-link-hover); +} +.semi-typography a:active { + color: var(--semi-color-link-active); +} +.semi-typography a .semi-typography-link-underline:hover { + border-bottom: 1px solid var(--semi-color-link-hover); + margin-bottom: -1px; +} +.semi-typography a .semi-typography-link-underline:active { + border-bottom: 1px solid var(--semi-color-link-active); + margin-bottom: -1px; +} +.semi-typography-ellipsis-single-line { + overflow: hidden; +} +.semi-typography-ellipsis-multiple-line { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} +.semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text { + display: -webkit-inline-box; +} +.semi-typography-ellipsis-overflow-ellipsis { + display: block; + white-space: nowrap; + text-overflow: ellipsis; +} +.semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text { + display: inline-block; + max-width: 100%; + vertical-align: top; +} +.semi-typography-ellipsis-expand { + display: inline; + margin-left: 8px; +} +.semi-typography-action-copy { + display: inline-flex; + vertical-align: middle; + padding: 0; + margin-left: 4px; +} +.semi-typography a.semi-typography-action-copy-icon { + display: inline-flex; +} +.semi-typography-action-copied { + display: inline-flex; + padding: 0; + margin-left: 4px; + color: var(--semi-color-text-2); +} +.semi-typography-action-copied .semi-icon { + vertical-align: middle; + color: var(--semi-color-success); +} +.semi-typography-paragraph { + margin: 0; +} + +h1.semi-typography, +.semi-typography-h1.semi-typography { + 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; + font-weight: 600; + margin: 0; +} +h1.semi-typography.semi-typography-h1-weight-light, +.semi-typography-h1.semi-typography.semi-typography-h1-weight-light { + font-weight: 200; +} +h1.semi-typography.semi-typography-h1-weight-regular, +.semi-typography-h1.semi-typography.semi-typography-h1-weight-regular { + font-weight: 400; +} +h1.semi-typography.semi-typography-h1-weight-medium, +.semi-typography-h1.semi-typography.semi-typography-h1-weight-medium { + font-weight: 500; +} +h1.semi-typography.semi-typography-h1-weight-semibold, +.semi-typography-h1.semi-typography.semi-typography-h1-weight-semibold { + font-weight: 600; +} +h1.semi-typography.semi-typography-h1-weight-bold, +.semi-typography-h1.semi-typography.semi-typography-h1-weight-bold { + font-weight: 700; +} + +h2.semi-typography, +.semi-typography-h2.semi-typography { + font-size: 28px; + line-height: 40px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + margin: 0; +} +h2.semi-typography.semi-typography-h2-weight-light, +.semi-typography-h2.semi-typography.semi-typography-h2-weight-light { + font-weight: 200; +} +h2.semi-typography.semi-typography-h2-weight-regular, +.semi-typography-h2.semi-typography.semi-typography-h2-weight-regular { + font-weight: 400; +} +h2.semi-typography.semi-typography-h2-weight-medium, +.semi-typography-h2.semi-typography.semi-typography-h2-weight-medium { + font-weight: 500; +} +h2.semi-typography.semi-typography-h2-weight-semibold, +.semi-typography-h2.semi-typography.semi-typography-h2-weight-semibold { + font-weight: 600; +} +h2.semi-typography.semi-typography-h2-weight-bold, +.semi-typography-h2.semi-typography.semi-typography-h2-weight-bold { + font-weight: 700; +} + +h3.semi-typography, +.semi-typography-h3.semi-typography { + font-size: 24px; + line-height: 32px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + margin: 0; +} +h3.semi-typography.semi-typography-h3-weight-light, +.semi-typography-h3.semi-typography.semi-typography-h3-weight-light { + font-weight: 200; +} +h3.semi-typography.semi-typography-h3-weight-regular, +.semi-typography-h3.semi-typography.semi-typography-h3-weight-regular { + font-weight: 400; +} +h3.semi-typography.semi-typography-h3-weight-medium, +.semi-typography-h3.semi-typography.semi-typography-h3-weight-medium { + font-weight: 500; +} +h3.semi-typography.semi-typography-h3-weight-semibold, +.semi-typography-h3.semi-typography.semi-typography-h3-weight-semibold { + font-weight: 600; +} +h3.semi-typography.semi-typography-h3-weight-bold, +.semi-typography-h3.semi-typography.semi-typography-h3-weight-bold { + font-weight: 700; +} + +h4.semi-typography, +.semi-typography-h4.semi-typography { + 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; + font-weight: 600; + margin: 0; +} +h4.semi-typography.semi-typography-h4-weight-light, +.semi-typography-h4.semi-typography.semi-typography-h4-weight-light { + font-weight: 200; +} +h4.semi-typography.semi-typography-h4-weight-regular, +.semi-typography-h4.semi-typography.semi-typography-h4-weight-regular { + font-weight: 400; +} +h4.semi-typography.semi-typography-h4-weight-medium, +.semi-typography-h4.semi-typography.semi-typography-h4-weight-medium { + font-weight: 500; +} +h4.semi-typography.semi-typography-h4-weight-semibold, +.semi-typography-h4.semi-typography.semi-typography-h4-weight-semibold { + font-weight: 600; +} +h4.semi-typography.semi-typography-h4-weight-bold, +.semi-typography-h4.semi-typography.semi-typography-h4-weight-bold { + font-weight: 700; +} + +h5.semi-typography, +.semi-typography-h5.semi-typography { + 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; + font-weight: 600; + margin: 0; +} +h5.semi-typography.semi-typography-h5-weight-light, +.semi-typography-h5.semi-typography.semi-typography-h5-weight-light { + font-weight: 200; +} +h5.semi-typography.semi-typography-h5-weight-regular, +.semi-typography-h5.semi-typography.semi-typography-h5-weight-regular { + font-weight: 400; +} +h5.semi-typography.semi-typography-h5-weight-medium, +.semi-typography-h5.semi-typography.semi-typography-h5-weight-medium { + font-weight: 500; +} +h5.semi-typography.semi-typography-h5-weight-semibold, +.semi-typography-h5.semi-typography.semi-typography-h5-weight-semibold { + font-weight: 600; +} +h5.semi-typography.semi-typography-h5-weight-bold, +.semi-typography-h5.semi-typography.semi-typography-h5-weight-bold { + font-weight: 700; +} + +h6.semi-typography, +.semi-typography-h6.semi-typography { + font-size: 16px; + line-height: 22px; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 600; + margin: 0; +} +h6.semi-typography.semi-typography-h6-weight-light, +.semi-typography-h6.semi-typography.semi-typography-h6-weight-light { + font-weight: 200; +} +h6.semi-typography.semi-typography-h6-weight-regular, +.semi-typography-h6.semi-typography.semi-typography-h6-weight-regular { + font-weight: 400; +} +h6.semi-typography.semi-typography-h6-weight-medium, +.semi-typography-h6.semi-typography.semi-typography-h6-weight-medium { + font-weight: 500; +} +h6.semi-typography.semi-typography-h6-weight-semibold, +.semi-typography-h6.semi-typography.semi-typography-h6-weight-semibold { + font-weight: 600; +} +h6.semi-typography.semi-typography-h6-weight-bold, +.semi-typography-h6.semi-typography.semi-typography-h6-weight-bold { + font-weight: 700; +} + +p.semi-typography-extended, +.semi-typography-paragraph.semi-typography-extended { + line-height: 24px; + font-weight: 400; +} + +.semi-rtl .semi-typography, +.semi-portal-rtl .semi-typography { + direction: rtl; +} +.semi-rtl .semi-typography-link a, +.semi-rtl .semi-typography a, +.semi-portal-rtl .semi-typography-link a, +.semi-portal-rtl .semi-typography a { + display: inline-block; +} +.semi-rtl .semi-typography-icon, +.semi-portal-rtl .semi-typography-icon { + margin-right: auto; + margin-left: 4px; +} +.semi-rtl .semi-typography-ellipsis-expand, +.semi-portal-rtl .semi-typography-ellipsis-expand { + margin-left: auto; +} +.semi-rtl .semi-typography-action-copy, +.semi-portal-rtl .semi-typography-action-copy { + margin-left: auto; + margin-right: 4px; +} +.semi-rtl .semi-typography-action-copied, +.semi-portal-rtl .semi-typography-action-copied { + margin-left: auto; + margin-right: 4px; +} + +.semi-upload { + display: flex; + flex-wrap: wrap; +} +.semi-upload-tooltip-children-wrapper { + display: inline-flex; + width: fit-content; + height: fit-content; + vertical-align: middle; +} +.semi-upload-disabled { + cursor: not-allowed; +} +.semi-upload-disabled .semi-upload-file-card { + cursor: not-allowed; +} +.semi-upload-disabled .semi-upload-file-card-close { + cursor: not-allowed; +} +.semi-upload-disabled .semi-upload-drag-area { + border: none; + cursor: not-allowed; +} +.semi-upload-disabled .semi-upload-drag-area:hover { + background-color: var(--semi-color-tertiary-light-default); +} +.semi-upload-disabled .semi-upload-drag-area-main-text, .semi-upload-disabled .semi-upload-drag-area-sub-text, .semi-upload-disabled .semi-upload-drag-area-icon { + cursor: not-allowed; + color: var(--semi-color-disabled-text); +} +.semi-upload-hidden-input { + display: none; +} +.semi-upload-hidden-input-replace { + display: none; +} +.semi-upload-add { + display: flex; + align-items: center; +} +.semi-upload[x-prompt-pos=right] .semi-upload-add { + display: inline-flex; +} +.semi-upload[x-prompt-pos=right] .semi-upload-prompt { + display: inline-flex; +} +.semi-upload[x-prompt-pos=bottom] .semi-upload-add { + display: flex; +} +.semi-upload[x-prompt-pos=bottom] .semi-upload-prompt { + display: flex; + flex-basis: 100%; +} +.semi-upload[x-prompt-pos=bottom] .semi-upload-file-list { + flex-basis: 100%; +} +.semi-upload[x-prompt-pos=left] .semi-upload-add { + display: inline-flex; +} +.semi-upload[x-prompt-pos=left] .semi-upload-prompt { + display: inline-flex; + order: -1; +} +.semi-upload[x-prompt-pos=left] .semi-upload-file-list { + order: 2; +} +.semi-upload-file-list { + flex-basis: 100%; + flex-shrink: 0; + display: block; + margin-top: 8px; + margin-bottom: 8px; +} +.semi-upload-file-list-main { + display: flex; + flex-wrap: wrap; + flex-shrink: 0; + gap: 8px; + margin-bottom: 8px; +} +.semi-upload-file-list-main p { + display: flex; + align-items: center; +} +.semi-upload-file-list-title { + 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; + color: var(--semi-color-text-2); + margin-bottom: 4px; +} +.semi-upload-file-list-title-choosen { + margin-right: 8px; +} +.semi-upload-file-list-title-clear { + cursor: pointer; + color: var(--semi-color-primary); +} +.semi-upload-file-card { + border-radius: var(--semi-border-radius-medium); + display: inline-flex; + align-items: center; + justify-content: space-between; + height: 52px; + width: 250px; + background-color: var(--semi-color-fill-0); + cursor: pointer; +} +.semi-upload-file-card:hover { + background-color: var(--semi-color-fill-1); +} +.semi-upload-file-card a { + text-decoration: none; +} +.semi-upload-file-card-preview { + height: 36px; + width: 36px; + color: var(--semi-color-text-2); + margin: 8px; + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--semi-border-radius-small); + flex-shrink: 0; +} +.semi-upload-file-card-preview img { + width: 36px; + height: 36px; + object-fit: cover; +} +.semi-upload-file-card-preview-placeholder { + background-color: rgba(var(--semi-grey-3), 1); + color: rgba(var(--semi-white), 1); +} +.semi-upload-file-card-show-pointer { + cursor: pointer; +} +.semi-upload-file-card-info { + display: flex; + align-items: center; +} +.semi-upload-file-card-info-main { + display: flex; + flex-wrap: wrap; + flex: 1; +} +.semi-upload-file-card-info-main-text { + display: flex; + align-items: center; + flex-basis: 100%; +} +.semi-upload-file-card-info-main-control { + display: flex; +} +.semi-upload-file-card-info-name { + width: 0; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + 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; + color: var(--semi-color-text-0); +} +.semi-upload-file-card-info-size { + 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; + font-weight: 400; + margin-left: 8px; + color: var(--semi-color-text-2); + margin-top: 1px; +} +.semi-upload-file-card-info-replace { + display: inline-flex; + margin-left: 8px; + color: var(--semi-color-text-2); +} +.semi-upload-file-card-info-validate-message { + 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; + display: flex; + align-items: center; + color: var(--semi-color-text-0); +} +.semi-upload-file-card-info-retry { + 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; + color: var(--semi-color-primary); + cursor: pointer; + margin-left: 8px; +} +.semi-upload-file-card-info .semi-progress { + flex-basis: 100%; + margin-top: 4px; +} +.semi-upload-file-card-close { + margin-left: 8px; + margin-right: 8px; + flex-shrink: 0; +} +.semi-upload-file-card-replace { + margin-left: 8px; + width: 24px; + flex-shrink: 0; +} +.semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error.semi-icon { + font-size: 11px; + margin-right: 2px; +} +.semi-upload-file-card-icon-error { + position: relative; + top: -1px; +} +.semi-upload-file-card-icon-loading { + line-height: 0; +} +.semi-upload-file-card-icon-loading .semi-spin-wrapper svg { + height: 11px; + width: 11px; +} +.semi-upload-file-card-fail { + background-color: var(--semi-color-danger-light-default); +} +.semi-upload-file-card-fail:hover { + background-color: var(--semi-color-danger-light-hover); +} +.semi-upload-file-card-fail .semi-upload-file-card-info-validate-message { + color: var(--semi-color-danger); +} +.semi-upload-picture { + display: flex; +} +.semi-upload-picture[x-prompt-pos=bottom] { + flex-direction: column; +} +.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt { + order: 1; +} +.semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt { + order: 1; +} +.semi-upload-picture-add { + background-color: var(--semi-color-fill-0); + height: 96px; + width: 96px; + box-sizing: border-box; + display: inline-flex; + justify-content: center; + align-items: center; + border: 2px dashed var(--semi-color-border); + color: var(--semi-color-tertiary); + border-radius: var(--semi-border-radius-small); + cursor: pointer; +} +.semi-upload-picture-add:hover { + background-color: var(--semi-color-fill-1); +} +.semi-upload-picture-add:active { + background-color: var(--semi-color-fill-2); +} +.semi-upload-picture-add-disabled { + cursor: not-allowed; +} +.semi-upload-picture-add-disabled:hover { + background-color: var(--semi-color-fill-0); +} +.semi-upload-picture-add-disabled:active { + background-color: var(--semi-color-fill-0); +} +.semi-upload-picture-file-list { + flex-basis: inherit; + margin-top: 0; + margin-bottom: 0; +} +.semi-upload-picture-file-card { + display: flex; + align-items: center; + justify-content: center; + height: 96px; + width: 96px; + border-radius: var(--semi-border-radius-small); + box-sizing: border-box; + position: relative; + overflow: hidden; +} +.semi-upload-picture-file-card img { + height: 96px; + width: 96px; + object-fit: cover; + border-radius: var(--semi-border-radius-small); +} +.semi-upload-picture-file-card-custom-thumbnail .semi-image img { + width: inherit; + height: inherit; +} +.semi-upload-picture-file-card-close { + visibility: hidden; + display: inline-flex; + position: absolute; + top: 8px; + right: 8px; + border-radius: var(--semi-border-radius-circle); + cursor: pointer; + transition: all 0s; +} +.semi-upload-picture-file-card-icon-close { + font-size: 16px; + color: var(--semi-color-white); +} +.semi-upload-picture-file-card::before { + visibility: hidden; + background-color: var(--semi-color-overlay-bg); + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} +.semi-upload-picture-file-card-retry { + visibility: hidden; + background-color: var(--semi-color-white); + width: 24px; + height: 24px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: var(--semi-color-primary); + border-radius: var(--semi-border-radius-circle); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.semi-upload-picture-file-card-icon-retry { + transform: scale(-1, 1); + font-size: 13px; +} +.semi-upload-picture-file-card-replace { + visibility: hidden; + display: inline-flex; + position: absolute; + cursor: pointer; + top: 50%; + left: 50%; + color: var(--semi-color-white); + transform: translate3D(-50%, -50%, 0); +} +.semi-upload-picture-file-card-preview { + visibility: hidden; + display: inline-flex; + position: absolute; + cursor: pointer; + top: 50%; + left: 50%; + transform: translate3D(-50%, -50%, 0); +} +.semi-upload-picture-file-card-preview-fallback { + background-color: var(--semi-color-fill-0); + border: 2px var(--semi-color-border); + color: var(--semi-color-tertiary); + border-radius: var(--semi-border-radius-small); +} +.semi-upload-picture-file-card-pic-info { + display: inline-flex; + box-sizing: border-box; + justify-content: space-between; + align-items: center; + position: absolute; + width: 100%; + height: 24px; + padding: 0 10px; + bottom: 0; + left: 0; + color: var(--semi-color-white); + font-size: 12px; + font-weight: 600; + background: linear-gradient(0deg, rgba(22, 22, 26, 0.3) 0%, rgba(22, 22, 26, 0) 77.08%); +} +.semi-upload-picture-file-card-icon-loading, .semi-upload-picture-file-card-icon-error { + position: absolute; + bottom: 6px; + right: 6px; + color: var(--semi-color-danger); +} +.semi-upload-picture-file-card-icon-loading { + font-size: 14px; +} +.semi-upload-picture-file-card-show-pointer { + cursor: pointer; +} +.semi-upload-picture-file-card-error { + border: 1px solid var(--semi-color-danger); + outline: 1px solid var(--semi-color-danger); +} +.semi-upload-picture-file-card:hover::before { + visibility: visible; +} +.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close { + visibility: visible; +} +.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace { + visibility: visible; +} +.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry { + visibility: visible; +} +.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview { + visibility: visible; +} +.semi-upload-picture-file-card-uploading::before { + visibility: visible; +} +.semi-upload-picture-file-card .semi-progress-circle { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.semi-upload-drag-area { + border-radius: var(--semi-border-radius-small); + border: 2px dashed var(--semi-color-border); + width: 100%; + padding: 12px; + background-color: var(--semi-color-tertiary-light-default); + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + cursor: pointer; +} +.semi-upload-drag-area:hover { + background-color: var(--semi-color-primary-light-default); + border-color: var(--semi-color-primary); +} +.semi-upload-drag-area-custom { + border: none; + padding: 0; + background-color: inherit; +} +.semi-upload-drag-area-custom:hover { + background-color: inherit; +} +.semi-upload-drag-area-legal { + background-color: var(--semi-color-primary-light-default); + border-color: var(--semi-color-primary); +} +.semi-upload-drag-area-legal .semi-upload-drag-area-sub-text { + display: none; +} +.semi-upload-drag-area-icon { + color: var(--semi-color-primary); +} +.semi-upload-drag-area-text { + text-align: center; +} +.semi-upload-drag-area-main-text { + cursor: pointer; + 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; + margin-bottom: 4px; + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-main-text:hover { + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-main-text:active { + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-sub-text { + cursor: pointer; + 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; + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-sub-text:hover { + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-sub-text:active { + color: var(--semi-color-text-0); +} +.semi-upload-drag-area-tips { + 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; + font-weight: 600; +} +.semi-upload-drag-area-tips-legal { + color: var(--semi-color-primary); +} +.semi-upload-validate-message { + flex-basis: 100%; + flex-shrink: 0; + display: block; + color: var(--semi-color-danger); +} + +.semi-rtl .semi-upload, +.semi-portal-rtl .semi-upload { + direction: rtl; +} +.semi-rtl .semi-upload-file-list-title-choosen, +.semi-portal-rtl .semi-upload-file-list-title-choosen { + margin-right: 0; + margin-left: 8px; +} +.semi-rtl .semi-upload-file-list-title-choosen, .semi-rtl .semi-upload-file-list-title-clear, +.semi-portal-rtl .semi-upload-file-list-title-choosen, +.semi-portal-rtl .semi-upload-file-list-title-clear { + display: inline-block; +} +.semi-rtl .semi-upload-file-card-info-size, +.semi-portal-rtl .semi-upload-file-card-info-size { + margin-left: 0; + margin-right: 8px; +} +.semi-rtl .semi-upload-file-card-info-retry, +.semi-portal-rtl .semi-upload-file-card-info-retry { + margin-left: 0; + margin-right: 8px; +} +.semi-rtl .semi-upload-file-card-icon-loading, .semi-rtl .semi-upload-file-card-icon-error, +.semi-portal-rtl .semi-upload-file-card-icon-loading, +.semi-portal-rtl .semi-upload-file-card-icon-error { + margin-right: 0; + margin-left: 2px; +} +.semi-rtl .semi-upload-picture-file-card-close, +.semi-portal-rtl .semi-upload-picture-file-card-close { + right: auto; + left: 8px; +} +.semi-rtl .semi-upload-picture-file-card .semi-progress-circle, +.semi-portal-rtl .semi-upload-picture-file-card .semi-progress-circle { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} +.semi-rtl .semi-upload-picture-file-card-retry, +.semi-portal-rtl .semi-upload-picture-file-card-retry { + left: auto; + right: 50%; + transform: translate(50%, -50%); +} +.semi-rtl .semi-upload-picture-file-card-icon-loading, .semi-rtl .semi-upload-picture-file-card-icon-error, +.semi-portal-rtl .semi-upload-picture-file-card-icon-loading, +.semi-portal-rtl .semi-upload-picture-file-card-icon-error { + right: 0; + left: 6px; +} + +.semi-userGuide-spotlight { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; +} +.semi-userGuide-spotlight-transparent-rect { + pointer-events: auto; +} +.semi-userGuide-spotlight-rect { + transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); +} +.semi-userGuide-popover { + max-width: fit-content; + width: 400px; +} +.semi-userGuide-popup-content { + color: var(--semi-color-text-0); +} +.semi-userGuide-popup-content-primary { + color: var(--semi-color-tertiary-light-default); +} +.semi-userGuide-popup-content-cover img { + display: block; + height: 200px; + width: 100%; + border-radius: var(--semi-border-radius-medium) var(--semi-border-radius-medium) 0 0; +} +.semi-userGuide-popup-content-body { + padding: 24px; +} +.semi-userGuide-popup-content-title { + font-size: 18px; + font-weight: 600; + line-height: 24px; + margin-bottom: 8px; +} +.semi-userGuide-popup-content-description { + font-size: 14px; + line-height: 20px; + margin-bottom: 48px; +} +.semi-userGuide-popup-content-footer { + display: flex; + justify-content: space-between; + align-items: center; +} +.semi-userGuide-popup-content-buttons { + display: flex; + gap: 12px; + margin-left: 120px; +} +.semi-userGuide-popup-content-indicator { + font-size: 14px; + line-height: 20px; +} +.semi-userGuide-modal .semi-modal-small { + width: fit-content; +} +.semi-userGuide-modal .semi-modal-content { + padding: 0; + width: 600px; + max-width: fit-content; +} +.semi-userGuide-modal-cover { + height: 300px; +} +.semi-userGuide-modal-indicator { + height: 30px; + display: flex; + justify-content: center; + align-items: center; + column-gap: 8px; +} +.semi-userGuide-modal-indicator-item { + width: 6px; + height: 6px; + border-radius: var(--semi-border-radius-large); + background-color: var(--semi-color-primary-light-active); +} +.semi-userGuide-modal-indicator-item-active { + background: var(--semi-color-primary); +} +.semi-userGuide-modal-body { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 24px 48px; +} +.semi-userGuide-modal-body-title { + font-size: 18px; + font-weight: 600; + line-height: 24px; + margin-bottom: 8px; +} +.semi-userGuide-modal-body-description { + font-size: 14px; + line-height: 20px; +} +.semi-userGuide-modal-footer { + display: flex; + justify-content: center; + align-items: center; + padding: 24px; + column-gap: 12px; +} + +.semi-videoPlayer { + position: relative; + display: inline-block; + width: 100%; + height: 100%; +} +.semi-videoPlayer ::-webkit-media-controls { + display: none; +} +.semi-videoPlayer-wrapper { + width: 100%; + height: 100%; + position: relative; + line-height: 0; +} +.semi-videoPlayer-wrapper video { + width: 100%; + height: 100%; + object-fit: contain; +} +.semi-videoPlayer-wrapper-dark { + background-color: rgba(var(--semi-grey-8), 1); + color: var(--semi-color-bg-0); +} +.semi-videoPlayer-wrapper-light { + background-color: var(--semi-color-disabled-bg); + color: rgba(var(--semi-grey-8), 1); +} +.semi-videoPlayer-pause { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + pointer-events: none; +} +.semi-videoPlayer-pause svg { + font-size: 88px; + color: var(--semi-color-text-1); + pointer-events: none; +} +.semi-videoPlayer-error { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-weight: 600; + font-size: 14px; +} +.semi-videoPlayer-error-svg { + margin-bottom: 12px; +} +.semi-videoPlayer-error-dark { + background-color: rgba(var(--semi-grey-8), 1); + color: var(--semi-color-bg-0); +} +.semi-videoPlayer-error-dark path { + fill: var(--semi-color-bg-0); +} +.semi-videoPlayer-error-light { + background-color: var(--semi-color-disabled-bg); + color: rgba(var(--semi-grey-8), 1); +} +.semi-videoPlayer-error-light path { + fill: rgba(var(--semi-grey-8), 1); +} +.semi-videoPlayer-poster { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; +} +.semi-videoPlayer-poster-hide { + opacity: 0; +} +.semi-videoPlayer-notification { + position: absolute; + bottom: 78px; + left: 8px; + text-align: center; + background-color: var(--semi-color-overlay-bg); + color: var(--semi-color-default); + padding: 8px 12px; + line-height: 20px; + border-radius: 3px; + font-size: 14px; +} +.semi-videoPlayer-mirror video { + transform: rotateX(0deg) rotateY(180deg); +} +.semi-videoPlayer-controls { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: fit-content; + opacity: 1; + transition: opacity 500ms ease-in-out; + z-index: 1; +} +.semi-videoPlayer-controls-hide { + opacity: 0; +} +.semi-videoPlayer-controls-menu { + display: flex; + justify-content: space-between; + align-items: center; + box-sizing: border-box; + height: 56px; + background-color: rgba(28, 31, 35, 0.8); + padding: 12px 16px; +} +.semi-videoPlayer-controls-menu-left, .semi-videoPlayer-controls-menu-right { + display: flex; + align-items: center; +} +.semi-videoPlayer-controls-menu-item { + margin-right: 8px; +} +.semi-videoPlayer-controls-menu-button svg { + color: #fff; +} +.semi-videoPlayer-controls-time { + color: #fff; + font-size: 14px; + margin-right: 8px; + padding: 0 8px; + font-variant-numeric: tabular-nums; +} +.semi-videoPlayer-controls-popover { + background-color: transparent; +} +.semi-videoPlayer-controls-volume { + box-sizing: border-box; + width: 40px; + height: 160px; + background-color: var(--semi-color-overlay-bg); + color: rgba(255, 255, 255, 0.7); + border-radius: 4px; + padding: 0px 4px; + line-height: 16px; + font-size: 12px; + user-select: none; +} +.semi-videoPlayer-controls-volume-title { + padding: 10px 0px; + text-align: center; +} +.semi-videoPlayer-controls-popup { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 24px; + background-color: var(--semi-color-overlay-bg); + color: #fff; + font-weight: 600; + font-size: 12px; + line-height: 16px; + border-radius: 3px; + cursor: pointer; +} +.semi-videoPlayer-controls-popup-menu { + width: 48px; + background-color: var(--semi-color-overlay-bg); + border-radius: 4px; +} +.semi-videoPlayer-controls-popup-menu-item { + display: flex; + justify-content: center; + align-items: center; + padding: 0px 8px; + height: 32px; + color: #fff; + font-size: 12px; +} +.semi-videoPlayer-controls-popup-menu-item:hover { + background-color: rgb(67, 68, 74) !important; +} +.semi-videoPlayer-controls-popup-menu .semi-dropdown-item-active { + color: var(--semi-color-primary); + font-weight: 600; + cursor: pointer; +} +.semi-videoPlayer-progress { + position: relative; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + margin: 0px 8px; +} +.semi-videoPlayer-progress-markers { + position: absolute; + width: 100%; + height: 100%; +} +.semi-videoPlayer-progress-tooltip { + top: 6px; +} +.semi-videoPlayer-progress-tooltip-content { + display: flex; + justify-content: center; + align-items: center; +} +.semi-videoPlayer-progress-slider { + position: absolute; + width: 100%; + height: 100%; + left: 0; + bottom: 0; + border-radius: 999px; +} +.semi-videoPlayer-progress-slider-active .semi-videoPlayer-progress-slider-list, +.semi-videoPlayer-progress-slider-active .semi-videoPlayer-progress-slider-played, +.semi-videoPlayer-progress-slider-active .semi-videoPlayer-progress-slider-buffered, .semi-videoPlayer-progress-slider:hover .semi-videoPlayer-progress-slider-list, +.semi-videoPlayer-progress-slider:hover .semi-videoPlayer-progress-slider-played, +.semi-videoPlayer-progress-slider:hover .semi-videoPlayer-progress-slider-buffered { + height: 10px; + transition: transform 300ms; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-videoPlayer-progress-slider-list { + position: absolute; + bottom: 0; + left: 0; + background-color: rgba(var(--semi-grey-5), 1); + height: 4px; + width: calc(100% - 2px); + margin-right: 2px; + border-radius: 999px; + transition: transform 300ms; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-videoPlayer-progress-slider-played { + position: absolute; + bottom: 0; + left: 0; + background-color: var(--semi-color-primary); + height: 4px; + border-radius: 999px; + transition: transform 300ms; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-videoPlayer-progress-slider-buffered { + position: absolute; + bottom: 0; + left: 0; + background-color: rgba(var(--semi-grey-3), 1); + height: 4px; + border-radius: 999px; + transition: transform 300ms; + transition-timing-function: cubic-bezier(0.62, 0.05, 0.36, 0.95); +} +.semi-videoPlayer-progress-handle { + box-sizing: border-box; + position: absolute; + width: 16px; + height: 16px; + background-color: #fff; + border: 1px solid var(--semi-color-primary); + box-shadow: 0px 0px 4px 0px var(--semi-color-shadow); + border-radius: 50%; + top: 15px; +} + +.semi-icon { + display: inline-block; + font-style: normal; + line-height: 0; + text-align: center; + text-transform: none; + text-rendering: optimizeLegibility; + fill: currentColor; +} + +.semi-icon-extra-small { + font-size: 8px; +} + +.semi-icon-small { + font-size: 12px; +} + +.semi-icon-default { + font-size: 16px; +} + +.semi-icon-large { + font-size: 20px; +} + +.semi-icon-extra-large { + font-size: 24px; +} + +.semi-icon-spinning { + animation: 0.6s linear infinite semi-icon-animation-rotate; + animation-fill-mode: forwards; +} + +@keyframes semi-icon-animation-rotate { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +@keyframes semi-animation-rotate { + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } +} +.semi-button.semi-button-with-icon { + display: inline-flex; + align-items: center; +} +.semi-button.semi-button-with-icon .semi-button-content { + display: flex; + align-items: center; + justify-content: center; +} +.semi-button.semi-button-loading { + pointer-events: none; + cursor: not-allowed; +} +.semi-button.semi-button-loading .semi-button-content > svg, .semi-button.semi-button-loading .semi-button-content-loading-icon { + width: 16px; + height: 16px; + animation: 600ms linear infinite semi-animation-rotate; + animation-fill-mode: forwards; +} +.semi-button.semi-button-with-icon-only { + padding-left: 8px; + padding-right: 8px; + padding-top: 8px; + padding-bottom: 8px; + height: 32px; + width: 32px; + justify-content: center; + align-items: center; +} +.semi-button.semi-button-with-icon-only.semi-button-size-small { + padding-left: 4px; + padding-right: 4px; + padding-top: 4px; + padding-bottom: 4px; + height: 24px; + width: 24px; +} +.semi-button.semi-button-with-icon-only.semi-button-size-large { + padding-left: 12px; + padding-right: 12px; + padding-top: 12px; + padding-bottom: 12px; + height: 40px; + width: 40px; +} +.semi-button-content-left { + margin-right: 8px; + display: flex; + align-items: center; +} +.semi-button-content-right { + margin-left: 8px; + display: flex; + align-items: center; +} + +.semi-rtl .semi-button, +.semi-portal-rtl .semi-button { + direction: rtl; + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-size-small, +.semi-portal-rtl .semi-button-size-small { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-size-large, +.semi-portal-rtl .semi-button-size-large { + padding-left: 16px; + padding-right: 16px; +} +.semi-rtl .semi-button-group, +.semi-portal-rtl .semi-button-group { + direction: rtl; +} +.semi-rtl .semi-button-group > .semi-button, +.semi-portal-rtl .semi-button-group > .semi-button { + padding-left: 0; + padding-right: 0; +} +.semi-rtl .semi-button-group > .semi-button .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button-size-large .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button-size-large .semi-button-content { + padding-left: 16px; + padding-right: 16px; +} +.semi-rtl .semi-button-group > .semi-button-size-small .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button-size-small .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only { + padding-left: 0; + padding-right: 0; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only .semi-button-content { + padding-left: 8px; + padding-right: 8px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-small .semi-button-content { + padding-left: 4px; + padding-right: 4px; +} +.semi-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button.semi-button-with-icon-only.semi-button-size-large .semi-button-content { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-group > .semi-button:first-child, +.semi-portal-rtl .semi-button-group > .semi-button:first-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: var(--semi-border-radius-small); + border-bottom-right-radius: var(--semi-border-radius-small); +} +.semi-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content, +.semi-portal-rtl .semi-button-group > .semi-button:not(:last-child) .semi-button-content { + border-left: 1px var(--semi-color-border) solid; + border-right: 0; +} +.semi-rtl .semi-button-group > .semi-button:last-child, +.semi-portal-rtl .semi-button-group > .semi-button:last-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: var(--semi-border-radius-small); + border-bottom-left-radius: var(--semi-border-radius-small); +} +.semi-rtl .semi-button.semi-button-with-icon-only, +.semi-portal-rtl .semi-button.semi-button-with-icon-only { + padding-left: 8px; + padding-right: 8px; +} +.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small, +.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-small { + padding-left: 4px; + padding-right: 4px; +} +.semi-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large, +.semi-portal-rtl .semi-button.semi-button-with-icon-only.semi-button-size-large { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-button-content-left, +.semi-portal-rtl .semi-button-content-left { + margin-left: 8px; + margin-right: 0; +} +.semi-rtl .semi-button-content-right, +.semi-portal-rtl .semi-button-content-right { + margin-right: 8px; + margin-left: 0; +} + +.semi-input-textarea-wrapper { + box-sizing: border-box; + display: inline-block; + position: relative; + width: 100%; + border: 1px transparent solid; + border-radius: var(--semi-border-radius-small); + vertical-align: bottom; + background-color: var(--semi-color-fill-0); + transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none); +} +.semi-input-textarea-wrapper:hover { + background-color: var(--semi-color-fill-1); +} +.semi-input-textarea-wrapper-focus { + background-color: var(--semi-color-fill-0); + border: 1px var(--semi-color-focus-border) solid; +} +.semi-input-textarea-wrapper-focus:hover, .semi-input-textarea-wrapper-focus:active { + background-color: var(--semi-color-fill-0); +} +.semi-input-textarea-wrapper:active { + background-color: var(--semi-color-fill-2); +} +.semi-input-textarea-wrapper .semi-input-clearbtn { + position: absolute; + top: 0; + min-width: 24px; + color: var(--semi-color-text-2); + right: 4px; + height: 32px; +} +.semi-input-textarea-wrapper .semi-input-clearbtn > svg { + pointer-events: none; +} +.semi-input-textarea-wrapper .semi-input-clearbtn:hover { + cursor: pointer; +} +.semi-input-textarea-wrapper .semi-input-clearbtn:hover .semi-icon { + color: var(--semi-color-primary-hover); +} +.semi-input-textarea-wrapper .semi-input-clearbtn-hidden { + visibility: hidden; +} +.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly { + cursor: not-allowed; + color: var(--semi-color-disabled-text); + background-color: var(--semi-color-disabled-fill); +} +.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover { + background-color: var(--semi-color-disabled-fill); +} +.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder { + color: var(--semi-color-disabled-text); +} +.semi-input-textarea-wrapper-readonly { + cursor: text; +} +.semi-input-textarea-wrapper-error { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger-light-default); +} +.semi-input-textarea-wrapper-error:hover { + background-color: var(--semi-color-danger-light-hover); + border-color: var(--semi-color-danger-light-hover); +} +.semi-input-textarea-wrapper-error.semi-input-textarea-wrapper-focus { + background-color: var(--semi-color-danger-light-default); + border-color: var(--semi-color-danger); +} +.semi-input-textarea-wrapper-error:active { + background-color: var(--semi-color-danger-light-active); + border-color: var(--semi-color-danger); +} +.semi-input-textarea-wrapper-warning { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning-light-default); +} +.semi-input-textarea-wrapper-warning:hover { + background-color: var(--semi-color-warning-light-hover); + border-color: var(--semi-color-warning-light-hover); +} +.semi-input-textarea-wrapper-warning.semi-input-textarea-wrapper-focus { + background-color: var(--semi-color-warning-light-default); + border-color: var(--semi-color-warning); +} +.semi-input-textarea-wrapper-warning:active { + background-color: var(--semi-color-warning-light-active); + border-color: var(--semi-color-warning); +} + +.semi-input-textarea { + position: relative; + resize: none; + padding: 5px 12px; + box-shadow: none; + 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; + background-color: transparent; + border: 0 solid transparent; + vertical-align: bottom; + width: 100%; + outline: none; + cursor: text; + box-sizing: border-box; + color: var(--semi-color-text-0); +} +.semi-input-textarea:hover { + border-color: transparent; +} +.semi-input-textarea::placeholder { + color: var(--semi-color-text-2); +} +.semi-input-textarea-showClear { + padding-right: 36px; +} +.semi-input-textarea-disabled, .semi-input-textarea-readonly { + cursor: not-allowed; + color: var(--semi-color-disabled-text); + background-color: transparent; +} +.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover { + background-color: transparent; +} +.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder { + color: var(--semi-color-disabled-text); +} +.semi-input-textarea-readonly { + cursor: text; +} +.semi-input-textarea-autosize { + overflow: hidden; +} +.semi-input-textarea-counter { + 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; + display: flex; + flex-direction: column; + justify-content: center; + padding: 3px 12px 5px 12px; + min-height: 24px; + text-align: right; + color: var(--semi-color-text-2); +} +.semi-input-textarea-counter-exceed { + color: var(--semi-color-danger); +} + +.semi-input-textarea-borderless:not(:focus-within):not(:hover) { + background-color: transparent; + border-color: transparent; +} +.semi-input-textarea-borderless:focus-within:not(:active) { + background-color: transparent; +} +.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) { + border-color: var(--semi-color-danger); +} +.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) { + border-color: var(--semi-color-warning); +} +.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter { + color: var(--semi-color-danger); +} +.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter { + color: var(--semi-color-warning); +} + +.semi-input-textarea-wrapper-withLineNumber { + display: flex; + padding: 0; + align-items: flex-start; +} +.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber { + flex-shrink: 0; + padding: 5px 12px; + background-color: var(--semi-color-fill-1); + border-right: 1px solid var(--semi-color-border); + color: var(--semi-color-text-2); + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: inherit; + line-height: 1.5; + text-align: right; + user-select: none; + min-width: 36px; + border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small); + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; + -ms-overflow-style: none; +} +.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber::-webkit-scrollbar { + display: none; +} +.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-content { + display: flex; + flex: 1; + min-width: 0; +} +.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea-lineNumber-item { + display: flex; + align-items: flex-start; + justify-content: flex-end; + box-sizing: border-box; +} +.semi-input-textarea-wrapper-withLineNumber .semi-input-textarea { + border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0; + line-height: 1.5; + flex: 1; +} + +.semi-rtl .semi-input-wrapper, +.semi-portal-rtl .semi-input-wrapper { + direction: rtl; +} +.semi-rtl .semi-input-wrapper__with-prefix .semi-input, +.semi-portal-rtl .semi-input-wrapper__with-prefix .semi-input { + padding-left: auto; + padding-right: 0; +} +.semi-rtl .semi-input-wrapper__with-suffix .semi-input, +.semi-portal-rtl .semi-input-wrapper__with-suffix .semi-input { + padding-right: auto; + padding-left: 0; +} +.semi-rtl .semi-input, +.semi-portal-rtl .semi-input { + padding-left: 12px; + padding-right: 12px; +} +.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-text, +.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-text { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-portal-rtl .semi-input-clearbtn + .semi-rtl .semi-input-suffix + .semi-input-suffix-icon, +.semi-portal-rtl .semi-input-clearbtn + .semi-portal-rtl .semi-input-suffix + .semi-input-suffix-icon { + margin-left: auto; + margin-right: 0; +} +.semi-rtl .semi-input-append, +.semi-portal-rtl .semi-input-append { + border-left: 0; + border-right: 1px transparent solid; +} +.semi-rtl .semi-input-prepend, +.semi-portal-rtl .semi-input-prepend { + border-right: 0; + border-left: 1px transparent solid; +} +.semi-rtl .semi-input-group .semi-select:not(:last-child)::after, +.semi-rtl .semi-input-group .semi-cascader:not(:last-child)::after, +.semi-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, .semi-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-select:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-cascader:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-tree-select:not(:last-child)::after, +.semi-portal-rtl .semi-input-group > .semi-input-wrapper:not(:last-child)::after { + right: auto; + left: -1px; +} +.semi-rtl .semi-input-group .semi-input-number:not(:last-child)::after, +.semi-portal-rtl .semi-input-group .semi-input-number:not(:last-child)::after { + right: auto; + left: -1px; +} +.semi-rtl .semi-input-textarea-wrapper, +.semi-portal-rtl .semi-input-textarea-wrapper { + direction: rtl; +} +.semi-rtl .semi-input-textarea-counter, +.semi-portal-rtl .semi-input-textarea-counter { + text-align: left; +} +.semi-rtl .semi-input-textarea-showClear, +.semi-portal-rtl .semi-input-textarea-showClear { + padding-right: 0; + padding-left: 36px; +} \ No newline at end of file diff --git a/web/vite.config.js b/web/vite.config.js new file mode 100644 index 0000000..eca044a --- /dev/null +++ b/web/vite.config.js @@ -0,0 +1,81 @@ +import react from '@vitejs/plugin-react'; +import { defineConfig, transformWithEsbuild } from 'vite'; +import pkg from '@douyinfe/vite-plugin-semi'; +import path from 'path'; + +const { vitePluginSemi } = pkg; + +export default defineConfig({ + resolve: { + alias: { + '@': path.resolve(__dirname, './src'), + }, + }, + plugins: [ + { + name: 'treat-js-files-as-jsx', + async transform(code, id) { + if (!/src\/.*\.js$/.test(id)) { + return null; + } + return transformWithEsbuild(code, id, { + loader: 'jsx', + jsx: 'automatic', + }); + }, + }, + react(), + vitePluginSemi({ + cssLayer: true, + }), + ], + optimizeDeps: { + force: true, + esbuildOptions: { + loader: { + '.js': 'jsx', + '.json': 'json', + }, + }, + }, + build: { + rollupOptions: { + output: { + manualChunks: { + 'react-core': ['react', 'react-dom', 'react-router-dom'], + 'semi-ui': ['@douyinfe/semi-icons', '@douyinfe/semi-ui'], + tools: ['axios', 'history', 'marked'], + 'react-components': [ + 'react-dropzone', + 'react-fireworks', + 'react-telegram-login', + 'react-toastify', + 'react-turnstile', + ], + i18n: [ + 'i18next', + 'react-i18next', + 'i18next-browser-languagedetector', + ], + }, + }, + }, + }, + server: { + host: '0.0.0.0', + proxy: { + '/api': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + '/mj': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + '/pg': { + target: 'http://localhost:3000', + changeOrigin: true, + }, + }, + }, +});