diff --git a/src/other/firefox/README.md b/src/other/firefox/README.md new file mode 100644 index 0000000..2ce04fe --- /dev/null +++ b/src/other/firefox/README.md @@ -0,0 +1,86 @@ + +## Firefox Safari theme + +

A MacOSX Safari theme for Firefox 80+

+ +#### Preview +![01](https://github.com/vinceliuice/WhiteSur-gtk-theme/blob/pictures/pictures/firefox.png?raw=true) + +## Description + +This is a bunch of CSS code to make Firefox look closer to MacOSX Safari theme. +Based on https://github.com/rafaelmardojai/firefox-gnome-theme + +## Installation + +Run `./tweaks.sh -f` + +if you want to use `Monterey` style then: + +1. run `./tweaks.sh -f -e` +2. Modify : +``` +@import "WhiteSur/theme.css"; /**/ +/*@import "Monterey/theme.css"; /**/ +``` +To: +``` +/*@import "WhiteSur/theme.css"; /**/ +@import "Monterey/theme.css"; /**/ +``` + +### Manual installation + +1. Go to `about:support` in Firefox. +2. Application Basics > Profile Directory > Open Directory. +3. Copy `chrome` folder Firefox config folder. +4. If you are using Firefox 69+: + 1. Go to `about:config` in Firefox. + 2. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set it to `true`. +5. Restart Firefox. +6. Open Firefox customization panel and: + 1. Use *Title bar* option to toggle CSD if is not set by default. + 2. Move the new tab button to headerbar. + 3. Select light or dark variants on theme switcher. +7. Be happy with your new gnomish Firefox. + +## Enabling optional features +Open `userChrome.css` with a text editor and follow instructions to enable extra features. Keep in mind this file might change in future versions and your configuration will be lost. You can copy the @imports you want to enable to a new file named `customChrome` directly in your `chrome` directory if you want it to survive updates. Remember all @imports must be at the top of the file, before other statements. + +## Known bugs + +### CSD have sharp corners +See upstream [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1408360). + +#### Wayland fix: +1. Go to the `about:config` page +2. Search for the `layers.acceleration.force-enabled` preference and set it to true. +3. Now restart Firefox, and it should look good! + +#### X11 fix: +1. Go to the `about:config` page +2. Type `mozilla.widget.use-argb-visuals` +3. Set it as a `boolean` and click on the add button +4. Now restart Firefox, and it should look good! + +## Development + +If you wanna mess around the styles and change something, you might find these +things useful. + +To use the Inspector to debug the UI, open the developer tools (F12) on any +page, go to options, check both of those: + +- Enable browser chrome and add-on debugging toolboxes +- Enable remote debugging + +Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser +UI. + +Also you can inspect any GTK3 application, for example type this into a terminal +and it will run Epiphany with the GTK Inspector, so you can check the CSS styles +of its elements too. + +```sh +GTK_DEBUG=interactive epiphany +`` diff --git a/src/sass/gtk/apps/_budgie.scss b/src/sass/gtk/apps/_budgie.scss index 607e14a..45199da 100644 --- a/src/sass/gtk/apps/_budgie.scss +++ b/src/sass/gtk/apps/_budgie.scss @@ -136,6 +136,10 @@ $raven_padding: 8px; scrolledwindow.sidebar.categories { //AppMenu (budgie) border-bottom-left-radius: $wm_radius; + + button.flat.category-button { + @extend %flat_button; + } } treeview.view.sidebar { @@ -493,7 +497,7 @@ popover.background.places-menu { background-image: none; font-weight: normal; - &:hover { background-color: $selected_bg_color; } + &:hover { background-color: if($trans == 'false' and $variant == 'light', $divider_color, $light_divider_color); } &:disabled { color: transparentize($panel_fg, 0.6); } &.budgie-menubar {