Port Angular time-range slider styling to the filter sidebars

Angular's `page-time-selector.scss` paints the whole filter slider in
brand blues — pale $blue-light2 track, solid $blue-light range, and
solid $blue-light thumbs with a 2px white ring — and thickens the
horizontal track from PrimeReact's 4px default to 6px. React carried
the stock gray/white PrimeReact theme, which read as a dead, low-
contrast control next to the blue chevrons and calendar icon.

Add the same overrides scoped under `.wrapper--time-selector` so both
OnlineBoard and Schedule (the two sidebars that render the range
slider) pick them up.
This commit is contained in:
2026-04-22 12:13:43 +03:00
parent aad94636c7
commit a1089e07dd
+33
View File
@@ -1658,6 +1658,39 @@ body .p-slider.p-slider-animate .p-slider-handle {
transition: box-shadow 0.2s, left 0.2s;
}
// Filter time-range slider inside `.wrapper--time-selector` (OnlineBoard /
// Schedule sidebars): Angular's `page-time-selector.scss` paints the
// whole track in blue-light2 pale blue, the range in blue-light, and
// draws solid blue-light thumbs with a 2px white ring. Default PrimeReact
// leaves the track grey and the handles white with a dark-gray border.
.wrapper--time-selector .p-slider {
background-color: $blue-light2;
&.p-slider-horizontal {
height: 6px;
}
.p-slider-range {
background-color: $blue-light;
}
.p-slider-handle {
background-color: $blue-light;
height: $slider-handle-size;
width: $slider-handle-size;
border: 2px solid $white;
margin-top: calc(-1 * $slider-handle-size / 2);
transition-duration: 0.2s;
cursor: pointer;
&:hover,
&:focus,
&:active {
background-color: $blue;
}
}
}
body .p-spinner .p-spinner-input {
padding-right: 2.429em;
}