/* ube-admin.css — ci_ube's own additions on top of the ported bundle. * * WHY THIS FILE EXISTS * ──────────────────── * style.css is a PREBUILT, PURGED Tailwind bundle carried over from ci_data. It * contains only the utilities ci_data's own markup used, and there is no build * step here to regenerate it — so a class ci_data never wrote simply does not * exist at runtime. The markup looks correct, the browser silently ignores it, * and the layout is subtly wrong in a way that reads as a design mistake rather * than a missing rule. `lg:grid-cols-5` was exactly that: the dashboard asked * for five columns and rendered two. * * So: anything ci_ube's admin needs that the bundle does not carry is declared * HERE, by hand, rather than by editing style.css. Two reasons — style.css is * generated output and an edit to it is lost the moment it is regenerated or * re-copied from ci_data, and keeping the additions in one small file makes it * obvious what this app added and why. * * HOW TO CHECK. Before using a utility that is not already visible elsewhere in * the admin markup, grep the bundle for it: * * grep -F '.lg\:grid-cols-5' assets/ui_ube/admin/css/style.css * * Nothing back means it must be added here. Escaping follows Tailwind's own * selector output: `:` `/` `[` `]` `.` are backslash-escaped in the class name. * * Values match Tailwind's defaults so a rule here behaves exactly as the same * class does anywhere else, and can be deleted the day the bundle is rebuilt * with these classes in scope. */ /* ── Sizing ────────────────────────────────────────────────────────────── The bundle carries no `size-*` at ALL — not one of them. That is worth knowing because the failure is loud on an : with neither width nor height the browser falls back to the intrinsic size, so a 14px icon renders as a 300px illustration across the middle of the page. It looked like a broken image; it was a missing utility. The whole set used by this app is declared here rather than one at a time as each is discovered. */ .size-3\.5 { width: 0.875rem; height: 0.875rem; } .size-4 { width: 1rem; height: 1rem; } .size-5 { width: 1.25rem; height: 1.25rem; } .size-8 { width: 2rem; height: 2rem; } .size-9 { width: 2.25rem; height: 2.25rem; } .size-10 { width: 2.5rem; height: 2.5rem; } .size-11 { width: 2.75rem; height: 2.75rem; } /* ── Spacing ───────────────────────────────────────────────────────────── The bundle stops at ml-2. Used between the two inline action forms on the admins table. */ .ml-3 { margin-left: 0.75rem; } /* ── Arbitrary values ──────────────────────────────────────────────────── Arbitrary-value classes are generated per use-site, so one ci_data never wrote is never present. This is the flash message's accent rule — it has been in the markup since the CMS was first built and has never actually drawn. */ .border-l-\[3px\] { border-left-width: 3px; } /* ── Hover states ──────────────────────────────────────────────────────── The base classes exist; these hover variants do not. `hover:border-primary` is what makes a dashboard tile read as clickable; `hover:text-background` flips the delete button's label when its destructive fill comes in. */ .hover\:border-primary:hover { border-color: var(--primary); } .hover\:text-background:hover { color: var(--background); } /* ── PER-ROW ACTION BUTTONS ────────────────────────────────────────────── -FORMAT.md §B7, in this app's vocabulary. * * The doc is written for Bootstrap 5 + Metronic (`btn btn-sm btn-primary`); * ci_ube's admin is Tailwind, so the RULES are what port, not the class names: * small, filled, primary, text only, never stacked vertically. One class here * rather than a class string repeated per page, because §B7's own reasoning is * that this column repeats on every list and small inconsistencies multiply. * * SIZED AND SHAPED AS THE LIST'S STATUS-FILTER PILLS. Those filters sit a few * rows above this column on every list screen, so the two read as one control * vocabulary or as an accident — there is no third option. The filter's box is * `px-3 py-1 rounded-md text-xs font-medium border` (resource_list/index.php, * $_pill); every declaration below is that box resolved against the bundle's * own tokens, so the buttons match by construction rather than by eye: * * padding py-1 / px-3 -> .25rem / .75rem (--spacing: .25rem) * font text-xs -> .75rem, line-height calc(1 / .75) = 1rem * weight font-medium -> 500 * border border -> 1px (transparent here: the fill IS the edge) * radius rounded-md -> .4rem * * The radius is the literal .4rem, NOT calc(var(--radius) - 2px): radius.css * flattens every rounded-* utility to .4rem unlayered, so that is what the * filter actually computes to, and the token arithmetic would miss it by 2px. * * Height is left to the padding rather than pinned, which is how the filter * derives its own — pinning it here would drift the moment either the text * size or the padding moved. Both land on 26px: 16 + 8 + 2. * * `a.ube-btn-row` is spelled out so the anchor beats the design system's own * link colour; §B7 requires , not