issues with theme on macos #1

linusrg1 · 2022-01-30T00:54:47Z

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 · 2022-01-30T14:21:47Z

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 · 2022-10-11T12:56:40Z

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 · 2022-10-11T13:05:21Z

And the tabs get overlapped with the ogx_menu.css removed

Godiesc · 2022-10-11T13:28:41Z

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 · 2022-10-11T15:43:32Z

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 · 2022-10-11T15:57:09Z

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 · 2022-10-11T15:58:41Z

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 · 2022-10-11T16:24:30Z

that would be perfect.

FormalSnake · 2022-10-11T18:31:51Z

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 · 2022-10-11T19:03:42Z

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

Godiesc · 2022-10-12T02:16:50Z

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 · 2022-10-12T04:28:30Z

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 · 2022-10-12T04:37:26Z

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 · 2022-10-12T04:57:25Z

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 · 2022-10-12T05:00:44Z

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

Godiesc · 2022-10-12T05:04:44Z

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 · 2022-10-12T05:27:54Z

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

And this is the result:

Godiesc · 2022-10-12T05:32:18Z

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

FormalSnake · 2022-10-12T05:35:42Z

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

Godiesc · 2022-10-12T05:41:52Z

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 · 2022-10-12T05:42:27Z

Buenas noches

FormalSnake · 2022-10-12T12:57:34Z

.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 · 2022-10-12T13:31:29Z

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 · 2022-10-12T13:32:32Z

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 · 2022-10-12T13:35:03Z

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 · 2022-10-12T14:01:55Z

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 · 2022-10-12T14:17:27Z

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 · 2022-10-12T14:25:36Z

Yeah, maybe we should call on discord some day

Godiesc · 2022-10-13T03:24:22Z

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 · 2022-10-13T17:08:16Z

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

FormalSnake · 2022-10-13T17:14:43Z

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 · 2022-10-13T17:18:49Z

Here you go!

Godiesc · 2022-10-13T17:23:27Z

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 · 2022-10-13T17:33:36Z

what did it fix? i see no difference

Godiesc · 2022-10-13T17:34:25Z

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

FormalSnake · 2022-10-13T17:35:14Z

oh yes i see it now

FormalSnake · 2022-10-13T17:37:04Z

Godiesc · 2022-10-13T17:39:25Z

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

FormalSnake · 2022-10-13T17:40:10Z

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 · 2022-10-13T17:41:34Z

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 · 2022-10-13T17:43:30Z

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 · 2022-10-13T17:52:08Z

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 · 2022-10-13T17:52:46Z

lol, there is another issue, related with fonts

FormalSnake · 2022-10-13T17:53:02Z

Godiesc · 2022-10-13T17:58:46Z

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

FormalSnake · 2022-10-13T17:59:21Z

ok, ill check it out

FormalSnake · 2022-10-13T18:00:24Z

it looks a looooott better now

FormalSnake · 2022-10-13T18:00:39Z

identical with opera GX

Godiesc · 2022-10-13T18:02:57Z

glad to know it. :)

FormalSnake · 2022-10-13T18:03:42Z

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 · 2022-10-13T18:13:31Z

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 · 2022-10-13T18:20:08Z

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

FormalSnake · 2022-10-13T18:21:47Z

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 · 2022-10-13T18:28:52Z

Thanks a lot! I am honored

Godiesc · 2022-10-13T18:28:53Z

it's done now. ❤

Godiesc · 2022-10-13T19:26:05Z

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 · 2022-10-13T20:28:30Z

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

Godiesc added the wontfix This will not be worked on label Feb 22, 2022

Godiesc closed this as completed Oct 13, 2022

Godiesc mentioned this issue Feb 5, 2024

Feature Requests (code already written) #139

Closed

issues with theme on macos #1

issues with theme on macos #1

Comments

linusrg1 commented Jan 30, 2022

Godiesc commented Jan 30, 2022 • edited Loading

FormalSnake commented Oct 11, 2022

FormalSnake commented Oct 11, 2022

Godiesc commented Oct 11, 2022 • edited Loading

FormalSnake commented Oct 11, 2022

Godiesc commented Oct 11, 2022

FormalSnake commented Oct 11, 2022

Godiesc commented Oct 11, 2022

FormalSnake commented Oct 11, 2022

Godiesc commented Oct 11, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022 • edited Loading

FormalSnake commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022 • edited Loading

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 12, 2022

FormalSnake commented Oct 12, 2022

Godiesc commented Oct 13, 2022 • edited Loading

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022 • edited Loading

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Oct 13, 2022

Godiesc commented Oct 13, 2022

FormalSnake commented Oct 13, 2022

Godiesc commented Jan 30, 2022 •

edited

Loading

Godiesc commented Oct 11, 2022 •

edited

Loading

Godiesc commented Oct 12, 2022 •

edited

Loading

Godiesc commented Oct 12, 2022 •

edited

Loading

Godiesc commented Oct 13, 2022 •

edited

Loading

Godiesc commented Oct 13, 2022 •

edited

Loading