issues with theme on macos about firefox-gx

[Godiesc]

it's done now. ❤

[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:

[Godiesc]

it's not necessary a fresh install of firefox, maybe you copied the code that replace that icons with new ones that you don't have in the chrome>images folder. Just try the first part of the code:

/* 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;
}
}

[FormalSnake]

/* 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;
}
}

so i just add this to the bottom of OGX_WINDOWSCONTROLS?

[FormalSnake]

and if i do that, it gets the same result sadly

[Godiesc]

try to test the last bloc of the code line to line to see what code is the one that hide the buttons.

@media (-moz-platform: linux) { .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: transparent !important;
    direction: ltr !important;
}
}

[Godiesc]

sorry I pasted a code with a random link, I edited my last comment.

[FormalSnake]

same issue, i changed the linux to macos because with the linux they appeared again, but not vertical

[Godiesc]

yeah, need to be macos. And you tested line to line until the css rule that hide them?

[FormalSnake]

oh no, ill do that in a sec

[Godiesc]

if you are busy we try on other moment. :)

[FormalSnake]

sure

[FormalSnake]

i have tried it out and its this line obviously
appearance: none !important;

[FormalSnake]

i dont have much css experience sorry

[Godiesc]

and the rest of the code without that line do something?

[Godiesc]

and maybe it is not possible to change that icons jeje, maybe you could help me with the top padding and the left padding to the tabs-bar to the items not overflow each other..

[FormalSnake]

it does not seem possible indeed, so lets just not do overflow then

[Godiesc]

How works this:

@media (-moz-platform: macos){ :root[tabsintitlebar][sizemode="maximized"] #TabsToolbar{
  padding-block-start: 4px !important;
    }}
@media (-moz-platform: macos){ :root[tabsintitlebar][sizemode="maximized"] #tabbrowser-tabs{
  padding-inline-start: 24px !important;
    }}

[FormalSnake]

How works this:

@media (-moz-platform: macos){ :root[tabsintitlebar][sizemode="maximized"] #TabsToolbar{
  padding-block-start: 4px !important;
    }}
@media (-moz-platform: macos){ :root[tabsintitlebar][sizemode="maximized"] #tabbrowser-tabs{
  padding-inline-start: 24px !important;
    }}

Where do i put this?

[Godiesc]

well you can test in whatever css file of the theme, any of "ogx_...", it doesn't matter. I will put the code in a correct css only for mantain of the code, to know where is what. I only separate de code in files to a better update of the code.

[FormalSnake]

That code works! Now something you need to do is put the tab closing X in the top of the favicon, like operaGX

[Godiesc]

you could give me a SS to see the theme in macos, I need a ScreenShot to add in my github page if you don't have a problem.

[FormalSnake]

One moment, i realised i have a bug, easy fix

[FormalSnake]

Step 1: Remove OGX_MENU.css
Step 2: Add this code where it is needed:

@media (-moz-platform: macos) {#TabsToolbar{
  padding-block-start: 6px !important;
}
#tabbrowser-tabs{
  padding-inline-start: 10px !important;
}
}

[FormalSnake]

Here you go!

[Godiesc]

please you could update the ogx_left-sidebar.css with the one that I updated in the github page, I did a little update to fix the menu button when the ogx_menu.css is deleted, and after that pls give me other SS, sorry for the inconvenient.

[FormalSnake]

what did it fix? i see no difference

[Godiesc]

the hamburger menu dont show a black background by default. in your SS see that background.

[FormalSnake]

oh yes i see it now

[FormalSnake]

[Godiesc]

thanks for your help, sad that the window control buttons didn't make it work jeje. I appreciate your time.

[FormalSnake]

thanks for your help, sad that the window control buttons didn't make it work jeje. I appreciate your time.

No problem, im happy to help when you need me!

[Godiesc]

one last questions, the top padding we added is for maximized and normal windows right? you deleted that part of the code cause that only applied in maximized window?

[FormalSnake]

yeah, if i put it in fullscreen, the tabs go to the edge of the window, but it can be fixed on your end, and if i put it in maximized, in most firefox themes the padding goes away, which is also fixed here now.

[Godiesc]

Step 1: Remove OGX_MENU.css Step 2: Add this code where it is needed:

@media (-moz-platform: macos) {#TabsToolbar{
  padding-block-start: 6px !important;
}
#tabbrowser-tabs{
  padding-inline-start: 10px !important;
}
}

I will add the platform: macos in the second rule, you forgot to added jeje

@media (-moz-platform: macos) { #TabsToolbar{
  padding-block-start: 6px !important;
}
@media (-moz-platform: macos) { #tabbrowser-tabs{
  padding-inline-start: 10px !important;
}
}

[FormalSnake]

lol, there is another issue, related with fonts

[FormalSnake]

[Godiesc]

I updated ogx_contextual-menu.css , check it to update that file and make me know if that solves the problem.

[FormalSnake]

ok, ill check it out

[FormalSnake]

it looks a looooott better now

[FormalSnake]

identical with opera GX

[Godiesc]

glad to know it. :)

[FormalSnake]

ill report any further issues, im glad to have worked with you! Can i update the readme.md so that i appear as a contributor?

[Godiesc]

to do that you can fork my repository and after that edit the file ogx_tabs-bar.css and add to the end of the file:

/* --------------------- config to MacOS ---------------------------
   ------------- partial compatibility to window Controls ----------*/
@media (-moz-platform: macos) { #TabsToolbar{
  padding-block-start: 6px !important;
}
@media (-moz-platform: macos) { #tabbrowser-tabs{
  padding-inline-start: 10px !important;
}
}

And after that you make a pull request, I'll accept and after that you'll see you as a contributor.

[Godiesc]

or I put your name in the MacOS section, an easy way.

[FormalSnake]

i made a pr, and maybe adding a name that links to my profile would be nice, it is the first time i contribute to a project

[FormalSnake]

Thanks a lot! I am honored

[Godiesc]

and other thing, the close button in the favicon maybe will interfere with the sound icon button, I dont know how opera work with sound tabs.

[FormalSnake]

and other thing, the close button in the favicon maybe will interfere with the sound icon button, I dont know how opera work with sound tabs.

I will make another issue for this