feat(dees-tile): unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests

This commit is contained in:
2026-01-27 11:36:24 +00:00
parent 825a74b810
commit bfda6b75e7
17 changed files with 71 additions and 115 deletions

View File

@@ -55,24 +55,12 @@ export class DeesTileImage extends DeesTileBase {
opacity: 0;
}
.dimension-badge {
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.6)', 'hsl(0 0% 100% / 0.85)')};
color: ${cssManager.bdTheme('white', 'hsl(215 20% 12%)')};
border-radius: 4px;
font-size: 10px;
font-weight: 600;
backdrop-filter: blur(8px);
z-index: 15;
pointer-events: none;
.tile-badge-topright.dimension-badge {
opacity: 0;
transition: opacity 0.2s ease;
}
.tile-container.clickable:hover .dimension-badge {
.tile-container.clickable:hover .tile-badge-topright.dimension-badge {
opacity: 1;
}
`,
@@ -110,7 +98,7 @@ export class DeesTileImage extends DeesTileBase {
</div>
${this.imageWidth > 0 && this.imageHeight > 0 ? html`
<div class="dimension-badge">
<div class="tile-badge-topright dimension-badge">
${this.imageWidth} × ${this.imageHeight}
</div>
` : ''}