christianandClaude Opus 5.5
0a6cec88aa
The picker row (page list, Clear, Done) is gone. Each Companion page is now its own ＋ entry, titled with the page's name, showing the whole page minus page up/down. The grid icon switches the tile to choosing: click buttons to take them out or put them back, click the icon again when done. The gear holds one switch, Page layout (Companion's rows and columns, or packed). - Tiles follow their page by Companion's page id and buttons by row/column, so inserted pages and re-imported pages keep showing. - A tile remounted after a settings change asks GET /state for the snapshot the already-open stream sent, instead of waiting blank. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
108 lines
2.7 KiB
CSS
108 lines
2.7 KiB
CSS
/* Companion Buttons — scoped under its tile via [data-module="companion-buttons"],
|
|
styled with the shell's CSS variables only. The button pictures carry
|
|
Companion's own colours; everything around them follows the theme. */
|
|
|
|
[data-module="companion-buttons"] .cb-root {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cb-cols, 1), var(--cb-size, 64px));
|
|
grid-auto-rows: var(--cb-size, 64px);
|
|
gap: 6px;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-grid[hidden] { display: none; }
|
|
|
|
[data-module="companion-buttons"] .cb-face {
|
|
position: relative;
|
|
width: var(--cb-size, 64px);
|
|
height: var(--cb-size, 64px);
|
|
border-radius: 8%;
|
|
overflow: hidden;
|
|
background: color-mix(in srgb, var(--text) 6%, transparent);
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
user-select: none;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-face.is-waiting {
|
|
animation: cb-wait 1.4s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes cb-wait {
|
|
from { opacity: 0.35; }
|
|
to { opacity: 0.8; }
|
|
}
|
|
|
|
/* A ticked place with no button on it any more. */
|
|
[data-module="companion-buttons"] .cb-face.is-empty {
|
|
background: transparent;
|
|
outline: 1px dashed var(--border);
|
|
outline-offset: -1px;
|
|
}
|
|
|
|
/* Companion gone: the last pictures stay, faded, so nobody reads them as live. */
|
|
[data-module="companion-buttons"] .cb-root.is-offline .cb-face {
|
|
opacity: 0.3;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-banner {
|
|
flex: none;
|
|
margin-bottom: 6px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background: color-mix(in srgb, var(--danger) 18%, transparent);
|
|
color: var(--danger);
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-banner[hidden] { display: none; }
|
|
|
|
[data-module="companion-buttons"] .cb-empty {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-empty[hidden] { display: none; }
|
|
|
|
/* Choosing: the whole page is shown and clickable; buttons this tile leaves out are faded. */
|
|
[data-module="companion-buttons"] .cb-root.is-choosing .cb-face {
|
|
cursor: pointer;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-root.is-choosing .cb-face:hover {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
[data-module="companion-buttons"] .cb-root.is-choosing .cb-face.is-off {
|
|
opacity: 0.25;
|
|
filter: grayscale(1);
|
|
}
|