Max Gramser
3f6889f750
The name stays on the left; up to six items go on the right: the time, an analog clock, the date, or a Home Assistant entity with its icon, showing its state or how long ago it changed, always or only while active. The add-on formats entity text in Dutch and sends it as op: header right after the layout to firmware 0.2.32+; older firmware keeps the clock of show_clock, which now follows the clock item. The firmware draws every value in one font on the name's baseline, centres icons and the dial on the digit height and measures gaps between glyph ink, so the bar looks even; the editor's mockup uses Roboto and the same integer rules. tools/render_topbar.py renders the real LVGL code on a computer (ESPHome host + SDL2). The editor's section buttons are gone. Firmware 0.2.32 for both boards. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1205 lines
36 KiB
CSS
1205 lines
36 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;
|
|
}
|
|
|
|
.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%; }
|
|
}
|
|
|
|
/* 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; }
|