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

@@ -81,16 +81,10 @@ export class DeesTileNote extends DeesTileBase {
pointer-events: none;
}
.note-language {
position: absolute;
top: 8px;
right: 8px;
padding: 2px 6px;
.tile-badge-topright.note-language {
background: ${cssManager.bdTheme('hsl(215 20% 92%)', 'hsl(215 20% 88%)')};
color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 40%)')};
border-radius: 3px;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
z-index: 5;
}
@@ -116,21 +110,6 @@ export class DeesTileNote extends DeesTileBase {
padding-right: 6px;
}
.note-line-indicator {
position: absolute;
bottom: 8px;
right: 8px;
padding: 3px 8px;
background: rgba(0, 0, 0, 0.6);
color: white;
border-radius: 4px;
font-size: 9px;
font-weight: 600;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(8px);
z-index: 10;
pointer-events: none;
}
`,
] as any;
@@ -154,7 +133,7 @@ export class DeesTileNote extends DeesTileBase {
return html`
<div class="note-content">
${this.language ? html`
<div class="note-language">${this.language}</div>
<div class="tile-badge-topright note-language">${this.language}</div>
` : ''}
${this.title ? html`
@@ -169,7 +148,7 @@ export class DeesTileNote extends DeesTileBase {
</div>
${this.isHovering && lines.length > 12 ? html`
<div class="note-line-indicator">
<div class="tile-badge-corner">
Line ${this.getVisibleLineRange(lines.length)}
</div>
` : ''}