Refactor LED control UI to Vue3
This commit is contained in:
sealks
@@ -9,6 +9,10 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
@@ -24,9 +28,9 @@ textarea {
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(1280px, calc(100vw - 40px));
|
||||
width: min(1760px, calc(100vw - 24px));
|
||||
margin: 0 auto;
|
||||
padding: 28px 0 40px;
|
||||
padding: 16px 0 28px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
@@ -38,8 +42,12 @@ textarea {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.panelHead.compact {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -50,7 +58,7 @@ p {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@ -78,27 +86,42 @@ h1 {
|
||||
box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
|
||||
}
|
||||
|
||||
.grid {
|
||||
.consoleLayout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.8fr);
|
||||
gap: 18px;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.previewPanel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
padding: 18px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.scenes {
|
||||
grid-row: span 2;
|
||||
.panelMeta {
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panelHint {
|
||||
margin-top: 4px;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button,
|
||||
.linkGrid a {
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
@@ -115,6 +138,58 @@ button:hover,
|
||||
border-color: rgba(20, 184, 166, 0.8);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.62;
|
||||
}
|
||||
|
||||
.previewGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0;
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 8px;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.previewTile {
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.previewTile header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.previewTile strong {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.previewTile a {
|
||||
color: #5eead4;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.previewTile iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
aspect-ratio: 7440 / 3510;
|
||||
border: 0;
|
||||
background: #05070a;
|
||||
}
|
||||
|
||||
.primary {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
@@ -127,7 +202,8 @@ button:hover,
|
||||
.sceneList,
|
||||
.syncStatus,
|
||||
.linkGrid,
|
||||
.actionGrid {
|
||||
.actionGrid,
|
||||
.commandEcho {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -135,19 +211,19 @@ button:hover,
|
||||
.sceneList,
|
||||
.syncStatus,
|
||||
.linkGrid {
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.linkGrid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.scene {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.045);
|
||||
@@ -159,13 +235,13 @@ button:hover,
|
||||
}
|
||||
|
||||
.scene h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.scene p {
|
||||
color: #aeb7c2;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@@ -181,15 +257,105 @@ button:hover,
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.echoCard {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.echoHead,
|
||||
.tileEcho {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.echoHead h4 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.echoHead p,
|
||||
.tileEcho small,
|
||||
.emptyEcho {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.echoState,
|
||||
.tileEcho strong {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 999px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.echoState.ok,
|
||||
.tileEcho.ok strong {
|
||||
background: rgba(34, 197, 94, 0.16);
|
||||
color: #86efac;
|
||||
}
|
||||
|
||||
.echoState.ready,
|
||||
.tileEcho.ready strong {
|
||||
background: rgba(20, 184, 166, 0.16);
|
||||
color: #5eead4;
|
||||
}
|
||||
|
||||
.echoState.wait,
|
||||
.tileEcho.wait strong {
|
||||
background: rgba(148, 163, 184, 0.14);
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
.tileEcho.bad strong {
|
||||
background: rgba(239, 68, 68, 0.16);
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.tileEchoGrid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tileEcho {
|
||||
min-height: 48px;
|
||||
padding: 8px 9px;
|
||||
border-radius: 6px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
.tileEcho span {
|
||||
min-width: 44px;
|
||||
color: #f8fafc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.tileEcho small {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.emptyEcho {
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.actionGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.customAction {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
margin-top: 10px;
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
@@ -203,14 +369,44 @@ textarea {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.consoleLayout {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.previewPanel {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.grid,
|
||||
.shell {
|
||||
width: min(100vw - 12px, 1760px);
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.consoleLayout,
|
||||
.topbar {
|
||||
grid-template-columns: 1fr;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.scenes {
|
||||
grid-row: auto;
|
||||
.previewTile header {
|
||||
min-height: 34px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.linkGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: portrait) and (max-width: 680px) {
|
||||
.previewGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user