mathlive icon indicating copy to clipboard operation
mathlive copied to clipboard

--keycap-text-hover property not being used

Open callumnewlands opened this issue 1 year ago • 0 comments

Description

The --keycap-text-hover does not result in any changes to the keyboard styling, the problem seems to be that the resulting local variable --_keycap-text-hover is not being used anywhere inside css/virtual-keyboard.less

In screenshot, the following values are being used:

--keycap-background: #c8e5fe;  // Light blue
--keycap-background-hover: #2d5a81;  // Dark blue
--keycap-text: #2d5a81;  // Dark blue
--keycap-text-hover: red;

image

As a related aside it would also be helpful to have a separate hover text colour variable for the keyboard-toolbar (currently there is only --keyboard-toolbar-text-active which controls both text of the currently selected toolbar tab and the hover state for the remaining tabs

In screenshot, the following values are being used:

--keyboard-background: #f4faff; // Lightest Blue
--keyboard-toolbar-text: #0058de;  // Blue
--keyboard-toolbar-text-active: red;  
--keyboard-toolbar-background-hover: #2d5a81;  // Dark blue

image

Steps to Reproduce

  1. Create a project with mathlive
  2. Attempt to customise the keycap hover colour by setting the --keycap-text-hover variable (I did this inside the CSS for the element set as window.mathVirtualKeyboard.container)

Actual Behavior

The keycap hover colour is taken from the --keycap-text var rather than the --keycap-text-hover var

Expected Behavior

The --keycap-text-hover var should affect the color of the keycap when it is hovered over

Environment

MathLive version Using mathlive v0.101.0 via npm Operating System Windows 11 Home, 10.0 Build 22631 Browser Tested on Chrome, Firefox and Edge

callumnewlands avatar Sep 22 '24 13:09 callumnewlands