ttuleyb commented 6 months ago

Hello, I'm not proficient in CSS but wrote my own additional CSS styles to the theme for my own usage.

Why?

I thought I'd share them since these changes make the theme work better with MacOS and bring the theme closer to Opera GX with smoother tab and button animations.

Keep in mind that some of this code may be unnecessary and is specifically tailored for the "Ultraviolet" GX Theme using the "GX Theme Styles" firefox extension. I also recommend "GX Mods" extension for keyboard and tab sounds just like Opera GX, however I didn't read its source code and can't vet its safety.

I absolutely love this theme, it makes firefox look stunning and I don't have to have my data harvested by Opera anymore, not to mention all the bugs Opera has when it comes to MacOS.

Lastly, I don't want to maintain these in a seperate fork but I also understand if some of the changes are unsuitable for the repo. Therefore I published them as a feature request issue rather than a Pull Request to let authors pick and choose what they want to add. I think the new animations will be enjoyed and welcome by most users, traffic lights modifications might lead to unexpected results for Windows users, for this, selective CSS can be used but I'm unsure how.

New Features

Traffic lights padding

Traffic lights are shifted a bit more to the right which makes it look more like a mac application. They are also given a bit more space which makes tabs look better.

Tab animations!

On MacOS, firefox has awful tab animations, I fixed that and it has animations that are still slightly more choppier than chrome but much smoother than this theme or the native theme.

Open close animations

These are much smoother now

Hover animations

They no longer flash but rather slowly appear, the final opacity value of the animation can still be experimented with, if you want to mess around with it look for .tabbrowser-tab which is the responsible class. Control the smoothness of the animations by editing the transition: background-color 0.2s ease !important; and transition: all 0.2s ease !important; Control the final transparency of the hover higlighting by editing the percentage value of background-color: color-mix(in srgb, var(--general-color) 12%, transparent) !important; All of these are in userChrome.css

Tab close button

I just removed it since I think it looks ugly. Just use CTRL + W Ideally when you hover on a tab it would appear in front of the icon and animate a circle inverting its colors (this is what Opera GX does) but I thought it would be clear to just do away with it.

Browser button animations

Back, forward and refresh buttons will now animate on hover rather than flashing, this is much more like Opera GX and smoother.

Anyway here are the changes:

userChrome.css

Append all the code below to the end of the file:

/* Hide the close button by removing its fill color */
.close-icon {
  fill: transparent !important;
}
.tab-close-button, .close-icon {
  visibility: hidden !important;
  pointer-events: none !important;
}

.tabbrowser-tab {
  transition: all 0.2s ease !important;
}

.tabbrowser-tab > .tab-stack > .tab-background, 
.tabbrowser-tab > .tab-stack {
    transition: background-color 0.2s ease !important;
}

/* Define hover state background changes when mouse moves away */
@media not (-moz-bool-pref:"firefoxgx.tab-shapes") {
  .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]),
  .tabbrowser-tab:hover > .tab-stack:not([selected],[multiselected]) {
      background-color: color-mix(in srgb, var(--general-color) 12%, transparent) !important;
  }
}

.tabbrowser-tab {
  background-color: rgb(14, 12, 28) !important;
}

#tabbrowser-tabpanels{
  background-color: rgb(14,12,28) !important;
}

/* Eliminate space between tabs */
.tabbrowser-tab {
  margin-inline-start: 0px !important;
  margin-inline-end: -1px !important;
}

/* Add some extra space for traffic lights */
.titlebar-buttonbox:-moz-locale-dir(ltr) {
  margin-inline: 20px 0;
}

/* Add some extra space for traffic lights and push the tabs a bit further right */
.titlebar-buttonbox-container {
  padding-right: 10px;
  margin-left: 10px;
}

@-moz-document url("about:home"),url("about:blank"),url("about:newtab"),url("about:privatebrowsing"){
  body{ background-color: rgb(14,12,28) !important }
}

ogx_button-styles.css

Find /* :hover */ comment and replace the relevant code block with

/* Define default styles for toolbar buttons including the transition property */
#nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
#nav-bar .toolbarbutton-1 > .toolbarbutton-text,
#nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack {
    transition: fill 0.3s ease; /* Transition for the fill property */
}

/* :hover and open=true state styles */
:root:not([lwtheme-image],[style*="--lwt-additional-images"]) {
    #nav-bar .toolbarbutton-1:is(:hover,[open="true"]):not([disabled="true"]) > .toolbarbutton-icon,
    #nav-bar .toolbarbutton-1:is(:hover,[open="true"]):not([disabled="true"]) > .toolbarbutton-text,
    #nav-bar .toolbarbutton-1:is(:hover,[open="true"]):not([disabled="true"]) > .toolbarbutton-badge-stack {
        fill: var(--general-color) !important;
    }
}

ogx_tabs-bar.css

Find /* Color :hover de las pestañas no seleccionadas */ and replace the code block with:

/* Color :hover de las pestañas no seleccionadas */
@media not (-moz-bool-pref:"firefoxgx.tab-shapes") {
    .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
        background-color: transparent !important;
        transition: background-color 0.3s ease !important; /* Smooth transition for background color */
    }

    .tabbrowser-tab:hover > .tab-stack:not([selected],[multiselected]) {
        background-color: color-mix(in srgb, var(--general-color) 25%, transparent) !important;
        clip-path: polygon(5px 0%, 200% 0%, 0% 200%, 0% 5px);
        transition: background-color 0.3s ease !important; /* Smooth transition for background color */
    }

    /* Regla para visualizar mejor el seleccionar varias pestañas */
    .tabbrowser-tab:is([multiselected]):not([selected]) .tab-stack {
        background: var(--button-hover-bgcolor) !important;
        clip-path: polygon(5px 0%, 200% 0%, 0% 200%, 0% 5px);
        outline: none !important;
        transition: background-color 0.3s ease !important; /* Smooth transition for background color */
    }

    .tab-background[multiselected]:not([selected]) {
        background: transparent !important;
        outline: none !important;
        transition: background-color 0.3s ease !important; /* Smooth transition for background color */
    }

    .tab-background[multiselected][selected] {
        background: var(--general-color) !important;
        transition: background-color 0.3s ease !important; /* Smooth transition for background color */
    }
}

That's it, after these changes restart your browser and it will be more like Opera GX.

Godiesc commented 6 months ago

hi, I'm glad you enjoy the theme and wants to improve it. 1.- For window controls (I think that is the Traffic lights) I should update that to display vertically like the screenshots of this thread, I don't know if macOS has the option to have them on left and right or just left, I don't have that OS to try to change that. For the padding between Traffic lights and tabs-bar I used this code in ogx_tabs-bar.css into a rule to affect only MacOS, I used padding-inline-start: 10px !important;, for you its to short?

2.- For tab close button I used to have the behavior of opera in MacOS but I decided to delete it cause the difficult to maintain and test with the every firefox update, and that affected too the sound icon, so I just decided to have the same style for all OS. I think you can have your code for this (close button) in ogx_tricks.css for your personal use, I don't think I just delete it.

3.- I will tested your other code for animation and I hope to implement it if I can incorporate it correctly.