unify buttons
This commit is contained in:
David Allemang
@@ -1,4 +1,4 @@
|
|||||||
/* --- Component structural styles --- */
|
/* --- Component Structural Styles --- */
|
||||||
mc-world, mc-timeline, mc-camera, mc-frame {
|
mc-world, mc-timeline, mc-camera, mc-frame {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -8,15 +8,14 @@ mc-diorama {
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 20em;
|
height: 20em;
|
||||||
|
|
||||||
|
& canvas {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
mc-diorama canvas {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- UI Controls styles --- */
|
|
||||||
.spacetime-overlay {
|
.spacetime-overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@@ -30,144 +29,146 @@ mc-diorama canvas {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
|
||||||
|
|
||||||
.reset-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-btn {
|
|
||||||
pointer-events: auto;
|
|
||||||
padding: 6px 12px;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
color: white;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
border-radius: 4px;
|
|
||||||
font-weight: bold;
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reset-btn:hover {
|
& .btn {
|
||||||
background: rgba(0, 0, 0, 0.8);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: inherit;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
transition: background 0.1s, border-color 0.1s;
|
||||||
|
pointer-events: auto; /* Always clickable when visible */
|
||||||
|
|
||||||
.visualizer-ui {
|
&:hover {
|
||||||
pointer-events: none; /* Let clicks pass through the empty space by default */
|
background: rgba(255, 255, 255, 0.2);
|
||||||
font-family: sans-serif;
|
}
|
||||||
background: transparent;
|
}
|
||||||
padding: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
color: white;
|
|
||||||
user-select: none;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacetime-container:hover .visualizer-ui {
|
& .reset-wrapper {
|
||||||
background: rgba(20, 20, 20, 0.85);
|
display: flex;
|
||||||
backdrop-filter: blur(4px);
|
justify-content: flex-end;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
width: 100%;
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
||||||
pointer-events: auto; /* Catch clicks on the panel background */
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrubber-row {
|
& .btn {
|
||||||
display: flex;
|
visibility: hidden;
|
||||||
gap: 12px;
|
}
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
/* Bottom: Timeline Panel Context */
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
color: white;
|
|
||||||
padding: 4px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 4ch;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: background 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn:hover {
|
& .visualizer-ui {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
pointer-events: none;
|
||||||
}
|
background: transparent;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
color: white;
|
||||||
|
user-select: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
.track-container {
|
& .scrubber-row {
|
||||||
flex-grow: 1;
|
display: flex;
|
||||||
height: 24px;
|
gap: 12px;
|
||||||
padding: 0 10px;
|
align-items: center;
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-inner {
|
& .btn {
|
||||||
position: relative;
|
min-width: 4ch;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
}
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-bg {
|
& .track-container {
|
||||||
position: absolute;
|
flex-grow: 1;
|
||||||
left: -10px;
|
height: 24px;
|
||||||
right: -10px;
|
padding: 0 10px;
|
||||||
top: 8px;
|
cursor: pointer;
|
||||||
height: 8px;
|
display: flex;
|
||||||
background: rgba(255, 255, 255, 0.2);
|
align-items: center;
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-fill {
|
& .track-inner {
|
||||||
position: absolute;
|
position: relative;
|
||||||
left: -10px;
|
width: 100%;
|
||||||
top: 8px;
|
height: 100%;
|
||||||
height: 8px;
|
pointer-events: none;
|
||||||
background: #f00;
|
|
||||||
width: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.track-handle {
|
& .track-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 16px;
|
left: -10px;
|
||||||
height: 16px;
|
right: -10px;
|
||||||
background: #fff;
|
top: 8px;
|
||||||
border-radius: 50%;
|
height: 8px;
|
||||||
top: 12px;
|
background: rgba(255, 255, 255, 0.2);
|
||||||
transform: translate(-50%, -50%);
|
border-radius: 4px;
|
||||||
z-index: 3;
|
}
|
||||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.marker {
|
& .track-fill {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
left: -10px;
|
||||||
height: 8px;
|
top: 8px;
|
||||||
transform: translateX(-50%);
|
height: 8px;
|
||||||
pointer-events: none;
|
background: #f00;
|
||||||
z-index: 1;
|
width: 10px;
|
||||||
}
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
.marker-event {
|
& .track-handle {
|
||||||
width: 2px;
|
position: absolute;
|
||||||
background: rgba(255, 255, 255, 0.5);
|
width: 16px;
|
||||||
}
|
height: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 12px;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 3;
|
||||||
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
.marker-label {
|
& .marker {
|
||||||
width: 4px;
|
position: absolute;
|
||||||
background: gold;
|
top: 8px;
|
||||||
z-index: 2;
|
height: 8px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&.marker-event {
|
||||||
|
width: 2px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.marker-label {
|
||||||
|
width: 4px;
|
||||||
|
background: gold;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Spatial Tool Hints */
|
||||||
|
|
||||||
|
& .spacetime-indicator {
|
||||||
|
position: absolute;
|
||||||
|
left: 33px;
|
||||||
|
top: 29px;
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.4);
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 14px;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* --- Hover Visibility Logic --- */
|
/* --- Hover Visibility Logic --- */
|
||||||
@@ -177,25 +178,21 @@ mc-diorama canvas {
|
|||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spacetime-container:hover .spacetime-hover-reveal {
|
.spacetime-container:hover {
|
||||||
opacity: 1;
|
& .spacetime-hover-reveal {
|
||||||
pointer-events: auto;
|
opacity: 1;
|
||||||
}
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.spacetime-indicator {
|
& .spacetime-indicator {
|
||||||
position: absolute;
|
opacity: 0;
|
||||||
right: 33px;
|
}
|
||||||
bottom: 29px;
|
|
||||||
display: flex;
|
|
||||||
gap: 12px;
|
|
||||||
color: rgba(255, 255, 255, 0.4);
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 14px;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 1;
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spacetime-container:hover .spacetime-indicator {
|
& .visualizer-ui {
|
||||||
opacity: 0;
|
background: rgba(20, 20, 20, 0.85);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -66,13 +66,13 @@ export class SpacetimeController {
|
|||||||
if (this.hasSpatial) {
|
if (this.hasSpatial) {
|
||||||
const topWrapper = document.createElement('div');
|
const topWrapper = document.createElement('div');
|
||||||
topWrapper.className = 'reset-wrapper';
|
topWrapper.className = 'reset-wrapper';
|
||||||
this.resetBtn = document.createElement('button');
|
this.resetBtn = document.createElement('div');
|
||||||
this.resetBtn.className = 'reset-btn';
|
this.resetBtn.className = 'btn';
|
||||||
this.resetBtn.textContent = 'Reset View';
|
this.resetBtn.textContent = 'Reset View';
|
||||||
|
|
||||||
this.resetBtn.addEventListener('click', () => {
|
this.resetBtn.addEventListener('click', () => {
|
||||||
this.diorama.loadState();
|
this.diorama.loadState();
|
||||||
this.resetBtn.style.display = 'none';
|
this.resetBtn.style.visibility = 'hidden';
|
||||||
});
|
});
|
||||||
|
|
||||||
topWrapper.appendChild(this.resetBtn);
|
topWrapper.appendChild(this.resetBtn);
|
||||||
@@ -181,7 +181,7 @@ export class SpacetimeController {
|
|||||||
|
|
||||||
const notifyCameraChange = () => {
|
const notifyCameraChange = () => {
|
||||||
this.hasDragged = true;
|
this.hasDragged = true;
|
||||||
if (this.resetBtn && this.diorama.checkpoint) this.resetBtn.style.display = 'block';
|
if (this.resetBtn && this.diorama.checkpoint) this.resetBtn.style.visibility = 'visible';
|
||||||
this.diorama.requestRender();
|
this.diorama.requestRender();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user