Comments (7)
The theme has the --gnome-navbar-csd-offset
CSS var to know how much offset the navbar needs to show the window controls. The theme sets the value of this var based on the linux-only -moz-gtk-csd-minimize-button
, -moz-gtk-csd-maximize-button
and -moz-gtk-csd-close-button
media queries. Then it uses the -moz-gtk-csd-reversed-placement
to know if the offset needs to go in the start or end.
Said that, if you know some macOS-only media query in Firefox we could use it to set --gnome-navbar-csd-offset
with some value that works for macOS, and I guess it would also need to set the offset in the start.
Otherwise you can add custom styles on top of the theme to fix your issue:
/* Window controls offset */
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
padding-left: 117px !important;
padding-right: 3px !important;
}
from firefox-gnome-theme.
Looking at https://github.com/mozilla/gecko-dev/blob/f602853ba8d55ba157e2a74d9b571615f6ed97b8/layout/style/test/chrome/chrome-only-media-queries.js looks like we might have some alternatives.
Can you check if the following code works?
@media (-moz-platform: macos) {
:root {
--gnome-navbar-csd-offset: 117px;
}
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
padding-left: var(--gnome-navbar-csd-offset) !important;
padding-right: 3px !important;
}
:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
left: 0;
right: auto !important;
}
}
from firefox-gnome-theme.
Put that in customChrome.css, got this result:
from firefox-gnome-theme.
Hmm, so it works fine (adding the offset) but there are no window controls. I would need to inspect the UI I guess, but I don't have macOS, so we're at a dead end.
from firefox-gnome-theme.
Hmm, so it works fine (adding the offset) but there are no window controls. I would need to inspect the UI I guess, but I don't have macOS, so we're at a dead end.
I have an older Macbook that I can set up remote desktop on if you wanted to use that to test on.
from firefox-gnome-theme.
This seems to get the gnome style buttons workable/visible:
@media (-moz-platform: macos) {
:root {
--gnome-navbar-csd-offset: 120px;
}
:root[tabsintitlebar]:not([inFullscreen]) #nav-bar {
padding-left: var(--gnome-navbar-csd-offset) !important;
padding-right: 3px !important;
}
:root[tabsintitlebar] #titlebar .titlebar-buttonbox-container {
left: 0;
right: auto !important;
}
:root[tabsintitlebar] #titlebar .titlebar-buttonbox {
display: flex !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min,
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max,
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
display: flex !important;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close {
order: 1;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min {
order: 2;
}
:root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max {
order: 3;
}
:root[tabsintitlebar]
#titlebar
#TabsToolbar
.titlebar-buttonbox-container:not(#hack) {
display: block !important;
}
:root[tabsintitlebar] .titlebar-buttonbox {
position: absolute;
top: -46px;
}
}
I can make a PR if this is something you want, I'm not sure if you have a variable for the #nav-bar height, which is where that -46px is coming from.
I also added another 3px to --gnome-navbar-csd-offset
as the button padding overlapped the maximize button on hover.
I wrote this in Nightly (127.0a1 (2024-04-30) (64-bit)) - I haven't tested it anywhere else
from firefox-gnome-theme.
This seems to get the gnome style buttons workable/visible:
@media (-moz-platform: macos) { :root { --gnome-navbar-csd-offset: 120px; } :root[tabsintitlebar]:not([inFullscreen]) #nav-bar { padding-left: var(--gnome-navbar-csd-offset) !important; padding-right: 3px !important; } :root[tabsintitlebar] #titlebar .titlebar-buttonbox-container { left: 0; right: auto !important; } :root[tabsintitlebar] #titlebar .titlebar-buttonbox { display: flex !important; } :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min, :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max, :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close { display: flex !important; } :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-close { order: 1; } :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-min { order: 2; } :root[tabsintitlebar] #titlebar .titlebar-button.titlebar-max { order: 3; } :root[tabsintitlebar] #titlebar #TabsToolbar .titlebar-buttonbox-container:not(#hack) { display: block !important; } :root[tabsintitlebar] .titlebar-buttonbox { position: absolute; top: -46px; } }I can make a PR if this is something you want, I'm not sure if you have a variable for the #nav-bar height, which is where that -46px is coming from.
I also added another 3px to
--gnome-navbar-csd-offset
as the button padding overlapped the maximize button on hover.I wrote this in Nightly (127.0a1 (2024-04-30) (64-bit)) - I haven't tested it anywhere else
I can confirm that this makes the buttons show up, but they all seem shifted too far to the right, and more importantly, I can't click on any of the tabs beneath the window buttons.
from firefox-gnome-theme.
Related Issues (20)
- After updating gnomeTheme.hideSingleTab no longer has any effect. HOT 3
- Weird padding when a bookmark folder only has one item HOT 1
- URLBar suggestions is broken with 126 HOT 4
- [Feature]Optional Folder For Yaru Icons in Ubuntu HOT 4
- Window titlebar buttons changed in Firefox 125.0.1 HOT 8
- Close button changed HOT 5
- Oversized window close button HOT 1
- Search Suggestions Broken in 126 HOT 1
- Firefox's (X) close button looks larger than the average GNOME App. HOT 10
- Twitter/Mastodon don't respect bottom rounded corners HOT 1
- [Vertical tab - Extension] Visual bug, Inconsistency
- when browser.tabs.tabmanager.enabled false you can no longer close the tabs comfortably
- Firefox 126 search suggestions offset HOT 2
- Address bar get covered by suggestions when clicked HOT 3
- URL suggestions overlaps address bar HOT 2
- Extra 1px gray line in nav bar in Firefox 126
- URL Dropdown menu overlaps with the URL bar when installed via install-by-curl.sh HOT 1
- Amoled colors all over
- Installation script does not seem to work
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from firefox-gnome-theme.