mirror of
https://github.com/zebrajr/react.git
synced 2026-01-15 12:15:22 +00:00
ef88c588d5
<img width="1011" height="811" alt="Screenshot 2025-10-16 at 2 20 46 PM" src="https://github.com/user-attachments/assets/6dea3962-d369-4823-b44f-2c62b566c8f1" /> The selection is now clearer with a wider outline which spans the bounding box if there are multi rects. The color now gets darked changes on hover with a slight animation. The colors are now mixed from constants defined which are consistently used in the rects, the time span in the "suspended by" side bar and the scrubber. I also have constants defined for "server" and "other" debug environments which will be used in a follow up.
62 lines
1.2 KiB
CSS
62 lines
1.2 KiB
CSS
.SuspenseScrubber {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
border-radius: 0.75rem;
|
|
padding: 0.25rem;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.SuspenseScrubber:has(.SuspenseScrubberInput:focus-visible) {
|
|
outline: 2px solid var(--color-button-background-focus);
|
|
}
|
|
|
|
.SuspenseScrubberInput {
|
|
position: absolute;
|
|
width: 100%;
|
|
opacity: 0;
|
|
height: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.SuspenseScrubberInput:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.SuspenseScrubberStep {
|
|
cursor: pointer;
|
|
flex: 1;
|
|
height: 100%;
|
|
padding-right: 1px; /* we use this instead of flex gap to make every pixel clickable */
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.SuspenseScrubberStep:last-child {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.SuspenseScrubberBead {
|
|
flex: 1;
|
|
height: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
background: color-mix(in srgb, var(--color-suspense) 10%, transparent);
|
|
transition: all 0.3s ease-in;
|
|
}
|
|
|
|
.SuspenseScrubberBeadSelected {
|
|
height: 1rem;
|
|
background: var(--color-suspense);
|
|
}
|
|
|
|
.SuspenseScrubberBeadTransition {
|
|
background: var(--color-transition);
|
|
}
|
|
|
|
.SuspenseScrubberStepHighlight > .SuspenseScrubberBead,
|
|
.SuspenseScrubberStep:hover > .SuspenseScrubberBead {
|
|
height: 0.75rem;
|
|
transition: all 0.3s ease-out;
|
|
}
|