Rewrite CSS (#17)

* default theme - finally, it uses the system colors

* fix missing variable

* hightlight color

* initial support for dark and light colorschemes

* README and light mode tab-toolbar bg update

* README

* SCROT
This commit is contained in:
Gerome Matilla 2020-08-14 11:56:46 +08:00 committed by GitHub
parent 9d8a93dd20
commit 65c81da426
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 290 additions and 163 deletions

View File

@ -1,16 +1,16 @@
# Blurred fox ## blurredfox
### A modern Firefox CSS Theme ### A modern Firefox CSS Theme
| Default Color Scheme | | Default Colorscheme (Uses System Colors) |
| --- | | --- |
| ![screenshot](scrot/default.webp) | | ![screenshot](scrot/default.webp) |
| Dark Color Scheme | | Dark Colorscheme |
| --- | | --- |
| ![screenshot](scrot/dark.webp) | | ![screenshot](scrot/dark.webp) |
| Light Color Scheme | | Light Colorscheme |
| --- | | --- |
| ![screenshot](scrot/light.webp) | | ![screenshot](scrot/light.webp) |
@ -18,7 +18,7 @@
+ Latest stable Firefox + Latest stable Firefox
+ Compositor with blur shader (optional) + Compositor with blur shader (optional)
+ Linux machine - untested on macOS and Windows10 + Linux machine - untested on macOS and Windows10 - might work though
## How to ## How to
@ -54,36 +54,69 @@
+ **`svg.context-properties.content.enabled`** + **`svg.context-properties.content.enabled`**
Then make sure to **enable them all!** Then make sure to **enable them all!**
4. Go to your Firefox profile. Linux distributions has it in `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
4. Go to your Firefox profile.
+ Linux - `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
+ Windows 10 - `C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`.
+ macOS - `Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`.
5. Create a folder and name it **`chrome`**, then assuming that you already have cloned this repo, just copy the theme to `chrome` folder. 5. Create a folder and name it **`chrome`**, then assuming that you already have cloned this repo, just copy the theme to `chrome` folder.
6. Finally, you can now change whatever colorscheme you want in the Cusomization Window. 6. Restart Firefox.
7. Finally, you can now change whatever colorscheme you want in the Cusomization Window.
+ Default - Uses system colors, but uses the theme's layout.
+ Dark - Dark colorscheme. Good for the night.
+ Light - Bright colorscheme. Good for killing the eyes.
## Note ## Note
### Some UI are broken!
1. Check if you're using the latest stable version of Firefox.
2. If you're not using Linux check the next note below.
### If you're using Windows or macOS and something's wrong ### If you're using Windows or macOS and something's wrong
1. **I only have Archlinux, so I cannot guarantee that it will work on Windows10 and macOS without a problem. A feedback and PR is absolutely welcome!** 1. I only have Archlinux, so I cannot guarantee that it will work on Windows 10 and macOS without a problem. A feedback and a PR is absolutely welcome! All you can do or try is to install the theme, then change the value of `--bf-moz-appearance` variable to either `-moz-win-glass` if windows and `-moz-mac-vibrancy-dark` if macOS. Still, do no expect that it will work without a problem. The platforms are untested!
### If there's no blur effect ### Liar! Your theme's name is `blurredfox`, ***where is the blur***?!
1. **The theme does not provide the blur effect!** Make sure you have a compositor with blur support running! KDE Plasma, macOS, and Windows 10 have this by default, but you need to enable it! If you're using linux, use tryone144's [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase) branch of picom. It includes the dual kawase shader. 1. Yeah, the name `blurredfox` is a lie, just like the cake. I named it blurredfox because it's designed to look gorgeous with a blur effect. You can, however, have the blur effect by:
### If you're using Plasma and there's no blur effect, + Making sure you have a compositor and it supports blur.
+ If you're not using GNOME or KDE Plasma that has its own compositors, use tryone144's [feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase) branch of picom. It includes the dual kawase shader.
+ GNOME's compositor, mutter, doesn't support blur. Hey, GNOME devs, it's already 2020. Just kidding!
+ If you're using KDE Plasma, read the next note below.
### I'm using KDE Plasma, but there's no blur! How many other lies have I been told by the council?
1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects > Enable Blur`. Note that this will not enable the blur effect on all applications. 1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects > Enable Blur`. Note that this will not enable the blur effect on all applications.
2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/). Make sure to read its manual. Don't you ever dare to create an issue about Force Blur! Just kidding! But yeah, I'm serious.
2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/).
3. Go to `System Settings > KWin Scripts > Enable Force Blur`. 3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
4. Change its settings. If there's no settings/settings icon, Logout. Re-login.
### Scrollbar is missing ### Where is the scrollbar?
1. The scrollbar is hidden by default, you can enable/show it by changing the value of `scrollbar-width` in `userContent.css`. 1. You can adjust the value of `scrollbar-width` in `userContent.css`.
2. Restart Firefox.
### I hate the colors! Why is everything transparent?!
1. You can change the colors in `userChrome.css`.
2. The transparency is only applied to `Dark` and `Light` colorschemes. `No transparency == No blur`.
## Got a problem?
If you have already read the README, free to open an issue [here](https://github.com/manilarome/blurredfox/issues)!
## Got a patch?
You're absolutely welcome to submit a pull request [here](https://github.com/manilarome/blurredfox/pulls)!
## TODO ## TODO
PR's are welcome! PR's are welcome!
- [ ] Hide `TabsToolbar` if tab bar is hidden - [ ] Render site content under the navbar like macOS
- [ ] Fix inconsistencies - [ ] Fix UI inconsistencies
- [ ] Better CSS - [ ] Better CSS

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 257 KiB

After

Width:  |  Height:  |  Size: 262 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 316 KiB

After

Width:  |  Height:  |  Size: 186 KiB

View File

@ -1,132 +1,86 @@
/* Dark Mode */
:root:-moz-lwtheme-brighttext {
--bf-bg: #00000066;
--bf-color: #F2F2F2;
--bf-hover-bg: #FEFEFE20;
--bf-focused-color: #FEFEFE;
--bf-icon-color: #F2F2F2;
--bf-navbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-color: var(--bf-color);
--bf-urlbar-focused-color: var(--bf-focused-color);
--bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-results-url-color: var(--bf-color);
--bf-tab-toolbar-bg: #000000AA;
--bf-tab-color: var(--bf-color);
--bf-tab-selected-bg: var(--bf-bg);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-color: var(--bf-color);
--bf-splitter-bg: var(--bf-bg);
--bf-menupopup-bg: var(--bf-bg);
--bf-menupopup-color: var(--bf-color);
--autocomplete-popup-background: var(--bf-bg) !important;
--default-arrowpanel-background: var(--bf-bg) !important;
--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
}
/* Light Mode */
:root:-moz-lwtheme-darktext {
--bf-bg: #F2F2F662;
--bf-color: #252525;
--bf-hover-bg: #1A1A1A20;
--bf-focused-color: #0A0A0A;
--bf-icon-color: #0A0A0A;
--bf-navbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-color: var(--bf-color);
--bf-urlbar-focused-color: var(--bf-focused-color);
--bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-results-url-color: var(--bf-color);
--bf-tab-toolbar-bg: #F2F2F2AA;
--bf-tab-color: var(--bf-color);
--bf-tab-selected-bg: var(--bf-bg);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-color: var(--bf-color);
--bf-splitter-bg: var(--bf-bg);
--bf-menupopup-bg: var(--bf-bg);
--bf-menupopup-color: var(--bf-color);
--autocomplete-popup-background: var(--bf-bg) !important;
--default-arrowpanel-background: var(--bf-bg) !important;
--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
}
/* Global/Default Variable */
/* Set variables regardless of colorscheme */
:root { :root {
--bf-bg: #252525;
--bf-color: #F2F2F2;
--bf-hover-bg: #353535;
--bf-focused-color: #FEFEFE;
--bf-icon-color: var(--bf-color);
--bf-navbar-bg: #252525CC;
--bf-urlbar-bg: #252525;
--bf-urlbar-color: var(--bf-color);
--bf-urlbar-focused-color: var(--bf-focused-color);
--bf-urlbar-active-bg: var(--bf-urlbar-bg);
--bf-urlbar-results-url-color: var(--bf-color);
--bf-tab-toolbar-bg: var(--bf-bg);
--bf-tab-color: var(--bf-color);
--bf-tab-selected-bg: #353535;
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-color: var(--bf-color);
--bf-splitter-bg: var(--bf-bg);
--bf-sidebar-searchbar-bg: #1A1A1A;
--bf-menupopup-bg: var(--bf-bg);
--bf-menupopup-color: var(--bf-color);
--autocomplete-popup-background: var(--bf-bg) !important;
--default-arrowpanel-background: var(--bf-bg) !important;
--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
/* All the CSS variables below are global */ /* All the CSS variables below are global */
/* These applies to all color schemes */ /* These applies to all color schemes */
/* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */ /* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
--bf-moz-appearance: -moz-win-glass !important; --bf-moz-appearance: -moz-win-glass !important;
--bf-backdrop-blur: 6px;
--bf-sidebar-searchbar-radius: 6px; --bf-sidebar-searchbar-radius: 6px;
--bf-backdrop-blur: 6px;
--bf-accent-bg: #4C5FF9CC; --bf-accent-bg: #4C5FF9CC;
--bf-urlbar-hightlight-bg: var(--bf-accent-bg);
--bf-urlbar-radius: 9px; --bf-urlbar-radius: 9px;
--bf-urlbar-results-font-size: 12pt; --bf-urlbar-results-font-size: 12pt;
--bf-urlbar-results-font-weight: 550; --bf-urlbar-results-font-weight: 550;
--bf-urlbar-font-size: 12pt; --bf-urlbar-font-size: 12pt;
--bf-urlbar-font-weight: 500; --bf-urlbar-font-weight: 500;
--bf-urlbar-switch-tab-color: #6498EF;
--bf-urlbar-bookmark-color: #53E2AE;
--bf-navbar-padding: 6px; --bf-navbar-padding: 6px;
--bf-switch-tab-color: #6498EF;
--bf-bookmark-color: #53E2AE;
--bf-tab-selected-bg: #77777788;
--bf-tab-font-size: 11pt; --bf-tab-font-size: 11pt;
--bf-tab-font-weight: 400; --bf-tab-font-weight: 400;
--bf-tab-height: 36px; --bf-tab-height: 36px;
--bf-tab-border-radius: 8px; --bf-tab-border-radius: 8px;
--bf-tab-soundplaying-bg: #985EFFCC; --bf-tab-soundplaying-bg: #985EFFCC;
--default-arrowpanel-color: #fefefa !important; /* --default-arrowpanel-color: #fefefa !important; */
--panel-disabled-color: #f9f9fa80; /* --panel-disabled-color: #f9f9fa80; */
--toolbar-bgcolor: transparent !important; --toolbar-bgcolor: transparent !important;
--urlbar-separator-color: transparent !important; --urlbar-separator-color: transparent !important;
} }
/* Light Mode */
:root:-moz-lwtheme-darktext {
--bf-bg: #F2F2F266;
--bf-color: #0A0A0A;
--bf-hover-bg: #1A1A1A33;
--bf-active-bg: #1A1A1A66;
--bf-icon-color: #0A0A0A;
--bf-tab-toolbar-bg: #F2F2F2AA;
--bf-tab-selected-bg: var(--bf-bg);
--bf-navbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-focused-color: var(--bf-color);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-color: var(--bf-color);
--bf-menupopup-bg: #F2F2F2AA;
--bf-menupopup-color: var(--bf-color);
}
/* Dark Mode */
:root:-moz-lwtheme-brighttext {
--bf-bg: #00000066;
--bf-color: #F2F2F2;
--bf-hover-bg: #F2F2F233;
--bf-active-bg: #F2F2F266;
--bf-icon-color: #F2F2F2;
--bf-tab-toolbar-bg: #000000AA;
--bf-tab-selected-bg: #F2F2F210;
--bf-navbar-bg: var(--bf-bg);
--bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-active-bg: var(--bf-bg);
--bf-urlbar-focused-color: var(--bf-color);
--bf-sidebar-bg: var(--bf-bg);
--bf-sidebar-color: var(--bf-color);
--bf-menupopup-bg: #000000AA;
--bf-menupopup-color: var(--bf-color);
}
/* /*
@ -135,12 +89,18 @@
Transparent Window Transparent Window
*/ */
#main-window { #main-window {
background: transparent !important;
font-kerning: normal; font-kerning: normal;
border: none !important; border: none !important;
}
/* Add transparency to light and dark color schemes */
#main-window:-moz-lwtheme-brighttext,
#main-window:-moz-lwtheme-darktext {
background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important; -moz-appearance: var(--bf-moz-appearance) !important;
} }
/* /*
@ -166,6 +126,10 @@ Contains navbar, urlbar, and etc.
*/ */
.browser-toolbar { .browser-toolbar {
}
.browser-toolbar:-moz-lwtheme-darktext,
.browser-toolbar:-moz-lwtheme-brighttext {
background: var(--bf-tab-toolbar-bg) !important; background: var(--bf-tab-toolbar-bg) !important;
} }
@ -174,7 +138,6 @@ toolbar {
} }
toolbar#nav-bar { toolbar#nav-bar {
background: var(--bf-navbar-bg) !important;
padding: var(--bf-navbar-padding) !important; padding: var(--bf-navbar-padding) !important;
/* Remove horizontal line on navbar */ /* Remove horizontal line on navbar */
@ -182,14 +145,25 @@ toolbar#nav-bar {
border-top: none !important; border-top: none !important;
} }
/* Set color schemes for #nav-bar */
toolbar#nav-bar:-moz-lwtheme-darktext,
toolbar#nav-bar:-moz-lwtheme-brighttext {
background: var(--bf-navbar-bg) !important;
}
toolbarbutton { toolbarbutton {
box-shadow: none !important; box-shadow: none !important;
margin-left: 2px !important; margin-left: 2px !important;
} }
.toolbarbutton-1 { .toolbarbutton-1 {
}
/* Set color schemes for #nav-bar */
.toolbarbutton-1:-moz-lwtheme-darktext,
.toolbarbutton-1:-moz-lwtheme-brighttext {
--toolbarbutton-hover-background: var(--bf-hover-bg) !important; --toolbarbutton-hover-background: var(--bf-hover-bg) !important;
--toolbarbutton-active-background: var(--bf-hover-bg) !important; --toolbarbutton-active-background: var(--bf-active-bg) !important;
} }
/* URL bar max-width and centered hack */ /* URL bar max-width and centered hack */
@ -211,17 +185,34 @@ toolbarbutton {
} }
#urlbar-input:focus { #urlbar-input:focus {
}
/* Set color scheme */
#urlbar-input:focus:-moz-lwtheme-darktext,
#urlbar-input:focus:-moz-lwtheme-brighttext {
color: var(--bf-urlbar-focused-color) !important; color: var(--bf-urlbar-focused-color) !important;
} }
#urlbar-background { #urlbar-background {
background: var(--bf-urlbar-bg) !important;
border-radius: var(--bf-urlbar-radius) !important; border-radius: var(--bf-urlbar-radius) !important;
border: none !important; border: none !important
}
/* Set color scheme */
#urlbar-background:-moz-lwtheme-darktext,
#urlbar-background:-moz-lwtheme-brighttext {
background: var(--bf-urlbar-bg) !important;
} }
.urlbar-icon:not([disabled]):hover, .urlbar-icon:not([disabled]):hover,
.urlbar-icon-wrapper:not([disabled]):hover { .urlbar-icon-wrapper:not([disabled]):hover {
}
/* Set color scheme */
.urlbar-icon:not([disabled]):hover:-moz-lwtheme-darktext,
.urlbar-icon:not([disabled]):hover:-moz-lwtheme-brighttext,
.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-darktext,
.urlbar-icon-wrapper:not([disabled]):hover:-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
@ -229,34 +220,63 @@ toolbarbutton {
.urlbar-icon-wrapper[open], .urlbar-icon-wrapper[open],
.urlbar-icon:not([disabled]):hover:active, .urlbar-icon:not([disabled]):hover:active,
.urlbar-icon-wrapper:hover:active { .urlbar-icon-wrapper:hover:active {
}
/* Set color scheme */
.urlbar-icon[open]:-moz-lwtheme-darktext,
.urlbar-icon[open]:-moz-lwtheme-brighttext,
.urlbar-icon-wrapper[open]:-moz-lwtheme-darktext,
.urlbar-icon-wrapper[open]:-moz-lwtheme-brighttext,
.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-darktext,
.urlbar-icon:not([disabled]):hover:active:-moz-lwtheme-brighttext,
.urlbar-icon-wrapper:hover:active:-moz-lwtheme-darktext,
.urlbar-icon-wrapper:hover:active:-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
.urlbar-icon-wrapper[open] > .urlbar-icon, .urlbar-icon-wrapper[open] > .urlbar-icon,
.urlbar-icon-wrapper > .urlbar-icon:hover, .urlbar-icon-wrapper > .urlbar-icon:hover,
.urlbar-icon-wrapper > .urlbar-icon:hover:active { .urlbar-icon-wrapper > .urlbar-icon:hover:active {
}
/* Set color scheme */
.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-darktext,
.urlbar-icon-wrapper[open] > .urlbar-icon:-moz-lwtheme-brighttext,
.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-darktext,
.urlbar-icon-wrapper > .urlbar-icon:hover:-moz-lwtheme-brighttext,
.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-darktext,
.urlbar-icon-wrapper > .urlbar-icon:hover:active:-moz-lwtheme-brighttext{
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
#urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background { #urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
box-shadow: none !important; box-shadow: none !important;
display: none !important; display: none !important;
background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important; -moz-appearance: var(--bf-moz-appearance) !important;
} }
#urlbar[open="true"] > #urlbar-background { #urlbar[open="true"] > #urlbar-background {
}
/* Set color scheme */
#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-darktext,
#urlbar[open="true"] > #urlbar-background:-moz-lwtheme-brighttext {
background: var(--bf-urlbar-active-bg) !important; background: var(--bf-urlbar-active-bg) !important;
backdrop-filter: blur(var(--bf-backdrop-blur)) !important; backdrop-filter: blur(var(--bf-backdrop-blur)) !important;
} }
.urlbar-icon { .urlbar-icon {
}
/* Set color scheme */
.urlbar-icon:-moz-lwtheme-darktext,
.urlbar-icon:-moz-lwtheme-brighttext {
color: var(--bf-icon-color) !important; color: var(--bf-icon-color) !important;
} }
.urlbar-icon > image { .urlbar-icon > image {
fill: var(--bf-icon-color) !important; fill: #ff00ff !important;
color: var(--bf-icon-color) !important; color: #ff00ff !important;
} }
.urlbarView-favicon, .urlbarView-favicon,
@ -264,18 +284,17 @@ toolbarbutton {
display: none !important; display: none !important;
} }
.urlbarView-row[type="bookmark"] > span{ .urlbarView-row[type="bookmark"] > span {
color: var(--bf-bookmark-color) !important; color: var(--bf-urlbar-bookmark-color) !important;
} }
.urlbarView-row[type="switchtab"] > span{ .urlbarView-row[type="switchtab"] > span .urlbarView-url {
color: var(--bf-switch-tab-color) !important; color: var(--bf-urlbar-switch-tab-color) !important;
} }
#urlbar-results { #urlbar-results {
-weight: var(--bf-urlbar-results-font-weight); font-weight: var(--bf-urlbar-results-font-weight);
font-size: var(--bf-urlbar-results-font-size) !important; font-size: var(--bf-urlbar-results-font-size) !important;
color: var(--bf-urlbar-results-color) !important;
} }
/* Hover background color */ /* Hover background color */
@ -284,14 +303,12 @@ toolbarbutton {
} }
.urlbarView-url, .search-panel-one-offs-container { .urlbarView-url, .search-panel-one-offs-container {
color: var(--bf-urlbar-results-url-color) !important;
font-weight: var(--bf-urlbar-results-font-weight); font-weight: var(--bf-urlbar-results-font-weight);
font-size: var(--bf-urlbar-font-size) !important; font-size: var(--bf-urlbar-font-size) !important;
} }
#urlbar-input { #urlbar-input {
font-size: var(--bf-urlbar-font-size) !important; font-size: var(--bf-urlbar-font-size) !important;
color: var(--bf-urlbar-color) !important;
font-weight: var(--bf-urlbar-font-weight)!important; font-weight: var(--bf-urlbar-font-weight)!important;
text-align: center !important; text-align: center !important;
} }
@ -303,18 +320,22 @@ toolbarbutton {
} }
#searchbar { #searchbar {
background: var(--bf-bg) !important;
border: none !important; border: none !important;
} }
/* Set color scheme */
#searchbar:-moz-lwtheme-darktext,
#searchbar:-moz-lwtheme-brighttext {
background: var(--bf-bg) !important;
}
.searchbar-textbox { .searchbar-textbox {
color: var(--bf-focus-fg) !important;
font-weight: 700 !important; font-weight: 700 !important;
} }
/* URL bar hightlight color */ /* URL bar hightlight color */
::-moz-selection { ::-moz-selection {
background-color: var(--bf-accent-bg) !important; background-color: var(--bf-urlbar-hightlight-bg) !important;
} }
/* Bookmark button - Star button */ /* Bookmark button - Star button */
@ -324,11 +345,23 @@ toolbarbutton {
} }
#star-button:hover:not(.no-hover):not([open=true]) { #star-button:hover:not(.no-hover):not([open=true]) {
}
/* Set color scheme */
#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
#star-button:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
#star-button:hover:active:not(.no-hover), #star-button:hover:active:not(.no-hover),
#star-button[open=true] { #star-button[open=true] {
}
/* Set color scheme */
#star-button:hover:active:not(.no-hover):-moz-lwtheme-darktext,
#star-button:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
#star-button[open=true]:-moz-lwtheme-darktext,
#star-button[open=true]:-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
@ -342,6 +375,11 @@ toolbaritem {
} }
.toolbarbutton-text { .toolbarbutton-text {
}
/* Set color scheme */
.toolbarbutton-text:-moz-lwtheme-darktext,
.toolbarbutton-text:-moz-lwtheme-brighttext {
color: var(--bf-icon-color) !important; color: var(--bf-icon-color) !important;
} }
@ -364,6 +402,12 @@ toolbaritem {
#identity-box:hover:not(.no-hover):not([open=true]), #identity-box:hover:not(.no-hover):not([open=true]),
#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]) { #tracking-protection-icon-container:hover:not(.no-hover):not([open=true]) {
}
#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
#identity-box:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext,
#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-darktext,
#tracking-protection-icon-container:hover:not(.no-hover):not([open=true]):-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
@ -371,6 +415,16 @@ toolbaritem {
#identity-box[open=true], #identity-box[open=true],
#tracking-protection-icon-container:hover:active:not(.no-hover), #tracking-protection-icon-container:hover:active:not(.no-hover),
#tracking-protection-icon-container[open=true] { #tracking-protection-icon-container[open=true] {
}
#identity-box:hover:active:not(.no-hover):-moz-lwtheme-darktext,
#identity-box:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
#identity-box[open=true]:-moz-lwtheme-darktext,
#identity-box[open=true]:-moz-lwtheme-brighttext,
#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-darktext,
#tracking-protection-icon-container:hover:active:not(.no-hover):-moz-lwtheme-brighttext,
#tracking-protection-icon-container[open=true]:-moz-lwtheme-darktext,
#tracking-protection-icon-container[open=true]:-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
@ -394,8 +448,12 @@ The tabs container
border-bottom: 0 !important; border-bottom: 0 !important;
} }
/* Transparent tabs */
.toolbar-items { .toolbar-items {
}
/* Transparent tabs */
.toolbar-items:-moz-lwtheme-darktext,
.toolbar-items:-moz-lwtheme-brighttext {
background-color: transparent !important; background-color: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important; -moz-appearance: var(--bf-moz-appearance) !important;
} }
@ -430,6 +488,10 @@ The tabs container
.tab-background { .tab-background {
border: none !important; border: none !important;
}
.tab-background:-moz-lwtheme-darktext,
.tab-background:-moz-lwtheme-brighttext {
background: transparent !important; background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important; -moz-appearance: var(--bf-moz-appearance) !important;
} }
@ -473,7 +535,6 @@ The tabs container
.tab-text { .tab-text {
font-weight: var(--bf-tab-font-weight); font-weight: var(--bf-tab-font-weight);
font-size: var(--bf-tab-font-size) !important; font-size: var(--bf-tab-font-size) !important;
color: var(--bf-tab-color);
} }
/* Center all content */ /* Center all content */
@ -548,17 +609,21 @@ hbox.tab-content[pinned=true] .tab-text {
} }
.tabbrowser-tab:hover { .tabbrowser-tab:hover {
background: var(--bf-hover-bg) !important;
box-shadow: 0 1px 4px rgba(0,0,0,.05); box-shadow: 0 1px 4px rgba(0,0,0,.05);
} }
/* Set color scheme */
.tabbrowser-tab:hover:-moz-lwtheme-darktext,
.tabbrowser-tab:hover:-moz-lwtheme-brighttext {
background: var(--bf-hover-bg) !important;
}
/* Audio playing background */ /* Audio playing background */
.tabbrowser-tab[soundplaying="true"] { .tabbrowser-tab[soundplaying="true"] {
background-color: var(--bf-tab-soundplaying-bg) !important; background-color: var(--bf-tab-soundplaying-bg) !important;
} }
#tabbrowser-tabs { #tabbrowser-tabs {
--tab-loading-fill: var(--bf-color) !important;
} }
/* Hide icon of audio */ /* Hide icon of audio */
@ -583,7 +648,7 @@ hbox.tab-content[pinned=true] .tab-text {
#TabsToolbar { #TabsToolbar {
--toolbarbutton-active-background: transparent !important; --toolbarbutton-active-background: transparent !important;
--toolbarbutton-hover-background: transparent !important; --toolbarbutton-hover-background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important; -moz-appearance: none !important;
} }
/* Left to Right Alignment of tabs toolbar */ /* Left to Right Alignment of tabs toolbar */
@ -605,6 +670,10 @@ Sidebar
*/ */
#sidebar-box { #sidebar-box {
}
#sidebar-box:-moz-lwtheme-darktext,
#sidebar-box:-moz-lwtheme-brighttext {
--sidebar-background-color: var(--bf-sidebar-bg) !important; --sidebar-background-color: var(--bf-sidebar-bg) !important;
--sidebar-text-color: var(--bf-sidebar-color) !important; --sidebar-text-color: var(--bf-sidebar-color) !important;
} }
@ -612,19 +681,16 @@ Sidebar
#sidebar, #sidebar,
.sidebar-panel { .sidebar-panel {
background: transparent !important; background: transparent !important;
color: var(--bf-sidebar-color) !important;
} }
/* Sidebar searchbar */ /* Sidebar searchbar */
#sidebar-search-container #search-box{ #sidebar-search-container #search-box {
-moz-appearance:none !important;
background-color: var(--bf-sidebar-searchbar-bg) !important;
border: none !important; border: none !important;
color: var(--bf-color) !important;
padding: 6px !important; padding: 6px !important;
border-radius: var(--bf-sidebar-searchbar-radius) !important; border-radius: var(--bf-sidebar-searchbar-radius) !important;
} }
/* /*
@ -662,12 +728,21 @@ The findbar
#browser #appcontent #tabbrowser-tabbox findbar, #browser #appcontent #tabbrowser-tabbox findbar,
#browser #appcontent #tabbrowser-tabbox tabpanels { #browser #appcontent #tabbrowser-tabbox tabpanels {
-moz-appearance: none !important; -moz-appearance: none !important;
background: transparent !important;
border: none !important; border: none !important;
-moz-appearance: var(--bf-moz-appearance) !important; }
#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext,
#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-darktext,
#browser #appcontent #tabbrowser-tabbox tabpanels:-moz-lwtheme-brighttext {
background: transparent !important;
} }
#browser #appcontent #tabbrowser-tabbox findbar { #browser #appcontent #tabbrowser-tabbox findbar {
}
#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-darktext,
#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext {
background-color: var(--bf-bg) !important; background-color: var(--bf-bg) !important;
} }
@ -676,7 +751,12 @@ The findbar
margin: 0 !important; margin: 0 !important;
border: none !important; border: none !important;
} }
#browser #appcontent #tabbrowser-tabbox .findbar-find-fast { #browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
}
#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-darktext,
#browser #appcontent #tabbrowser-tabbox .findbar-find-fast:not([status="notfound"]):-moz-lwtheme-brighttext {
background-color: var(--bf-bg) !important; background-color: var(--bf-bg) !important;
} }
@ -688,26 +768,42 @@ The findbar
Right-click menu Right-click menu
*/ */
menupopup, popup, menupopup,
popup,
popup > menu > menupopup, popup > menu > menupopup,
menupopup > menu > menupopup { menupopup > menu > menupopup {
-moz-appearance: none !important;
background: var(--bf-menupopup-bg) !important;
color: var(--base-color) !important;
border: 0 !important; border: 0 !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 2px 0 2px 0 !important; padding: 2px 0 2px 0 !important;
} }
menupopup menuseparator { menupopup:-moz-lwtheme-darktext,
menupopup:-moz-lwtheme-brighttext,
popup:-moz-lwtheme-darktext,
popup:-moz-lwtheme-brighttext,
popup > menu > menupopup:-moz-lwtheme-darktext,
popup > menu > menupopup:-moz-lwtheme-brighttext,
menupopup > menu > menupopup:-moz-lwtheme-darktext,
menupopup > menu > menupopup:-moz-lwtheme-brighttext {
-moz-appearance: none !important; -moz-appearance: none !important;
background: #525A6D !important; background: var(--bf-menupopup-bg) !important;
color: var(--bf-menupopup-color) !important;
}
menupopup menuseparator {
/* -moz-appearance: none !important; */
margin: 2px 0 2px 0 !important; margin: 2px 0 2px 0 !important;
padding: 0 !important; padding: 0 !important;
border-top: none !important; border-top: none !important;
border-color: transparent !important; border-color: transparent !important;
} }
menupopup menuseparator:-moz-lwtheme-darktext,
menupopup menuseparator:-moz-lwtheme-brighttext {
-moz-appearance: none !important;
background: #525A6D !important;
}
/* /*
@ -717,26 +813,24 @@ The customization window
*/ */
#customization-container { #customization-container {
}
#customization-container:-moz-lwtheme-darktext,
#customization-container:-moz-lwtheme-brighttext {
background: var(--bf-bg) !important; background: var(--bf-bg) !important;
} }
.customizationmode-button { .customizationmode-button {
-moz-appearance: none !important;
background: var(--bf-bg) !important;
color: var(--bf-color) !important;
padding: 5px !important; padding: 5px !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
.customizationmode-button:hover { .customizationmode-button:hover {
-moz-appearance: none !important;
background: var(--bf-hover-bg) !important;
padding: 5px !important; padding: 5px !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
.customizationmode-button label { .customizationmode-button label {
color: var(--bf-color) !important;
} }
/* /*