cosmo/dh-hotbar-cardview
1
0
Fork 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions

improve toolbar card view display, add tags display with config option to disable tags.

Browse source
This commit is contained in:
CPTN Cosmo 2026-05-04 23:40:06 +02:00
parent 373eb12a6d
commit 2bea5df640
4 changed files with 244 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

58
styles/cardview.css
View file

@ -49,7 +49,7 @@
.dh-hotbar-card .card-art-container {
position: relative;
width: 100%;
height: 180px;
height: 260px;
border-bottom: 4px solid #f2cf5b; /* Gold line */
background: #333;
display: flex;
@ -126,24 +126,43 @@
bottom: -14px;
left: 50%;
transform: translateX(-50%);
background: #1a1a1a;
background: #f2cf5b;
color: white;
font-weight: 800;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 24px;
padding: 6px 26px;
clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
.dh-hotbar-card .card-type-banner::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
background: #1a1a1a;
clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%);
z-index: -1;
}
.dh-hotbar-card .card-type-banner.ancestry {
left: auto;
right: 20px;
transform: none;
background: #f2cf5b;
background: var(--dh-card-banner-border);
color: #000;
border: 2px solid var(--dh-card-banner-border);
border: none;
}
.dh-hotbar-card .card-type-banner.ancestry::before {
background: #f2cf5b;
}
/* Adjust layout so content doesn't collide with the banner */
@ -170,6 +189,35 @@
color: var(--dh-card-text);
}
.dh-hotbar-card .card-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.dh-hotbar-card .card-tags .tag {
background: #1a1a1a;
border: 1px solid var(--dh-card-border);
border-radius: 4px;
padding: 2px 8px;
font-size: 12px;
font-weight: 600;
color: #ddd;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.dh-hotbar-card .card-tags .tag.damage-tag {
background: #441a1a;
border-color: #f2cf5b;
color: #f2cf5b;
}
.dh-hotbar-card .card-tags .tag i {
margin-right: 4px;
}
.dh-hotbar-card .card-description p {
margin: 0 0 8px 0;
}