Making some changes to the reset.less so that some default UA button styling is removed.
Then, changing core.less so that the classic "HB" button styling is scoped to a certain class `.colorButton`. This will make it easier to use the button element in other places.
Reduce the visual prominence of the page input by using a darker background and a text color that matches the rest of the toolbar icons. Darker background still indicates this is an interactive item (is an input), hopefully.
Bad commit here with too much stuff. I apologize.
This sets up two Intersection Observers: the first captures every page that is at least 30% visible inside the `.pages` container, and the second captures every page that has at least one pixel on the horizontal center line of `.pages`. Both can be arrays of integers (page index).
The "visiblePages" array is duplicated and formatted into a "formattedPages" state, which gets displayed in the toolbar.
The toolbar displays that, unless the user clicks into the page input and enters their own integer (only a single integer, no range), which can then jump the preview to that page on Enter or blur().
The Arrow 'change page' buttons jump the preview back and forth by a 'full set'.
If one page is viewed at a time, this is moved on page a time, and if 10 pages are viewed at a time it jumps the pages by 10.
Left to do: adapt the "jump editor to match preview" divider button to work with new "centerPage".
defaultValue matches the normal styled values of the gap property on the .pages element.
removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders).
Rather than a single button with three states, it is three buttons. Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does.
Adds a new AnchoredBox component that is functionally a clone of the "saving error" notifications, but drops a lot of the JS in favor of the new (chrome-only!) CSS Anchor Positioning API. In subsequent commits, either alternate styling or a polyfill will be added non-supported browsers.
The box contains a few inputs that modify the CSS applied to `.pages`, most critically a "start on right" toggle for the Facing Pages mode.
The range slider should only display a tooltip for the value if the value attribute exists. For example, the difference between controlled and uncontrolled inputs.
Update toolBar.less
Toggles a state variable to either visible or hidden which is used to set a related class on the toolbar. The hiding is done with CSS, just reducing the width of the toolbar and the opacity of the tools.
Removes icons as components, uses mask-image instead.
Sets a size on the .fac icons to 1em so by default they are 1em and retain their aspect ratio.
rename the icon files for consistency.
stylelint has a problem with the `:horizontal` pseudo selector in brewRenderer.jsx, which is being used to apply some styling to the custom scrollbars. As far as i can tell, the selector is not standards-track, so that is probably why. Not sure if we want to adjsut our stylelint config to allow it?
Treat each input and button as a direct child of the `.group` class, removing the intermediate div and reassign the `tool` classname to those inputs and buttons. One item, the current / total page "set", is wrapped in a .tool div because they should be considered one item (even within the .group container).
And then a bunch of CSS adjustments to match the new structure.
Displaying the total page count near the current page number means we can lose the bottom right toolbar entirely (the renderer could be added to top toolbar, or just left for the metadata info in title bar).
Set as relative position, the toolbar (and mysteriously, the pageInfo box) would jump up 29px (toolbar height) when the "next page" button was clicked. absolute pos fixes this.
Mostly change some properties from things like "transparent" to "unset". A lot of things that are just overriding the default Naturalcrit "colored button". Moved some properties to the top level `.toolbar` class and let it cascade down.
more closely match the properties editor behavior. removed some unnecessary (unused) properties. Outline only appears when element is focused (rather than on hover as well).
replace column-/row-gap with a single gap at 5px. Padding on each child element will provide the space. Set a height on toolbar, so child elements can be set to 100% height to improve bg color change on hover.
Doesn't need to be Sticky positioning, relative is fine (it is still fixed above the iframe). Allows us to remove a bunch of extra properties.
Add a smidgen of padding.
Avoid over-styling of browser-defined slider, but still apply a HB appropriate color scheme. Prevents us from having to create our own tick marks, so we can just define the `option`s in the datalist and get tick marks in the right spot.
Víctor Losada Hernández