|
1 | | -@tailwind base; |
2 | | -@tailwind components; |
3 | | -@tailwind utilities; |
| 1 | +@import 'tailwindcss'; |
| 2 | +/*@import "preline/src/plugins/overlay/variants.css";*/ |
| 3 | +@import "preline/src/plugins/dropdown/variants.css"; |
| 4 | +@import "preline/src/plugins/collapse/variants.css"; |
| 5 | +@import "toastify-js/src/toastify.css"; |
| 6 | +@plugin "@tailwindcss/typography"; |
| 7 | +@plugin "@tailwindcss/forms"; |
| 8 | + |
| 9 | +@custom-variant dark (&:where([data-mode=dark], [data-mode=dark] *)); |
| 10 | + |
| 11 | +:root { |
| 12 | + --color-primary: #91c27c; |
| 13 | + --color-secondary: #fff; |
| 14 | + --color-dark: #1e1d32; /*#141329;*/ |
| 15 | + --color-gray-700: #ddd; /*#00000040;*/ |
| 16 | + --color-gray-300: #f7f7f7; |
| 17 | + --color-text: theme('colors.neutral.900'); |
| 18 | + --color-blue: theme('colors.blue.600'); |
| 19 | +} |
| 20 | + |
| 21 | +:root[data-mode=dark] { |
| 22 | + --color-secondary: #022f4e; |
| 23 | + --color-gray-700: theme('colors.gray.700'); /*#ffffff55;*/ |
| 24 | + --color-gray-300: #0e3957; |
| 25 | + --color-text: theme('colors.white'); |
| 26 | + --color-blue: theme('colors.blue.600'); |
| 27 | +} |
| 28 | + |
| 29 | +@theme { |
| 30 | + --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| 31 | + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; |
| 32 | + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| 33 | + |
| 34 | + --color-primary: var(--color-primary); |
| 35 | + --color-secondary: var(--color-secondary); |
| 36 | + --color-dark: var(--color-dark); |
| 37 | + --color-gray-300: var(--color-gray-300); |
| 38 | + --color-text: var(--color-text); |
| 39 | + --color-blue: var(--color-blue); |
| 40 | +} |
4 | 41 |
|
5 | 42 | @layer base { |
6 | 43 | :root { |
|
10 | 47 | html, body { |
11 | 48 | @apply h-screen; |
12 | 49 | } |
| 50 | + |
13 | 51 | body { |
14 | | - @apply flex flex-col items-start tracking-wide font-normal bg-secondary text-black; |
| 52 | + @apply flex flex-col items-start bg-secondary tracking-wide; |
| 53 | + } |
| 54 | + |
| 55 | + |
| 56 | + .dropdown-item { |
| 57 | + & > button, |
| 58 | + & > a { |
| 59 | + @apply flex w-full items-center justify-start gap-x-1 py-2 px-3 rounded-lg text-sm hover:bg-gray-300 focus:outline-none focus:bg-gray-100 cursor-pointer; |
| 60 | + } |
| 61 | + } |
| 62 | + |
| 63 | +} |
| 64 | + |
| 65 | +@layer utilities { |
| 66 | + input.form-input, |
| 67 | + textarea.form-input { |
| 68 | + @apply py-3 px-4 border border-gray-700 rounded-lg bg-gray-300 text-text focus:ring-2 focus:ring-gray-700 focus:border-transparent; |
| 69 | + } |
| 70 | + |
| 71 | + input.form-input-sm { |
| 72 | + @apply py-2 px-3 border border-gray-700 rounded-lg bg-gray-300 text-text text-sm focus:ring-2 focus:ring-gray-700 focus:border-transparent; |
15 | 73 | } |
16 | 74 |
|
17 | 75 | input[type="checkbox"] { |
|
20 | 78 |
|
21 | 79 | &:checked { @apply bg-blue-600; } |
22 | 80 | } |
| 81 | + |
| 82 | + select.form-select { |
| 83 | + @apply py-3 ps-4 pe-10 border border-gray-700 rounded-lg focus:ring-2 bg-secondary focus:ring-gray-700 focus:border-transparent transition; |
| 84 | + } |
| 85 | + |
| 86 | + label.form-label { |
| 87 | + @apply block mb-1 text-base text-text font-medium; |
| 88 | + } |
| 89 | + |
| 90 | + a.btn, |
| 91 | + button.btn { |
| 92 | + @apply py-3 px-4 rounded-lg bg-blue text-white font-bold hover:contrast-150 transition shadow-lg hover:shadow-xl cursor-pointer; |
| 93 | + } |
| 94 | + |
| 95 | + button.btn-icon { |
| 96 | + @apply py-3 px-4 rounded-lg text-sm font-medium hover:brightness-90 transition w-full sm:w-auto cursor-pointer; |
| 97 | + } |
| 98 | + |
| 99 | + button.btn-icon-text { |
| 100 | + @apply flex items-center gap-x-2 rounded-lg font-medium hover:contrast-150 transition cursor-pointer; |
| 101 | + } |
23 | 102 | } |
24 | 103 |
|
25 | 104 | .scrollbar { |
26 | 105 | scrollbar-color: #6b6b6b8f #49464638; |
27 | 106 | scrollbar-width: thin; |
28 | 107 | } |
29 | 108 |
|
30 | | -.dropdown-button { |
31 | | - @apply flex w-full items-center justify-start gap-x-1 py-2 px-3 rounded-lg text-sm hover:bg-gray-100 focus:outline-none focus:bg-gray-100; |
| 109 | +/* Toastify */ |
| 110 | +.toastify { |
| 111 | + padding: 0; |
| 112 | + box-shadow: none; |
| 113 | + background: transparent; |
| 114 | + border: none; |
| 115 | + cursor: inherit; |
| 116 | + |
| 117 | + & > button { |
| 118 | + display: none; |
| 119 | + } |
32 | 120 | } |
33 | 121 |
|
34 | 122 | .sortable-ghost { |
|
0 commit comments