tailwind.css

/* stylelint-disable */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --stroke-border: #f0f2f5;
    --color-ring: #ebf4ff;
}

body {
    --border-radius: 4px;
    --border-radius-lg: 8px;

    --seed-token-white: #fff;
    --color-error-active: #d62026;
    --color-error-base: #fc3232;
    --color-error-bg: #fff2f0;
    --color-error-bg-hover: #ffdcd6;
    --color-error-border: #ffb6ad;
    --color-error-border-hover: #ff8d85;
    --color-error-hover: #ff615c;
    --color-error-text: #fc3232;
    --color-error-text-active: #d62026;
    --color-error-text-hover: #ff615c;
    --color-info-active: #0b8dd9;
    --color-info-base: #19b2ff;
    --color-info-bg: #e6fbff;
    --color-info-bg-hover: #bdf2ff;
    --color-info-border: #94e6ff;
    --color-info-border-hover: #6bd8ff;
    --color-info-hover: #6bd8ff;
    --color-info-text: #19b2ff;
    --color-info-text-active: #0b8dd9;
    --color-info-text-hover: #42c6ff;
    --color-neutral-bg: #ffffff;
    --color-neutral-bg-hover: #0000000a;
    --color-primary: #407bf5;
    --color-primary-active: #2b5ccf;
    --color-primary-bg: #f0f7ff;
    --color-primary-bg-hover: #e6f1ff;
    --color-primary-border: #bdd9ff;
    --color-primary-border-hover: #94bfff;
    --color-primary-border-white: #bdd9ff;
    --color-primary-border-white-hover: #94bfff;
    --color-primary-hover: #6ba1ff;
    --color-primary-text: #407bf5;
    --color-primary-text-active: #2b5ccf;
    --color-primary-text-hover: #6ba1ff;
    --color-primary-text-temp: #407bf5;
    --color-primary-white: #407bf5;
    --color-primary-white-active: #2b5ccf;
    --color-success-active: #1aad7f;
    --color-success-base: #2bd397;
    --color-success-bg: #f0fff7;
    --color-success-bg-hover: #d6ffeb;
    --color-success-border: #aafad6;
    --color-success-border-hover: #7bedbe;
    --color-success-hover: #7bedbe;
    --color-success-text: #2bd397;
    --color-success-text-active: #1aad7f;
    --color-success-text-hover: #51e0a9;
    --color-warning-active: #d48806;
    --color-warning-base: #faad14;
    --color-warning-bg: #fffbe6;
    --color-warning-bg-hover: #fff1b8;
    --color-warning-border: #ffe58f;
    --color-warning-border-hover: #ffd666;
    --color-warning-hover: #ffd666;
    --color-warning-text: #faad14;
    --color-warning-text-active: #d48806;
    --color-warning-text-hover: #ffc53d;

    /* -----background---- */
    --color-bg-container: var(--white);
    --color-bg-disable: var(--white);
    --color-bg-elevated: var(--white);
    --color-bg-layout: #f5f5fa;
    --color-bg-mask: #00000073;
    --color-bg-spotlight: #080823d9;
    --color-bg-timeline: #0000000a;
    --color-bg-tooltips: #292b30;
    --color-recommend-bg: #292b30;
    --color-recommend-bg-hover: #ffffff0f;
    --color-recommend-loading: #ffffff0f;

    /* ----padding margin---- */
    --margin-xxs: 4px;
    --margin-xs: 8px;
    --margin-sm: 12px;
    --margin: 16px;
    --margin-md: 20px;
    --margin-lg: 24px;
    --margin-xl: 32px;
    --margin-xxl: 48px;
    --padding-xxs: 2px;
    --padding-xs: 4px;
    --padding-sm: 6px;
    --padding: 8px;
    --padding-md: 10px;
    --padding-lg: 12px;
    --padding-xl: 16px;
    --padding-xxl: 24px;

    /* ------custom colors----- */
    --black: #000000;
    --white: #ffffff;
    --black-100: #0808071a;
    --black-1000: #080807;
    --black-200: #08080733;
    --black-300: #0808074d;
    --black-400: #08080766;
    --black-50: #0808070d;
    --black-500: #08080780;
    --black-600: #08080799;
    --black-700: #080807b2;
    --black-800: #080807cc;
    --black-900: #080807e5;
    --blue-100: #e1effe;
    --blue-200: #c3ddfd;
    --blue-300: #a4cafe;
    --blue-400: #76a9fa;
    --blue-50: #ebf5ff;
    --blue-500: #3f83f8;
    --blue-600: #1c64f2;
    --blue-700: #1a56db;
    --blue-800: #1e429f;
    --blue-900: #233876;
    --cool-gray-100: #f1f5f9;
    --cool-gray-200: #e2e8f0;
    --cool-gray-300: #cfd8e3;
    --cool-gray-400: #97a6ba;
    --cool-gray-50: #fbfdfe;
    --cool-gray-500: #64748b;
    --cool-gray-600: #475569;
    --cool-gray-700: #364152;
    --cool-gray-800: #27303f;
    --cool-gray-900: #1a202e;
    --gray-100: #f4f5f7;
    --gray-200: #e5e7eb;
    --gray-300: #d2d6dc;
    --gray-400: #9fa6b2;
    --gray-50: #f9fafb;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #252f3f;
    --gray-900: #161e2e;
    --green-100: #def7ec;
    --green-200: #bcf0da;
    --green-300: #84e1bc;
    --green-400: #31c48d;
    --green-50: #f3faf7;
    --green-500: #0e9f6e;
    --green-600: #057a55;
    --green-700: #046c4e;
    --green-800: #03543f;
    --green-900: #014737;
    --indigo-100: #e5edff;
    --indigo-200: #cddbfe;
    --indigo-300: #b4c6fc;
    --indigo-400: #8da2fb;
    --indigo-50: #f0f5ff;
    --indigo-500: #6875f5;
    --indigo-600: #5850ec;
    --indigo-700: #5145cd;
    --indigo-800: #42389d;
    --indigo-900: #362f78;
    --orange-100: #feecdc;
    --orange-200: #fcd9bd;
    --orange-300: #fdba8c;
    --orange-400: #ff8a4c;
    --orange-50: #fff8f1;
    --orange-500: #ff5a1f;
    --orange-600: #d03801;
    --orange-700: #b43403;
    --orange-800: #8a2c0d;
    --orange-900: #771d1d;
    --pink-100: #fce8f3;
    --pink-200: #fad1e8;
    --pink-300: #f8b4d9;
    --pink-400: #f17eb8;
    --pink-50: #fdf2f8;
    --pink-500: #e74694;
    --pink-600: #d61f69;
    --pink-700: #bf125d;
    --pink-800: #99154b;
    --pink-900: #751a3d;
    --purple-100: #edebfe;
    --purple-200: #dcd7fe;
    --purple-300: #cabffd;
    --purple-400: #ac94fa;
    --purple-50: #f6f5ff;
    --purple-500: #9061f9;
    --purple-600: #7e3af2;
    --purple-700: #6c2bd9;
    --purple-800: #5521b5;
    --purple-900: #4a1d96;
    --red-100: #fde8e8;
    --red-200: #fbd5d5;
    --red-300: #f8b4b4;
    --red-400: #f98080;
    --red-50: #fdf2f2;
    --red-500: #f05252;
    --red-600: #e02424;
    --red-700: #c81e1e;
    --red-800: #9b1c1c;
    --red-900: #771d1d;
    --teal-100: #d5f5f6;
    --teal-200: #afecef;
    --teal-300: #7edce2;
    --teal-400: #16bdca;
    --teal-50: #edfafa;
    --teal-500: #0694a2;
    --teal-600: #047481;
    --teal-700: #036672;
    --teal-800: #05505c;
    --teal-900: #014451;
    --white-100: #ffffff1a;
    --white-200: #ffffff33;
    --white-300: #ffffff4d;
    --white-400: #ffffff66;
    --white-50: #ffffff0d;
    --white-500: #ffffff80;
    --white-600: #ffffff99;
    --white-700: #ffffffb2;
    --white-800: #ffffffcc;
    --white-900: #ffffffe5;
    --yellow-100: #fdf6b2;
    --yellow-200: #fce96a;
    --yellow-300: #faca15;
    --yellow-400: #e3a008;
    --yellow-50: #fdfdea;
    --yellow-500: #c27803;
    --yellow-600: #9f580a;
    --yellow-700: #8e4b10;
    --yellow-800: #723b13;
    --yellow-900: #633112;

    --color-border: #e1e1ef;
    --color-border-button-temp: #407bf5;
    --color-border-secondary: #f0f0f0;
    --color-divider: #e1e1ef;
    --color-divider-line: #e1e1ef;
    --color-recommend-border: var(--white-100);

    --color-fill: #00000026;
    --color-fill-button-temp: #407bf5;
    --color-fill-quaternary: #00000005;
    --color-fill-secondary: #0000000d;
    --color-fill-selected: #407bf51a;
    --color-fill-tertiary: #0000000a;

    --color-recommend-body: #ffffffe5;
    --color-recommend-body-disable: #ffffff33;
    --color-recommend-title: #ffffff;
    --color-text: var(--black-1000);
    --color-text-quaternary: var(--black-400);
    --color-text-secondary: var(--black-900);
    --color-text-tertiary: var(--black-600);
}

body.loki-dark {
    --color-bg-container: #181a1f;
    --color-bg-disable: #ffffff0f;
    --color-bg-elevated: #292b30;
    --color-bg-layout: #101214;
    --color-bg-mask: #101214e5;
    --color-bg-spotlight: #424242;
    --color-bg-timeline: #292b30;
    --color-bg-tooltips: #292b30;
    --color-recommend-bg: #ffffff;
    --color-recommend-bg-hover: #0808070a;
    --color-recommend-loading: #f5f5fa;

    /* ----- color---- */
    --blue-100: #031e76;
    --blue-200: #0e349f;
    --blue-300: #1d51c9;
    --blue-400: #3272f2;
    --blue-50: #000f4d;
    --blue-500: #4183f5;
    --blue-600: #6ca3f7;
    --blue-700: #97c2fa;
    --blue-800: #c3defc;
    --blue-900: #f1f8ff;
    --cool-gray-100: #f1f5f9;
    --cool-gray-200: #e2e8f0;
    --cool-gray-300: #cfd8e3;
    --cool-gray-400: #97a6ba;
    --cool-gray-50: #fbfdfe;
    --cool-gray-500: #64748b;
    --cool-gray-600: #475569;
    --cool-gray-700: #364152;
    --cool-gray-800: #27303f;
    --cool-gray-900: #1a202e;
    --gray-100: #101214;
    --gray-200: #181a1f;
    --gray-300: #292b30;
    --gray-400: #40444c;
    --gray-50: #080807;
    --gray-500: #4a4f5a;
    --gray-600: #5b626e;
    --gray-700: #717986;
    --gray-800: #b6bbc3;
    --gray-900: #eeeef0;
    --green-100: #045846;
    --green-200: #09634d;
    --green-300: #106f54;
    --green-400: #177a5b;
    --green-50: #004d3e;
    --green-500: #24956d;
    --green-600: #48af88;
    --green-700: #75caa7;
    --green-800: #abe4ca;
    --green-900: #ebfff5;
    --indigo-100: #0b0b77;
    --indigo-200: #2327a1;
    --indigo-300: #444dcb;
    --indigo-400: #6f7cf5;
    --indigo-50: #03004d;
    --indigo-500: #8e9cf7;
    --indigo-600: #a5b4f9;
    --indigo-700: #bdcafb;
    --indigo-800: #d6dffd;
    --indigo-900: #eef3ff;
    --orange-100: #6d1200;
    --orange-200: #8e2105;
    --orange-300: #af320d;
    --orange-400: #d04918;
    --orange-50: #4d0a00;
    --orange-500: #d95a22;
    --orange-600: #e3804e;
    --orange-700: #eca77e;
    --orange-800: #f6ceb2;
    --orange-900: #fff3e9;
    --pink-100: #6f063a;
    --pink-200: #91114c;
    --pink-300: #b41f60;
    --pink-400: #d63274;
    --pink-50: #4d0029;
    --pink-500: #de417b;
    --pink-600: #e66992;
    --pink-700: #ef93ae;
    --pink-800: #f7bfce;
    --pink-900: #ffeef2;
    --purple-100: #230c78;
    --purple-200: #4222a3;
    --purple-300: #6942ce;
    --purple-400: #976bf9;
    --purple-50: #0e004d;
    --purple-500: #af87fa;
    --purple-600: #af87fa;
    --purple-700: #c3a1fb;
    --purple-800: #e8d5fe;
    --purple-900: #f7f0ff;
    --red-100: #71030e;
    --red-200: #960f18;
    --red-300: #bb2025;
    --red-400: #e03636;
    --red-50: #4d000a;
    --red-500: #e64d47;
    --red-600: #ec756d;
    --red-700: #f39e94;
    --red-800: #f9c5bd;
    --red-900: #ffece8;
    --teal-100: #03485a;
    --teal-200: #085767;
    --teal-300: #0f6774;
    --teal-400: #177681;
    --teal-50: #003b4d;
    --teal-500: #24929a;
    --teal-600: #48b0b3;
    --teal-700: #75cdcd;
    --teal-800: #aae6e4;
    --teal-900: #e8fffd;
    --white-100: #ffffff1a;
    --white-200: #ffffff33;
    --white-300: #ffffff4d;
    --white-400: #ffffff66;
    --white-50: #ffffff0d;
    --white-500: #ffffff80;
    --white-600: #ffffff99;
    --white-700: #ffffffb2;
    --white-800: #ffffffcc;
    --white-900: #ffffffe5;
    --yellow-100: #612901;
    --yellow-200: #763907;
    --yellow-300: #8a4a10;
    --yellow-400: #9f601a;
    --yellow-50: #4d1d00;
    --yellow-500: #b27426;
    --yellow-600: #c5934d;
    --yellow-700: #d9b57c;
    --yellow-800: #ecd7b2;
    --yellow-900: #fffaee;

    --color-border: var(--white-100);
    --color-border-button-temp: #407bf5;
    --color-border-secondary: #303030;
    --color-divider: var(--black-1000);
    --color-divider-line: var(--white-100);
    --color-recommend-border: #e1e1ef;

    --color-error-active: #a63232;
    --color-error-base: #f54242;
    --color-error-bg: #2a1517;
    --color-error-bg-hover: #431a1c;
    --color-error-border: #582222;
    --color-error-border-hover: #792929;
    --color-error-hover: #e86a65;
    --color-error-text: #e86a65;
    --color-error-text-active: #e86a65;
    --color-error-text-hover: #e86a65;
    --color-info-active: #177bad;
    --color-info-base: #19b2ff;
    --color-info-bg: #11212c;
    --color-info-bg-hover: #123245;
    --color-info-border: #16435b;
    --color-info-border-hover: #165b7e;
    --color-info-hover: #165b7e;
    --color-info-text: #189adc;
    --color-info-text-active: #177bad;
    --color-info-text-hover: #3db4e8;
    --color-neutral-bg: #ffffff;
    --color-neutral-bg-hover: #ffffff0f;
    --color-primary: #6293e8;
    --color-primary-active: #3157a6;
    --color-primary-bg: #151b2a;
    --color-primary-bg-hover: #1a2643;
    --color-primary-border: #213358;
    --color-primary-border-hover: #284279;
    --color-primary-border-white: var(--white-100);
    --color-primary-border-white-hover: var(--white-200);
    --color-primary-hover: #6293e8;
    --color-primary-text: #6293e8;
    --color-primary-text-active: #3157a6;
    --color-primary-text-hover: #396cd3;
    --color-primary-text-temp: #407bf5;
    --color-primary-white: var(--white);
    --color-primary-white-active: var(--white-600);
    --color-success-active: #239069;
    --color-success-base: #2bd397;
    --color-success-bg: #132520;
    --color-success-bg-hover: #163a2f;
    --color-success-border: #1b4d3b;
    --color-success-border-hover: #1e6a4f;
    --color-success-hover: #1e6a4f;
    --color-success-text: #28b683;
    --color-success-text-active: #28b683;
    --color-success-text-hover: #239069;
    --color-warning-active: #aa7714;
    --color-warning-base: #faad14;
    --color-warning-bg: #2b2111;
    --color-warning-bg-hover: #443111;
    --color-warning-border: #594214;
    --color-warning-border-hover: #7c5914;
    --color-warning-hover: #7c5914;
    --color-warning-text: #d89614;
    --color-warning-text-active: #aa7714;
    --color-warning-text-hover: #e8b339;

    --color-fill: var(--black-1000);
    --color-fill-button-temp: #407bf5;
    --color-fill-quaternary: var(--black-400);
    --color-fill-secondary: var(--black-800);
    --color-fill-selected: #181a1f;
    --color-fill-tertiary: var(--black-500);

    --color-recommend-body: var(--black-900);
    --color-recommend-body-disable: var(--black-400);
    --color-recommend-title: #080807;
    --color-text: var(--white);
    --color-text-quaternary: var(--white-200);
    --color-text-secondary: var(--white-900);
    --color-text-tertiary: var(--white-600);
}


.loki-scrollbar::-webkit-scrollbar-track {
    display: none;
}

.loki-scrollbar-none::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.loki-scrollbar::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}

.loki-scrollbar:hover::-webkit-scrollbar-track {
    display: block;
}

.loki-scrollbar:hover::-webkit-scrollbar-thumb {
    display: block;
}

.loki-scrollbar::-webkit-scrollbar-thumb {
    display: none;
    height: 6px;
    border: 5px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.05), inset 1px 1px 0 rgba(0, 0, 0, 0.05);
}