support all color scheme
This commit is contained in:
Gerome Matilla
parent
4384e68658
commit
a1a4a231e2
20
README.md
20
README.md
|
|
@ -1,10 +1,18 @@
|
|||
# Blurred fox
|
||||
|
||||
### A ~~blurred~~ transparent safari-like firefox CSS theme
|
||||
### A modern Firefox CSS Theme
|
||||
|
||||
| blurredfox |
|
||||
| Default Color Scheme |
|
||||
| --- |
|
||||
|  |
|
||||
|  |
|
||||
|
||||
| Dark Color Scheme |
|
||||
| --- |
|
||||
|  |
|
||||
|
||||
| Light Color Scheme |
|
||||
| --- |
|
||||
|  |
|
||||
|
||||
## How to
|
||||
|
||||
|
|
@ -34,7 +42,7 @@
|
|||
5. Search for **`toolkit.legacyUserProfileCustomizations.stylesheets`**, **`layers.acceleration.force-enabled`**, **`gfx.webrender.all`**, and **`svg.context-properties.content.enabled`**. Make sure to **enable them all!**
|
||||
6. Go to your Firefox profile located in `$HOME/.mozilla/firefox/XXXXXXX.default-release/`.
|
||||
7. Create a folder and name it **`chrome`**, then assuming that you already clone this repo, just copy the theme to `chrome` folder.
|
||||
8. Finally, change the Firefox theme from default to dark. **This is important!**
|
||||
8. Finally, you can now change whatever colorscheme you want.
|
||||
|
||||
## Note
|
||||
|
||||
|
|
@ -44,7 +52,7 @@
|
|||
|
||||
1. **Sadly, I only have archlinux, so I cannot guarantee that it will work on Windows10 and macOS. A feedback is welcome if it works on your platform.**
|
||||
|
||||
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.
|
||||
2. **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.
|
||||
|
||||
### If you're using Plasma and there's no blur effect,
|
||||
|
||||
|
|
@ -53,4 +61,4 @@
|
|||
2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/).
|
||||
|
||||
3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
|
||||
|
||||
2
|
||||
57
add.svg
57
add.svg
|
|
@ -1,57 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 48 48"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="add.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
inkscape:document-rotation="0"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1321"
|
||||
inkscape:window-height="740"
|
||||
id="namedview6"
|
||||
showgrid="false"
|
||||
inkscape:pagecheckerboard="true"
|
||||
inkscape:zoom="12"
|
||||
inkscape:cx="24"
|
||||
inkscape:cy="24"
|
||||
inkscape:window-x="45"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
d="M 40,26.285714 H 26.285714 V 40 H 21.714286 V 26.285714 H 8 V 21.714286 H 21.714286 V 8 h 4.571428 V 21.714286 H 40 Z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:1.14286" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,56 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="ic_chevron_left_48px.svg"
|
||||
id="svg4"
|
||||
version="1.1"
|
||||
viewBox="0 0 48 48"
|
||||
height="48"
|
||||
width="48">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-x="45"
|
||||
inkscape:cy="19.284866"
|
||||
inkscape:cx="23.295551"
|
||||
inkscape:zoom="12"
|
||||
inkscape:pagecheckerboard="true"
|
||||
showgrid="false"
|
||||
id="namedview6"
|
||||
inkscape:window-height="740"
|
||||
inkscape:window-width="1321"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:2.00001"
|
||||
id="path2"
|
||||
d="M 38.83,5.660001 33.17,0 9.1699995,24 33.17,48 38.83,42.339999 20.489998,24 Z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.7 KiB |
|
|
@ -1,56 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
sodipodi:docname="ic_chevron_right_48px.svg"
|
||||
id="svg4"
|
||||
version="1.1"
|
||||
viewBox="0 0 48 48"
|
||||
height="48"
|
||||
width="48">
|
||||
<metadata
|
||||
id="metadata10">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
inkscape:current-layer="svg4"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:window-y="28"
|
||||
inkscape:window-x="45"
|
||||
inkscape:cy="24"
|
||||
inkscape:cx="24"
|
||||
inkscape:zoom="12"
|
||||
inkscape:pagecheckerboard="true"
|
||||
showgrid="false"
|
||||
id="namedview6"
|
||||
inkscape:window-height="740"
|
||||
inkscape:window-width="1321"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="0"
|
||||
guidetolerance="10"
|
||||
gridtolerance="10"
|
||||
objecttolerance="10"
|
||||
borderopacity="1"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#ffffff" />
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:2"
|
||||
id="path2"
|
||||
d="M 14.83,0 9.17,5.66 27.51,24 9.17,42.34 14.83,48 l 24,-24 z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 MiB |
BIN
scrot/dark.webp
Normal file
BIN
scrot/dark.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
scrot/default.webp
Normal file
BIN
scrot/default.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 314 KiB |
BIN
scrot/light.webp
Normal file
BIN
scrot/light.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
456
userChrome.css
456
userChrome.css
|
|
@ -1,54 +1,116 @@
|
|||
:root {
|
||||
/* Dark Mode */
|
||||
:root:-moz-lwtheme-brighttext {
|
||||
--bf-bg: #00000066;
|
||||
--bf-hover-bg: #fefefe20;
|
||||
--bf-color: #f2f2f2;
|
||||
--bf-hover-bg: #fefefe20;
|
||||
--bf-focused-color: #fefefe;
|
||||
|
||||
--bf-accent-bg: #4C5FF9CC;
|
||||
|
||||
--bf-icon-color: #f2f2f2;
|
||||
--bf-switch-tab-color: #6498EF;
|
||||
--bf-bookmark-color: #53E2AE;
|
||||
|
||||
--bf-tab-font-size: 11pt;
|
||||
--bf-tab-font-weight: 500;
|
||||
|
||||
--bf-urlbar-bg: var(--bf-bg);
|
||||
--bf-urlbar-color: var(--bf-color);
|
||||
--bf-urlbar-focused-color: var(--bf-focused-color);
|
||||
--bf-urlbar-active-bg: #000000BB;
|
||||
--bf-urlbar-results-url-color: var(--bf-color);3
|
||||
|
||||
--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: #f2f2f266;
|
||||
--bf-color: #252525;
|
||||
--bf-hover-bg: #1a1a1a20;
|
||||
--bf-focused-color: #0a0a0a;
|
||||
|
||||
--bf-icon-color: #0a0a0a;
|
||||
|
||||
--bf-urlbar-bg: var(--bf-bg);
|
||||
--bf-urlbar-color: var(--bf-color);
|
||||
--bf-urlbar-focused-color: var(--bf-focused-color);
|
||||
--bf-urlbar-active-bg: #f2f2f2BB;
|
||||
--bf-urlbar-results-url-color: var(--bf-color);
|
||||
|
||||
--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 color */
|
||||
:root {
|
||||
--bf-bg: #252525;
|
||||
--bf-color: #f2f2f2;
|
||||
--bf-hover-bg: #353535;
|
||||
--bf-focused-color: #fefefe;
|
||||
--bf-icon-color: var(--bf-color);
|
||||
|
||||
--bf-urlbar-bg: #1a1a1a;
|
||||
--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-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-menupopup-bg: var(--bf-bg);
|
||||
--bf-menupopup-color: var(--bf-color);
|
||||
|
||||
|
||||
--bf-accent-bg: #4C5FF9CC;
|
||||
--bf-urlbar-results-font-size: 12pt;
|
||||
--bf-urlbar-results-font-weight: 550;
|
||||
--bf-urlbar-font-size: 12pt;
|
||||
--bf-urlbar-font-weight: 500;
|
||||
|
||||
--bf-tab-font-size: 11pt;
|
||||
--bf-tab-font-weight: 500;
|
||||
|
||||
--bf-navbar-padding: 4px;
|
||||
--bf-switch-tab-color: #6498EF;
|
||||
--bf-bookmark-color: #53E2AE;
|
||||
|
||||
--bf-tab-height: 32px;
|
||||
--bf-tab-border-radius: 6px;
|
||||
--bf-tab-soundplaying-bg: #985EFFCC;
|
||||
|
||||
--bf-navbar-padding: 4px;
|
||||
|
||||
--bf-urlbar-bg: var(--bf-bg);
|
||||
--bf-urlbar-active-bg: #000000BB;
|
||||
--bf-urlbar-color: var(--bf-color);
|
||||
--bf-urlbar-focused-color: var(--bf-focused-color);
|
||||
--bf-urlbar-font-size: 12pt;
|
||||
--bf-urlbar-font-weight: 500;
|
||||
|
||||
--bf-urlbar-results-font-size: 12pt;
|
||||
--bf-urlbar-results-font-weight: 550;
|
||||
--bf-urlbar-results-url-color: var(--bf-color);
|
||||
|
||||
--bf-sidebar-bg: transparent;
|
||||
--bf-sidebar-color: var(--bf-color);
|
||||
|
||||
--bf-menupopup-bg: #00000090;
|
||||
--bf-menupopup-color: var(--bf-color);
|
||||
|
||||
--bf-splitter-bg: #00000090;
|
||||
|
||||
--autocomplete-popup-background: var(--bf-bg) !important;
|
||||
--default-arrowpanel-background: var(--bf-bg) !important;
|
||||
|
||||
--default-arrowpanel-color: #fefefa !important;
|
||||
--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
|
||||
--panel-disabled-color: #f9f9fa80;
|
||||
--toolbar-bgcolor: transparent !important;
|
||||
--urlbar-separator-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
|
||||
░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
|
||||
|
|
@ -67,6 +129,8 @@ Transparent Window
|
|||
░█▀▀░█▀█░█▀█░▀█▀
|
||||
░█▀▀░█░█░█░█░░█░
|
||||
░▀░░░▀▀▀░▀░▀░░▀░
|
||||
|
||||
I'm not sure if this does anything
|
||||
*/
|
||||
|
||||
* {
|
||||
|
|
@ -140,20 +204,17 @@ toolbarbutton {
|
|||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
.megabar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
|
||||
#urlbar[breakout-extend="true"]:not([open="true"]) > #urlbar-background {
|
||||
box-shadow: none !important;
|
||||
display: none !important;
|
||||
background: transparent !important;
|
||||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
.megabar[open=true] > #urlbar-background {
|
||||
#urlbar[open=true] > #urlbar-background {
|
||||
background: var(--bf-urlbar-active-bg) !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox, toolbaritem {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.urlbar-icon {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
|
@ -168,24 +229,6 @@ toolbarbutton {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
#star-button {
|
||||
/* URL bar bookmark button */
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
#star-button:hover:not(.no-hover):not([open=true]) {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
#star-button:hover:active:not(.no-hover),
|
||||
#star-button[open=true] {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-text {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
.urlbarView-row[type="bookmark"] > span{
|
||||
color: var(--bf-bookmark-color) !important;
|
||||
}
|
||||
|
|
@ -194,14 +237,15 @@ toolbarbutton {
|
|||
color: var(--bf-switch-tab-color) !important;
|
||||
}
|
||||
|
||||
|
||||
#urlbar-results {
|
||||
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 */
|
||||
.urlbarView-row-inner:hover {
|
||||
/* hover background color */
|
||||
background: var(--bf-accent-bg) !important;
|
||||
}
|
||||
|
||||
|
|
@ -218,11 +262,6 @@ toolbarbutton {
|
|||
text-align: center !important;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
/* URL bar hightlight color */
|
||||
background-color: var(--bf-accent-bg) !important;
|
||||
}
|
||||
|
||||
#searchbar {
|
||||
background: var(--bf-bg) !important;
|
||||
border: none !important;
|
||||
|
|
@ -233,24 +272,57 @@ toolbarbutton {
|
|||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* URL bar hightlight color */
|
||||
::-moz-selection {
|
||||
background-color: var(--bf-accent-bg) !important;
|
||||
}
|
||||
|
||||
/* Bookmark button - Star button */
|
||||
#star-button {
|
||||
/* URL bar bookmark button */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#star-button:hover:not(.no-hover):not([open=true]) {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
#star-button:hover:active:not(.no-hover),
|
||||
#star-button[open=true] {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox, toolbaritem {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
#navigator-toolbox::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Remove horizontal line on navbar */
|
||||
#nav-bar {
|
||||
box-shadow: none !important;
|
||||
border-top: none !important;
|
||||
}
|
||||
|
||||
.toolbarbutton-text {
|
||||
color: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
/* Back button */
|
||||
#back-button > .toolbarbutton-icon {
|
||||
--backbutton-background: transparent !important;
|
||||
border: none !important;
|
||||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
#back-button {
|
||||
list-style-image: url("left-arrow.svg") !important;
|
||||
}
|
||||
|
||||
#forward-button {
|
||||
list-style-image: url("right-arrow.svg") !important;
|
||||
}
|
||||
|
||||
/* Tracking */
|
||||
#tracking-protection-icon-container {
|
||||
/* display: none !important; */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Identity */
|
||||
#identity-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -267,7 +339,6 @@ toolbarbutton {
|
|||
background: var(--bf-hover-bg) !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
|
|
@ -276,33 +347,39 @@ toolbarbutton {
|
|||
The tabs container
|
||||
*/
|
||||
|
||||
/* Move tab bar beneath the url bar */
|
||||
#titlebar {
|
||||
/* Move tab bar beneath the url bar */
|
||||
/* -moz-box-ordinal-group: 1 !important; */
|
||||
-moz-box-ordinal-group: 3 !important;
|
||||
}
|
||||
|
||||
#titlebar::after {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Transparent tabs */
|
||||
.toolbar-items {
|
||||
background-color: transparent !important;
|
||||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
/* Set minimum height for tab bar */
|
||||
#tabbrowser-tabs {
|
||||
/* Set minimum height for tab bar */
|
||||
--tab-min-height: 0px;
|
||||
--tab-min-height: 0;
|
||||
margin-top: 4px !important;
|
||||
margin-bottom: 4px !important;
|
||||
margin-left: 20px !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
/* Hide tab bar if there's only one tab */
|
||||
#tabbrowser-tabs tab:only-of-type,
|
||||
#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button {
|
||||
/* Hide tab bar if there's only one tab */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Stretch Tabs */
|
||||
.tabbrowser-tab[fadein]:not([pinned]) {
|
||||
/* Stretch Tabs */
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -321,15 +398,15 @@ The tabs container
|
|||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
/* Remove the "lines" in tab sides */
|
||||
.tabbrowser-tab::after,
|
||||
.tabbrowser-tab::before {
|
||||
/* Remove the "lines" in tabs */
|
||||
border-left: none !important;
|
||||
}
|
||||
|
||||
.tabbrowser-arrowscrollbox {
|
||||
margin-inline-start: 4px !important;
|
||||
margin-inline-end: 0px !important;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
|
|
@ -357,7 +434,7 @@ The tabs container
|
|||
|
||||
/* Adjust tab label width */
|
||||
.tab-label-container {
|
||||
min-width: 03 !important;
|
||||
min-width: 3px !important;
|
||||
}
|
||||
|
||||
/* If tab close button is not present, don't force favicon to the center */
|
||||
|
|
@ -368,27 +445,28 @@ The tabs container
|
|||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Hide close tab button */
|
||||
.tab-close-button {
|
||||
/* Hide close tab button */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Tab icon */
|
||||
hbox.tab-content .tab-icon-image {
|
||||
/* Tab icon */
|
||||
display: initial !important;
|
||||
}
|
||||
|
||||
/* Show the icon of pinned tabs */
|
||||
hbox.tab-content[pinned=true] .tab-icon-image {
|
||||
/* Show the icon of pinned tabs */
|
||||
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, .tab-bottom-line {
|
||||
/* Hide the tab line */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -396,17 +474,27 @@ hbox.tab-content[pinned=true] .tab-text {
|
|||
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;
|
||||
}
|
||||
|
||||
.tabbrowser-tab:hover {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
/* Audio playing background */
|
||||
.tabbrowser-tab[soundplaying="true"] {
|
||||
/* Audio playing background */
|
||||
background-color: var(--bf-tab-soundplaying-bg) !important;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
--tab-loading-fill: var(--bf-color) !important;
|
||||
}
|
||||
|
||||
/* Hide icon of audio */
|
||||
.tab-icon-sound {
|
||||
/* Hide icon of audio */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -417,18 +505,10 @@ hbox.tab-content[pinned=true] .tab-text {
|
|||
transform: translateY(-50%) !important;
|
||||
}
|
||||
|
||||
#tabs-newtab-button {
|
||||
list-style-image: url("add.svg") !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.private-browsing-indicator {
|
||||
display: none;
|
||||
background: var(--bf-bg);
|
||||
}
|
||||
|
||||
tab.tabbrowser-tab {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Remove hover effects on tab bar buttons */
|
||||
|
|
@ -438,16 +518,43 @@ tab.tabbrowser-tab {
|
|||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
tab.tabbrowser-tab:hover {
|
||||
background: var(--bf-hover-bg) !important;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
||||
/* Left to Right Alignment of tabs toolbar */
|
||||
/* #TabsToolbar {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
#tabbrowser-tabs {
|
||||
--tab-loading-fill: var(--bf-color) !important;
|
||||
direction: ltr;
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
|
||||
░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
|
||||
░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
|
||||
░█▀▀░░█░░█░█░█░█░█▀▄░█▀█░█▀▄
|
||||
░▀░░░▀▀▀░▀░▀░▀▀░░▀▀░░▀░▀░▀░▀
|
||||
|
|
@ -469,94 +576,13 @@ The findbar
|
|||
|
||||
.findbar-find-previous,
|
||||
.findbar-find-next {
|
||||
margin: 0px !important;
|
||||
margin: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
#browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
|
||||
background-color: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░▀█▀░█▀▄░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀█░░█░░█░█░█▀▀░█▀▄░█▀█░█▀▄
|
||||
░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀▀░░▀░▀░▀░▀
|
||||
|
||||
Contains history, bookmarks, and etc.
|
||||
*/
|
||||
|
||||
#history-panel,
|
||||
#sidebar-search-container,
|
||||
#bookmarksPanel {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
-moz-appearance: none !important;
|
||||
background: var(--bf-bg) !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
||||
#sidebar-search-container {
|
||||
background-color: var(--bf-sidebar-bg) !important;
|
||||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
.close-icon, .urlbar-icon {
|
||||
fill: var(--bf-icon-color) !important;
|
||||
}
|
||||
|
||||
#sidebar-icon {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidebar-placesTree {
|
||||
color: var(--bf-sidebar-color) !important;
|
||||
}
|
||||
|
||||
#sidebar-switcher-target {
|
||||
color: var(--bf-sidebar-color) !important;
|
||||
}
|
||||
|
||||
#sidebar-header {
|
||||
background: var(--bf-bg) !important;
|
||||
}
|
||||
|
||||
#sidebar-box {
|
||||
--sidebar-background-color: var(--bf-sidebar-bg) !important;
|
||||
-moz-appearance: -moz-mac-vibrancy-dark !important;
|
||||
}
|
||||
|
||||
#sidebar-splitter {
|
||||
border: none !important;
|
||||
opacity: 1 !important;
|
||||
background-color: var(--bf-splitter-bg) !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀█░█▀▄░█▀▄░█▀█░█░█░█▀█░█▀█░█▀█░█▀▀░█░░
|
||||
░█▀█░█▀▄░█▀▄░█░█░█▄█░█▀▀░█▀█░█░█░█▀▀░█░░
|
||||
░▀░▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀░░░▀░▀░▀░▀░▀▀▀░▀▀▀
|
||||
|
||||
The dropdown menus
|
||||
*/
|
||||
|
||||
.panel-arrowcontent {
|
||||
padding: 0px !important;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
toolbarseparator {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
box.panel-arrowbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
box.panel-arrowcontent {
|
||||
border-radius: 8px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█▀▀░█▀█░█▀█░▀█▀░█▀▀░█░█░▀█▀░█▄█░█▀▀░█▀█░█░█
|
||||
|
|
@ -571,43 +597,22 @@ popup > menu > menupopup,
|
|||
menupopup > menu > menupopup {
|
||||
-moz-appearance: none !important;
|
||||
background: var(--bf-menupopup-bg) !important;
|
||||
color: #fff !important;
|
||||
border: 0px !important;
|
||||
color: var(--base-color) !important;
|
||||
border: 0 !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 2px 0px 2px 0px !important;
|
||||
padding: 2px 0 2px 0 !important;
|
||||
}
|
||||
|
||||
menupopup menuseparator {
|
||||
-moz-appearance: none !important;
|
||||
background: #525A6D !important;
|
||||
margin: 2px 0px 2px 0px !important;
|
||||
margin: 2px 0 2px 0 !important;
|
||||
padding: 0 !important;
|
||||
border-top: none !important;
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
/*
|
||||
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
|
||||
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
|
||||
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
The control buttons. Contains, close, minimize, and maximize buttons
|
||||
*/
|
||||
|
||||
#autohide-context, #window-controls {
|
||||
display:none!important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="maximized"] #nav-bar {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
░█▀▀░█░█░█▀▀░▀█▀░█▀█░█▄█░▀█▀░▀▀█░█▀█░▀█▀░▀█▀░█▀█░█▀█░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█
|
||||
░█░░░█░█░▀▀█░░█░░█░█░█░█░░█░░▄▀░░█▀█░░█░░░█░░█░█░█░█░█▄█░░█░░█░█░█░█░█░█░█▄█
|
||||
░▀▀▀░▀▀▀░▀▀▀░░▀░░▀▀▀░▀░▀░▀▀▀░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░▀░▀░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀
|
||||
|
|
@ -622,6 +627,7 @@ The customization window
|
|||
.customizationmode-button {
|
||||
-moz-appearance: none !important;
|
||||
background: var(--bf-bg) !important;
|
||||
color: var(--bf-color) !important;
|
||||
padding: 5px !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
|
|
@ -635,4 +641,32 @@ The customization window
|
|||
|
||||
.customizationmode-button label {
|
||||
color: var(--bf-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
|
||||
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
|
||||
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="maximized"] #titlebar .titlebar-buttonbox-container {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:root[tabsintitlebar][sizemode="maximized"] #nav-bar {
|
||||
padding-left: 3px !important;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue
Block a user