Fixing Window Controls on Windows 10

[MrUltimate]

Hello again,

Making this note here for people on Windows 10. I noticed that the window controls were not fully showing when placing them on the right side (the minimize button was getting cutoff). When using the left side CSS, the maximize button was slightly getting cutoff. Everything works flawlessly on macOS.

I've made the following changes to show the windows control on the RIGHT side correctly. Users made need to experiment with values if they're trying to use the left side. Might just need to tweak the right side values too... this is what worked for me however:

In wc-without-tabline-r.css, change:

:root:not([inFullscreen]) toolbar#nav-bar {
    margin-left: 0 !important;
    margin-right: calc(var(--wc-left-space) * 2 + 80px) !important;
}

In window-controls.css:

.titlebar-button {
    transition: all 0.3s ease !important;
    padding: 4px 8px 0px 8px !important;
    background: none !important;
    -moz-context-properties: fill, fill-opacity !important;
}

/* Fix for window controls moving up when maximizing window */
:root[sizemode="maximized"] .titlebar-button {
    padding: 14px 8px 0px 8px !important;
}

Cheers!

[akshat46]

when placing them on the right side (the minimize button was getting cutoff). When using the left side CSS, the maximize button was slightly getting cutoff.

Were the shift- vars in config.css not working? If you happened to overlook them you can find more detail in the window-controls customization section in wiki. With this, changing --wc-left-space should allow changes to margin-right in margin-right: calc(var(--wc-left-space) * 2 + 80px) !important;.

Thanks for the second note! I don't use windows 10 so I pretty much just fix things whenever someone complains. I'll add that one to FAQs.

[JarrodBWong]

I found @MrUltimate 's fix to be much better than when I tried playing around with the shift vars in config css since it needed a different spacing when maximized vs windowed. I did change the top padding from 14 to 20px when maximized though

[leviikrunker]

not only that, but on windows 10 when the window is maximized (at least for me) the window controls are always on the top and misaligned with the addressbar, toolbar whatever you call it. therefore, in order for the window controls to be centered in the toolbar for a maximized window i changed the root value of the vertical shift in the maximized sizemode: :root[sizemode="maximized"] { --wc-vertical-shift: 28px !important; } i think this can be added in the windowspatch css as well for fullscreen usage

[chrispinkney]

not only that, but on windows 10 when the window is maximized (at least for me) the window controls are always on the top and misaligned with the addressbar, toolbar whatever you call it. therefore, in order for the window controls to be centered in the toolbar for a maximized window i changed the root value of the vertical shift in the maximized sizemode: :root[sizemode="maximized"] { --wc-vertical-shift: 28px !important; } i think this can be added in the windowspatch css as well for fullscreen usage

Thank you!! I found that 16px works better for me.