issues with theme on macos

[linusrg1]

I think to to the nature of the placementof mac os's title bar buttons the theme has trouble functioning on macos firefox. The menu bar button is on the left of the firefox window for some reason, underlaying the buttons. Otherwise the theme looks great!

[Godiesc]

I don't have a MacOS to test the theme, so its so difficult to me fix o make compatible with that OS, Sorry. 💙 For now you could delete the ogx_menu.css file and the theme will works fine.

[FormalSnake]

I don't have a MacOS to test the theme, so its so difficult to me fix o make compatible with that OS, Sorry. 💙 For now you could delete the ogx_menu.css file and the theme will works fine.

This is pretty annoying, please fix.

[FormalSnake]

And the tabs get overlapped with the ogx_menu.css removed

[Godiesc]

you could try adding this code to the end of userChrome.css.

#tabbrowser-tabs{
  padding-inline-start: 24px !important;
}

try a smaller or bigger pixels number to look it well to you. PD: delete the lines: 58-72 from ogx_left-sidebar.css if you using that config, if not just the first code will be necessary.

[FormalSnake]

Thanks, i will try it. Opera GX Firefox GX

Maybe there is a way to move the window controls and stuff, and there is like no spacing between the window borders and the tabs, other than that it is perfect!

[Godiesc]

like I said I don´t have that OS to play with the css to make it compatible, I just can give you some code to try solve a little things, to make a space in the top add this too:

#TabsToolbar{
  padding-block-start: 6px !important;
}

And for the window controls I give up jeje, I would need that OS to test.

[FormalSnake]

like I said I don´t have that OS to play with the css to make it compatible, I just can give you some code to try solve a little things, to make a space in the top add this too:

#TabsToolbar{
  padding-block-start: 6px !important;
}

And for the window controls I give up jeje, I would need that OS to test.

I might actually research that myself, might make a pull request some day, i am going to edit the config now!

[Godiesc]

that would be perfect.

[FormalSnake]

that would be perfect.

I am learning chromeCSS right now, i know how to move the buttons from left to right, but no vertical layout yet.

[Godiesc]

for default in macOS that buttons stay in the left, are you changing them to the right?

[Godiesc]

you could try this code to make the window controls vertical:

@media (-moz-platform: macos) {:root:is([tabsintitlebar]) .titlebar-buttonbox{
    display: flex !important;
    flex-direction: column !important;
}}

[FormalSnake]

you could try this code to make the window controls vertical:

@media (-moz-platform: macos) {:root:is([tabsintitlebar]) .titlebar-buttonbox{
    display: flex !important;
    flex-direction: column !important;
}}

That did not work, but i can try to modify this code

[Godiesc]

do you use the developer console? In the first post of reddit/r/firefoxcss has the steps to enable. then you can select a element with the selector and see the id and classes to edit with css. and if you apply only this part of the code still nothing happen?

.titlebar-buttonbox{
    display: flex !important;
    flex-direction: column !important;
}

[FormalSnake]

do you use the developer console? In the first post of reddit/r/firefoxcss has the steps to enable. then you can select a element with the selector and see the id and classes to edit with css. and if you apply only this part of the code still nothing happen?

.titlebar-buttonbox{
    display: flex !important;
    flex-direction: column !important;
}

i am using the dev console, ill try just that out

[FormalSnake]

Update: if i try changing the background color, it does nothing, only in the buttonbox container

[Godiesc]

for example I used that class to edit the code I sent you and has this change:

DONT FORGET TO ADD !IMPORTANT; TO THE END OF EACH CSS RULE.

[FormalSnake]

On mac this doesn't work, as you can see, i added the CSS

And this is the result:

[Godiesc]

show me how looks you selecting that window controls with the console. like this image:

[FormalSnake]

I did have to clear all my tabs in the css to be able to select it.

[Godiesc]

if you try to give a max-width and min-width to 40px for example and a bigger height maybe could work ejje, well, it my time to sleep, maybe you could play with some rules to see if apply.

[FormalSnake]

Buenas noches

[FormalSnake]

.titlebar-buttonbox {
  display: flex !important;
  flex-direction: column !important;
  max-width: 40px !important;
  min-width: 40px !important;
  height: 60px !important;
  background-color: red !important;
}

He conseguido mover los botones, pero no se ponen en column

[Godiesc]

the first tab always was so near to the border of the windows? and if you use background: red instead of background-color makes a difference?

[FormalSnake]

the first tab always was so near to the border of the windows? and if you use background: red instead of background-color makes a difference?

I removed the padding tab rule to test out if it was conflicting in a way and the background: red did nothing

[Godiesc]

with the developer console in the right side after selected that element are you tried to uncheck some css rule to see what happens?

[FormalSnake]

with the developer console in the right side after selected that element are you tried to uncheck some css rule to see what happens?

¿? ¿What element? ¿And what rule?

[Godiesc]

would be perfect to use teamviewer or some app to test in your computer jeje and I mean the default css rules that are in the default Firefox theme:

and try to add: appearance: none !important; maybe the OS has control of that style and for that all the css rules we are trying are failing.

[FormalSnake]

Yeah, maybe we should call on discord some day

[Godiesc]

I tried this code in linux and works, maybe this could work in macOS:

/* Linux Controls */
@media (-moz-platform: macos){ #tabbrowser-tabs{
  padding-inline-start: calc(var(--uc-vertical-toolbar-width) - 1px) !important;
    }
}
@media (-moz-platform: macos){ .titlebar-button:hover {
    appearance: none !important;
    background-color: transparent !important;
    }
}
@media (-moz-platform: macos) { .titlebar-buttonbox {
    appearance: none !important;
    position: fixed !important;
    display: flex !important;
    top: 0px !important;
    left: 0px !important;
    width: calc(var(--uc-vertical-toolbar-width) - 1px) !important;
    flex-direction: column !important;
    background: var(--lwt-frame) !important;
    direction: ltr !important;
}
}
@media (-moz-platform: macos){ .titlebar-button image{ height: 26px !important; width: 26px !important; }
    
@media (-moz-platform: macos){ .titlebar-close image { list-style-image: url("../images/closebuttonlinux.svg") !important; } }
@media (-moz-platform: macos){ .titlebar-close:hover image{ list-style-image: url("../images/closebuttonhoverlinux.svg") !important; } }
    
@media (-moz-platform: macos){ .titlebar-min image { list-style-image: url("../images/minbuttonlinux.svg") !important; } }
@media (-moz-platform: macos){ .titlebar-min:hover image{ list-style-image: url("../images/minbuttonhoverlinux.svg") !important; } }
    
@media (-moz-platform: macos){ .titlebar-max image { list-style-image: url("../images/maxbuttonlinux.svg") !important; } }
@media (-moz-platform: macos){ .titlebar-max:hover image{ list-style-image: url("../images/maxbuttonhoverlinux.svg") !important; } }
    
@media (-moz-platform: macos){ .titlebar-restore image { list-style-image: url("../images/maxbuttonlinux.svg") !important; } }
@media (-moz-platform: macos){ .titlebar-restore:hover image{ list-style-image: url("../images/maxbuttonhoverlinux.svg") !important; } }

PD: The code that change the icons isn't necessary.

[FormalSnake]

Lo voy a intentar con una instalacion fresca, por que me sale esto: