接入 LinuxCNC TP 运行反馈
This commit is contained in:
@@ -9,6 +9,9 @@
|
||||
--green-dark: #02bf19;
|
||||
--black: #050505;
|
||||
--text: #2e2e2e;
|
||||
--ink: #242424;
|
||||
--line: #aaa59b;
|
||||
--muted: #5e5a52;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@@ -19,11 +22,11 @@
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 1024px;
|
||||
min-height: 768px;
|
||||
min-width: 1180px;
|
||||
min-height: 640px;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
background: #c8c4bc;
|
||||
color: var(--text);
|
||||
}
|
||||
@@ -40,26 +43,44 @@ button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.profile-select-label {
|
||||
display: grid;
|
||||
gap: 1px;
|
||||
min-width: 210px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.profile-select-label select {
|
||||
min-height: 28px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 3px;
|
||||
background: #f7f5ef;
|
||||
color: var(--ink);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gmoccapy-shell {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
minmax(350px, 0.76fr)
|
||||
minmax(160px, 0.36fr)
|
||||
minmax(128px, 0.28fr)
|
||||
78px
|
||||
minmax(176px, 0.4fr)
|
||||
104px;
|
||||
grid-template-rows: 28px minmax(156px, 0.36fr) minmax(240px, 0.64fr) 224px 62px;
|
||||
minmax(610px, 1.34fr)
|
||||
minmax(270px, 0.58fr)
|
||||
minmax(260px, 0.56fr)
|
||||
108px;
|
||||
grid-template-rows: 40px minmax(210px, 1fr) minmax(170px, 0.78fr) 150px 68px;
|
||||
grid-template-areas:
|
||||
"title title title title title title"
|
||||
"preview preview dro dro dro side"
|
||||
"preview preview gcode gcode gcode side"
|
||||
"info override override spindle spindle side"
|
||||
"bottom bottom bottom bottom bottom side";
|
||||
"title title title title"
|
||||
"preview dro dro side"
|
||||
"preview gcode gcode side"
|
||||
"info override spindle side"
|
||||
"bottom bottom bottom side";
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-width: 1024px;
|
||||
min-height: 768px;
|
||||
min-width: 1180px;
|
||||
min-height: 640px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
}
|
||||
@@ -70,7 +91,7 @@ button:active {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
padding: 2px 10px;
|
||||
padding: 4px 12px;
|
||||
background: #cfcbc3;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
@@ -78,8 +99,9 @@ button:active {
|
||||
.brand-dot {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
flex: 0 0 auto;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border: 2px solid #ffcf00;
|
||||
border-radius: 50%;
|
||||
color: #e21d1d;
|
||||
@@ -98,7 +120,7 @@ button:active {
|
||||
|
||||
.title-stack strong {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
font-size: 17px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -106,7 +128,7 @@ button:active {
|
||||
.title-stack span,
|
||||
.run-state {
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: #4d4d4d;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -140,8 +162,9 @@ button:active {
|
||||
|
||||
.machine-preview {
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
margin-top: 24px;
|
||||
height: calc(100% - 64px);
|
||||
margin-top: 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tool-preview-card {
|
||||
@@ -215,7 +238,7 @@ button:active {
|
||||
.rtcp-preview-badge {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
bottom: 58px;
|
||||
bottom: 62px;
|
||||
left: 8px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
@@ -242,8 +265,8 @@ button:active {
|
||||
left: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
background: var(--panel);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
@@ -251,7 +274,7 @@ button:active {
|
||||
.preview-toolbar button,
|
||||
.bottom-controls button,
|
||||
.status-sidebar button {
|
||||
min-height: 46px;
|
||||
min-height: 42px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -262,7 +285,8 @@ button:active {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #151515;
|
||||
border-left: 2px solid #8d887f;
|
||||
border-bottom: 2px solid #8d887f;
|
||||
background: var(--black);
|
||||
}
|
||||
|
||||
@@ -277,17 +301,17 @@ button:active {
|
||||
|
||||
.dro-row {
|
||||
display: grid;
|
||||
grid-template-columns: 24px 40px minmax(74px, 1fr) 48px;
|
||||
grid-template-columns: 30px 46px minmax(92px, 1fr) 58px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 3px 5px;
|
||||
padding: 4px 7px;
|
||||
background: var(--black);
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
.dro-axis {
|
||||
font-size: 22px;
|
||||
font-size: clamp(24px, 2vw, 32px);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
@@ -295,14 +319,14 @@ button:active {
|
||||
.dro-mode,
|
||||
.dro-dtg {
|
||||
color: var(--green);
|
||||
font-size: 9px;
|
||||
font-size: 10px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
font-size: clamp(20px, 2.4vw, 30px);
|
||||
font-size: clamp(24px, 2.5vw, 38px);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-overflow: clip;
|
||||
@@ -314,10 +338,10 @@ button:active {
|
||||
gap: 6px;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
padding: 6px 9px;
|
||||
background: #080808;
|
||||
color: var(--green);
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -343,11 +367,11 @@ button:active {
|
||||
.gcode-panel {
|
||||
grid-area: gcode;
|
||||
display: grid;
|
||||
grid-template-rows: 30px minmax(0, 1fr) 22px;
|
||||
grid-template-rows: 32px minmax(0, 1fr) 20px 54px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: #f4f2ed;
|
||||
background: #f6f4ef;
|
||||
border-top: 2px solid var(--border);
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
@@ -358,10 +382,10 @@ button:active {
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
padding: 5px 8px;
|
||||
padding: 6px 9px;
|
||||
border-bottom: 1px solid #d5d0c7;
|
||||
background: #eeeae3;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.gcode-header strong,
|
||||
@@ -380,27 +404,32 @@ button:active {
|
||||
.gcode-list {
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 4px 6px 2px;
|
||||
padding: 6px 8px 3px;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 15px;
|
||||
color: #8b8b8b;
|
||||
font-size: 13px;
|
||||
color: #55514a;
|
||||
}
|
||||
|
||||
.gcode-row {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
min-height: 20px;
|
||||
line-height: 1.35;
|
||||
min-height: 18px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.gcode-row.active {
|
||||
background: #e8e8e8;
|
||||
background: #242424;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.gcode-row.active span,
|
||||
.gcode-row.active code {
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.gcode-row code {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
@@ -412,8 +441,8 @@ button:active {
|
||||
grid-template-columns: 120px 1fr;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 8px 4px;
|
||||
font-size: 12px;
|
||||
padding: 1px 8px 3px;
|
||||
font-size: 11px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
@@ -428,10 +457,70 @@ button:active {
|
||||
background: #3888df;
|
||||
}
|
||||
|
||||
.mdi-panel {
|
||||
display: grid;
|
||||
grid-template-rows: 27px minmax(0, 1fr);
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 3px 8px 5px;
|
||||
border-top: 1px solid #cbc6bd;
|
||||
background: #e7e3dc;
|
||||
}
|
||||
|
||||
.mdi-command-row {
|
||||
display: grid;
|
||||
grid-template-columns: 44px minmax(0, 1fr) 64px;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mdi-command-row strong {
|
||||
color: #222;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mdi-command-row input {
|
||||
min-width: 0;
|
||||
height: 25px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid #8e897f;
|
||||
border-radius: 3px;
|
||||
background: #111;
|
||||
color: var(--green);
|
||||
font: 14px/1.1 "Courier New", monospace;
|
||||
}
|
||||
|
||||
.mdi-command-row button {
|
||||
min-height: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mdi-history {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mdi-history button {
|
||||
flex: 0 1 auto;
|
||||
min-width: 0;
|
||||
min-height: 19px;
|
||||
padding: 2px 6px;
|
||||
overflow: hidden;
|
||||
color: #303030;
|
||||
font: 11px/1.1 "Courier New", monospace;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-sidebar {
|
||||
grid-area: side;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(9, minmax(44px, 1fr)) minmax(46px, auto);
|
||||
grid-template-rows: repeat(9, minmax(42px, 1fr)) minmax(42px, auto);
|
||||
gap: 5px;
|
||||
padding: 6px;
|
||||
border-left: 2px solid var(--border);
|
||||
@@ -475,7 +564,7 @@ button:active {
|
||||
grid-area: info;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
border-top: 2px solid var(--border);
|
||||
border-right: 2px solid var(--border);
|
||||
background: #eeeae3;
|
||||
@@ -492,9 +581,9 @@ button:active {
|
||||
border-right: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
background: #e0ddd6;
|
||||
min-height: 37px;
|
||||
min-height: 32px;
|
||||
padding: 4px 5px;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -507,10 +596,10 @@ button:active {
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: max-content 1fr;
|
||||
gap: 3px 10px;
|
||||
margin: 8px;
|
||||
font-size: 14px;
|
||||
line-height: 1.22;
|
||||
gap: 1px 8px;
|
||||
margin: 6px 8px;
|
||||
font-size: 12px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.info-grid dt {
|
||||
@@ -533,7 +622,7 @@ button:active {
|
||||
grid-area: override;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 56px 64px minmax(78px, 1fr);
|
||||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
border-top: 2px solid var(--border);
|
||||
@@ -549,8 +638,8 @@ button:active {
|
||||
.spindle {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 2px;
|
||||
padding: 5px;
|
||||
gap: 1px;
|
||||
padding: 5px 6px;
|
||||
background: #f8f5ef;
|
||||
border: 1px solid var(--border);
|
||||
min-width: 0;
|
||||
@@ -563,7 +652,7 @@ button:active {
|
||||
.cooling h2,
|
||||
.spindle h2 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -573,7 +662,7 @@ button:active {
|
||||
.spindle strong {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-size: clamp(18px, 1.8vw, 25px);
|
||||
font-size: clamp(16px, 1.45vw, 22px);
|
||||
line-height: 1.05;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -591,20 +680,20 @@ button:active {
|
||||
|
||||
.meter-card strong {
|
||||
display: inline;
|
||||
font-size: clamp(20px, 2vw, 25px);
|
||||
font-size: clamp(18px, 1.6vw, 24px);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.meter-card span {
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: grid;
|
||||
grid-template-columns: 32px minmax(54px, 1fr) 32px;
|
||||
grid-template-columns: 30px minmax(54px, 1fr) 30px;
|
||||
gap: 2px;
|
||||
align-items: center;
|
||||
margin-top: 1px;
|
||||
@@ -612,7 +701,7 @@ button:active {
|
||||
|
||||
.stepper div {
|
||||
min-width: 0;
|
||||
padding: 6px 4px;
|
||||
padding: 5px 4px;
|
||||
background: var(--orange);
|
||||
border: 1px solid #b4651c;
|
||||
text-align: center;
|
||||
@@ -623,7 +712,7 @@ button:active {
|
||||
|
||||
.stepper button {
|
||||
min-width: 0;
|
||||
min-height: 28px;
|
||||
min-height: 26px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
@@ -650,8 +739,8 @@ button:active {
|
||||
}
|
||||
|
||||
.spindle-range {
|
||||
height: 24px;
|
||||
margin-top: 8px;
|
||||
height: 18px;
|
||||
margin-top: 4px;
|
||||
background: #bdbdbd;
|
||||
border: 1px solid #898989;
|
||||
}
|
||||
@@ -665,7 +754,7 @@ button:active {
|
||||
.bottom-controls {
|
||||
grid-area: bottom;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(13, minmax(48px, 1fr));
|
||||
grid-template-columns: repeat(15, minmax(48px, 1fr));
|
||||
gap: 5px;
|
||||
padding: 6px 8px;
|
||||
border-top: 2px solid var(--border);
|
||||
@@ -674,8 +763,11 @@ button:active {
|
||||
}
|
||||
|
||||
.bottom-controls button {
|
||||
font-size: 12px;
|
||||
font-size: clamp(10px, 0.72vw, 12px);
|
||||
line-height: 1.05;
|
||||
min-width: 0;
|
||||
padding: 3px 4px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.program-file-input {
|
||||
@@ -684,7 +776,11 @@ button:active {
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
.gmoccapy-shell {
|
||||
grid-template-columns: 350px 160px 128px 78px 176px 96px;
|
||||
grid-template-columns:
|
||||
minmax(560px, 1.28fr)
|
||||
minmax(250px, 0.58fr)
|
||||
minmax(230px, 0.54fr)
|
||||
100px;
|
||||
}
|
||||
|
||||
.dro-row strong {
|
||||
|
||||
Reference in New Issue
Block a user