Max Gramser
95cdfa30cf
Tiles get an absolute grid slot instead of a packed order: a tile lands exactly where it is dropped, dropping on another tile swaps the two, everything else stays put, and empty cells and empty pages persist. The mockup previews the result while dragging, a new page waits below the last one, "Pagina toevoegen" keeps an empty page, empty cells accept the next tile from the picker, and the mouse no longer selects text while dragging. Storage and protocol stay version 1: `tiles[].slot` (0-47) and `pages` (1-8) are additive, the layout message carries `slots` and `pages`. Firmware 0.2.26 places tiles on those slots (`place()` next to `pack()`); older firmware packs in order as before and the editor says so. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1086 lines
26 KiB
CSS
1086 lines
26 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--bg: #f5f6f8;
|
|
--ink: #202c3c;
|
|
--muted: #697689;
|
|
--line: #e1e6ed;
|
|
--accent: #245cde;
|
|
--soft: #edf3ff;
|
|
font:
|
|
15px/1.5 system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
border: 0;
|
|
border-radius: 11px;
|
|
padding: 11px 18px;
|
|
background: var(--accent);
|
|
color: white;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
filter: brightness(0.95);
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
button:focus-visible,
|
|
input:focus-visible,
|
|
summary:focus-visible {
|
|
outline: 3px solid #83b5ff;
|
|
outline-offset: 3px;
|
|
}
|
|
input {
|
|
border: 1px solid #cdd5df;
|
|
border-radius: 10px;
|
|
padding: 11px 12px;
|
|
width: 100%;
|
|
background: white;
|
|
color: var(--ink);
|
|
}
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
}
|
|
label input {
|
|
margin-top: 7px;
|
|
}
|
|
small,
|
|
.hint {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
}
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 21px 4vw;
|
|
background: white;
|
|
border-bottom: 1px solid var(--line);
|
|
gap: 20px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.brand strong {
|
|
font-size: 19px;
|
|
}
|
|
.mark {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--ink);
|
|
color: white;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 30px;
|
|
}
|
|
main {
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
padding: 38px 4vw;
|
|
}
|
|
.intro {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
h1 {
|
|
font-size: clamp(25px, 3vw, 36px);
|
|
letter-spacing: -1.1px;
|
|
margin: 4px 0 8px;
|
|
}
|
|
h2 {
|
|
font-size: 21px;
|
|
letter-spacing: -0.4px;
|
|
margin: 0 0 14px;
|
|
}
|
|
h3 {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
margin: 8px 0 16px;
|
|
}
|
|
.intro p:not(.eyebrow) {
|
|
color: var(--muted);
|
|
}
|
|
.eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 750;
|
|
letter-spacing: 1.6px;
|
|
color: var(--muted);
|
|
margin: 0 0 7px;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
border: 1px solid var(--line);
|
|
border-radius: 30px;
|
|
padding: 6px 11px;
|
|
font-size: 12px;
|
|
white-space: normal;
|
|
background: white;
|
|
color: var(--muted);
|
|
}
|
|
.badge.online {
|
|
background: #e9f6ef;
|
|
color: #21704b;
|
|
border-color: #d6eede;
|
|
}
|
|
.workspace {
|
|
display: grid;
|
|
grid-template-columns: 210px minmax(0, 1fr);
|
|
gap: 28px;
|
|
}
|
|
aside {
|
|
padding-top: 10px;
|
|
}
|
|
aside h2 {
|
|
font-size: 14px;
|
|
}
|
|
#screens {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 18px;
|
|
}
|
|
.screen {
|
|
border: 1px solid transparent;
|
|
border-radius: 14px;
|
|
}
|
|
.screen.selected {
|
|
background: white;
|
|
border-color: var(--line);
|
|
box-shadow: 0 3px 10px #202c3c05;
|
|
}
|
|
.screen-main {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border: 0;
|
|
padding: 14px;
|
|
}
|
|
.screen-main small {
|
|
margin-top: 3px;
|
|
}
|
|
.screen-main .dot.online {
|
|
color: #2e9d62;
|
|
}
|
|
.screen-update {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 0 14px 12px;
|
|
}
|
|
.screen-update small.failed {
|
|
color: #b23b3b;
|
|
}
|
|
.badge.update {
|
|
background: #fff4e0;
|
|
color: #8a5a10;
|
|
border-color: #f4e3c2;
|
|
padding: 4px 9px;
|
|
}
|
|
.mini {
|
|
padding: 5px 11px;
|
|
font-size: 12px;
|
|
border-radius: 20px;
|
|
}
|
|
.screen-host {
|
|
display: flex;
|
|
gap: 6px;
|
|
width: 100%;
|
|
}
|
|
.screen-host input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 6px 9px;
|
|
font-size: 12px;
|
|
}
|
|
.spin {
|
|
width: 13px;
|
|
height: 13px;
|
|
flex: none;
|
|
border: 2px solid var(--line);
|
|
border-top-color: var(--ink);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.updates {
|
|
margin-top: 22px;
|
|
}
|
|
.updates h2 {
|
|
margin-bottom: 4px;
|
|
}
|
|
.updates .hint {
|
|
margin: 0 0 10px;
|
|
}
|
|
.updates #update-all {
|
|
width: 100%;
|
|
margin-bottom: 12px;
|
|
}
|
|
.check {
|
|
display: flex;
|
|
gap: 9px;
|
|
align-items: flex-start;
|
|
cursor: pointer;
|
|
}
|
|
.check input {
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: none;
|
|
margin: 2px 0 0;
|
|
padding: 0;
|
|
accent-color: var(--accent, #2e5bff);
|
|
}
|
|
.check small {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--muted);
|
|
}
|
|
.quiet {
|
|
background: transparent;
|
|
color: var(--muted);
|
|
padding: 7px;
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tool {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 14px 8px 9px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
background: white;
|
|
color: var(--ink);
|
|
text-align: left;
|
|
}
|
|
.tool:hover {
|
|
border-color: #b9cbec;
|
|
box-shadow: 0 3px 10px #202c3c0c;
|
|
}
|
|
.tool-icon {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 10px;
|
|
background: var(--soft);
|
|
color: var(--accent);
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
flex: none;
|
|
}
|
|
.tool-primary .tool-icon {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
.tool-text b {
|
|
display: block;
|
|
font-size: 13px;
|
|
}
|
|
.tool-text small {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
}
|
|
.preview-tile,
|
|
.result {
|
|
touch-action: pan-y;
|
|
cursor: grab;
|
|
}
|
|
.drag-ghost {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
opacity: 0.92;
|
|
box-shadow: 0 14px 32px #202c3c33;
|
|
background: white;
|
|
margin: 0;
|
|
}
|
|
body.dragging {
|
|
cursor: grabbing;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
/* Dragging a card must never start a text selection; the search box stays editable. */
|
|
.tile-editor,
|
|
.picker #results {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
#editor,
|
|
.empty {
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 27px;
|
|
min-width: 0;
|
|
box-shadow: 0 5px 20px #202c3c03;
|
|
}
|
|
.editor-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: start;
|
|
margin-bottom: 15px;
|
|
}
|
|
.editor-head .badge {
|
|
max-width: 240px;
|
|
}
|
|
.columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 25px;
|
|
margin-top: 30px;
|
|
}
|
|
.section-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.section-title span {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
#tiles {
|
|
padding: 0;
|
|
list-style: none;
|
|
margin: 18px 0;
|
|
}
|
|
.tile {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
margin-bottom: 10px;
|
|
background: #fcfcfd;
|
|
display: grid;
|
|
grid-template-columns: 22px minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
.tile.dragging {
|
|
opacity: 0.35;
|
|
}
|
|
.grip {
|
|
color: #9aa7b8;
|
|
cursor: grab;
|
|
font-size: 19px;
|
|
}
|
|
.tile input {
|
|
font-size: 14px;
|
|
padding: 5px 6px;
|
|
margin: 0;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
.tile input:focus {
|
|
border-color: #aac4fa;
|
|
background: white;
|
|
}
|
|
.tile small {
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
padding-left: 6px;
|
|
}
|
|
.tile-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.tile-actions button {
|
|
padding: 1px 6px;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
background: transparent;
|
|
color: var(--muted);
|
|
}
|
|
.page-break {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin: 18px 0 9px;
|
|
}
|
|
.picker {
|
|
background: #f7f9fc;
|
|
padding: 18px;
|
|
border-radius: 13px;
|
|
align-self: start;
|
|
}
|
|
.picker label {
|
|
font-size: 14px;
|
|
}
|
|
.filters {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-wrap: wrap;
|
|
margin: 13px 0;
|
|
}
|
|
.filters button {
|
|
font-size: 11px;
|
|
padding: 5px 9px;
|
|
background: white;
|
|
color: var(--muted);
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
}
|
|
.filters button.active {
|
|
background: var(--soft);
|
|
color: var(--accent);
|
|
border-color: #c9dafa;
|
|
}
|
|
#results {
|
|
max-height: 450px;
|
|
overflow: auto;
|
|
}
|
|
.result {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
text-align: left;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
padding: 11px 5px;
|
|
border-bottom: 1px solid var(--line);
|
|
border-radius: 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.result small {
|
|
font-size: 11px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.result .plus {
|
|
color: var(--accent);
|
|
font-size: 22px;
|
|
}
|
|
.savebar {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 6;
|
|
margin: 25px -27px -27px;
|
|
padding: 16px 27px;
|
|
background: #ffffffee;
|
|
backdrop-filter: blur(6px);
|
|
border-top: 1px solid var(--line);
|
|
border-radius: 0 0 18px 18px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.savebar strong {
|
|
font-size: 13px;
|
|
}
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 400px;
|
|
text-align: center;
|
|
}
|
|
.empty p {
|
|
max-width: 400px;
|
|
color: var(--muted);
|
|
}
|
|
.empty-icon {
|
|
font-size: 60px;
|
|
color: #9cafd0;
|
|
}
|
|
dialog {
|
|
border: 1px solid var(--line);
|
|
border-radius: 20px;
|
|
max-width: 620px;
|
|
width: calc(100% - 28px);
|
|
padding: 28px;
|
|
color: var(--ink);
|
|
max-height: 90vh;
|
|
}
|
|
dialog::backdrop {
|
|
background: #17223280;
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
.dialog-head {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: space-between;
|
|
gap: 15px;
|
|
}
|
|
dialog p {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
}
|
|
fieldset {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 23px 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
legend {
|
|
font-weight: 600;
|
|
margin-bottom: 9px;
|
|
}
|
|
.board {
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
padding: 13px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-size: 13px;
|
|
}
|
|
.board:has(input:checked) {
|
|
background: var(--soft);
|
|
border-color: #9bb9fa;
|
|
}
|
|
.board input {
|
|
width: auto;
|
|
margin: 0;
|
|
}
|
|
.board small {
|
|
font-size: 11px;
|
|
}
|
|
dialog label {
|
|
margin-bottom: 15px;
|
|
font-size: 14px;
|
|
}
|
|
.steps {
|
|
padding-left: 20px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.steps li {
|
|
padding-left: 4px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.steps b {
|
|
color: var(--ink);
|
|
}
|
|
#toast {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 14px 22px;
|
|
background: var(--ink);
|
|
color: white;
|
|
border-radius: 13px;
|
|
box-shadow: 0 5px 30px #0003;
|
|
max-width: 90vw;
|
|
z-index: 10;
|
|
}
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
@media (max-width: 1000px) {
|
|
.workspace {
|
|
grid-template-columns: 160px minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.columns {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.editor-head {
|
|
display: block;
|
|
}
|
|
.editor-head .badge {
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
@media (max-width: 620px) {
|
|
main {
|
|
padding: 25px 16px;
|
|
}
|
|
.tool-text small {
|
|
display: none;
|
|
}
|
|
.savebar {
|
|
margin: 25px -18px -18px;
|
|
padding: 14px 18px;
|
|
}
|
|
.workspace {
|
|
display: block;
|
|
}
|
|
aside {
|
|
margin-bottom: 18px;
|
|
}
|
|
#screens {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
}
|
|
.screen {
|
|
min-width: 160px;
|
|
}
|
|
aside > .hint {
|
|
display: none;
|
|
}
|
|
.intro {
|
|
display: block;
|
|
}
|
|
.intro > .badge {
|
|
margin-top: 8px;
|
|
}
|
|
#editor {
|
|
padding: 18px;
|
|
}
|
|
.savebar {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
header {
|
|
padding: 15px;
|
|
}
|
|
.brand small {
|
|
display: none;
|
|
}
|
|
header button {
|
|
font-size: 12px;
|
|
}
|
|
fieldset {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
font:
|
|
12px/1.5 ui-monospace,
|
|
monospace;
|
|
width: 100%;
|
|
resize: vertical;
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
margin-top: 8px;
|
|
background: #f7f9fc;
|
|
color: var(--ink);
|
|
}
|
|
.yaml-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.screen-settings {
|
|
margin: 28px 0 20px;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 20px;
|
|
}
|
|
.screen-settings summary {
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 16px 28px;
|
|
margin: 20px 0;
|
|
}
|
|
.setting {
|
|
padding: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
}
|
|
.setting output {
|
|
display: block;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
.setting input[type="range"] {
|
|
padding: 0;
|
|
accent-color: var(--accent);
|
|
min-height: 32px;
|
|
}
|
|
.setting-check {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
.setting-check input {
|
|
width: 22px;
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
.setting-check output {
|
|
display: none;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.settings-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.tile-options {
|
|
margin-top: 10px;
|
|
font-size: 13px;
|
|
}
|
|
.tile-options label {
|
|
display: block;
|
|
margin: 8px 0;
|
|
}
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #d8dfe5;
|
|
border-radius: 9px;
|
|
background: white;
|
|
color: #152331;
|
|
font: inherit;
|
|
}
|
|
pre {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
max-height: 340px;
|
|
overflow: auto;
|
|
background: #f0f3f6;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
font-size: 12px;
|
|
}
|
|
#firmware-dialog {
|
|
max-width: 780px;
|
|
width: 90vw;
|
|
}
|
|
.tile-actions {
|
|
align-self: start;
|
|
}
|
|
.tile .tile-options input,
|
|
.tile .tile-options select {
|
|
cursor: auto;
|
|
}
|
|
|
|
.editor-nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin: 20px 0;
|
|
padding: 12px;
|
|
background: #eaf3fc;
|
|
border-radius: 14px;
|
|
}
|
|
.editor-nav button {
|
|
background: white;
|
|
border: 1px solid #c7d9ea;
|
|
}
|
|
.tile.selected-tile {
|
|
border-color: #009fe3;
|
|
background: #f0f9ff;
|
|
}
|
|
.tile-options summary {
|
|
cursor: pointer;
|
|
color: #007fb6;
|
|
font-weight: 650;
|
|
padding: 10px 0;
|
|
}
|
|
.tile-options > button {
|
|
margin-top: 12px;
|
|
}
|
|
.inspection-tile {
|
|
padding: 14px;
|
|
margin: 10px 0;
|
|
border: 1px solid #d8e3ed;
|
|
border-radius: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
#general-settings,
|
|
#inspector-section,
|
|
#tile-section {
|
|
scroll-margin-top: 16px;
|
|
}
|
|
|
|
/* The picker shares the screen's two-column, six-tile page structure. */
|
|
.domain-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; font-size: 22px; font-weight: 500; }
|
|
.tile { grid-template-columns: 36px minmax(0, 1fr) auto; }
|
|
.result { border: 1px solid var(--line); border-radius: 14px; background: white; margin-bottom: 8px; padding: 12px; }
|
|
.result > span:nth-child(2) { flex: 1; min-width: 0; }
|
|
.result strong { display: block; }
|
|
.result .domain-label { display: inline-block; margin: 3px 0; color: var(--muted); }
|
|
.filters button { display: inline-flex; align-items: center; gap: 5px; }
|
|
.filters .domain-icon { width: 20px; height: 20px; flex-basis: 20px; font-size: 15px; }
|
|
.screen-preview { background: #e7e7e7; border: 1px solid #d9dde2; border-radius: 22px; padding: 14px; margin-top: 14px; }
|
|
.preview-heading { display: flex; align-items: center; gap: 8px; color: #49515a; margin: 0 2px 12px; }
|
|
.preview-heading .page-note { color: var(--muted); }
|
|
.preview-heading .mini { margin-left: auto; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; background: white; color: var(--ink); border: 1px solid var(--line); }
|
|
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
|
|
.preview-tile { background: white; color: #25282c; border: 1px solid #ddd; border-radius: 15px; padding: 12px; min-height: 90px; text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
.preview-tile strong { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
|
|
.preview-tile .domain-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: 20px; }
|
|
.preview-tile.chosen { outline: 2px solid var(--accent); outline-offset: 1px; }
|
|
.preview-tile.wide { grid-column: span 2; }
|
|
/* Empty cells are real places on the screen: a drop target, and a click marks where the next tile goes. */
|
|
.preview-cell { min-height: 90px; padding: 8px; border: 1px dashed #cfd4da; border-radius: 15px; background: transparent; color: #a3abb5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 500; cursor: pointer; }
|
|
.preview-cell span { font-size: 20px; line-height: 1; }
|
|
.preview-cell small { font-size: 11px; }
|
|
.preview-cell:hover, .preview-cell:focus-visible { border-color: #9eb6cf; color: #4b5563; background: #fbfcfd; }
|
|
.preview-cell.insert-here { border: 2px dashed var(--accent); color: var(--accent); background: var(--soft); }
|
|
/* The dragged tile, drawn where it will land; the drop confirms exactly this. */
|
|
.preview-tile.placeholder { opacity: 0.6; border: 2px dashed var(--accent); background: var(--soft); box-shadow: none; cursor: default; }
|
|
.preview-tile.placeholder .preview-remove { display: none; }
|
|
.screen-preview.new-page { background: transparent; border: 2px dashed #cfd4da; }
|
|
.add-page { margin-top: 12px; width: 100%; border: 1px dashed #cfd4da; background: transparent; color: var(--muted); }
|
|
.add-page:hover:not(:disabled) { border-color: #9eb6cf; color: var(--ink); background: #fbfcfd; }
|
|
.screen-preview.new-page .preview-cell { border-color: #e3e7ec; }
|
|
.preview-slider { height: 13px; flex-basis: 100%; border-radius: 10px; background: linear-gradient(to right, #ffbf38 60%, #fff1d3 60%); }
|
|
/* Miniature direct controls on a wide mockup card, in the shapes the screen draws. */
|
|
.preview-controls { display: flex; align-items: center; gap: 4px; flex: none; margin-right: 18px; color: #1b1b1b; }
|
|
.preview-key { display: grid; place-items: center; width: 28px; height: 22px; border-radius: 7px; background: #eceef1; font-size: 14px; }
|
|
.preview-stepper { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 11px; background: #eceef1; font-size: 12px; }
|
|
.preview-stepper b { font-size: 12px; font-weight: 600; }
|
|
.preview-range { width: 60px; height: 20px; border-radius: 10px; background: linear-gradient(to right, #2196f3 35%, #d3e8fb 35%); }
|
|
.preview-toggle { position: relative; width: 34px; height: 20px; border-radius: 10px; background: #2196f3; }
|
|
.preview-toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; }
|
|
.preview-run { height: 22px; padding: 0 10px; border-radius: 11px; background: #eceef1; font-size: 12px; font-weight: 600; line-height: 22px; }
|
|
.field-hint { font-weight: 400; }
|
|
.preview-tile small { flex-basis: 100%; }
|
|
.result:hover:not(:disabled), .preview-tile:hover { border-color: #9eb6cf; box-shadow: 0 2px 7px #253f5010; }
|
|
|
|
#tiles > .tile:not(.selected-tile), #tiles > .page-break { display: none; }
|
|
#tiles > .selected-tile { background: #f8fafc; border-color: #aac4df; }
|
|
.picker { position: sticky; top: 16px; }
|
|
@media (max-width: 800px) { .picker { position: static; } }
|
|
|
|
.tile-palette { display: block; min-width: 0; margin: 12px 0; padding: 12px; border: 1px solid #d8dfe5; border-radius: 12px; }
|
|
.tile-palette legend { font-weight: 650; padding: 0 5px; }
|
|
.palette-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; margin-bottom: 10px; }
|
|
.palette-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px; color: #1b1b1b; background: white; border: 2px solid transparent; border-radius: 10px; font-size: 12px; }
|
|
.palette-choice[aria-pressed="true"] { border-color: #1674ae; background: #edf6ff; }
|
|
.palette-choice:focus-visible { outline: 3px solid #1674ae; outline-offset: 2px; }
|
|
.palette-sample { width: 36px; height: 28px; border-radius: 7px; border: 1px solid #0002; }
|
|
.palette-auto { background: linear-gradient(135deg, #fff 50%, #e5e7eb 50%); }
|
|
.palette-none { background: linear-gradient(135deg, transparent 46%, #8b95a1 46%, #8b95a1 54%, transparent 54%), #e7e7e7; border-style: dashed; }
|
|
.preview-tile.bare { background: transparent; border: 1px dashed #c3c9d0; }
|
|
.tile-palette small { color: #52616e; }
|
|
|
|
/* Tile settings sheet and in-preview removal. */
|
|
#toast button { background: transparent; color: #9fc4ff; padding: 0; font-weight: 650; }
|
|
.preview-tile { position: relative; }
|
|
.preview-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #ffffffd9; color: var(--muted); border: 1px solid var(--line); font-size: 11px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s; }
|
|
.preview-tile:hover .preview-remove, .preview-tile:focus-within .preview-remove { opacity: 1; }
|
|
.preview-remove:hover { color: #b3261e; border-color: #e7b4b0; background: white; }
|
|
@media (hover: none) { .preview-remove { opacity: 1; } }
|
|
.tile-sheet { padding: 0; width: min(560px, calc(100% - 28px)); overflow: hidden; }
|
|
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
|
|
.sheet-head > div { flex: 1; min-width: 0; }
|
|
.sheet-head strong { display: block; font-size: 16px; }
|
|
.sheet-head small { color: var(--muted); overflow-wrap: anywhere; }
|
|
.sheet-close { font-size: 15px; }
|
|
.sheet-body { padding: 16px 20px; display: grid; gap: 14px; max-height: 58vh; overflow: auto; }
|
|
.sheet-field { display: grid; gap: 7px; font-size: 12px; font-weight: 650; color: var(--muted); }
|
|
.sheet-field input { font-weight: 400; font-size: 14px; }
|
|
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.segmented button { background: #f3f5f8; color: var(--ink); border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; }
|
|
.segmented button[aria-pressed="true"] { background: var(--soft); color: var(--accent); border-color: #c9dafa; font-weight: 650; }
|
|
.sheet-foot { display: flex; gap: 10px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--line); background: #fafbfc; }
|
|
.sheet-foot .danger { color: #b3261e; margin-right: auto; }
|
|
@media (max-width: 620px) {
|
|
.tile-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 20px 20px 0 0; max-height: 90vh; }
|
|
.sheet-body { max-height: 52vh; }
|
|
}
|
|
|
|
/* Tile icons: the same Material Design Icons subset the screen's fonts carry. */
|
|
@font-face { font-family: "Tile Icons"; src: url("tile-icons.woff") format("woff"); font-display: block; }
|
|
.mdi { font-family: "Tile Icons"; font-style: normal; font-weight: normal; line-height: 1; }
|
|
.domain-icon.mdi { font-size: 22px; }
|
|
.preview-tile .domain-icon.mdi { font-size: 19px; }
|
|
.icon-current { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px 7px 7px; background: white; color: var(--ink); border: 1px solid #cdd5df; border-radius: 12px; font-size: 14px; font-weight: 500; text-align: left; }
|
|
.icon-current .mdi { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: #f3f5f8; font-size: 24px; }
|
|
.icon-current > span:nth-child(2) { flex: 1; min-width: 0; }
|
|
.icon-current small { color: var(--accent); font-weight: 600; }
|
|
.icon-picker { display: grid; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
|
|
.icon-picker input { font-size: 14px; font-weight: 400; }
|
|
.icon-list { display: grid; gap: 12px; max-height: 300px; overflow: auto; padding-right: 2px; }
|
|
.icon-list small { display: block; margin-bottom: 6px; }
|
|
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
|
|
.icon-choice { display: grid; place-items: center; height: 44px; padding: 0; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
|
|
.icon-choice .mdi { font-size: 25px; }
|
|
.icon-choice[aria-pressed="true"] { background: var(--soft); color: var(--accent); border-color: #9dbcf5; box-shadow: inset 0 0 0 1px #9dbcf5; }
|
|
.icon-choice.icon-auto { display: flex; justify-content: flex-start; gap: 10px; padding: 0 12px; font-size: 13px; font-weight: 500; }
|
|
.icon-choice.icon-auto .mdi { font-size: 22px; }
|
|
.icon-picker .hint { margin: 0; }
|
|
.icon-hint { font-weight: 400; }
|
|
|
|
/* Nieuw scherm: profiel, wifi en de eerste flash in één venster. */
|
|
.link {
|
|
background: none;
|
|
color: var(--accent);
|
|
padding: 0 0 0 8px;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
.node-line code {
|
|
background: var(--soft);
|
|
padding: 1px 6px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
}
|
|
#installer .wifi {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
margin: 0 0 16px;
|
|
padding: 12px 16px 2px;
|
|
border: 1px solid #f4e3c2;
|
|
background: #fff9ee;
|
|
border-radius: 12px;
|
|
}
|
|
#installer .wifi legend {
|
|
padding: 0 4px;
|
|
margin-bottom: 2px;
|
|
}
|
|
#installer .wifi .hint {
|
|
margin: 0 0 12px;
|
|
}
|
|
#installer select {
|
|
margin-top: 7px;
|
|
padding: 11px 12px;
|
|
border-radius: 10px;
|
|
border-color: #cdd5df;
|
|
}
|
|
.install-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-top: 18px;
|
|
}
|
|
#install-status {
|
|
color: #b23b3b;
|
|
font-size: 13px;
|
|
}
|
|
#install-note:empty {
|
|
display: none;
|
|
}
|
|
.progress-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 17px;
|
|
margin-top: 6px;
|
|
}
|
|
.progress-head .spin {
|
|
width: 17px;
|
|
height: 17px;
|
|
border-width: 3px;
|
|
}
|
|
.outcome {
|
|
font-size: 22px;
|
|
line-height: 1;
|
|
font-weight: 700;
|
|
}
|
|
.outcome.ok {
|
|
color: #21704b;
|
|
}
|
|
.outcome.bad {
|
|
color: #b23b3b;
|
|
}
|
|
.key-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 12px;
|
|
background: #f7f9fc;
|
|
margin: 4px 0 16px;
|
|
}
|
|
.key-box span {
|
|
flex: none;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
}
|
|
.key-box code {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 12px;
|
|
}
|
|
#install-log-wrap {
|
|
margin-top: 12px;
|
|
}
|
|
#install-log-wrap summary {
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--muted);
|
|
}
|
|
#install-log {
|
|
max-height: 240px;
|
|
margin: 10px 0 0;
|
|
}
|
|
|
|
/* Profiles that Home Assistant does not list yet: pairing happens outside this page. */
|
|
#pending:empty {
|
|
display: none;
|
|
}
|
|
.pending {
|
|
border: 1px dashed #b9cbec;
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 10px;
|
|
background: #f8fbff;
|
|
}
|
|
.pending strong {
|
|
display: block;
|
|
font-size: 14px;
|
|
}
|
|
.pending small {
|
|
margin: 3px 0 10px;
|
|
line-height: 1.4;
|
|
}
|
|
.pending-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
.pending-actions .quiet {
|
|
padding: 5px 9px;
|
|
font-size: 12px;
|
|
}
|
|
.steps .mini {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
}
|