diff --git a/static/css/components/import-modal.css b/static/css/components/import-modal.css index 329b1d89..2af575ce 100644 --- a/static/css/components/import-modal.css +++ b/static/css/components/import-modal.css @@ -669,25 +669,6 @@ /* Hide the old style */ } -/* Update deleted badge to be more prominent */ -.deleted-badge { - display: inline-flex; - align-items: center; - background: var(--lora-warning); - color: white; - padding: 4px 8px; - border-radius: var(--border-radius-xs); - font-size: 0.8em; - font-weight: 500; - white-space: nowrap; - flex-shrink: 0; -} - -.deleted-badge i { - margin-right: 4px; - font-size: 0.9em; -} - /* Error message styling */ .error-message { color: var(--lora-error); diff --git a/static/css/components/recipe-modal.css b/static/css/components/recipe-modal.css index 191ea3bb..c9f8c343 100644 --- a/static/css/components/recipe-modal.css +++ b/static/css/components/recipe-modal.css @@ -1179,6 +1179,19 @@ border: 1px solid oklch(var(--lora-warning) / 0.35); } +/* Pin the recipe status-badge family (missing / deleted / invalid-hash) to its + compact size. import-modal.css defines unscoped .missing-badge/.deleted-badge + and is loaded AFTER this file, so without this higher-specificity rule its + padding/font-size would clobber recipe modal's, leaving invalid-hash-badge + (which has no import counterpart) at a different size. local-badge + intentionally keeps the global shared.css size. */ +#recipeModal .badge-container .missing-badge, +#recipeModal .badge-container .deleted-badge, +#recipeModal .badge-container .invalid-hash-badge { + padding: 3px 6px; + font-size: 0.75em; +} + /* Missing LoRAs status is a real button: the affordance must be visible at rest (persistent border), not only on hover. */ .recipe-status.missing.clickable {