style hint labels

[frvgmxntx]

Is there a way to style the hint labels? I tried inspecting them in the browser toolbox but couldn't find a way to target them.
If not, it would be great to support styling hint labels (maybe via CSS).

Here's how I style mine in qutebrowser:

(btw amazing project)

[suveshmoza]

Yes, you can style the hint labels using glide.styles.add(...).

The CSS selectors you'll likely need:

• .glide-hints-container
• div.glide-internal-hint-marker
• div.glide-internal-hint-marker span
• .glide-matching-character

glide.styles.add(
`
  .glide-hints-container {}

  div.glide-internal-hint-marker {
    background: #a9c7ff !important;
    border: 1px solid #3b5bdb !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
  }

  div.glide-internal-hint-marker span {
    color: #1b1f3b !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }

  .glide-matching-character {
    color: #ffffff !important;
    background: #3b5bdb !important;
  }
`
)

[frvgmxntx]

Thanks! Is there a way to find those selectors? I searched the site but couldn't find a page about that.

[suveshmoza]

For most cases, the Browser Toolbox is enough. In this case, I had the repo cloned, so I searched the source code. You can also check the CSS files here src/toolkit/themes/shared

[frvgmxntx]

Well thanks again! I will give a look at that.