Max Gramser
6809d3b941
GitHub issue #7 asked for cover.toggle on tap. ESP Screens now asks Home Assistant which actions each entity has instead of keeping lists: the editor offers On / off (covers included), sliders, controls and displays only where Home Assistant has the action, and refuses only new unsupported settings. Perform action runs any action Home Assistant offers for the tile's entity, under its own names and fields; the screen sends it with a call id and says Refused when Home Assistant refuses. Sensors round by display precision, and tiles, the top bar, timelines, vacuum chips and the inspector use Home Assistant's words where they showed raw states. Tiles show Home Assistant's icons, picked as its frontend does (the fonts grow to 309 glyphs). Existing screens keep every setting and tap as before: stored layouts load leniently, legacy taps route the same (1020 combinations), and messages are byte-identical without Home Assistant's words and icons. Firmware 0.2.58. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1516 lines
43 KiB
CSS
1516 lines
43 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;
|
|
background: #e9ecf1;
|
|
}
|
|
.screen:hover:not(.selected) {
|
|
background: #e2e6ec;
|
|
}
|
|
.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-override {
|
|
padding: 0 14px 12px;
|
|
}
|
|
.screen-override button {
|
|
width: 100%;
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
/* Settings: a view of its own next to My screens (app 0.2.45). */
|
|
.settings-groups {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 18px;
|
|
}
|
|
@media (max-width: 800px) {
|
|
.settings-groups {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
.settings-group {
|
|
display: grid;
|
|
gap: 12px;
|
|
align-content: start;
|
|
background: white;
|
|
border: 1px solid var(--line);
|
|
border-radius: 18px;
|
|
padding: 20px 22px;
|
|
}
|
|
.settings-group h2 {
|
|
margin: 0;
|
|
}
|
|
.settings-group > .hint,
|
|
.settings-group > p {
|
|
margin: 0;
|
|
}
|
|
.settings-group code {
|
|
background: var(--soft);
|
|
padding: 1px 6px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.settings-tools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
.updates #update-all {
|
|
justify-self: start;
|
|
}
|
|
.claude-skill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
a.button {
|
|
display: inline-block;
|
|
border-radius: 11px;
|
|
padding: 11px 18px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
.again {
|
|
background: white;
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
}
|
|
.again:hover {
|
|
border-color: #b9cbec;
|
|
filter: none;
|
|
}
|
|
.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-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: end;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.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-actions {
|
|
justify-content: start;
|
|
margin-top: 10px;
|
|
}
|
|
.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;
|
|
}
|
|
/* The screens sit right above it on a phone: a short prompt, not a tall empty card. */
|
|
#choose {
|
|
min-height: 0;
|
|
padding: 18px;
|
|
}
|
|
#choose .empty-icon {
|
|
display: none;
|
|
}
|
|
.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;
|
|
}
|
|
/* Screen settings: the groups and rows of the settings page on the screen itself (app 0.2.57). */
|
|
.settings-title {
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 4px 16px;
|
|
}
|
|
.settings-title h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
}
|
|
/* Columns, not a grid: the cards fill them from the top, so a short group leaves no hole beside a long one. */
|
|
.settings-cards {
|
|
column-width: 290px;
|
|
column-gap: 14px;
|
|
margin: 16px 0 4px;
|
|
}
|
|
.settings-card {
|
|
break-inside: avoid;
|
|
margin-bottom: 14px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 16px;
|
|
background: white;
|
|
padding: 14px 16px 8px;
|
|
}
|
|
.settings-card h4 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 0 0 6px;
|
|
font-size: 15px;
|
|
}
|
|
.settings-card h4 .mdi {
|
|
font-size: 20px;
|
|
color: var(--muted);
|
|
}
|
|
.setting-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
min-height: 48px;
|
|
padding: 4px 0;
|
|
font-size: 14px;
|
|
}
|
|
.setting-toggle {
|
|
cursor: pointer;
|
|
}
|
|
.setting-label {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.setting-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex: none;
|
|
}
|
|
.setting-row.inactive .setting-label,
|
|
.setting-row.inactive .setting-control {
|
|
opacity: 0.45;
|
|
}
|
|
#general-settings.offline .settings-cards {
|
|
opacity: 0.6;
|
|
}
|
|
.switch {
|
|
position: relative;
|
|
width: 46px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border-radius: 14px;
|
|
background: #c9d0d9;
|
|
transition: background 0.15s;
|
|
}
|
|
.switch::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: white;
|
|
box-shadow: 0 1px 2px #17223233;
|
|
transition: transform 0.15s;
|
|
}
|
|
.switch[aria-checked="true"] {
|
|
background: var(--accent);
|
|
}
|
|
.switch[aria-checked="true"]::after {
|
|
transform: translateX(18px);
|
|
}
|
|
/* Neither on nor off: Home Assistant has no value (the screen is offline, or the entity is off). */
|
|
.switch.unknown::after {
|
|
transform: translateX(9px);
|
|
}
|
|
.step {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
background: #eef2f7;
|
|
color: var(--ink);
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
}
|
|
.step .mdi {
|
|
font-size: 18px;
|
|
}
|
|
.step:hover:not(:disabled) {
|
|
filter: none;
|
|
background: #e1e8f1;
|
|
}
|
|
.step:active:not(:disabled) {
|
|
background: var(--soft);
|
|
color: var(--accent);
|
|
}
|
|
.setting-value {
|
|
min-width: 72px;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
.setting-choices.segmented {
|
|
flex-wrap: nowrap;
|
|
gap: 4px;
|
|
}
|
|
.setting-choices.segmented button {
|
|
padding: 6px 10px;
|
|
}
|
|
/* An end of a range greys its key; a row that waits on its switch fades as a whole instead. */
|
|
.setting-row .step:disabled {
|
|
opacity: 0.35;
|
|
}
|
|
.setting-row.inactive button:disabled {
|
|
opacity: 1;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.switch,
|
|
.switch::after {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.override-dialog {
|
|
max-width: 820px;
|
|
width: 92vw;
|
|
padding: 26px;
|
|
}
|
|
.override-intro {
|
|
max-width: 700px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.override-notice {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 11px;
|
|
padding: 12px 14px;
|
|
border: 1px solid #d8e8ff;
|
|
border-radius: 13px;
|
|
background: #f4f8ff;
|
|
color: #34506e;
|
|
font-size: 13px;
|
|
}
|
|
.override-notice strong,
|
|
.override-notice span {
|
|
display: block;
|
|
}
|
|
.override-notice strong {
|
|
color: #233c5a;
|
|
margin-bottom: 2px;
|
|
}
|
|
.override-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 25px;
|
|
height: 25px;
|
|
flex: 0 0 25px;
|
|
border-radius: 8px;
|
|
background: #dceaff;
|
|
color: #286cc2;
|
|
font-weight: 750;
|
|
}
|
|
.override-file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 18px 0 8px;
|
|
}
|
|
.override-file {
|
|
font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
color: var(--ink);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.yaml-editor {
|
|
display: grid;
|
|
grid-template-columns: 43px minmax(0, 1fr);
|
|
min-height: 340px;
|
|
border: 1px solid #bac9dc;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background: #142131;
|
|
box-shadow: 0 8px 24px #1d2d4014;
|
|
}
|
|
.yaml-gutter {
|
|
padding: 15px 10px 15px 0;
|
|
overflow: hidden;
|
|
background: #1b2b3e;
|
|
color: #71849b;
|
|
font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
text-align: right;
|
|
user-select: none;
|
|
white-space: pre;
|
|
}
|
|
#override-editor {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: 340px;
|
|
resize: vertical;
|
|
border: 0;
|
|
border-left: 1px solid #2e4158;
|
|
border-radius: 0;
|
|
outline: 0;
|
|
padding: 15px;
|
|
background: #142131;
|
|
color: #eaf2fc;
|
|
caret-color: #8ec5ff;
|
|
font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
tab-size: 2;
|
|
white-space: pre;
|
|
}
|
|
#override-editor::selection {
|
|
background: #3978bd80;
|
|
}
|
|
.override-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 9px;
|
|
}
|
|
.override-tools .hint {
|
|
margin-left: auto;
|
|
}
|
|
.override-status {
|
|
min-height: 20px;
|
|
margin: 12px 0 0;
|
|
font-size: 13px;
|
|
}
|
|
.override-status.ok {
|
|
color: #21704b;
|
|
}
|
|
.override-status.error {
|
|
color: #a53f3f;
|
|
}
|
|
.override-actions {
|
|
justify-content: flex-end;
|
|
margin-top: 8px;
|
|
}
|
|
.tile-actions {
|
|
align-self: start;
|
|
}
|
|
.tile .tile-options input,
|
|
.tile .tile-options select {
|
|
cursor: auto;
|
|
}
|
|
|
|
.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; }
|
|
.sheet-hinted { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
|
|
.field-hint.warn { color: #9a6200; }
|
|
.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; }
|
|
/* Perform action: Home Assistant's actions for the entity, then the fields of the chosen one. */
|
|
.action-current > span { display: grid; gap: 2px; flex: 1; min-width: 0; padding-left: 5px; }
|
|
.action-current .action-id { color: var(--muted); font-weight: 400; }
|
|
.action-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; padding-right: 2px; }
|
|
.action-choice { display: grid; gap: 2px; padding: 8px 12px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; text-align: left; }
|
|
.action-choice strong { font-weight: 600; }
|
|
.action-choice small { color: var(--muted); font-weight: 400; }
|
|
.action-choice[aria-pressed="true"] { background: var(--soft); border-color: #9dbcf5; box-shadow: inset 0 0 0 1px #9dbcf5; }
|
|
.action-field { margin-top: 4px; }
|
|
.action-field input, .action-field select { font-size: 14px; font-weight: 400; }
|
|
.action-number { display: flex; align-items: center; gap: 8px; }
|
|
.action-number input { flex: 1; min-width: 0; }
|
|
|
|
/* New screen: profile, Wi-Fi, and the first flash in one window. */
|
|
.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%; }
|
|
}
|
|
|
|
/* Top bar: the name on the left, up to six items on the right. */
|
|
.topbar-editor { margin-top: 4px; padding: 16px 18px 12px; border: 1px solid var(--line); border-radius: 16px; background: #f7f9fc; scroll-margin-top: 16px; transition: box-shadow 0.3s; }
|
|
.topbar-editor.flash { box-shadow: 0 0 0 3px #9dbcf5; }
|
|
.topbar-editor h3 { margin: 0; }
|
|
.topbar-fields { display: grid; grid-template-columns: minmax(180px, 2fr) 5fr; gap: 16px; margin-top: 10px; align-items: start; }
|
|
.topbar-name { font-size: 13px; }
|
|
.topbar-name input { margin-top: 6px; }
|
|
.topbar-caption { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
|
|
.topbar-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; }
|
|
.topbar-chip { position: relative; display: flex; align-items: center; gap: 8px; max-width: 260px; min-height: 46px; padding: 6px 30px 6px 8px; background: white; border: 1px solid #d5dce5; border-radius: 12px; cursor: grab; user-select: none; touch-action: pan-y; }
|
|
.topbar-chip:hover { border-color: #9eb6cf; box-shadow: 0 2px 7px #253f5010; }
|
|
.topbar-chip:focus-visible { outline: 3px solid #83b5ff; outline-offset: 2px; }
|
|
.topbar-chip .chip-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: #f0f2f5; color: #46525e; font-size: 19px; }
|
|
.chip-text { display: grid; min-width: 0; line-height: 1.25; }
|
|
.chip-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chip-text small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chip-remove { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 22px; height: 22px; padding: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 11px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity 0.15s; }
|
|
.topbar-chip:hover .chip-remove, .topbar-chip:focus-within .chip-remove { opacity: 1; }
|
|
.chip-remove:hover { color: #b3261e; background: #fdecea; }
|
|
@media (hover: none) { .chip-remove { opacity: 1; } }
|
|
.topbar-chip.is-hidden { background: #fbfcfd; border-style: dashed; }
|
|
.topbar-chip.is-hidden .chip-icon, .topbar-chip.is-hidden strong { opacity: 0.55; }
|
|
.topbar-chip.is-overflow { border-style: dashed; border-color: #e0b36a; background: repeating-linear-gradient(135deg, #fff 0 8px, #fff6e6 8px 16px); }
|
|
.topbar-chip.is-overflow small { color: #9a6200; }
|
|
.topbar-chip.dragging-chip { border: 2px dashed var(--accent); background: var(--soft); cursor: grabbing; }
|
|
.topbar-chip.just-added { animation: chip-added 1.2s ease-out; }
|
|
@keyframes chip-added { from { box-shadow: 0 0 0 4px #9dbcf5; } to { box-shadow: 0 0 0 0 #9dbcf500; } }
|
|
.topbar-add { min-height: 46px; padding: 8px 14px; border: 1px dashed #b9c4d0; border-radius: 12px; background: transparent; color: var(--accent); font-size: 13px; }
|
|
.topbar-add:hover:not(:disabled) { border-color: var(--accent); background: white; filter: none; }
|
|
#topbar-hint { margin: 10px 0 0; }
|
|
#topbar-hint.warn { color: #9a6200; }
|
|
@media (max-width: 700px) { .topbar-fields { grid-template-columns: 1fr; } .topbar-chip { max-width: 100%; } }
|
|
|
|
/* The bar on a mockup page: an SVG in the board's own pixels (Roboto and the tile icons, the same
|
|
placement rules as the firmware), scaled with the page. */
|
|
@font-face { font-family: "Bar Roboto"; src: url("bar-roboto-400.woff") format("woff"); font-weight: 400; font-display: block; }
|
|
@font-face { font-family: "Bar Roboto"; src: url("bar-roboto-500.woff") format("woff"); font-weight: 500; font-display: block; }
|
|
.preview-bar-wrap { margin: -4px 0 6px; border-radius: 8px; cursor: pointer; }
|
|
.preview-bar-wrap:hover { background: #dfe3e8; box-shadow: 0 0 0 5px #dfe3e8; }
|
|
.preview-bar { display: block; width: 100%; height: auto; overflow: visible; }
|
|
|
|
/* Top bar sheet. */
|
|
.topbar-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
|
|
.topbar-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; text-align: left; font-weight: 500; }
|
|
.topbar-option:hover:not(:disabled) { border-color: #9eb6cf; filter: none; box-shadow: 0 2px 7px #253f5010; }
|
|
.topbar-option .mdi { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: #f0f2f5; color: #46525e; font-size: 21px; }
|
|
.topbar-option > span:last-child { display: grid; min-width: 0; }
|
|
.topbar-option strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.topbar-option small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.topbar-results { display: grid; gap: 6px; max-height: 260px; overflow: auto; margin-top: 8px; }
|
|
.topbar-results .topbar-option { width: 100%; }
|
|
.topbar-results .hint { margin: 4px 0; }
|
|
.topbar-live { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #e7e7e7; }
|
|
.topbar-live small { color: #52606d; font-weight: 500; }
|
|
.topbar-sample { display: block; height: auto; max-width: 60%; overflow: visible; }
|
|
#topbar-sheet .sheet-head .domain-icon { background: #f0f2f5; color: #46525e; }
|
|
.icon-choice.icon-none .mdi { width: 22px; height: 22px; border: 1.5px dashed #b9c4d0; border-radius: 6px; }
|