Files
zigbee_card/css/zigbee_card.css
neonoverlordandClaude Opus 5.5 24ff79bd55 1.3.2: the line under each row is never cut to '...'
Brock 2026-10-20: 'remove the ...'. The ellipsis came from .zc-sub's
text-overflow: ellipsis (css/zigbee_card.css), not from the text itself.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-20 11:30:18 -07:00

59 lines
2.3 KiB
CSS

/* zigbee_card -- six rows, like every other dashboard card's list. Nextcloud's own
variables, nothing branded. */
/* the widget's header icon (the dashboard puts this class on the panel title) */
.icon-zigbee-card {
background-image: url('../img/app-dark.svg');
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center;
filter: var(--background-invert-if-dark);
}
.zc { display: flex; flex-direction: column; }
.zc-list { list-style: none; margin: 0; padding: 0; }
/* a row: the neighbours' list shape -- a 44 px round avatar, a title, a line under it,
the card's full width. Plain elements, so the theme's button styling never applies. */
.zc-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
box-sizing: border-box;
min-height: 60px;
padding: 8px;
border-radius: var(--border-radius-large, 10px);
color: var(--color-main-text);
cursor: pointer;
user-select: none;
}
.zc-row:hover, .zc-row:focus-visible { background: var(--color-background-hover); outline: none; }
.zc-row.zc-disabled { opacity: 0.5; cursor: wait; }
.zc-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-background-dark);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 22px;
line-height: 1;
}
.zc-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.zc-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the line under: shown whole, never cut to "..." (Brock 2026-10-20: "remove the ...") */
.zc-sub { color: var(--color-text-maxcontrast); white-space: nowrap; }
/* the one-line answer after a press, gone after a few seconds; takes no room while empty,
so the footer link sits where the other cards' does */
.zc-note { display: none; padding: 4px 8px; font-size: 12px; color: var(--color-text-maxcontrast); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-note:not(:empty) { display: block; }
.zc-note.zc-err { color: var(--color-error-text, var(--color-error)); }
/* the footer link: the other cards' "show more" -- centred, muted, brighter on hover */
.zc-more { display: block; text-align: center; line-height: 60px; color: var(--color-text-maxcontrast); text-decoration: none; }
.zc-more:hover, .zc-more:focus-visible { color: var(--color-main-text); }