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
GitHub
parent
9d8a93dd20
commit
65c81da426
69
README.md
69
README.md
|
|
@ -1,16 +1,16 @@
|
|||
# Blurred fox
|
||||
## blurredfox
|
||||
|
||||
### A modern Firefox CSS Theme
|
||||
|
||||
| Default Color Scheme |
|
||||
| Default Colorscheme (Uses System Colors) |
|
||||
| --- |
|
||||
|  |
|
||||
|
||||
| Dark Color Scheme |
|
||||
| Dark Colorscheme |
|
||||
| --- |
|
||||
|  |
|
||||
|
||||
| Light Color Scheme |
|
||||
| Light Colorscheme |
|
||||
| --- |
|
||||
|  |
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
BIN
scrot/dark.webp
BIN
scrot/dark.webp
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 |
BIN
scrot/light.webp
BIN
scrot/light.webp
Binary file not shown.
|
Before Width: | Height: | Size: 316 KiB After Width: | Height: | Size: 186 KiB |
384
userChrome.css
384
userChrome.css
|
|
@ -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-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 {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
Reference in New Issue