Max Gramser
ae308e37ab
Home Assistant shows an ESPHome device action with bare field names and types only: no description, no dropdowns. The new Alerts button opens a reference page instead: per screen the exact action names (esphome.<node>_show_alert and _dismiss_alert) with copy buttons and whether the firmware is new enough, a paste-ready YAML example per screen, every field with explanation, example and the byte limits per board, all icons with glyph and name (searchable, tap copies), the colour swatches, the behaviour (timeout, button, flash, standby, replace), and the esphome.screen_alert event with an automation that waits for the button. core.alert_reference() carries the data and tests/test_alerts_reference.py keeps it equal to what both board profiles, tile_palette.h, alert_overlay.h and tile_icons.py compile. Screens carry alert_action and dismiss_action in the inventory. App only; firmware stays 0.2.31. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
1160 lines
31 KiB
CSS
1160 lines
31 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;
|
|
}
|
|
|
|
/* Alerts: the cheatsheet for esphome.<node>_show_alert. */
|
|
#alerts-dialog { max-width: 920px; width: 92vw; }
|
|
.alerts section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
|
|
.alerts h3 { font-size: 18px; letter-spacing: -0.3px; margin-bottom: 4px; }
|
|
.alerts section > p { margin-top: 4px; }
|
|
.alerts code { background: var(--soft); color: var(--ink); padding: 1px 6px; border-radius: 6px; font-size: 12px; overflow-wrap: anywhere; }
|
|
.alerts pre { max-height: none; margin: 0; flex: 1; min-width: 0; }
|
|
.alerts ol.steps { margin: 6px 0 18px; }
|
|
.alerts .steps li { margin-bottom: 8px; }
|
|
.alerts-list { padding-left: 20px; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
|
|
.alerts-list li { margin-bottom: 9px; }
|
|
.alerts-list b { color: var(--ink); }
|
|
.alerts-subhead { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted) !important; margin: 18px 0 8px !important; }
|
|
.alert-hero { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 20px; align-items: center; margin: 6px 0 4px; }
|
|
.alert-mock { background: #101820; border-radius: 16px; padding: 22px 18px; display: grid; place-items: center; }
|
|
.alert-mock-card { position: relative; width: 100%; background: #FFE1C6; border: 1px solid #0001; border-radius: 14px; padding: 12px 12px 48px 52px; color: #1b1b1b; display: grid; gap: 2px; }
|
|
.alert-mock-icon { position: absolute; left: 12px; top: 12px; font-size: 30px; }
|
|
.alert-mock-card strong { font-size: 15px; line-height: 1.2; }
|
|
.alert-mock-card > span { font-size: 12px; color: #3a3a3c; }
|
|
.alert-mock-card button { position: absolute; right: 10px; bottom: 10px; padding: 6px 16px; border-radius: 999px; background: #1b1b1b; color: white; font-size: 13px; cursor: default; }
|
|
.alerts-nav { display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
|
|
.alerts-nav button { background: var(--soft); color: var(--accent); padding: 7px 12px; font-size: 12px; border-radius: 20px; }
|
|
.alerts-nav button:hover { filter: none; background: #dfe9ff; }
|
|
.alert-screen { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; display: grid; gap: 8px; background: white; }
|
|
.alert-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
|
|
.alert-screen-head .badge { padding: 4px 9px; font-size: 12px; }
|
|
.copy-line { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
|
|
.copy-line .copy-label { flex: none; width: 96px; font-size: 12px; color: var(--muted); padding-top: 2px; }
|
|
.copy-line > code { flex: 1; min-width: 0; padding: 4px 8px; }
|
|
.copy-line .mini { flex: none; background: white; color: var(--ink); border: 1px solid var(--line); }
|
|
.alert-example { display: grid; gap: 10px; }
|
|
.alert-example label { margin: 0; }
|
|
.alert-example select { max-width: 360px; margin-top: 7px; }
|
|
.table-scroll { overflow-x: auto; }
|
|
.alerts table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
|
|
.alerts th, .alerts td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
|
|
.alerts th { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
|
|
.alerts td small { margin-top: 3px; }
|
|
.alerts td:first-child code, .alerts td code { white-space: nowrap; }
|
|
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; background: white; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); font-size: 12px; font-weight: 500; }
|
|
.chip .mdi { font-size: 18px; }
|
|
.chip code { background: none; padding: 0; color: var(--ink); }
|
|
.chip:hover { border-color: #b9cbec; filter: none; }
|
|
.alerts-search { margin: 18px 0 6px; }
|
|
.alerts-search input { font-weight: 400; }
|
|
.alert-icon-group { margin-top: 6px; }
|
|
.alert-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
|
|
.alert-icon { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 92px; padding: 10px 6px 8px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; font-weight: 500; }
|
|
.alert-icon:hover { border-color: #b9cbec; filter: none; box-shadow: 0 3px 10px #202c3c0c; }
|
|
.alert-icon .mdi { font-size: 28px; }
|
|
.alert-icon code { background: none; padding: 0; font-size: 11px; color: var(--accent); text-align: center; }
|
|
.alert-icon small { font-size: 11px; text-align: center; }
|
|
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
|
|
.swatch { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--ink); font-size: 12px; text-align: left; font-weight: 500; }
|
|
.swatch:hover { border-color: #b9cbec; filter: none; }
|
|
.swatch i { width: 34px; height: 34px; border-radius: 10px; border: 1px solid #0001; flex: none; }
|
|
.swatch span { display: grid; gap: 2px; min-width: 0; }
|
|
.swatch code { background: none; padding: 0; color: var(--ink); }
|
|
.swatch small { font-size: 11px; }
|
|
@media (max-width: 700px) {
|
|
.alert-hero { grid-template-columns: 1fr; }
|
|
.copy-line .copy-label { width: 100%; }
|
|
/* Tables stack per row on a phone; each cell shows its column name. */
|
|
.alerts table { min-width: 0; }
|
|
.alerts table tr:first-child { display: none; }
|
|
.alerts table tr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
.alerts td { display: block; padding: 0; border: 0; }
|
|
.alerts td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
|
|
.alerts td:first-child::before { display: none; }
|
|
.alerts td:first-child code { font-size: 14px; }
|
|
.copy-line > pre { flex-basis: 100%; }
|
|
}
|