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 {
|
||||
display: none;
|
||||
}
|
||||
@@ -8,15 +8,14 @@ mc-diorama {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 20em;
|
||||
|
||||
& canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
mc-diorama canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* --- UI Controls styles --- */
|
||||
.spacetime-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -30,144 +29,146 @@ mc-diorama canvas {
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
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;
|
||||
border-radius: 4px;
|
||||
font-weight: bold;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
& .btn {
|
||||
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 {
|
||||
pointer-events: none; /* Let clicks pass through the empty space by default */
|
||||
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;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.spacetime-container:hover .visualizer-ui {
|
||||
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; /* Catch clicks on the panel background */
|
||||
}
|
||||
& .reset-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
|
||||
.scrubber-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
& .btn {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
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;
|
||||
}
|
||||
/* Bottom: Timeline Panel Context */
|
||||
|
||||
.btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
& .visualizer-ui {
|
||||
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 {
|
||||
flex-grow: 1;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
& .scrubber-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
|
||||
.track-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
& .btn {
|
||||
min-width: 4ch;
|
||||
}
|
||||
}
|
||||
|
||||
.track-bg {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
top: 8px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
& .track-container {
|
||||
flex-grow: 1;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.track-fill {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 8px;
|
||||
height: 8px;
|
||||
background: #f00;
|
||||
width: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
& .track-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.track-handle {
|
||||
position: absolute;
|
||||
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);
|
||||
}
|
||||
& .track-bg {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
top: 8px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
height: 8px;
|
||||
transform: translateX(-50%);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
& .track-fill {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 8px;
|
||||
height: 8px;
|
||||
background: #f00;
|
||||
width: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.marker-event {
|
||||
width: 2px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
& .track-handle {
|
||||
position: absolute;
|
||||
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 {
|
||||
width: 4px;
|
||||
background: gold;
|
||||
z-index: 2;
|
||||
& .marker {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
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 --- */
|
||||
@@ -177,25 +178,21 @@ mc-diorama canvas {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.spacetime-container:hover .spacetime-hover-reveal {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.spacetime-container:hover {
|
||||
& .spacetime-hover-reveal {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.spacetime-indicator {
|
||||
position: absolute;
|
||||
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-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spacetime-container:hover .spacetime-indicator {
|
||||
opacity: 0;
|
||||
& .visualizer-ui {
|
||||
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) {
|
||||
const topWrapper = document.createElement('div');
|
||||
topWrapper.className = 'reset-wrapper';
|
||||
this.resetBtn = document.createElement('button');
|
||||
this.resetBtn.className = 'reset-btn';
|
||||
this.resetBtn = document.createElement('div');
|
||||
this.resetBtn.className = 'btn';
|
||||
this.resetBtn.textContent = 'Reset View';
|
||||
|
||||
this.resetBtn.addEventListener('click', () => {
|
||||
this.diorama.loadState();
|
||||
this.resetBtn.style.display = 'none';
|
||||
this.resetBtn.style.visibility = 'hidden';
|
||||
});
|
||||
|
||||
topWrapper.appendChild(this.resetBtn);
|
||||
@@ -181,7 +181,7 @@ export class SpacetimeController {
|
||||
|
||||
const notifyCameraChange = () => {
|
||||
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();
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user