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
| Default Color Scheme |
| Default Colorscheme (Uses System Colors) |
| --- |
| ![screenshot](scrot/default.webp) |
| Dark Color Scheme |
| Dark Colorscheme |
| --- |
| ![screenshot](scrot/dark.webp) |
| Light Color Scheme |
| Light Colorscheme |
| --- |
| ![screenshot](scrot/light.webp) |
@ -18,7 +18,7 @@
+ Latest stable Firefox
+ Compositor with blur shader (optional)
+ Linux machine - untested on macOS and Windows10
+ Linux machine - untested on macOS and Windows10 - might work though
## How to
@ -54,36 +54,69 @@
+ **`svg.context-properties.content.enabled`**
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.
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
### 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
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.
2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/).
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.
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
PR's are welcome!
- [ ] Hide `TabsToolbar` if tab bar is hidden
- [ ] Fix inconsistencies
- [ ] Render site content under the navbar like macOS
- [ ] Fix UI inconsistencies
- [ ] 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 {
--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 */
/* These applies to all color schemes */
/* If windows - `-moz-win-glass`, if macOS - `-moz-mac-vibrancy-dark` */
--bf-moz-appearance: -moz-win-glass !important;
--bf-backdrop-blur: 6px;
--bf-sidebar-searchbar-radius: 6px;
--bf-backdrop-blur: 6px;
--bf-accent-bg: #4C5FF9CC;
--bf-urlbar-hightlight-bg: var(--bf-accent-bg);
--bf-urlbar-radius: 9px;
--bf-urlbar-results-font-size: 12pt;
--bf-urlbar-results-font-weight: 550;
--bf-urlbar-font-size: 12pt;
--bf-urlbar-font-weight: 500;
--bf-urlbar-switch-tab-color: #6498EF;
--bf-urlbar-bookmark-color: #53E2AE;
--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-weight: 400;
--bf-tab-height: 36px;
--bf-tab-border-radius: 8px;
--bf-tab-soundplaying-bg: #985EFFCC;
--default-arrowpanel-color: #fefefa !important;
--panel-disabled-color: #f9f9fa80;
/* --default-arrowpanel-color: #fefefa !important; */
/* --panel-disabled-color: #f9f9fa80; */
--toolbar-bgcolor: 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
*/
#main-window {
background: transparent !important;
font-kerning: normal;
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;
}
/*
@ -166,6 +126,10 @@ Contains navbar, urlbar, and etc.
*/
.browser-toolbar {
}
.browser-toolbar:-moz-lwtheme-darktext,
.browser-toolbar:-moz-lwtheme-brighttext {
background: var(--bf-tab-toolbar-bg) !important;
}
@ -174,7 +138,6 @@ toolbar {
}
toolbar#nav-bar {
background: var(--bf-navbar-bg) !important;
padding: var(--bf-navbar-padding) !important;
/* Remove horizontal line on navbar */
@ -182,14 +145,25 @@ toolbar#nav-bar {
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 {
box-shadow: none !important;
margin-left: 2px !important;
}
.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-active-background: var(--bf-hover-bg) !important;
--toolbarbutton-active-background: var(--bf-active-bg) !important;
}
/* URL bar max-width and centered hack */
@ -211,17 +185,34 @@ toolbarbutton {
}
#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;
}
#urlbar-background {
background: var(--bf-urlbar-bg) !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-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;
}
@ -229,34 +220,63 @@ toolbarbutton {
.urlbar-icon-wrapper[open],
.urlbar-icon:not([disabled]):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;
}
.urlbar-icon-wrapper[open] > .urlbar-icon,
.urlbar-icon-wrapper > .urlbar-icon:hover,
.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;
}
#urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
box-shadow: none !important;
display: none !important;
background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important;
}
#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;
backdrop-filter: blur(var(--bf-backdrop-blur)) !important;
}
.urlbar-icon {
}
/* Set color scheme */
.urlbar-icon:-moz-lwtheme-darktext,
.urlbar-icon:-moz-lwtheme-brighttext {
color: var(--bf-icon-color) !important;
}
.urlbar-icon > image {
fill: var(--bf-icon-color) !important;
color: var(--bf-icon-color) !important;
fill: #ff00ff !important;
color: #ff00ff !important;
}
.urlbarView-favicon,
@ -264,18 +284,17 @@ toolbarbutton {
display: none !important;
}
.urlbarView-row[type="bookmark"] > span{
color: var(--bf-bookmark-color) !important;
.urlbarView-row[type="bookmark"] > span {
color: var(--bf-urlbar-bookmark-color) !important;
}
.urlbarView-row[type="switchtab"] > span{
color: var(--bf-switch-tab-color) !important;
.urlbarView-row[type="switchtab"] > span .urlbarView-url {
color: var(--bf-urlbar-switch-tab-color) !important;
}
#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;
color: var(--bf-urlbar-results-color) !important;
}
/* Hover background color */
@ -284,14 +303,12 @@ toolbarbutton {
}
.urlbarView-url, .search-panel-one-offs-container {
color: var(--bf-urlbar-results-url-color) !important;
font-weight: var(--bf-urlbar-results-font-weight);
font-size: var(--bf-urlbar-font-size) !important;
}
#urlbar-input {
font-size: var(--bf-urlbar-font-size) !important;
color: var(--bf-urlbar-color) !important;
font-weight: var(--bf-urlbar-font-weight)!important;
text-align: center !important;
}
@ -303,18 +320,22 @@ toolbarbutton {
}
#searchbar {
background: var(--bf-bg) !important;
border: none !important;
}
/* Set color scheme */
#searchbar:-moz-lwtheme-darktext,
#searchbar:-moz-lwtheme-brighttext {
background: var(--bf-bg) !important;
}
.searchbar-textbox {
color: var(--bf-focus-fg) !important;
font-weight: 700 !important;
}
/* URL bar hightlight color */
::-moz-selection {
background-color: var(--bf-accent-bg) !important;
background-color: var(--bf-urlbar-hightlight-bg) !important;
}
/* Bookmark button - Star button */
@ -324,11 +345,23 @@ toolbarbutton {
}
#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;
}
#star-button:hover:active:not(.no-hover),
#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;
}
@ -342,6 +375,11 @@ toolbaritem {
}
.toolbarbutton-text {
}
/* Set color scheme */
.toolbarbutton-text:-moz-lwtheme-darktext,
.toolbarbutton-text:-moz-lwtheme-brighttext {
color: var(--bf-icon-color) !important;
}
@ -364,6 +402,12 @@ toolbaritem {
#identity-box: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;
}
@ -371,6 +415,16 @@ toolbaritem {
#identity-box[open=true],
#tracking-protection-icon-container:hover:active:not(.no-hover),
#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;
}
@ -394,8 +448,12 @@ The tabs container
border-bottom: 0 !important;
}
/* Transparent tabs */
.toolbar-items {
}
/* Transparent tabs */
.toolbar-items:-moz-lwtheme-darktext,
.toolbar-items:-moz-lwtheme-brighttext {
background-color: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important;
}
@ -430,6 +488,10 @@ The tabs container
.tab-background {
border: none !important;
}
.tab-background:-moz-lwtheme-darktext,
.tab-background:-moz-lwtheme-brighttext {
background: transparent !important;
-moz-appearance: var(--bf-moz-appearance) !important;
}
@ -473,7 +535,6 @@ The tabs container
.tab-text {
font-weight: var(--bf-tab-font-weight);
font-size: var(--bf-tab-font-size) !important;
color: var(--bf-tab-color);
}
/* Center all content */
@ -548,17 +609,21 @@ hbox.tab-content[pinned=true] .tab-text {
}
.tabbrowser-tab:hover {
background: var(--bf-hover-bg) !important;
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 */
.tabbrowser-tab[soundplaying="true"] {
background-color: var(--bf-tab-soundplaying-bg) !important;
}
#tabbrowser-tabs {
--tab-loading-fill: var(--bf-color) !important;
}
/* Hide icon of audio */
@ -583,7 +648,7 @@ hbox.tab-content[pinned=true] .tab-text {
#TabsToolbar {
--toolbarbutton-active-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 */
@ -605,6 +670,10 @@ Sidebar
*/
#sidebar-box {
}
#sidebar-box:-moz-lwtheme-darktext,
#sidebar-box:-moz-lwtheme-brighttext {
--sidebar-background-color: var(--bf-sidebar-bg) !important;
--sidebar-text-color: var(--bf-sidebar-color) !important;
}
@ -612,19 +681,16 @@ Sidebar
#sidebar,
.sidebar-panel {
background: transparent !important;
color: var(--bf-sidebar-color) !important;
}
/* Sidebar searchbar */
#sidebar-search-container #search-box{
-moz-appearance:none !important;
background-color: var(--bf-sidebar-searchbar-bg) !important;
#sidebar-search-container #search-box {
border: none !important;
color: var(--bf-color) !important;
padding: 6px !important;
border-radius: var(--bf-sidebar-searchbar-radius) !important;
}
/*
@ -662,12 +728,21 @@ The findbar
#browser #appcontent #tabbrowser-tabbox findbar,
#browser #appcontent #tabbrowser-tabbox tabpanels {
-moz-appearance: none !important;
background: transparent !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:-moz-lwtheme-darktext,
#browser #appcontent #tabbrowser-tabbox findbar:-moz-lwtheme-brighttext {
background-color: var(--bf-bg) !important;
}
@ -676,7 +751,12 @@ The findbar
margin: 0 !important;
border: none !important;
}
#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;
}
@ -688,26 +768,42 @@ The findbar
Right-click menu
*/
menupopup, popup,
menupopup,
popup,
popup > menu > menupopup,
menupopup > menu > menupopup {
-moz-appearance: none !important;
background: var(--bf-menupopup-bg) !important;
color: var(--base-color) !important;
border: 0 !important;
border-radius: 4px !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;
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;
padding: 0 !important;
border-top: none !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:-moz-lwtheme-darktext,
#customization-container:-moz-lwtheme-brighttext {
background: var(--bf-bg) !important;
}
.customizationmode-button {
-moz-appearance: none !important;
background: var(--bf-bg) !important;
color: var(--bf-color) !important;
padding: 5px !important;
border-radius: 6px !important;
}
.customizationmode-button:hover {
-moz-appearance: none !important;
background: var(--bf-hover-bg) !important;
padding: 5px !important;
border-radius: 6px !important;
}
.customizationmode-button label {
color: var(--bf-color) !important;
}
/*