Fix: adjust positioning and border radius of lens barrel and eyepiece components

This commit is contained in:
Matt Batchelder
2026-02-21 18:02:46 -05:00
parent cfb216f73e
commit 985ba72212

View File

@@ -4154,17 +4154,17 @@ p:last-child { margin-bottom: 0; }
background: var(--color-bg-alt); background: var(--color-bg-alt);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-top: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12);
border-radius: 0 4px 4px 0; border-radius: 4px 0 0 4px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: visible; overflow: visible;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.3); box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);
} }
/* Lens barrel — extends LEFT toward the scene */ /* Lens barrel — extends RIGHT */
.vc-lens-barrel { .vc-lens-barrel {
position: absolute; position: absolute;
left: -34px; right: -34px;
top: calc(50% - 1px); top: calc(50% - 1px);
transform: translateY(-50%); transform: translateY(-50%);
width: 38px; height: 38px; width: 38px; height: 38px;
@@ -4214,24 +4214,25 @@ p:last-child { margin-bottom: 0; }
/* REC indicator */ /* REC indicator */
.vc-rec-light { .vc-rec-light {
position: absolute; position: absolute;
top: 8px; left: 16px; top: 8px;
right: 16px;
width: 7px; height: 7px; width: 7px; height: 7px;
border-radius: 50%; border-radius: 50%;
background: #ef4444; background: #ef4444;
box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239,68,68,.4); box-shadow: 0 0 8px #ef4444, 0 0 16px rgba(239,68,68,.4);
animation: vc-rec-blink var(--cam-rec-cycle) ease-in-out infinite; animation: vc-rec-blink var(--cam-rec-cycle) ease-in-out infinite;
} }
/* Eyepiece — extends RIGHT */ /* Eyepiece — extends LEFT */
.vc-eyepiece { .vc-eyepiece {
position: absolute; position: absolute;
right: -14px; left: -14px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 14px; height: 18px; width: 14px; height: 18px;
background: var(--color-bg-alt); background: var(--color-bg-alt);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-left: none; border-right: none;
border-radius: 0 4px 4px 0; border-radius: 4px 0 0 4px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -4247,7 +4248,7 @@ p:last-child { margin-bottom: 0; }
.vc-body::after { .vc-body::after {
content: ''; content: '';
position: absolute; position: absolute;
right: 6px; top: 7px; left: 6px; top: 7px;
width: 28px; height: 34px; width: 28px; height: 34px;
background: rgba(0,0,0,.2); background: rgba(0,0,0,.2);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);