Closed ttuleyb closed 4 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.
@ttuleyb I added the smooth transitions in the latest update of the theme, the close button I will stay like before, and the 'extra space for traffic lights' I would like a screenshot to see how looks with that edit, if you can share it.
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 thetransition: background-color 0.2s ease !important;
andtransition: all 0.2s ease !important;
Control the final transparency of the hover higlighting by editing the percentage value ofbackground-color: color-mix(in srgb, var(--general-color) 12%, transparent) !important;
All of these are inuserChrome.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:
ogx_button-styles.css
Find
/* :hover */
comment and replace the relevant code block withogx_tabs-bar.css
Find
/* Color :hover de las pestañas no seleccionadas */
and replace the code block with:That's it, after these changes restart your browser and it will be more like Opera GX.