CSS Selector for Longpress Entries?

[dyacob]

Greetings Keypeople,

I’m trying out CSS based background coloring of keys, following the helpful SIL Cameroon QWERTY example, and have it working fine for base keys. My wish though is to set the background color of the longpress keys but have been unable to specify the individual keys via CSS.

An example, from the JSON fragment below, I would like to specify a color for the key at id “U_1250”, in the “sk” list of the key at id “K_Q”. To specify “K_Q” the following would work:

.kmw-keyboard-gff_tigrinya_ethiopia #default-K_Q { background:  #baed91 ; color: black; }

How would this be extended to select the longpress items within?

thanks!

    {
  "phone": {
    "layer": [
      {
        "id": "default",
        "row": [
          {
            "id": 1,
            "key": [
              {
                "id": "K_Q",
                "text": "ቕ",
                "layer": "shift",
                "sk": [
                  {
                    "text": "ቐ",
                    "id": "U_1250"
                  },

[makara]

It looks like the CSS does not currently get applied to long press keys even though you have the right id. (When inspected, long press key id should be something like #popup-....)

[dyacob]

Thanks @makara , I looked into it more and found markup like this generated for the popups:

<div class="kmw-key kmw-key-default" id="popup-default-U_1250" style="height: 40px; line-height: 40px; width: 28px; position: absolute;"><span class="kmw-key-text" style="font-size: 1em;">ቐ</span></div>

then was able to set the color of the popup key with the CSS statement:

div#popup-default-U_1250 { background: #baed91 ; color: black; }

I was happy this worked and can work with it. If there is a better way to express the CSS, please let me know. If a future update might address popup styles, my wish would be to associate a class style with a character address. A suggestion for this would be to add a CSS field to Keyman Developer where a class name could be entered in a “CSS” field in the modifiers that appears when you edit a popup key (see in screenshot):

thanks!

[Marc]

Note that on iOS, popups are rendered with CSS but on Android they are rendered by the app, so CSS rules will not apply on Android popups.

We are planning to make the CSS more accessible in a future update to Keyman, for sure. We’d like to give more comprehensive tooling for controlling the look and feel not only of individual keys, but of the whole keyboard, popups, etc.