Phillip Tarrant
9cc2f8183c
- Move large sections into partials: - forms → templates/_include_forms.html - scripts → templates/_include_scripts.html (if applicable) - Add Tailwind component classes in assets/input.css: - .badge + variants (.badge-ok, .badge-warn, .badge-danger, .badge-muted, .badge-info, .badge-success, .badge-success-solid) - .chip - .card - Override .border-gray-800 to fixed color (no opacity var) - Stabilize table layouts: - Use table-fixed + <colgroup> with percentage widths - Forms cols: 10% / 10% / 15% / 45% / 25% - Scripts cols: 10% / 20% / 45% / 25% - Remove inner fixed-width wrapper from snippet cells; use w-full + wrapping to prevent column jitter - Update templates to use new badge/chip classes
33 lines
1.3 KiB
CSS
33 lines
1.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
|
|
/* ---- Reusable components ---- */
|
|
@layer components {
|
|
/* Base badge + variants (compose in markup as: class="badge badge-ok") */
|
|
.badge { @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs border; }
|
|
.badge-ok { @apply bg-green-600/20 text-green-300 border-green-700; }
|
|
.badge-warn { @apply bg-yellow-600/20 text-yellow-300 border-yellow-700; }
|
|
.badge-danger { @apply bg-red-600/20 text-red-300 border-red-700; }
|
|
.badge-muted { @apply bg-gray-700/30 text-gray-300 border-gray-700; }
|
|
.badge-info { @apply bg-blue-600/20 text-blue-300 border-blue-700; }
|
|
.badge-success { @apply bg-green-600/20 text-green-300 border-green-700; }
|
|
.badge-success-solid { @apply bg-green-600 text-white border-green-600; }
|
|
|
|
|
|
/* Chips (tags/pills) */
|
|
.chip { @apply rounded-full bg-gray-800 border border-gray-700 text-gray-300 px-2 py-0.5 text-xs; }
|
|
|
|
/* Card container */
|
|
.card { @apply bg-card border border-gray-800 rounded-xl p-4; }
|
|
}
|
|
|
|
@tailwind utilities;
|
|
|
|
/* Your earlier override to remove opacity var from gray-800 borders */
|
|
@layer utilities {
|
|
.border-gray-800 { border-color: #1f2937; } /* rgb(31,41,55) */
|
|
}
|
|
|
|
/* Optional tiny custom classes */
|
|
.card-shadow { box-shadow: 0 1px 2px rgba(0,0,0,.2); }
|