fix(recipes): pin recipe modal badge sizing against import-modal.css collision

import-modal.css is loaded after recipe-modal.css and its unscoped
.missing-badge/.deleted-badge (equal specificity) were clobbering the
recipe modal's badge family, leaving invalid-hash-badge (no import
counterpart) at a different size. Scope the recipe status-badge sizing
under #recipeModal so import-modal.css can't override it. Also remove the
duplicate .deleted-badge block in import-modal.css.
This commit is contained in:
Will Miao
2026-08-28 22:54:25 +08:00
parent 856c9a87ac
commit cb18281b14
2 changed files with 13 additions and 19 deletions
-19
View File
@@ -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);
+13
View File
@@ -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 {