Modularized CSS and add Solid Color Scheme as alternative to transparent (#26)
* init * readme * README * readme and scrot * readme and scrot
This commit is contained in:
Gerome Matilla
GitHub
parent
cc2902242c
commit
f757101a2c
52
README.md
52
README.md
|
|
@ -2,13 +2,19 @@
|
|||
|
||||
### A modern Firefox CSS Theme
|
||||
|
||||
<p align="center"><img alt="Firefox with blurredfox" src="scrot.webp"/><br/><i>Firefox with blurredfox CSS theme</i></p>
|
||||
<p align="center"><img alt="Firefox with blurredfox" src="scrots/blurred.webp"/><br/><i>Firefox with blurredfox CSS theme</i></p>
|
||||
<p align="center"><img alt="Firefox with blurredfox" src="scrots/solid.webp"/><br/><i>blurredfox's layout with solid colors</i></p>
|
||||
|
||||
## Requirements
|
||||
|
||||
+ The latest Firefox
|
||||
+ Compositor with blur shader (optional)
|
||||
+ Linux machine - untested on macOS and Windows 10 - might work though (optional)
|
||||
+ Compositor with blur support (optional)
|
||||
|
||||
## Notes
|
||||
|
||||
+ 100% working on linux.
|
||||
+ Untested on macOS.
|
||||
+ Transparency is broken on Windows 10 (has graphical glitches like flickering). The [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) *may* work.
|
||||
|
||||
## How to
|
||||
|
||||
|
|
@ -60,39 +66,35 @@
|
|||
+ **`layout.css.backdrop-filter.enabled`**
|
||||
+ **`svg.context-properties.content.enabled`**
|
||||
|
||||
Then make sure to **enable them all!**
|
||||
Then make sure to **enable them all!**. Or you can just copy the `user.js` file to your profile.
|
||||
|
||||
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. Restart Firefox.
|
||||
7. Finally, you can now change whatever colorscheme you want in the Cusomization Window.
|
||||
7. Finally, you can now change whatever color mode 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.
|
||||
|
||||
### Uninstall
|
||||
## User Support
|
||||
|
||||
1. Go to your profile directory.
|
||||
2. Delete the `chrome` folder.
|
||||
3. If you used the installation script, you can also delete the `user.js` inside your profile directory.
|
||||
|
||||
## Note
|
||||
|
||||
### Some UI are broken!
|
||||
### Some UIs are broken!
|
||||
|
||||
1. Check if you're using the latest version of Firefox.
|
||||
2. If you're not using Linux check the next note below.
|
||||
2. It's broken because you're using Windows 10 and macOS or you're using an ancient version of Firefox.
|
||||
|
||||
### 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 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 10 and `-moz-mac-vibrancy-dark` if macOS. Still, do not expect that it will work without a problem. The theme's untested on these platforms!
|
||||
1. I only have Archlinux, macOS' untested while the theme is broken on Windows 10.
|
||||
2. If the transparency is broken, use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css). Edit the `userChrome.css` to switch.
|
||||
|
||||
### Liar! Your theme's name is `blurredfox`, ***where is the blur***?!
|
||||
### Liar! The theme's name is `blurredfox`, ***where is the blur***?!
|
||||
|
||||
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:
|
||||
|
||||
|
|
@ -113,14 +115,24 @@
|
|||
1. You can adjust the value of `scrollbar-width` in `userContent.css`.
|
||||
2. Restart Firefox.
|
||||
|
||||
### How can I set or change the colors for the Default color mode?
|
||||
|
||||
1. The default mode are from Firefox and it uses the system colors. Although I only tried and tested it with `GTK3`, it should work with any platforms or environment as long as Firefox can detect your system colors.
|
||||
|
||||
|
||||
### 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`.
|
||||
1. Use the [solid color scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css) by editing the `userChrome.css`.
|
||||
2. You can change the colors yourself.
|
||||
3. The transparency is only applied to `Dark` and `Light` mode under the blurred color scheme. `No transparency == No blur`.
|
||||
4. You can read the next point.
|
||||
|
||||
### How can I set or change the colors for the Default colorscheme?
|
||||
### Uninstall this now!
|
||||
|
||||
1. The default colorscheme are from Firefox and it uses the system colors. Although I only tried and tested it with `GTK3`, it should work with any platforms or environment as long as Firefox can detect your system colors. So all you can do is to switch theme to change its colorscheme.
|
||||
1. Go to your profile directory.
|
||||
2. Delete the `chrome` folder.
|
||||
3. If you used the installation script or copied the `user.js` to your profile, delete it.
|
||||
4. Sayonara.
|
||||
|
||||
## Got a problem?
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
:root {
|
||||
/* All the CSS variables here are global */
|
||||
/* These applies to all colorschemes */
|
||||
|
||||
/* 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-accent-bg: #4C5FF9CC;
|
||||
--bf-blank-page-bg: #252525;
|
||||
|
||||
--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-tab-selected-bg: #77777788;
|
||||
--bf-tab-font-size: 11pt;
|
||||
--bf-tab-font-weight: 400;
|
||||
--bf-tab-height: 36px;
|
||||
--bf-tab-border-radius: 6px;
|
||||
--bf-tab-soundplaying-bg: #985EFFCC;
|
||||
|
||||
--toolbar-bgcolor: transparent !important;
|
||||
--urlbar-separator-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Light Mode */
|
||||
:root:-moz-lwtheme-darktext {
|
||||
--bf-main-window: transparent;
|
||||
--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: #00000022;
|
||||
--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-main-window: transparent;
|
||||
--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);
|
||||
}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
:root {
|
||||
/* All the CSS variables here are global */
|
||||
/* These applies to all colorschemes */
|
||||
|
||||
/* 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-accent-bg: #4C5FF9CC;
|
||||
--bf-blank-page-bg: #252525;
|
||||
|
||||
--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-tab-selected-bg: #77777788;
|
||||
--bf-tab-font-size: 11pt;
|
||||
--bf-tab-font-weight: 400;
|
||||
--bf-tab-height: 36px;
|
||||
--bf-tab-border-radius: 6px;
|
||||
--bf-tab-soundplaying-bg: #985EFFCC;
|
||||
|
||||
--toolbar-bgcolor: transparent !important;
|
||||
--urlbar-separator-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Light Mode */
|
||||
:root:-moz-lwtheme-darktext {
|
||||
--bf-main-window: #F2F2F2;
|
||||
--bf-bg: var(--bf-main-window);
|
||||
--bf-color: #0A0A0A;
|
||||
|
||||
--bf-hover-bg: #1A1A1A33;
|
||||
--bf-active-bg: #1A1A1A66;
|
||||
|
||||
--bf-icon-color: #0A0A0A;
|
||||
--bf-tab-toolbar-bg: #F2F2F2;
|
||||
--bf-tab-selected-bg: #CFCFCF;
|
||||
--bf-navbar-bg: #E6E6E6;
|
||||
--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: #F2F2F2EE;
|
||||
--bf-menupopup-color: var(--bf-color);
|
||||
}
|
||||
|
||||
/* Dark Mode */
|
||||
:root:-moz-lwtheme-brighttext {
|
||||
--bf-main-window: #0A0A0A;
|
||||
--bf-bg: var(--bf-main-window);
|
||||
--bf-color: #F2F2F2;
|
||||
|
||||
--bf-hover-bg: #F2F2F233;
|
||||
--bf-active-bg: #F2F2F266;
|
||||
|
||||
--bf-icon-color: #F2F2F2;
|
||||
--bf-tab-toolbar-bg: var(--base-bg);
|
||||
--bf-tab-selected-bg: #252525;
|
||||
--bf-navbar-bg: #252525;
|
||||
--bf-urlbar-bg: #353535;
|
||||
--bf-urlbar-active-bg: #353535;
|
||||
--bf-urlbar-focused-color: var(--bf-color);
|
||||
|
||||
--bf-sidebar-bg: var(--bf-bg);
|
||||
--bf-sidebar-color: var(--bf-color);
|
||||
|
||||
--bf-menupopup-bg: #0A0A0AEE;
|
||||
--bf-menupopup-color: var(--bf-color);
|
||||
}
|
||||
|
|
@ -50,7 +50,8 @@ function check_profile() {
|
|||
# Check OSTYPE
|
||||
case "$OSTYPE" in
|
||||
msys*)
|
||||
FF_USER_DIRECTORY="$(find "${HOME}AppData\Roaming\Mozilla\firefox" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
|
||||
# Untested on WSL
|
||||
# FF_USER_DIRECTORY="$(find "${HOME}AppData\Roaming\Mozilla\firefox" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
|
||||
;;
|
||||
*)
|
||||
FF_USER_DIRECTORY="$(find "${HOME}/.mozilla/firefox/" -maxdepth 1 -type d -regextype egrep -regex '.*[a-zA-Z0-9]+.'${1})"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
/*
|
||||
░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
|
||||
░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
|
||||
░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
|
||||
|
||||
The dropdown menus
|
||||
*/
|
||||
|
||||
.panel-arrowcontent {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
toolbarseparator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
box.panel-arrowbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
box.panel-arrowcontent {
|
||||
border-radius: 8px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
/*
|
||||
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
|
||||
░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
|
||||
░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
Right-click menu
|
||||
*/
|
||||
|
||||
menupopup,
|
||||
popup,
|
||||
popup > menu > menupopup,
|
||||
menupopup > menu > menupopup {
|
||||
border: 0 !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 2px 0 2px 0 !important;
|
||||
}
|
||||
|
||||
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: 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
/*
|
||||
░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
|
||||
░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
|
||||
░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
|
||||
|
||||
The customization window
|
||||
*/
|
||||
|
||||
#customization-container {
|
||||
}
|
||||
|
||||
#customization-container:-moz-lwtheme-darktext,
|
||||
#customization-container:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
.customizationmode-button {
|
||||
padding: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.customizationmode-button:-moz-lwtheme-darktext,
|
||||
.customizationmode-button:-moz-lwtheme-brighttext {
|
||||
color: var(--bf-color) !important;;
|
||||
}
|
||||
|
||||
.customizationmode-button:hover {
|
||||
padding: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.customizationmode-button label {
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
/*
|
||||
░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
|
||||
░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
|
||||
|
||||
The findbar
|
||||
*/
|
||||
|
||||
#browser #appcontent #tabbrowser-tabbox findbar,
|
||||
#browser #appcontent #tabbrowser-tabbox tabpanels {
|
||||
-moz-appearance: none !important;
|
||||
border: none !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;
|
||||
}
|
||||
|
||||
.findbar-find-previous,
|
||||
.findbar-find-next {
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
|
||||
░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
|
||||
░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░
|
||||
|
||||
Main window
|
||||
*/
|
||||
#main-window {
|
||||
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: var(--bf-main-window) !important;
|
||||
-moz-appearance: var(--bf-moz-appearance) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░█▀█░█▀█░▀█▀
|
||||
░█▀▀░█░█░█░█░░█░
|
||||
░▀░░░▀▀▀░▀░▀░░▀░
|
||||
|
||||
I'm not sure if this does something
|
||||
*/
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-variant-ligatures: none;
|
||||
font-kerning: normal;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/*
|
||||
░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
.sidebar-panel {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Sidebar searchbar */
|
||||
#sidebar-search-container #search-box {
|
||||
border: none !important;
|
||||
padding: 6px !important;
|
||||
border-radius: var(--bf-sidebar-searchbar-radius) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
/*
|
||||
░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
|
||||
|
||||
The tabs container
|
||||
*/
|
||||
|
||||
/* Move tab bar beneath the url bar */
|
||||
#titlebar {
|
||||
/*
|
||||
Set the value to 3 to move the tabbar below the navbar
|
||||
*/
|
||||
-moz-box-ordinal-group: 1 !important;
|
||||
}
|
||||
|
||||
#titlebar::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Set minimum height for tab bar */
|
||||
#tabbrowser-tabs {
|
||||
--tab-min-height: 0;
|
||||
margin: 6px 5px 6px 5px;
|
||||
}
|
||||
|
||||
/* Compact mode */
|
||||
:root[uidensity="compact"] #tabbrowser-tabs {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide solo tab */
|
||||
/*
|
||||
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type {
|
||||
visibility: collapse;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Hide New Tab Button immediately next to solo tab */
|
||||
/*
|
||||
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type + toolbarbutton {
|
||||
visibility: collapse;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Stretch Tabs */
|
||||
.tabbrowser-tab[fadein]:not([pinned]) {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tab-background[selected="true"] {
|
||||
background: var(--bf-tab-selected-bg) !important;
|
||||
}
|
||||
|
||||
.tab-background:not[visuallyselected] {
|
||||
background: var(--bf-tab-selected-bg) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
/* Remove the all the "lines" in tab sides */
|
||||
/*
|
||||
.tabbrowser-tab::after,
|
||||
.tabbrowser-tab::before {
|
||||
border-left: none !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Remove the lines on the side of the selected tab */
|
||||
.tabbrowser-tab[beforeselected-visible="true"]::after,
|
||||
.tabbrowser-tab[beforeselected-visible="true"]::before,
|
||||
.tabbrowser-tab[selected="true"]::after,
|
||||
.tabbrowser-tab[selected="true"]::before {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
/* Style all the lines before and after selected tab */
|
||||
.tabbrowser-tab::after,
|
||||
.tabbrowser-tab::before {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-arrowscrollbox {
|
||||
margin-inline-start: 4px !important;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-weight: var(--bf-tab-font-weight);
|
||||
font-size: var(--bf-tab-font-size) !important;
|
||||
}
|
||||
|
||||
/* Center all content */
|
||||
.tab-content {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -1px;
|
||||
min-width: 100% !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
/* A way to center the label and icon while
|
||||
the close button is positioned to the far right */
|
||||
.tab-content::before{
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
-moz-box-flex: 1
|
||||
}
|
||||
|
||||
/* Tab close button */
|
||||
.tab-close-button {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Prevent tab icons size breaking */
|
||||
.tab-icon-image, .tab-icon-sound,
|
||||
.tab-throbber, .tab-throbber-fallback,
|
||||
.tab-close-button {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
/* Adjust tab label width */
|
||||
.tab-label-container {
|
||||
min-width: 3px !important;
|
||||
}
|
||||
|
||||
/* If tab close button is not present, don't force favicon to the center */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber-fallback,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([busy]) .tab-icon-image,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([image]) .tab-label-container {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Tab icon */
|
||||
hbox.tab-content .tab-icon-image {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* Show the icon of pinned tabs */
|
||||
hbox.tab-content[pinned=true] .tab-icon-image {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* Hide text of pinned tabs */
|
||||
hbox.tab-content[pinned=true] .tab-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide the blue line on top of tab */
|
||||
.tab-line {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tab-bottom-line {
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
border-radius: var(--bf-tab-border-radius) !important;
|
||||
border-width: 0;
|
||||
height: var(--bf-tab-height) !important;
|
||||
overflow: hidden;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover {
|
||||
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 {
|
||||
}
|
||||
|
||||
/* Audio Icon */
|
||||
.tab-icon-sound {
|
||||
}
|
||||
|
||||
/* Center pinned tab stack(Contains icon) if #tabbrowser-tabs[positionpinnedtabs=true] */
|
||||
#tabbrowser-tabs[positionpinnedtabs=true] .tabbrowser-tab[pinned=true] .tab-stack {
|
||||
position: relative !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
|
||||
.private-browsing-indicator {
|
||||
display: block;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Remove hover effects on tab bar buttons */
|
||||
#TabsToolbar {
|
||||
--toolbarbutton-active-background: transparent !important;
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
/* Left to Right Alignment of tabs toolbar */
|
||||
/* #TabsToolbar {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
/*
|
||||
░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄
|
||||
░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄
|
||||
░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
|
||||
Contains navbar, urlbar, and etc.
|
||||
*/
|
||||
|
||||
.browser-toolbar {
|
||||
}
|
||||
|
||||
.browser-toolbar:-moz-lwtheme-darktext,
|
||||
.browser-toolbar:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-tab-toolbar-bg) !important;
|
||||
}
|
||||
|
||||
toolbar {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
toolbar#nav-bar {
|
||||
padding: var(--bf-navbar-padding) !important;
|
||||
|
||||
/* Remove horizontal line on navbar */
|
||||
box-shadow: 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 {
|
||||
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-active-bg) !important;
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Set color scheme */
|
||||
#searchbar:-moz-lwtheme-darktext,
|
||||
#searchbar:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
.searchbar-textbox {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox,
|
||||
toolbaritem {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-text {
|
||||
}
|
||||
|
||||
/* Set color scheme */
|
||||
.toolbarbutton-text:-moz-lwtheme-darktext,
|
||||
.toolbarbutton-text:-moz-lwtheme-brighttext {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
/* Back button */
|
||||
#back-button > .toolbarbutton-icon {
|
||||
--backbutton-background: transparent !important;
|
||||
border: none !important;
|
||||
-moz-appearance: var(--bf-moz-appearance) !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
/*
|
||||
░█░█░█▀▄░█░░░█▀▄░█▀█░█▀▄
|
||||
░█░█░█▀▄░█░░░█▀▄░█▀█░█▀▄
|
||||
░▀▀▀░▀░▀░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
|
||||
URL bar
|
||||
*/
|
||||
|
||||
/* URL bar max-width and centered hack */
|
||||
#urlbar {
|
||||
max-width: 70% !important;
|
||||
margin: 0 15% !important;
|
||||
|
||||
/* URL bar and toolbar height */
|
||||
--urlbar-height: 36px !important;
|
||||
--urlbar-toolbar-height: 40px !important;
|
||||
}
|
||||
|
||||
/* URL bar and toolbar height if compact mode */
|
||||
:root[uidensity="compact"] #urlbar {
|
||||
--urlbar-height: 30px !important;
|
||||
--urlbar-toolbar-height: 34px !important;
|
||||
}
|
||||
|
||||
#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 {
|
||||
border-radius: var(--bf-urlbar-radius) !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;
|
||||
}
|
||||
|
||||
.urlbar-icon[open],
|
||||
.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;
|
||||
-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: #ff00ff !important;
|
||||
color: #ff00ff !important;
|
||||
}
|
||||
|
||||
.urlbarView-favicon,
|
||||
.urlbarView-type-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[type="bookmark"] > span {
|
||||
color: var(--bf-urlbar-bookmark-color) !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[type="switchtab"] > span .urlbarView-url {
|
||||
color: var(--bf-urlbar-switch-tab-color) !important;
|
||||
}
|
||||
|
||||
#urlbar-results {
|
||||
font-weight: var(--bf-urlbar-results-font-weight);
|
||||
font-size: var(--bf-urlbar-results-font-size) !important;
|
||||
}
|
||||
|
||||
/* Hover background color */
|
||||
.urlbarView-row-inner:hover {
|
||||
background: var(--bf-accent-bg) !important;
|
||||
}
|
||||
|
||||
.urlbarView-url, .search-panel-one-offs-container {
|
||||
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;
|
||||
font-weight: var(--bf-urlbar-font-weight)!important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Urlbar buttons */
|
||||
.urlbar-icon,
|
||||
.urlbar-page-action {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* URL bar hightlight color */
|
||||
::-moz-selection {
|
||||
background-color: var(--bf-urlbar-hightlight-bg) !important;
|
||||
}
|
||||
|
||||
/* Bookmark button - Star button */
|
||||
#star-button {
|
||||
/* URL bar bookmark button */
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Tracking */
|
||||
#tracking-protection-icon-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Identity */
|
||||
#identity-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#identity-box:hover:active:not(.no-hover),
|
||||
#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;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
|
||||
/*
|
||||
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
|
||||
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
|
||||
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
The control buttons. Contains, close, minimize, and maximize buttons
|
||||
*/
|
||||
|
||||
#autohide-context {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#window-controls[hidden="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#window-controls[hidden="false"] {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Hide titlebar-buttonbox if there's single tab */
|
||||
/*
|
||||
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
*/
|
||||
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
878
userChrome.css
878
userChrome.css
|
|
@ -1,868 +1,34 @@
|
|||
:root {
|
||||
/* All the CSS variables here are global */
|
||||
/* These applies to all colorschemes */
|
||||
|
||||
/* 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-accent-bg: #4C5FF9CC;
|
||||
--bf-blank-page-bg: #252525;
|
||||
|
||||
--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-tab-selected-bg: #77777788;
|
||||
--bf-tab-font-size: 11pt;
|
||||
--bf-tab-font-weight: 400;
|
||||
--bf-tab-height: 36px;
|
||||
--bf-tab-border-radius: 6px;
|
||||
--bf-tab-soundplaying-bg: #985EFFCC;
|
||||
|
||||
--toolbar-bgcolor: transparent !important;
|
||||
--urlbar-separator-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Light Mode */
|
||||
:root:-moz-lwtheme-darktext {
|
||||
--bf-main-window: transparent;
|
||||
--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: #00000022;
|
||||
--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-main-window: transparent;
|
||||
--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);
|
||||
}
|
||||
|
||||
/*
|
||||
░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
|
||||
░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
|
||||
░░▀░░▀░▀░▀░▀░▀░▀░▀▀▀░▀░░░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀▀░░▀░
|
||||
░█▀▀░█▀█░█░░░█▀█░█▀▄░█▀▀
|
||||
░█░░░█░█░█░░░█░█░█▀▄░▀▀█
|
||||
░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
Main window
|
||||
Load preferred colorscheme
|
||||
*/
|
||||
#main-window {
|
||||
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: var(--bf-main-window) !important;
|
||||
-moz-appearance: var(--bf-moz-appearance) !important;
|
||||
}
|
||||
/* Blurred Color Scheme */
|
||||
@import url('colors/blurred.css');
|
||||
|
||||
/* Solid Color Scheme */
|
||||
/*
|
||||
░█▀▀░█▀█░█▀█░▀█▀
|
||||
░█▀▀░█░█░█░█░░█░
|
||||
░▀░░░▀▀▀░▀░▀░░▀░
|
||||
|
||||
I'm not sure if this does something
|
||||
*/
|
||||
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-variant-ligatures: none;
|
||||
font-kerning: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
░▀█▀░█▀█░█▀█░█░░░█▀▄░█▀█░█▀▄
|
||||
░░█░░█░█░█░█░█░░░█▀▄░█▀█░█▀▄
|
||||
░░▀░░▀▀▀░▀▀▀░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
|
||||
Contains navbar, urlbar, and etc.
|
||||
*/
|
||||
|
||||
.browser-toolbar {
|
||||
}
|
||||
|
||||
.browser-toolbar:-moz-lwtheme-darktext,
|
||||
.browser-toolbar:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-tab-toolbar-bg) !important;
|
||||
}
|
||||
|
||||
toolbar {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
toolbar#nav-bar {
|
||||
padding: var(--bf-navbar-padding) !important;
|
||||
|
||||
/* Remove horizontal line on navbar */
|
||||
box-shadow: 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 {
|
||||
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-active-bg) !important;
|
||||
}
|
||||
|
||||
/* URL bar max-width and centered hack */
|
||||
#urlbar {
|
||||
max-width: 70% !important;
|
||||
margin: 0 15% !important;
|
||||
}
|
||||
|
||||
/* URL bar and toolbar height */
|
||||
#urlbar {
|
||||
--urlbar-height: 36px !important;
|
||||
--urlbar-toolbar-height: 40px !important;
|
||||
}
|
||||
|
||||
/* URL bar and toolbar height if compact mode */
|
||||
:root[uidensity="compact"] #urlbar {
|
||||
--urlbar-height: 30px !important;
|
||||
--urlbar-toolbar-height: 34px !important;
|
||||
}
|
||||
|
||||
#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 {
|
||||
border-radius: var(--bf-urlbar-radius) !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;
|
||||
}
|
||||
|
||||
.urlbar-icon[open],
|
||||
.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;
|
||||
-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: #ff00ff !important;
|
||||
color: #ff00ff !important;
|
||||
}
|
||||
|
||||
.urlbarView-favicon,
|
||||
.urlbarView-type-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[type="bookmark"] > span {
|
||||
color: var(--bf-urlbar-bookmark-color) !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[type="switchtab"] > span .urlbarView-url {
|
||||
color: var(--bf-urlbar-switch-tab-color) !important;
|
||||
}
|
||||
|
||||
#urlbar-results {
|
||||
font-weight: var(--bf-urlbar-results-font-weight);
|
||||
font-size: var(--bf-urlbar-results-font-size) !important;
|
||||
}
|
||||
|
||||
/* Hover background color */
|
||||
.urlbarView-row-inner:hover {
|
||||
background: var(--bf-accent-bg) !important;
|
||||
}
|
||||
|
||||
.urlbarView-url, .search-panel-one-offs-container {
|
||||
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;
|
||||
font-weight: var(--bf-urlbar-font-weight)!important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
/* Urlbar buttons */
|
||||
.urlbar-icon,
|
||||
.urlbar-page-action {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Set color scheme */
|
||||
#searchbar:-moz-lwtheme-darktext,
|
||||
#searchbar:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
.searchbar-textbox {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* URL bar hightlight color */
|
||||
::-moz-selection {
|
||||
background-color: var(--bf-urlbar-hightlight-bg) !important;
|
||||
}
|
||||
|
||||
/* Bookmark button - Star button */
|
||||
#star-button {
|
||||
/* URL bar bookmark button */
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#navigator-toolbox,
|
||||
toolbaritem {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-text {
|
||||
}
|
||||
|
||||
/* Set color scheme */
|
||||
.toolbarbutton-text:-moz-lwtheme-darktext,
|
||||
.toolbarbutton-text:-moz-lwtheme-brighttext {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
/* Back button */
|
||||
#back-button > .toolbarbutton-icon {
|
||||
--backbutton-background: transparent !important;
|
||||
border: none !important;
|
||||
-moz-appearance: var(--bf-moz-appearance) !important;
|
||||
}
|
||||
|
||||
/* Tracking */
|
||||
#tracking-protection-icon-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Identity */
|
||||
#identity-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#identity-box:hover:active:not(.no-hover),
|
||||
#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;
|
||||
}
|
||||
|
||||
/*
|
||||
░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░░▀░░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
|
||||
|
||||
The tabs container
|
||||
*/
|
||||
|
||||
/* Move tab bar beneath the url bar */
|
||||
#titlebar {
|
||||
/*
|
||||
Set the value to 3 to move the tabbar below the navbar
|
||||
*/
|
||||
-moz-box-ordinal-group: 1 !important;
|
||||
}
|
||||
|
||||
#titlebar::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Set minimum height for tab bar */
|
||||
#tabbrowser-tabs {
|
||||
--tab-min-height: 0;
|
||||
margin: 6px 5px 6px 5px;
|
||||
}
|
||||
|
||||
/* Compact mode */
|
||||
:root[uidensity="compact"] #tabbrowser-tabs {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide solo tab */
|
||||
/*
|
||||
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type {
|
||||
visibility: collapse;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Hide New Tab Button immediately next to solo tab */
|
||||
/*
|
||||
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"]:only-of-type + toolbarbutton {
|
||||
visibility: collapse;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Stretch Tabs */
|
||||
.tabbrowser-tab[fadein]:not([pinned]) {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tab-background[selected="true"] {
|
||||
background: var(--bf-tab-selected-bg) !important;
|
||||
}
|
||||
|
||||
.tab-background:not[visuallyselected] {
|
||||
background: var(--bf-tab-selected-bg) !important;
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
/* Remove the all the "lines" in tab sides */
|
||||
/*
|
||||
.tabbrowser-tab::after,
|
||||
.tabbrowser-tab::before {
|
||||
border-left: none !important;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Remove the lines on the side of the selected tab */
|
||||
.tabbrowser-tab[beforeselected-visible="true"]::after,
|
||||
.tabbrowser-tab[beforeselected-visible="true"]::before,
|
||||
.tabbrowser-tab[selected="true"]::after,
|
||||
.tabbrowser-tab[selected="true"]::before {
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
/* Style all the lines before and after selected tab */
|
||||
.tabbrowser-tab::after,
|
||||
.tabbrowser-tab::before {
|
||||
border-width: 1px !important;
|
||||
}
|
||||
|
||||
.tabbrowser-arrowscrollbox {
|
||||
margin-inline-start: 4px !important;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-weight: var(--bf-tab-font-weight);
|
||||
font-size: var(--bf-tab-font-size) !important;
|
||||
}
|
||||
|
||||
/* Center all content */
|
||||
.tab-content {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -1px;
|
||||
min-width: 100% !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
/* A way to center the label and icon while
|
||||
the close button is positioned to the far right */
|
||||
.tab-content::before{
|
||||
content: "";
|
||||
display: -moz-box;
|
||||
-moz-box-flex: 1
|
||||
}
|
||||
|
||||
/* Tab close button */
|
||||
.tab-close-button {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Prevent tab icons size breaking */
|
||||
.tab-icon-image, .tab-icon-sound,
|
||||
.tab-throbber, .tab-throbber-fallback,
|
||||
.tab-close-button {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
/* Adjust tab label width */
|
||||
.tab-label-container {
|
||||
min-width: 3px !important;
|
||||
}
|
||||
|
||||
/* If tab close button is not present, don't force favicon to the center */
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]) .tab-throbber-fallback,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([busy]) .tab-icon-image,
|
||||
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected="true"]):not([image]) .tab-label-container {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Tab icon */
|
||||
hbox.tab-content .tab-icon-image {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* Show the icon of pinned tabs */
|
||||
hbox.tab-content[pinned=true] .tab-icon-image {
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* Hide text of pinned tabs */
|
||||
hbox.tab-content[pinned=true] .tab-text {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide the blue line on top of tab */
|
||||
.tab-line {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tab-bottom-line {
|
||||
}
|
||||
|
||||
.tabbrowser-tab {
|
||||
border-radius: var(--bf-tab-border-radius) !important;
|
||||
border-width: 0;
|
||||
height: var(--bf-tab-height) !important;
|
||||
overflow: hidden;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
:root[uidensity="compact"] .tabbrowser-tab {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover {
|
||||
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 {
|
||||
}
|
||||
|
||||
/* Audio Icon */
|
||||
.tab-icon-sound {
|
||||
}
|
||||
|
||||
/* Center pinned tab stack(Contains icon) if #tabbrowser-tabs[positionpinnedtabs=true] */
|
||||
#tabbrowser-tabs[positionpinnedtabs=true] .tabbrowser-tab[pinned=true] .tab-stack {
|
||||
position: relative !important;
|
||||
top: 50% !important;
|
||||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
|
||||
.private-browsing-indicator {
|
||||
display: block;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Remove hover effects on tab bar buttons */
|
||||
#TabsToolbar {
|
||||
--toolbarbutton-active-background: transparent !important;
|
||||
--toolbarbutton-hover-background: transparent !important;
|
||||
-moz-appearance: none !important;
|
||||
}
|
||||
|
||||
/* Left to Right Alignment of tabs toolbar */
|
||||
/* #TabsToolbar {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
direction: ltr;
|
||||
}
|
||||
@import url('colors/solid.css');
|
||||
*/
|
||||
|
||||
/*
|
||||
░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
░█░█░▀█▀░░░█▀▀░█░░░█▀▀░█▄█░█▀▀░█▀█░▀█▀░█▀▀
|
||||
░█░█░░█░░░░█▀▀░█░░░█▀▀░█░█░█▀▀░█░█░░█░░▀▀█
|
||||
░▀▀▀░▀▀▀░░░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀▀▀░▀░▀░░▀░░▀▀▀
|
||||
|
||||
Sidebar
|
||||
Load Customized Firefox's UI Elements
|
||||
*/
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
.sidebar-panel {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Sidebar searchbar */
|
||||
#sidebar-search-container #search-box {
|
||||
border: none !important;
|
||||
padding: 6px !important;
|
||||
border-radius: var(--bf-sidebar-searchbar-radius) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
|
||||
░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
|
||||
░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
|
||||
|
||||
The dropdown menus
|
||||
*/
|
||||
|
||||
.panel-arrowcontent {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
toolbarseparator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
box.panel-arrowbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
box.panel-arrowcontent {
|
||||
border-radius: 8px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
|
||||
░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
|
||||
|
||||
The findbar
|
||||
*/
|
||||
|
||||
#browser #appcontent #tabbrowser-tabbox findbar,
|
||||
#browser #appcontent #tabbrowser-tabbox tabpanels {
|
||||
-moz-appearance: none !important;
|
||||
border: none !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;
|
||||
}
|
||||
|
||||
.findbar-find-previous,
|
||||
.findbar-find-next {
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
|
||||
░█░░░█░█░█░█░░█░░█▀▀░▄▀▄░░█░░█░█░█▀▀░█░█░█░█
|
||||
░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀░▀░░▀░░▀░▀░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
Right-click menu
|
||||
*/
|
||||
|
||||
menupopup,
|
||||
popup,
|
||||
popup > menu > menupopup,
|
||||
menupopup > menu > menupopup {
|
||||
border: 0 !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 2px 0 2px 0 !important;
|
||||
}
|
||||
|
||||
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: 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;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
|
||||
░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
|
||||
░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
|
||||
|
||||
The customization window
|
||||
*/
|
||||
|
||||
#customization-container {
|
||||
}
|
||||
|
||||
#customization-container:-moz-lwtheme-darktext,
|
||||
#customization-container:-moz-lwtheme-brighttext {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
.customizationmode-button {
|
||||
padding: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.customizationmode-button:hover {
|
||||
padding: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
.customizationmode-button label {
|
||||
}
|
||||
|
||||
/*
|
||||
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
|
||||
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
|
||||
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
The control buttons. Contains, close, minimize, and maximize buttons
|
||||
*/
|
||||
|
||||
#autohide-context {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#window-controls[hidden="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#window-controls[hidden="false"] {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
/* Hide titlebar-buttonbox if there's single tab */
|
||||
/*
|
||||
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
*/
|
||||
@import url('parts/main-window.css');
|
||||
@import url('parts/toolbar.css');
|
||||
@import url('parts/tabbar.css');
|
||||
@import url('parts/urlbar.css');
|
||||
@import url('parts/sidebar.css');
|
||||
@import url('parts/arrow-panel.css');
|
||||
@import url('parts/findbar.css');
|
||||
@import url('parts/context-menu.css');
|
||||
@import url('parts/customization-window.css');
|
||||
@import url('parts/window-controls.css');
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
@import url('userChrome.css');
|
||||
|
||||
/* Removes the white loading page */
|
||||
/* url(about:newtab), url(about:home) */
|
||||
@-moz-document url(about:blank) {
|
||||
html:not(#ublock0-epicker),
|
||||
html:not(#ublock0-epicker)
|
||||
body,
|
||||
#newtab-customize-overlay {
|
||||
background: var(--bf-blank-page-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide scrollbar */
|
||||
:root{
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
|
||||
/* Hide incognito scrollbar */
|
||||
@-moz-document url(about:privatebrowsing) {
|
||||
:root{
|
||||
scrollbar-width: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue