diff --git a/public/img/dashboard/badge-labels.png b/public/img/dashboard/badge-labels.png index db3cf1f..6e7a700 100644 Binary files a/public/img/dashboard/badge-labels.png and b/public/img/dashboard/badge-labels.png differ diff --git a/public/img/dashboard/badge-list.png b/public/img/dashboard/badge-list.png index f6c231d..1a8f2f4 100644 Binary files a/public/img/dashboard/badge-list.png and b/public/img/dashboard/badge-list.png differ diff --git a/src/content/docs/docs/badges.md b/src/content/docs/docs/badges.md index 63d1599..abe0f99 100644 --- a/src/content/docs/docs/badges.md +++ b/src/content/docs/docs/badges.md @@ -103,7 +103,7 @@ When a second badge is reporting, a matching pill appears behind the first in th
Three app tiles: two badges show a second pill behind them, one does not -
Requests and Sonarr each have more behind the badge. Plex has one label, so nothing is stacked.
+
Seerr and Jellyfin each have more behind the badge. SABnzbd has one label, so nothing is stacked.
Hover the badge, tap it on a phone, or move focus to the tile with a keyboard. Everything the tile is reporting opens in a list, with the full numbers and no truncation. Press Escape or tap elsewhere to close it. Tapping the badge opens the list without following the link. diff --git a/src/pages/index.astro b/src/pages/index.astro index 03c87c4..5307d9e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -476,7 +476,7 @@ if (!reduced) { .ilabel{width:var(--lblw);font-size:var(--lbl);line-height:1.3846;letter-spacing:-0.0062em;font-weight:500; color:rgba(255,255,255,.90);text-shadow:0 1px 4px rgba(0,0,0,.7);text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} - .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:calc(10px * var(--gs)); + .badge{position:absolute;top:calc(-7px * var(--gs));right:calc(-7px * var(--gs));z-index:3;min-width:calc(20px * var(--gs));height:calc(20px * var(--gs));padding:0 calc(5px * var(--gs));border-radius:50px; display:flex;align-items:center;justify-content:center;font-size:calc(11px * var(--gs));line-height:1;font-weight:700;color:#fff; transform:translateZ(0)} @@ -512,8 +512,10 @@ if (!reduced) { .bdemo{display:grid;grid-template-columns:repeat(2,136px);gap:26px 16px;justify-content:center;width:100%} /* The second pill sits behind and to the side, the way the tile draws it - when a badge has more to report. */ - .badge-peek{z-index:2;right:calc(-14px * var(--gs))} + when a badge has more to report. The stack keeps its outer edge where a + single badge sits, so the front pill shifts inward instead. */ + .badge-peek{z-index:2;box-shadow:0 0 0 1.5px rgba(0,0,0,.55)} + .badge-peek + .badge{right:0} .bdemo-item{display:flex;flex-direction:column;align-items:center;gap:12px;width:136px;text-align:center} .banchor{position:relative;width:60px;height:60px;border-radius:13.4px;isolation:isolate;flex-shrink:0} .banchor::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0; @@ -641,7 +643,7 @@ if (!reduced) { .screen-inner .ilabel{width:100%;font-size:var(--lbl)} .screen-inner .badge{top:calc(-5px * var(--sc));right:calc(-5px * var(--sc)); min-width:calc(15px * var(--sc));height:calc(15px * var(--sc)); - border-radius:calc(7.5px * var(--sc));padding:0 calc(4px * var(--sc)); + border-radius:50px;padding:0 calc(4px * var(--sc)); font-size:calc(9px * var(--sc))} .screen-inner .wcell,.screen-inner .np{grid-column:span 2;grid-row:span 2; width:100%;height:auto;aspect-ratio:1;border-radius:18%;transform:none}