homeassistant_espscreen/screen_manager/app/static/style.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(.95)}button:disabled{opacity:.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:-.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{text-align:left;background:transparent;color:var(--ink);border:1px solid transparent;padding:14px}.screen.selected{background:white;border-color:var(--line);box-shadow:0 3px 10px #202c3c05}.screen small{margin-top:3px}.quiet{background:transparent;color:var(--muted);padding:7px}#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:.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{margin-top:25px;padding-top:20px;border-top:1px solid var(--line);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}.help{margin:26px 0 0 238px;color:var(--muted);font-size:13px}.help summary{cursor:pointer;font-weight:600}.help p{margin-top:15px}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%);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}.help{margin-left:178px}.editor-head{display:block}.editor-head .badge{margin-bottom:10px}}@media(max-width:620px){main{padding:25px 16px}.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}.help{margin-left:0}.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}

.firmware-link{margin:26px 0 0 238px;font-size:13px}.firmware-link a{color:var(--accent);text-decoration:none;font-weight:600}@media(max-width:1000px){.firmware-link{margin-left:178px}}@media(max-width:620px){.firmware-link{margin-left:0}}