Getting around issue with misaligned traffic lights

[insomnia-creator]

How would one align the traffic lights correctly? Example

They're slightly misaligned below the actual lining. This is because of the about.config ->

If we reset it to -1.0(default value) the issue if fixed albeit the UI is now extremely large for my preference.

Is this any way we can get around this? Thank you. I tried to see if there is a variable giving this value to me in the css but to no avail. It would be easy to put this value into a slow growing function and keep it aligned.

[aureness]

I have replicated your problem

Here quick workaround: You may add these lines, where 16px was eyeballed for layout.css.devPixelsPerPx: 1.9

.titlebar-buttonbox {
  height: 16px;
}

I don't know how we can get this scaling factor in CSS tho

[insomnia-creator]

I did manually change it earlier, but it's not a permanent solution is it?

[aureness]

We can actually test what devPixelsPerPx is and set custom styles for reasonable amount of them up to 2 Like this:

@media ( -webkit-min-device-pixel-ratio: 1.2) {
  .titlebar-buttonbox {
    min-height: 25px;
  }
}

@media ( -webkit-min-device-pixel-ratio: 1.3) {
  .titlebar-buttonbox {
    min-height: 21px;
  }
}

@media ( -webkit-min-device-pixel-ratio: 1.4) {
  .titlebar-buttonbox {
    min-height: 17px;
  }
}

@media ( -webkit-min-device-pixel-ratio: 1.6) {
  .titlebar-buttonbox {
    min-height: 17px;
  }
}

@media ( -webkit-min-device-pixel-ratio: 1.9) {
  .titlebar-buttonbox {
    min-height: 16px;
  }
}

@media ( -webkit-min-device-pixel-ratio: 2) {
  .titlebar-buttonbox {
    min-height: initial;
  }
}

2 is default macOS retina scale and buttons stop to overflow this box ugly. Also one can tweak other values in these blocks.

I just have tried this and it works.

Or one can try define a variable in these blocks like

@media ( -webkit-min-device-pixel-ratio: 1) {
  :root {
    --device-pixel-ratio: 1;
  }
}
...
@media ( -webkit-min-device-pixel-ratio: 2) {
  :root {
    --device-pixel-ratio: 2;
  }
}

And add a multiplier to necessary values as calc(val(--device-pixel-ratio) * <default-value>)

[aureness]

@media (max--moz-device-pixel-ratio: 1.9)

probably would be better. moz- prefix feels better in mozilla's browser (but -webkit works too 🙂)