93 lines
2.4 KiB
CSS
93 lines
2.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* Light mode (default root values, overridden by .dark) */
|
|
:root {
|
|
--background: #fafafa;
|
|
--foreground: #171717;
|
|
|
|
/* Gray scale: inverted for light mode so bg-gray-950 = light bg, text-gray-100 = dark text */
|
|
--gray-950: 235 235 235;
|
|
--gray-900: 215 215 215;
|
|
--gray-800: 195 195 195;
|
|
--gray-700: 175 175 175;
|
|
--gray-600: 163 163 163;
|
|
--gray-500: 115 115 115;
|
|
--gray-400: 82 82 82;
|
|
--gray-300: 64 64 64;
|
|
--gray-200: 38 38 38;
|
|
--gray-100: 23 23 23;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
--background: #0a0a0a;
|
|
--foreground: #ededed;
|
|
|
|
--gray-950: 10 10 10;
|
|
--gray-900: 23 23 23;
|
|
--gray-800: 38 38 38;
|
|
--gray-700: 64 64 64;
|
|
--gray-600: 82 82 82;
|
|
--gray-500: 115 115 115;
|
|
--gray-400: 163 163 163;
|
|
--gray-300: 212 212 212;
|
|
--gray-200: 229 229 229;
|
|
--gray-100: 245 245 245;
|
|
}
|
|
|
|
body {
|
|
color: var(--foreground);
|
|
background: var(--background);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
@layer components {
|
|
/* control */
|
|
.aitk-react-select-container .aitk-react-select__control {
|
|
@apply flex w-full h-8 min-h-0 px-0 text-sm bg-gray-950 dark:bg-gray-800 border border-gray-700 rounded-sm hover:border-gray-600 items-center;
|
|
}
|
|
|
|
/* selected label */
|
|
.aitk-react-select-container .aitk-react-select__single-value {
|
|
@apply flex-1 min-w-0 truncate text-sm text-gray-200;
|
|
}
|
|
|
|
/* invisible input (keeps focus & typing, never wraps) */
|
|
.aitk-react-select-container .aitk-react-select__input-container {
|
|
@apply text-gray-200;
|
|
}
|
|
|
|
/* focus */
|
|
.aitk-react-select-container .aitk-react-select__control--is-focused {
|
|
@apply ring-2 ring-gray-600 border-transparent hover:border-transparent shadow-none;
|
|
}
|
|
|
|
/* menu */
|
|
.aitk-react-select-container .aitk-react-select__menu {
|
|
@apply bg-gray-950 dark:bg-gray-800 border border-gray-700;
|
|
}
|
|
|
|
/* options */
|
|
.aitk-react-select-container .aitk-react-select__option {
|
|
@apply text-sm text-gray-200 bg-gray-950 dark:bg-gray-800 hover:bg-gray-700 dark:hover:bg-gray-700 cursor-pointer;
|
|
}
|
|
|
|
/* indicator separator */
|
|
.aitk-react-select-container .aitk-react-select__indicator-separator {
|
|
@apply bg-gray-600;
|
|
}
|
|
|
|
/* indicators */
|
|
.aitk-react-select-container .aitk-react-select__indicators,
|
|
.aitk-react-select-container .aitk-react-select__indicator {
|
|
@apply py-0 flex items-center;
|
|
}
|
|
|
|
/* placeholder */
|
|
.aitk-react-select-container .aitk-react-select__placeholder {
|
|
@apply text-sm text-gray-200;
|
|
}
|
|
}
|