Miayui
151 lines
37 KiB
CSS
151 lines
37 KiB
CSS
:root{color-scheme:light;--ink:#153330;--muted:#71827f;--line:#dbe7e4;--surface:#fff;--soft:#f3f7f6;--teal:#087168;--teal-dark:#05574f;--mint:#daf3ee;--mint-2:#b7e7dd;--navy:#163d49;--amber:#c98225;--red:#b84854;--red-soft:#fce9eb;--shadow:0 18px 52px rgba(24,65,59,.1);font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-synthesis:none}
|
|
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:1100px;color:var(--ink);background:radial-gradient(circle at 76% -10%,rgba(166,226,215,.32),transparent 30rem),#f3f7f6}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.46}[hidden]{display:none!important}:focus-visible{outline:3px solid rgba(8,113,104,.2);outline-offset:2px}
|
|
.topbar{display:grid;grid-template-columns:275px 1fr auto;height:66px;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(253,254,254,.94);backdrop-filter:blur(16px)}
|
|
.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{display:grid;width:39px;height:39px;place-items:center;border-radius:13px;color:#fff;font-size:18px;font-weight:900;background:var(--teal);box-shadow:0 8px 20px rgba(8,113,104,.23)}.brand>span:last-child{display:grid;line-height:1.05}.brand strong{font-size:15px}.brand small{margin-top:5px;color:var(--muted);font-size:9px}
|
|
.scope-tabs{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);font-size:10px}.scope-tabs .active{color:var(--teal);font-weight:900}.scope-tabs i{width:1px;height:13px;background:var(--line)}.scope-tabs b{padding:4px 7px;border-radius:7px;color:#247b69;font-size:8px;background:var(--mint)}
|
|
.topbar-actions{display:flex;gap:7px;align-items:center}.connection-button,.reset-button,.settings-button{height:39px;border:1px solid var(--line);border-radius:12px;background:#fff}.connection-button{display:flex;gap:8px;align-items:center;padding:0 12px;color:var(--muted);font-size:10px;font-weight:800}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(201,130,37,.11)}.connection-button[data-state=online] .connection-dot{background:#35a879;box-shadow:0 0 0 4px rgba(53,168,121,.11)}.connection-button[data-state=offline] .connection-dot{background:var(--red)}.reset-button{padding:0 13px;color:var(--red);font-size:10px;font-weight:800;border-color:#efcbd0;background:var(--red-soft)}.settings-button{width:39px;color:var(--muted)}
|
|
.screen-shell{display:grid;grid-template-rows:82px minmax(0,1fr) auto;height:calc(100dvh - 66px);min-height:0;padding:12px 16px 15px}
|
|
.command-strip{display:grid;grid-template-columns:minmax(305px,.8fr) minmax(430px,1.2fr) 82px;gap:16px;align-items:center}.command-heading{display:flex;gap:11px;align-items:center}.command-orbit{display:grid;width:45px;height:45px;place-items:center;border:1px solid #b9dcd4;border-radius:15px;color:var(--teal);font-size:11px;font-weight:900;background:#fff;box-shadow:0 8px 20px rgba(24,65,59,.06)}.command-heading div>span{color:var(--teal);font-size:7px;font-weight:900;letter-spacing:.14em}.command-heading h1{margin:4px 0 0;font-size:18px;letter-spacing:-.025em;white-space:nowrap}
|
|
.command-composer{display:grid;grid-template-columns:minmax(0,1fr) 36px auto;gap:6px;align-items:center;min-height:50px;padding:6px;border:1px solid #c7dfda;border-radius:16px;background:#fff;box-shadow:0 9px 28px rgba(24,65,59,.07)}.command-composer textarea{height:36px;padding:7px 9px;resize:none;border:0;outline:0;color:var(--ink);font-size:11px;line-height:22px;background:transparent}.command-composer textarea::placeholder{color:#a0aeac}.voice-button{width:36px;height:36px;border:0;border-radius:11px;color:var(--teal);background:var(--mint)}.voice-button.listening{color:#fff;background:var(--red);animation:pulse 1.2s infinite}.execute-button{height:37px;padding:0 13px;border:0;border-radius:11px;color:#fff;font-size:9px;font-weight:900;background:var(--teal)}.execute-button span{margin-left:7px;font-size:13px}.session-chip{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:4px;align-items:end;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}.session-chip span{grid-column:1/-1;color:var(--muted);font-size:7px}.session-chip strong{font-size:20px;line-height:1}.session-chip small{color:var(--muted);font-size:8px}
|
|
.dashboard-grid{display:grid;grid-template-columns:minmax(680px,1fr) 390px;gap:13px;min-width:0;min-height:0}.peripheral-board,.vehicle-board{min-height:0;border:1px solid var(--line);border-radius:21px;background:#fff;box-shadow:var(--shadow)}.peripheral-board{display:grid;grid-template-rows:68px minmax(0,1fr);padding:16px}.board-heading{display:flex;align-items:flex-start;justify-content:space-between}.eyebrow{color:var(--teal);font-size:7px;font-weight:900;letter-spacing:.14em}.board-heading h2,.vehicle-heading h2{margin:4px 0 3px;font-size:18px;letter-spacing:-.025em}.board-heading p{margin:0;color:var(--muted);font-size:8px}.board-actions{display:flex;gap:8px;align-items:center}.pager{display:flex;gap:5px;align-items:center}.pager button{width:28px;height:28px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}.pager span{min-width:35px;color:var(--muted);font-size:8px;text-align:center}.add-hardware-button{height:34px;padding:0 12px;border:0;border-radius:10px;color:#fff;font-size:8px;font-weight:900;background:var(--teal)}
|
|
.hardware-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;min-height:0}.hardware-card,.hardware-suggestion{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;padding:11px;border:1px solid var(--line);border-radius:17px;overflow:hidden;background:linear-gradient(150deg,#fff,#f7faf9)}.hardware-card::before{position:absolute;top:0;left:0;width:4px;height:100%;content:"";background:var(--card-color,var(--teal))}.hardware-head{display:flex;gap:9px;align-items:center;margin-bottom:8px}.hardware-icon{display:grid;width:37px;height:37px;flex:0 0 37px;place-items:center;border-radius:12px;font-size:19px;background:var(--mint)}.hardware-head-main{min-width:0;flex:1}.hardware-head-main small,.hardware-head-main strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hardware-head-main small{color:var(--teal);font-size:7px;font-weight:900}.hardware-head-main strong{margin-top:3px;font-size:11px}.hardware-progress{color:var(--muted);font-size:7px;white-space:nowrap}.delete-hardware{width:25px;height:25px;border:0;border-radius:8px;color:#96a6a3;background:transparent}.delete-hardware:hover{color:var(--red);background:var(--red-soft)}
|
|
.preset-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:5px;min-height:0}.preset-action{position:relative;display:grid;grid-template-rows:1fr auto;min-width:0;padding:6px;border:1px solid #e0e9e7;border-radius:10px;background:#f8faf9}.preset-action.learned{border-color:#add8cf;background:#eef9f6}.action-main{display:grid;gap:2px;align-content:center;min-width:0;border:0;text-align:left;background:transparent}.action-main strong{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.action-main small{color:var(--muted);font-size:6px}.preset-action.learned .action-main small{color:#26836d}.action-controls{display:flex;gap:3px;align-items:center;justify-content:space-between}.learn-action,.emit-action{height:21px;padding:0 6px;border:0;border-radius:6px;color:#fff;font-size:6px;font-weight:900;background:var(--teal)}.forget-action{width:21px;height:21px;border:0;border-radius:6px;color:#9aa8a6;font-size:9px;background:transparent}.forget-action:hover{color:var(--red);background:var(--red-soft)}.slot-number{color:#879794;font:6px Consolas,monospace}
|
|
.hardware-suggestion{place-items:center;align-content:center;text-align:center;border-style:dashed;background:var(--soft)}.suggestion-types{display:flex;gap:7px;align-items:center;justify-content:center;margin-bottom:9px}.suggestion-types>span{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;font-size:16px;background:#fff}.suggestion-preview{display:flex;gap:4px}.suggestion-preview i{padding:5px 6px;border-radius:7px;color:var(--teal);font-size:6px;font-style:normal;background:var(--mint)}.hardware-suggestion strong{font-size:10px}.hardware-suggestion p{max-width:230px;margin:5px 0 9px;color:var(--muted);font-size:7px;line-height:1.5}.hardware-suggestion button{height:29px;padding:0 10px;border:1px solid #b9dcd4;border-radius:9px;color:var(--teal);font-size:7px;font-weight:900;background:#fff}
|
|
.vehicle-board{display:grid;grid-template-rows:auto auto minmax(0,1fr);padding:15px;background:linear-gradient(155deg,#f9fbfb,#eef6f4)}.vehicle-heading{display:flex;align-items:flex-start;justify-content:space-between}.future-badge{padding:5px 7px;border-radius:7px;color:#436d66;font-size:7px;font-weight:900;background:#dfece9}.vehicle-intro{margin:5px 0 9px;color:var(--muted);font-size:7px}.vehicle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;min-height:0}.vehicle-card{display:grid;grid-template-rows:auto minmax(0,1fr);padding:9px;border:1px solid #d6e4e1;border-radius:14px;background:#fff}.vehicle-card-head{display:flex;gap:7px;align-items:center;margin-bottom:6px}.vehicle-icon{display:grid;width:28px;height:28px;place-items:center;border-radius:9px;color:var(--teal);font-size:14px;background:var(--mint)}.vehicle-card-head div{min-width:0;flex:1}.vehicle-card-head strong,.vehicle-card-head small{display:block}.vehicle-card-head strong{font-size:9px}.vehicle-card-head small{margin-top:2px;color:#91a09d;font:6px Consolas,monospace}.vehicle-card-head span:last-child{color:#8b9b98;font-size:6px}.vehicle-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;align-content:start}.vehicle-action{min-height:24px;padding:0 5px;overflow:hidden;border:1px solid #e2e9e7;border-radius:7px;color:#536c68;font-size:6px;text-overflow:ellipsis;white-space:nowrap;background:#f3f6f5}.vehicle-action:hover{color:var(--teal);border-color:#b9dcd4;background:var(--mint)}
|
|
.execution-bar{display:grid;grid-template-columns:auto minmax(140px,.5fr) minmax(250px,1fr) auto;gap:10px;align-items:center;min-height:44px;margin-top:9px;padding:7px 11px;border-radius:13px;color:#fff;background:var(--navy)}.execution-dot{width:8px;height:8px;border-radius:50%;background:#72dfcb;box-shadow:0 0 0 5px rgba(114,223,203,.12)}.execution-bar strong,.execution-bar small{display:block}.execution-bar strong{font-size:8px}.execution-bar small{margin-top:2px;color:rgba(255,255,255,.6);font-size:6px}.run-plan{display:flex;gap:4px;overflow:hidden}.run-step{max-width:105px;padding:5px 7px;overflow:hidden;border-radius:7px;color:rgba(255,255,255,.68);font-size:6px;text-overflow:ellipsis;white-space:nowrap;background:rgba(255,255,255,.08)}.run-step.active{color:var(--navy);background:#8ce1d1}.run-step.done{color:#fff;background:rgba(69,183,143,.5)}#runProgress{font-size:7px;font-weight:900}
|
|
dialog{margin:auto;padding:0;border:0;color:var(--ink);background:#fff}dialog::backdrop{background:rgba(12,36,33,.57);backdrop-filter:blur(5px)}.modal{width:min(680px,calc(100% - 40px));max-height:calc(100dvh - 38px);overflow:auto;border-radius:23px;box-shadow:0 34px 100px rgba(7,36,33,.35)}.modal-header{position:sticky;top:0;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;padding:19px 22px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.95);backdrop-filter:blur(12px)}.modal-header h2{margin:4px 0 2px;font-size:19px}.modal-header p{margin:0;color:var(--muted);font-size:8px}.modal-close{display:grid;width:35px;height:35px;place-items:center;border:0;border-radius:11px;color:var(--muted);font-size:18px;background:var(--soft)}
|
|
.add-hardware-modal form{padding:18px 22px 22px}.type-chooser{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.type-choice{display:flex;gap:8px;align-items:center;min-height:51px;padding:8px;border:1px solid var(--line);border-radius:12px;text-align:left;background:#fff}.type-choice span{display:grid;width:32px;height:32px;place-items:center;border-radius:10px;font-size:16px;background:var(--mint)}.type-choice strong,.type-choice small{display:block}.type-choice strong{font-size:9px}.type-choice small{margin-top:2px;color:var(--muted);font-size:6px}.type-choice.active{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal);background:#f0faf7}.hardware-name-field,.bridge-field{display:grid;gap:6px;margin-top:14px;font-size:9px;font-weight:800}.hardware-name-field input,.bridge-field input,.advanced-fields input,.advanced-fields select,.danger-modal input{width:100%;min-height:41px;padding:0 11px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#fff}.preset-preview{margin:13px 0;padding:11px;border-radius:12px;background:var(--soft)}.preset-preview>span{color:var(--muted);font-size:7px}.preset-preview div{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}.preset-preview i{padding:5px 7px;border-radius:7px;color:var(--teal);font-size:7px;font-style:normal;background:var(--mint)}.modal-primary,.modal-secondary,.danger-primary{min-height:41px;padding:0 14px;border-radius:12px;font-size:9px;font-weight:900}.modal-primary{width:100%;border:0;color:#fff;background:var(--teal)}.modal-secondary{border:1px solid var(--line);background:#fff}
|
|
.stepper{display:flex;align-items:center;justify-content:center;padding:15px 20px 0;color:#95a5a2;font-size:8px}.stepper span{display:flex;gap:5px;align-items:center}.stepper b{display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:#edf2f0}.stepper span.active{color:var(--teal);font-weight:900}.stepper span.active b{color:#fff;background:var(--teal)}.stepper i{width:38px;height:1px;margin:0 7px;background:var(--line)}.learn-page{padding:20px 22px 22px}.learn-target-card{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:11px;align-items:center;padding:15px;border:1px solid #cfe2de;border-radius:15px;background:#f5faf8}.learn-target-card>span{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;font-size:24px;background:var(--mint)}.learn-target-card small,.learn-target-card strong{display:block}.learn-target-card small{color:var(--teal);font-size:7px}.learn-target-card strong{margin-top:4px;font-size:11px}.learn-target-card>i{color:#9baaa7;font-style:normal}.target-action{padding-left:12px;border-left:1px solid var(--line)}.no-input-note{margin:11px 0;color:var(--muted);font-size:8px;text-align:center}.advanced-fields{margin:0 0 13px;padding:11px;border:1px solid var(--line);border-radius:11px}.advanced-fields summary{color:var(--teal);font-size:8px;font-weight:900;cursor:pointer}.advanced-fields>div{display:grid;grid-template-columns:1.4fr .7fr .6fr;gap:7px;margin-top:9px}.advanced-fields label{display:grid;gap:5px;font-size:7px}.advanced-fields input,.advanced-fields select{min-height:36px}
|
|
.centered-page{min-height:370px;text-align:center}.centered-page h3{margin:16px 0 6px;font-size:18px}.centered-page>p{max-width:430px;margin:0 auto;color:var(--muted);font-size:8px;line-height:1.6}.learn-animation{position:relative;display:grid;width:108px;height:108px;margin:14px auto 0;place-items:center;border-radius:50%;background:var(--mint)}.learn-animation span{display:grid;width:55px;height:55px;place-items:center;border-radius:17px;color:#fff;font-size:13px;font-weight:900;background:var(--teal)}.learn-animation i{position:absolute;width:108px;height:108px;border:1px solid var(--teal);border-radius:50%;opacity:0}.learn-animation[data-state=listening] i{animation:wave 2s infinite}.learn-animation[data-state=listening] i:nth-child(3){animation-delay:.55s}.learn-animation[data-state=listening] i:nth-child(4){animation-delay:1.1s}.countdown{display:block;margin-top:11px;color:var(--teal);font-size:23px}.modal-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;max-width:410px;margin:19px auto 0}.modal-actions .modal-primary{width:auto}.cancel-link{margin-top:10px;border:0;color:var(--red);font-size:7px;background:transparent}.test-success{display:grid;width:84px;height:84px;margin:27px auto 0;place-items:center;border-radius:50%;color:#fff;font-size:31px;background:#35a879;box-shadow:0 0 0 12px rgba(53,168,121,.1)}
|
|
.danger-modal{width:min(455px,calc(100% - 40px));padding:26px;text-align:center}.danger-symbol{display:grid;width:56px;height:56px;margin:0 auto 14px;place-items:center;border-radius:17px;color:var(--red);font-size:26px;background:var(--red-soft)}.danger-modal h2{margin:6px 0 8px;font-size:20px}.danger-modal>p{margin:0 0 17px;color:var(--muted);font-size:8px;line-height:1.7}.danger-modal label{display:grid;gap:6px;text-align:left;font-size:8px;font-weight:800}.danger-primary{border:0;color:#fff;background:var(--red)}.connection-modal{width:min(500px,calc(100% - 40px))}.connection-overview{display:flex;gap:10px;align-items:center;margin:18px 22px 13px;padding:12px;border-radius:13px;background:var(--soft)}.large-connection-dot{width:10px;height:10px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(201,130,37,.1)}.connection-overview[data-state=online] .large-connection-dot{background:#35a879}.connection-overview[data-state=offline] .large-connection-dot{background:var(--red)}.connection-overview div{min-width:0;flex:1}.connection-overview strong{font-size:9px}.connection-overview p{margin:3px 0 0;color:var(--muted);font-size:7px}.connection-overview button{height:30px;border:1px solid var(--line);border-radius:9px;font-size:7px;background:#fff}.connection-modal>.bridge-field{margin:0 22px 13px}.connection-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 22px 13px}.connection-facts span{padding:9px;border-radius:10px;color:var(--muted);font-size:7px;text-align:center;background:var(--soft)}.connection-facts b{display:block;margin-top:3px;color:var(--ink);font-size:9px}.connection-modal>.modal-primary{width:calc(100% - 44px);margin:0 22px 22px}
|
|
.toast-stack{position:fixed;right:17px;bottom:17px;z-index:100;display:grid;gap:7px;width:min(320px,calc(100% - 34px));pointer-events:none}.toast{padding:11px 13px;border-radius:11px;color:#fff;font-size:8px;line-height:1.5;background:var(--navy);box-shadow:0 14px 36px rgba(11,42,39,.25);animation:toast-in .17s ease both}.toast.success{background:#18745a}.toast.error{background:#913740}
|
|
@keyframes wave{from{transform:scale(.72);opacity:.52}to{transform:scale(1.45);opacity:0}}@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(184,72,84,.12)}}@keyframes toast-in{from{transform:translateY(8px);opacity:0}}
|
|
@media(max-width:1260px){body{min-width:1000px}.topbar{grid-template-columns:240px 1fr auto}.dashboard-grid{grid-template-columns:minmax(620px,1fr) 350px}.scope-tabs{display:none}.preset-actions{grid-template-columns:repeat(4,minmax(0,1fr))}.vehicle-grid{gap:5px}.vehicle-card{padding:7px}}
|
|
@media(max-height:720px){.topbar{height:61px}.screen-shell{height:calc(100dvh - 61px);grid-template-rows:70px minmax(0,1fr) auto;padding-top:8px}.command-strip{height:66px}.peripheral-board{padding:12px;grid-template-rows:59px minmax(0,1fr)}.hardware-card{padding:8px}.hardware-head{margin-bottom:5px}.preset-action{padding:4px}.vehicle-board{padding:11px}.vehicle-intro{margin-bottom:5px}}
|
|
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}
|
|
|
|
/* v5：六类玩具区域固定存在；每个区域在原位切换同类具体硬件。 */
|
|
.hardware-total{display:grid;justify-items:end;align-content:start;min-width:92px;padding:7px 10px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}.hardware-total strong{color:var(--teal);font-size:15px;line-height:1}.hardware-total span{margin-top:3px;color:var(--muted);font-size:6px}
|
|
.hardware-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:7px}.hardware-card.type-region{grid-template-rows:auto minmax(0,1fr) auto;padding:9px;border-radius:15px}.hardware-card.type-region::before{width:3px}.type-region .hardware-head{gap:5px;margin-bottom:6px}.type-region .hardware-icon{width:31px;height:31px;flex-basis:31px;border-radius:10px;font-size:15px}.type-region .hardware-head-main small{font-size:6px}.hardware-selector{display:block;width:100%;height:20px;margin-top:2px;padding:0 18px 0 5px;overflow:hidden;border:1px solid #d6e4e1;border-radius:6px;color:var(--ink);font-size:7px;font-weight:800;text-overflow:ellipsis;background:#fff}.no-hardware{display:block;margin-top:3px;overflow:hidden;color:#91a09d;font-size:6px;text-overflow:ellipsis;white-space:nowrap}.type-region .hardware-progress{font-size:6px}.add-same-type,.type-region .delete-hardware{display:grid;width:21px;height:21px;flex:0 0 21px;place-items:center;padding:0;border:0;border-radius:7px;font-size:12px}.add-same-type{color:var(--teal);background:var(--mint)}.add-same-type:hover{color:#fff;background:var(--teal)}
|
|
.type-region .preset-actions{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:4px}.type-region .preset-action{padding:5px;border-radius:9px}.type-region .preset-action.preview{border-style:dashed;background:#fafcfc}.type-region .action-main{gap:1px}.type-region .action-main strong{font-size:7px}.type-region .action-main small{font-size:5.5px}.type-region .learn-action,.type-region .emit-action{height:18px;padding:0 5px;border-radius:5px;font-size:5.5px}.type-region .forget-action{width:18px;height:18px}.type-region .slot-number{max-width:54px;overflow:hidden;font-size:5px;text-overflow:ellipsis;white-space:nowrap}.type-card-footer{display:flex;align-items:center;justify-content:space-between;min-width:0;margin-top:5px;color:var(--muted);font-size:5.5px}.type-card-footer>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-card-footer>div{display:flex;gap:3px;align-items:center;margin-left:5px;white-space:nowrap}.type-card-footer button{display:grid;width:18px;height:18px;place-items:center;padding:0;border:1px solid var(--line);border-radius:6px;color:var(--teal);font-size:11px;background:var(--soft)}.type-card-footer b{min-width:23px;color:var(--muted);font-size:5.5px;text-align:center}
|
|
@media(max-width:1260px){.dashboard-grid{grid-template-columns:minmax(620px,1fr) 320px}.hardware-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.type-region .preset-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.type-region .hardware-icon{width:28px;height:28px;flex-basis:28px}.type-region .hardware-progress{display:none}}
|
|
@media(max-height:720px){.hardware-card.type-region{padding:7px}.type-region .hardware-head{margin-bottom:4px}.type-card-footer{margin-top:3px}.type-region .preset-action{padding:3px}}
|
|
|
|
/* v6：放大信息层级与点击热区，仍保持六类外设和车端能力单屏展示。 */
|
|
.topbar{height:72px;padding:0 22px}.brand{gap:12px}.brand-mark{width:43px;height:43px;border-radius:14px;font-size:20px}.brand strong{font-size:18px}.brand small{margin-top:5px;font-size:11px}.scope-tabs{gap:12px;font-size:12px}.scope-tabs b{padding:6px 9px;font-size:9px}.topbar-actions{gap:9px}.connection-button,.reset-button,.settings-button{height:43px;border-radius:13px}.connection-button{padding:0 14px;font-size:12px}.reset-button{padding:0 15px;font-size:12px}.settings-button{width:43px;font-size:17px}.intelligence-badge{display:flex;height:43px;gap:8px;align-items:center;padding:0 12px;border:1px solid var(--line);border-radius:13px;color:var(--muted);font-size:11px;font-weight:800;background:#fff}.intelligence-badge i{display:grid;width:27px;height:27px;place-items:center;border-radius:9px;color:#fff;font-size:9px;font-style:normal;background:#9aaba8}.intelligence-badge[data-state=online]{color:var(--teal);border-color:#b9dcd4;background:#f1faf8}.intelligence-badge[data-state=online] i{background:var(--teal)}.intelligence-badge[data-state=offline]{color:var(--red);border-color:#efcbd0;background:var(--red-soft)}
|
|
.screen-shell{grid-template-rows:94px minmax(0,1fr) auto;height:calc(100dvh - 72px);padding:13px 18px 16px}.command-strip{grid-template-columns:minmax(355px,.85fr) minmax(470px,1.3fr) 96px;gap:18px}.command-heading{gap:13px}.command-orbit{width:52px;height:52px;border-radius:17px;font-size:13px}.command-heading div>span{font-size:9px}.command-heading h1{margin-top:5px;font-size:21px}.command-composer{grid-template-columns:minmax(0,1fr) 43px auto;gap:7px;min-height:59px;padding:7px;border-radius:18px}.command-composer textarea{height:43px;padding:9px 11px;font-size:14px;line-height:25px}.voice-button{width:43px;height:43px;border-radius:12px}.execute-button{height:43px;padding:0 17px;border-radius:12px;font-size:12px}.session-chip{padding:12px 14px;border-radius:15px}.session-chip span{font-size:9px}.session-chip strong{font-size:26px}.session-chip small{font-size:10px}
|
|
.dashboard-grid{grid-template-columns:minmax(720px,1fr) 400px;gap:15px}.peripheral-board,.vehicle-board{border-radius:23px}.peripheral-board{grid-template-rows:72px minmax(0,1fr);padding:17px}.eyebrow{font-size:9px}.board-heading h2,.vehicle-heading h2{margin-top:5px;font-size:21px}.board-heading p{font-size:10px}.hardware-total{min-width:105px;padding:9px 12px;border-radius:12px}.hardware-total strong{font-size:20px}.hardware-total span{font-size:8px}.hardware-grid{gap:9px}.hardware-card.type-region{padding:11px;border-radius:17px}.type-region .hardware-head{gap:7px;margin-bottom:8px}.type-region .hardware-icon{width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:18px}.type-region .hardware-head-main small{font-size:8px}.hardware-selector{height:25px;margin-top:3px;padding-left:7px;border-radius:7px;font-size:10px}.no-hardware{margin-top:4px;font-size:9px}.type-region .hardware-progress{font-size:8px}.add-same-type,.type-region .delete-hardware{width:25px;height:25px;flex-basis:25px;border-radius:8px;font-size:15px}.type-region .preset-actions{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}.type-region .preset-action{padding:7px;border-radius:11px}.type-region .action-main strong{font-size:10px}.type-region .action-main small{font-size:8px}.type-region .learn-action,.type-region .emit-action{height:24px;padding:0 8px;border-radius:7px;font-size:8px}.type-region .forget-action{width:24px;height:24px;font-size:11px}.type-region .slot-number{max-width:78px;font-size:7px}.type-card-footer{margin-top:7px;font-size:8px}.type-card-footer button{width:23px;height:23px;border-radius:7px;font-size:15px}.type-card-footer b{min-width:31px;font-size:8px}
|
|
.vehicle-board{padding:17px}.future-badge{padding:6px 9px;border-radius:8px;font-size:9px}.future-badge[data-state=online]{color:#176b57;background:#d7f1e9}.future-badge[data-state=offline]{color:#9a3e49;background:var(--red-soft)}.vehicle-intro{margin:7px 0 11px;font-size:10px;line-height:1.45}.vehicle-grid{gap:9px}.vehicle-card{padding:10px;border-radius:15px}.vehicle-card-head{gap:8px;margin-bottom:8px}.vehicle-icon{width:33px;height:33px;border-radius:10px;font-size:16px}.vehicle-card-head strong{font-size:11px}.vehicle-card-head small{font-size:8px}.vehicle-card-head span:last-child{font-size:8px}.vehicle-actions{gap:6px}.vehicle-action{min-height:31px;padding:0 7px;border-radius:8px;font-size:9px;font-weight:700}.execution-bar{min-height:51px;margin-top:10px;padding:9px 13px;border-radius:15px}.execution-bar strong{font-size:11px}.execution-bar small{font-size:8px}.run-step{max-width:150px;padding:7px 9px;font-size:8px}#runProgress{font-size:10px}
|
|
.modal-header p,.no-input-note,.centered-page>p,.danger-modal>p,.connection-overview p{font-size:11px}.modal-header h2{font-size:22px}.modal-close{font-size:20px}.type-choice strong{font-size:12px}.type-choice small,.preset-preview>span,.preset-preview i{font-size:9px}.hardware-name-field,.bridge-field{font-size:11px}.modal-primary,.modal-secondary,.danger-primary{font-size:11px}.stepper{font-size:11px}.learn-target-card small{font-size:10px}.learn-target-card strong{font-size:14px}.advanced-fields summary{font-size:11px}.advanced-fields label{font-size:9px}.cancel-link{font-size:10px}.danger-modal label{font-size:10px}.connection-overview strong{font-size:12px}.connection-overview button{font-size:10px}.connection-facts span{font-size:9px}.connection-facts b{font-size:11px}.toast{font-size:11px}
|
|
@media(max-width:1260px){body{min-width:1060px}.topbar{grid-template-columns:225px 1fr auto;padding:0 16px}.intelligence-badge{padding:0 9px}.intelligence-badge>span{display:none}.dashboard-grid{grid-template-columns:minmax(650px,1fr) 335px}.command-strip{grid-template-columns:330px minmax(440px,1fr) 88px;gap:12px}.command-heading h1{font-size:18px}.peripheral-board{padding:14px}.hardware-card.type-region{padding:9px}.type-region .hardware-icon{width:32px;height:32px;flex-basis:32px}.type-region .hardware-progress{display:none}.type-region .preset-action{padding:6px}.type-region .action-main strong{font-size:9px}.vehicle-board{padding:13px}.vehicle-card{padding:8px}.vehicle-action{font-size:8px}}
|
|
@media(max-height:720px){.topbar{height:66px}.screen-shell{height:calc(100dvh - 66px);grid-template-rows:80px minmax(0,1fr) auto;padding-top:8px}.command-strip{height:76px}.command-orbit{width:45px;height:45px}.command-composer{min-height:51px}.command-composer textarea,.voice-button,.execute-button{height:37px}.peripheral-board{grid-template-rows:61px minmax(0,1fr);padding:12px}.hardware-card.type-region{padding:7px}.type-region .hardware-head{margin-bottom:5px}.type-region .preset-action{padding:4px}.type-region .learn-action,.type-region .emit-action{height:20px}.type-card-footer{margin-top:3px}.vehicle-board{padding:11px}.vehicle-intro{margin-bottom:6px}.vehicle-card{padding:6px}.vehicle-action{min-height:25px}}
|
|
|
|
/* v7：去除固定最小宽度，在中小窗口中改为可滚动的纵向工作台。 */
|
|
html,body{max-width:100%;min-width:0}.topbar,.topbar-actions,.command-strip,.command-heading,.command-composer,.dashboard-grid,.peripheral-board,.vehicle-board{min-width:0}.command-heading div{min-width:0}.command-heading h1{line-height:1.18;white-space:normal}.command-composer textarea{width:100%;min-width:0}.dashboard-grid{width:100%}.vehicle-intro{line-height:1.5}
|
|
|
|
@media(max-width:1180px){
|
|
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
|
|
body{min-width:0}
|
|
.topbar{position:sticky;top:0;z-index:40;grid-template-columns:minmax(180px,1fr) auto;height:auto;min-height:66px;padding:9px 16px}
|
|
.scope-tabs{display:none}
|
|
.topbar-actions{justify-self:end}
|
|
.intelligence-badge>span{display:none}
|
|
.screen-shell{grid-template-rows:auto auto auto;gap:12px;height:auto;min-height:calc(100dvh - 66px);padding:14px 16px 22px}
|
|
.command-strip{grid-template-areas:"heading session" "composer composer";grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;height:auto}
|
|
.command-heading{grid-area:heading}
|
|
.command-composer{grid-area:composer}
|
|
.session-chip{grid-area:session;min-width:96px}
|
|
.dashboard-grid{grid-template-columns:minmax(0,1fr);gap:12px}
|
|
.peripheral-board{grid-template-rows:auto auto;padding:16px}
|
|
.board-heading{gap:16px;margin-bottom:14px}
|
|
.board-heading p{max-width:640px;line-height:1.5}
|
|
.hardware-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(268px,auto);gap:12px}
|
|
.hardware-card.type-region{min-height:268px;padding:12px}
|
|
.type-region .hardware-head{margin-bottom:9px}
|
|
.type-region .preset-action{min-height:70px;padding:7px}
|
|
.type-region .action-main strong{font-size:11px}
|
|
.type-region .action-main small{font-size:9px}
|
|
.type-region .learn-action,.type-region .emit-action{min-width:40px;height:27px;font-size:9px}
|
|
.type-card-footer{font-size:9px}
|
|
.vehicle-board{grid-template-rows:auto auto auto;padding:16px}
|
|
.vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(150px,auto);gap:10px}
|
|
.vehicle-card{min-height:150px;padding:11px}
|
|
.vehicle-action{min-height:32px;font-size:10px}
|
|
.execution-bar{grid-template-columns:auto minmax(130px,.5fr) minmax(0,1fr) auto}
|
|
}
|
|
|
|
@media(max-width:760px){
|
|
.topbar{grid-template-columns:minmax(0,1fr) auto;padding:8px 12px}
|
|
.brand{gap:9px}.brand-mark{width:39px;height:39px;border-radius:12px;font-size:18px}.brand strong{font-size:16px}.brand small{display:none}
|
|
.topbar-actions{gap:6px}
|
|
.intelligence-badge,.connection-button,.reset-button,.settings-button{width:39px;height:39px;padding:0;justify-content:center}
|
|
.intelligence-badge i{width:27px;height:27px}
|
|
.connection-button #connectionLabel{display:none}
|
|
.reset-button{font-size:0}
|
|
.reset-button::before{content:"↻";font-size:18px}
|
|
.screen-shell{padding:12px}
|
|
.command-strip{grid-template-areas:"heading" "composer" "session";grid-template-columns:minmax(0,1fr);gap:10px}
|
|
.command-heading h1{font-size:19px}
|
|
.command-composer{grid-template-columns:minmax(0,1fr) 43px auto}
|
|
.session-chip{display:flex;gap:7px;align-items:baseline;min-width:0;padding:9px 12px}
|
|
.session-chip span{grid-column:auto}.session-chip strong{font-size:22px}
|
|
.board-heading{align-items:center}
|
|
.board-heading p{font-size:10px}
|
|
.hardware-total{min-width:94px}
|
|
.vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.execution-bar{grid-template-columns:auto minmax(0,1fr) auto}.run-plan{display:none}
|
|
}
|
|
|
|
@media(max-width:620px){
|
|
.screen-shell{padding:10px}
|
|
.command-heading{align-items:flex-start}.command-orbit{width:43px;height:43px;flex:0 0 43px;border-radius:14px}.command-heading h1{font-size:17px}
|
|
.command-composer{grid-template-columns:39px minmax(118px,1fr)}.command-composer textarea{grid-column:1/-1;height:48px}.voice-button{grid-column:1;width:39px;height:39px}.execute-button{grid-column:2;width:100%;height:39px;min-width:0}
|
|
.board-heading{align-items:flex-start}.board-heading h2,.vehicle-heading h2{font-size:19px}.board-heading p{max-width:360px}
|
|
.hardware-total{padding:8px 9px}.hardware-total strong{font-size:18px}
|
|
.hardware-grid{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(270px,auto)}
|
|
.vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(145px,auto)}
|
|
.type-chooser{grid-template-columns:repeat(2,minmax(0,1fr))}
|
|
.advanced-fields>div{grid-template-columns:1fr}
|
|
.connection-facts{grid-template-columns:1fr}
|
|
.learn-target-card{grid-template-columns:auto 1fr}.learn-target-card>i{display:none}.target-action{grid-column:1/-1;padding:11px 0 0;border-top:1px solid var(--line);border-left:0}
|
|
}
|
|
|
|
@media(max-width:430px){
|
|
.brand strong{font-size:14px}.topbar-actions{gap:4px}.intelligence-badge{display:none}
|
|
.command-heading div>span{font-size:8px}.command-heading h1{font-size:16px}
|
|
.board-heading{display:grid;grid-template-columns:minmax(0,1fr) auto}.board-heading p{grid-column:1/-1}
|
|
.vehicle-heading{gap:8px}.future-badge{white-space:nowrap}
|
|
.vehicle-grid{grid-template-columns:minmax(0,1fr)}
|
|
.modal{width:calc(100% - 20px)}.modal-header{padding:16px}.add-hardware-modal form,.learn-page{padding:16px}.type-chooser{grid-template-columns:1fr}
|
|
}
|
|
|
|
@media(max-width:1180px) and (max-height:720px){
|
|
.topbar{height:auto;min-height:62px}
|
|
.screen-shell{grid-template-rows:auto auto auto;height:auto;padding-top:10px}
|
|
.command-strip{height:auto}
|
|
.peripheral-board{grid-template-rows:auto auto}
|
|
}
|
|
|
|
/* v11：车端动作显示真实执行阶段和反馈层级。 */
|
|
.vehicle-card{grid-template-rows:auto minmax(0,1fr) auto;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
|
|
.vehicle-feedback{display:block;min-height:1.25em;margin-top:6px;overflow:hidden;color:#81928f;font-size:7px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
|
|
.vehicle-card[data-state=pending]{border-color:#d8c68e;background:#fffdf5}.vehicle-card[data-state=running]{border-color:#71bfb1;box-shadow:0 0 0 2px rgba(18,129,112,.08)}
|
|
.vehicle-card[data-state=confirmed]{border-color:#78c2a8;background:#f1faf6}.vehicle-card[data-state=accepted]{border-color:#d5bd78;background:#fffaf0}.vehicle-card[data-state=validated]{border-color:#9eb8cb;background:#f4f8fb}.vehicle-card[data-state=failed]{border-color:#db9ca4;background:#fff5f6}
|
|
.vehicle-card[data-state=running] .vehicle-state{color:var(--teal)}.vehicle-card[data-state=confirmed] .vehicle-state{color:#18745a}.vehicle-card[data-state=accepted] .vehicle-state{color:#946318}.vehicle-card[data-state=validated] .vehicle-state{color:#4e728c}.vehicle-card[data-state=failed] .vehicle-state{color:var(--red)}
|
|
.vehicle-action:disabled{cursor:wait;opacity:.52}
|
|
@media(max-width:1180px){.vehicle-feedback{font-size:8px}}
|
|
|
|
/* v9：浏览器缩放或低高度宽屏下，不再压缩卡片内容，改为完整高度并纵向滚动。 */
|
|
@media(min-width:1181px) and (max-height:840px){
|
|
html,body{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto}
|
|
.topbar{position:sticky;top:0;z-index:40}
|
|
.screen-shell{grid-template-rows:auto auto auto;gap:10px;height:auto;min-height:calc(100dvh - 66px);padding-bottom:20px}
|
|
.command-strip{height:auto;min-height:76px}
|
|
.dashboard-grid{min-height:675px}
|
|
.peripheral-board{grid-template-rows:68px minmax(0,1fr);min-height:675px}
|
|
.hardware-grid{grid-template-rows:repeat(2,minmax(270px,1fr))}
|
|
.hardware-card.type-region{min-height:270px}
|
|
.vehicle-board{min-height:675px}
|
|
.vehicle-grid{grid-template-rows:repeat(3,minmax(170px,1fr))}
|
|
}
|