/* variable.css */ /* ============================================== Global Variable ============================================== */ :root { --responsive-padding: clamp(1rem, 5vw, 4rem); /* Base Restore */ --base-margin: 0; --base-padding: 0; --base-list-style: none; /* Base Color */ --color-white: #ffffff; --color-gray-fa: #fafafa; --color-gray-f9: #f9f9f9; --color-gray-f3: #f3f3f3; --color-gray-ec: #ececec; --color-gray-da: #dadada; --color-gray-c5: #c5c5c5; --color-gray-8f: #8f8f8f; --color-gray-50: #505050; --color-gray-3a: #3a3a3a; --color-gray-35: #353535; --color-gray-30: #303030; --color-gray-2f: #2f2f2f; --color-gray-2c: #2c2c2c; --color-gray-21: #212121; --color-gray-18: #181818; --color-gray-0d: #0d0d0d; --color-black: #000; /* Base Alpha Color */ --color-black-alpha-00: #00000000; /* 0 % */ --color-black-alpha-03: #00000003; /* 1 % */ --color-black-alpha-05: #00000005; /* 2 % */ --color-black-alpha-08: #00000008; /* 3 % */ --color-black-alpha-0a: #0000000a; /* 4 % */ --color-black-alpha-0d: #0000000d; /* 5 % */ --color-black-alpha-0f: #0000000f; /* 6 % */ --color-black-alpha-12: #00000012; /* 7 % */ --color-black-alpha-14: #00000014; /* 8 % */ --color-black-alpha-1a: #0000001a; /* 10 % */ --color-black-alpha-4c: #0000004c; /* 30 % */ --color-black-alpha-80: #00000080; /* 50 % */ --color-black-alpha-9e: #0000009e; /* 62 % */ --color-black-alpha-b3: #000000b3; /* 70 % */ --color-white-alpha-00: #ffffff00; /* 0 % */ --color-white-alpha-0d: #ffffff0d; /* 5 % */ --color-white-alpha-1a: #ffffff1a; /* 10 % */ --color-white-alpha-26: #ffffff26; /* 15 % */ --color-white-alpha-33: #ffffff33; /* 20 % */ --color-white-alpha-66: #ffffff66; /* 40 % */ --color-white-alpha-cc: #ffffffcc; /* 80 % */ /* Use Variable */ --line: 1px solid var(--color-black-alpha-1a); --text-bg:var(--color-black-alpha-4c); /* Surface */ --color-surface-page: var(--color-white); --color-surface-button-primary: var(--color-gray-0d); --color-surface-button-primary-hover: var(--color-gray-21); --color-surface-button-primary-active: var(--color-gray-50); --color-surface-button-secondary: var(--color-white); --color-surface-button-secondary-hover: var(--color-gray-f9); --color-surface-button-secondary-active: var(--color-gray-fa); --color-surface-sidebar: var(--color-gray-f9); --color-surface-menu-hover:var(--color-black-alpha-0f); --color-surface-popup:var(--color-white); --color-surface-message-user: var(--color-gray-f3); --color-surface-input: var(--color-white); --color-surface-enter-disable: var(--color-gray-ec); --color-surface-enter-activate: var(--color-black); --color-surface-enter-loading: var(--color-gray-ec); --color-surface-overlay: var(--color-white-alpha-66); --color-surface-icon-hover: var(--color-black-alpha-12); --color-surface-icon-active: var(--color-black-alpha-1a); /* Border */ --color-border-button-secondary: var(--color-gray-2c); /* Icon Color */ --color-icon: var(--color-gray-21); --color-icon-enter-disable: var(--color-black); --color-icon-enter-activate: var(--color-white); /* Text Color */ --color-text-primary: var(--color-gray-0d); --color-text-secondary: var(--color-gray-50); --color-text-button-primary: var(--color-white); --color-text-button-secondary: var(--color-gray-0d); --color-text-placeholder :var(--color-black-alpha-b3); --color-text-message-user : var(--color-gray-18); /* Popup Shadow */ --shadow-popup: 0 8px 12px 0 var(--color-black-alpha-14), 0 0 1px 0 var(--color-black-alpha-9e); --shadow-input: 0 4px 4px 0 var(--color-black-alpha-0a), 0 4px 80px 0 var(--color-black-alpha-0a), inset 0 0 1px 0 var(--color-black-alpha-9e); /* Choose Text Color */ --select-bg: var(--color-black); --select-color: var(--color-white); } [data-theme="dark"] { /* Surface */ --color-surface-page: var(--color-gray-21); --color-surface-button-primary: var(--color-gray-f9); --color-surface-button-primary-hover: var(--color-gray-ec); --color-surface-button-primary-active: var(--color-gray-c5); --color-surface-button-secondary: var(--color-gray-21); --color-surface-button-secondary-hover: var(--color-gray-30); --color-surface-button-secondary-active: var(--color-gray-2c); --color-surface-sidebar: var(--color-gray-18); --color-surface-menu-hover:var(--color-white-alpha-0d); --color-surface-popup:var(--color-gray-35); --color-surface-message-user: var(--color-gray-2f); --color-surface-input: var(--color-gray-2c); --color-surface-enter-disable: var(--color-gray-3a); --color-surface-enter-activate: var(--color-white); --color-surface-enter-loading: var(--color-gray-3a); --color-surface-overlay: var(--color-black-alpha-80); --color-surface-icon-hover: var(--color-white-alpha-1a); --color-surface-icon-active: var(--color-white-alpha-26); /* Border */ --color-border-button-secondary: var(--color-gray-fa); /* Icon Color */ --color-icon: var(--color-white); --color-icon-enter-disable: var(--color-white); --color-icon-enter-activate: var(--color-black); /* Text Color */ --color-text-primary: var(--color-white); --color-text-secondary: var(--color-gray-da); --color-text-button-primary: var(--color-gray-0d); --color-text-button-secondary: var(--color-white); --color-text-placeholder :var(--color-white-alpha-cc); --color-text-message-user : var(--color-gray-f9); /* Popup Shadow */ --shadow-popup: 0 8px 12px 0 var(--color-black-alpha-14), 0 0 1px 0 var(--color-black-alpha-9e); --shadow-input: 0 4px 4px 0 var(--color-black-alpha-0d), 0 4px 80px 0 var(--color-black-alpha-0d), inset 0 0 1px 0 var(--color-white-alpha-33); --line: 1px solid var(--color-white-alpha-1a); --text-bg:var(--color-white-alpha-66); /* Choose Text Color */ --select-bg: var(--color-white); --select-color: var(--color-black); }