Refine STL visibility and pose panels
This commit is contained in:
Codex
@@ -812,6 +812,89 @@ button {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.model-visibility-actions {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.tool-section-title button.model-eye-btn {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.model-eye-btn span {
|
||||
position: relative;
|
||||
width: 18px;
|
||||
height: 13px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.model-eye-btn span::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 1px 0;
|
||||
border: 2px solid #c8f7ff;
|
||||
border-radius: 50% / 60%;
|
||||
}
|
||||
|
||||
.model-eye-btn span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background: #c8f7ff;
|
||||
}
|
||||
|
||||
.solid-eye span::before {
|
||||
background: rgba(45, 212, 191, 0.28);
|
||||
}
|
||||
|
||||
.translucent-eye span::before {
|
||||
background:
|
||||
linear-gradient(45deg, rgba(15, 23, 42, 0.82) 25%, transparent 25% 50%, rgba(15, 23, 42, 0.82) 50% 75%, transparent 75%) 0 0 / 5px 5px,
|
||||
rgba(45, 212, 191, 0.22);
|
||||
}
|
||||
|
||||
.hidden-eye span::after {
|
||||
top: 5px;
|
||||
left: -2px;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
border-radius: 99px;
|
||||
background: #cbd5e1;
|
||||
transform: rotate(-38deg);
|
||||
}
|
||||
|
||||
.section-toggle {
|
||||
width: 30px;
|
||||
height: 28px;
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: auto;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.section-toggle span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid #c8f7ff;
|
||||
border-bottom: 2px solid #c8f7ff;
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.16s ease;
|
||||
}
|
||||
|
||||
.section-toggle.collapsed span {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.tool-section-title em {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
@@ -1486,17 +1569,18 @@ button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
border-left: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: #0f172a;
|
||||
padding: 12px 0 38px;
|
||||
}
|
||||
|
||||
.mapping-slice-rail::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
bottom: 56px;
|
||||
top: 12px;
|
||||
bottom: 38px;
|
||||
left: 50%;
|
||||
width: 8px;
|
||||
transform: translateX(-50%);
|
||||
@@ -1507,15 +1591,19 @@ button {
|
||||
#mappingSliceSlider {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(66vh, 520px);
|
||||
height: 34px;
|
||||
transform: rotate(-90deg);
|
||||
width: 34px;
|
||||
height: 100%;
|
||||
min-height: 180px;
|
||||
transform: none;
|
||||
writing-mode: vertical-lr;
|
||||
direction: rtl;
|
||||
appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#mappingSliceSlider::-webkit-slider-runnable-track {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
@@ -1524,7 +1612,8 @@ button {
|
||||
appearance: none;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-top: -8.5px;
|
||||
margin-left: -8.5px;
|
||||
margin-top: 0;
|
||||
border: 3px solid #93c5fd;
|
||||
border-radius: 7px;
|
||||
background: #60a5fa;
|
||||
@@ -1532,7 +1621,8 @@ button {
|
||||
}
|
||||
|
||||
#mappingSliceSlider::-moz-range-track {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
}
|
||||
@@ -1711,15 +1801,17 @@ input[type="range"] {
|
||||
|
||||
.stl-row {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: start;
|
||||
grid-template-columns: minmax(0, 1fr) 30px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
|
||||
}
|
||||
|
||||
.stl-row input {
|
||||
margin-top: 3px;
|
||||
accent-color: var(--cyan);
|
||||
.stl-row.stl-mode-hidden {
|
||||
opacity: 0.62;
|
||||
background: rgba(8, 12, 18, 0.78);
|
||||
}
|
||||
|
||||
.stl-row strong {
|
||||
@@ -1731,6 +1823,101 @@ input[type="range"] {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stl-file-name {
|
||||
color: var(--stl-color) !important;
|
||||
}
|
||||
|
||||
.stl-family {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stl-family-head {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto 14px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 0 0 7px;
|
||||
border: 1px solid rgba(45, 212, 191, 0.35);
|
||||
border-radius: 10px;
|
||||
background: rgba(20, 184, 166, 0.08);
|
||||
color: #dffcff;
|
||||
font-size: 12px;
|
||||
font-weight: 950;
|
||||
text-align: left;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.stl-family-head span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.stl-family-head em {
|
||||
color: #9debf4;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
font-size: 11px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.stl-family-head i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid #9debf4;
|
||||
border-bottom: 2px solid #9debf4;
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.16s ease;
|
||||
}
|
||||
|
||||
.stl-family.collapsed .stl-family-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.stl-family.collapsed .stl-family-head i {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.stl-visibility-swatch {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
justify-self: end;
|
||||
border: 2px solid rgba(226, 232, 240, 0.68);
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 1px rgba(2, 6, 23, 0.78);
|
||||
}
|
||||
|
||||
.stl-visibility-swatch.solid {
|
||||
border-color: color-mix(in srgb, var(--stl-color) 78%, #ffffff 22%);
|
||||
background: var(--stl-color);
|
||||
}
|
||||
|
||||
.stl-visibility-swatch.translucent {
|
||||
border-color: color-mix(in srgb, var(--stl-color) 72%, #ffffff 28%);
|
||||
background:
|
||||
linear-gradient(45deg, rgba(2, 6, 23, 0.82) 25%, transparent 25% 50%, rgba(2, 6, 23, 0.82) 50% 75%, transparent 75%) 0 0 / 8px 8px,
|
||||
color-mix(in srgb, var(--stl-color) 48%, transparent);
|
||||
}
|
||||
|
||||
.stl-visibility-swatch.hidden {
|
||||
border-color: rgba(148, 163, 184, 0.66);
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
}
|
||||
|
||||
.stl-visibility-swatch.hidden::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 26px;
|
||||
height: 2px;
|
||||
margin: 9px 0 0 -3px;
|
||||
border-radius: 99px;
|
||||
background: rgba(226, 232, 240, 0.76);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.pose-grid {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@@ -1830,6 +2017,18 @@ input[type="range"] {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pose-section-body.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iteration-section-title {
|
||||
margin: 2px 0 -2px;
|
||||
color: #9debf4;
|
||||
font-size: 12px;
|
||||
font-weight: 950;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.auto-settings-panel {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@@ -2039,18 +2238,6 @@ input[type="range"] {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.registration-operation-hint {
|
||||
border: 1px solid rgba(25, 214, 195, 0.26);
|
||||
border-radius: 8px;
|
||||
background: rgba(20, 184, 166, 0.08);
|
||||
color: #a7f3d0;
|
||||
font-size: 11px;
|
||||
font-weight: 900;
|
||||
line-height: 1.45;
|
||||
margin-top: 12px;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.auto-config-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.85fr) minmax(300px, 1.15fr);
|
||||
|
||||
Reference in New Issue
Block a user