phundrak/blurredfox-nord
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

support all color scheme

Browse Source
This commit is contained in:
Gerome Matilla 2020-08-08 13:34:50 +08:00
parent 4384e68658
commit a1a4a231e2
9 changed files with 259 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -1,10 +1,18 @@
# Blurred fox # Blurred fox
### A ~~blurred~~ transparent safari-like firefox CSS theme ### A modern Firefox CSS Theme
| blurredfox | | Default Color Scheme |
| --- | | --- |
| ![screenshot](screenshot.png) | | ![screenshot](scrot/default.webp) |
| Dark Color Scheme |
| --- |
| ![screenshot](scrot/dark.webp) |
| Light Color Scheme |
| --- |
| ![screenshot](scrot/light.webp) |
## How to ## 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!** 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/`. 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. 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 ## 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. **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, ### 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/). 2. Enable the blur effect on all applications by installing a KWin script called [Force Blur](https://store.kde.org/p/1294604/).
3. Go to `System Settings > KWin Scripts > Enable Force Blur`. 3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
2

57
add.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

56
left-arrow.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

56
right-arrow.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

BIN
screenshot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 MiB

BIN
scrot/dark.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 KiB

BIN
scrot/default.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
scrot/light.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

456
userChrome.css
View File

@ -1,54 +1,116 @@
:root { /* Dark Mode */
:root:-moz-lwtheme-brighttext {
--bf-bg: #00000066; --bf-bg: #00000066;
--bf-hover-bg: #fefefe20;
--bf-color: #f2f2f2; --bf-color: #f2f2f2;
--bf-hover-bg: #fefefe20;
--bf-focused-color: #fefefe; --bf-focused-color: #fefefe;
--bf-accent-bg: #4C5FF9CC;
--bf-icon-color: #f2f2f2; --bf-icon-color: #f2f2f2;
--bf-switch-tab-color: #6498EF;
--bf-bookmark-color: #53E2AE; --bf-urlbar-bg: var(--bf-bg);
--bf-urlbar-color: var(--bf-color);
--bf-tab-font-size: 11pt; --bf-urlbar-focused-color: var(--bf-focused-color);
--bf-tab-font-weight: 500; --bf-urlbar-active-bg: #000000BB;
--bf-urlbar-results-url-color: var(--bf-color);3
--bf-tab-color: var(--bf-color); --bf-tab-color: var(--bf-color);
--bf-tab-selected-bg: var(--bf-bg); --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-height: 32px;
--bf-tab-border-radius: 6px; --bf-tab-border-radius: 6px;
--bf-tab-soundplaying-bg: #985EFFCC; --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; --default-arrowpanel-color: #fefefa !important;
--lwt-toolbarbutton-icon-fill: var(--bf-icon-color) !important;
--panel-disabled-color: #f9f9fa80; --panel-disabled-color: #f9f9fa80;
--toolbar-bgcolor: transparent !important; --toolbar-bgcolor: transparent !important;
--urlbar-separator-color: transparent !important; --urlbar-separator-color: transparent !important;
} }
/* /*
░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█ ░▀█▀░█▀▄░█▀█░█▀█░█▀▀░█▀█░█▀█░█▀▄░█▀▀░█▀█░█▀▀░█░█
░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░ ░░█░░█▀▄░█▀█░█░█░▀▀█░█▀▀░█▀█░█▀▄░█▀▀░█░█░█░░░░█░
@ -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; 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; box-shadow: none !important;
display: none !important;
background: transparent !important; background: transparent !important;
-moz-appearance: -moz-mac-vibrancy-dark !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; background: var(--bf-urlbar-active-bg) !important;
} }
#navigator-toolbox, toolbaritem {
border: none !important;
}
.urlbar-icon { .urlbar-icon {
color: var(--bf-icon-color) !important; color: var(--bf-icon-color) !important;
} }
@ -168,24 +229,6 @@ toolbarbutton {
display: none !important; 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{ .urlbarView-row[type="bookmark"] > span{
color: var(--bf-bookmark-color) !important; color: var(--bf-bookmark-color) !important;
} }
@ -194,14 +237,15 @@ toolbarbutton {
color: var(--bf-switch-tab-color) !important; color: var(--bf-switch-tab-color) !important;
} }
#urlbar-results { #urlbar-results {
font-weight: var(--bf-urlbar-results-font-weight); font-weight: var(--bf-urlbar-results-font-weight);
font-size: var(--bf-urlbar-results-font-size) !important; font-size: var(--bf-urlbar-results-font-size) !important;
color: var(--bf-urlbar-results-color) !important; color: var(--bf-urlbar-results-color) !important;
} }
/* Hover background color */
.urlbarView-row-inner:hover { .urlbarView-row-inner:hover {
/* hover background color */
background: var(--bf-accent-bg) !important; background: var(--bf-accent-bg) !important;
} }
@ -218,11 +262,6 @@ toolbarbutton {
text-align: center !important; text-align: center !important;
} }
::-moz-selection {
/* URL bar hightlight color */
background-color: var(--bf-accent-bg) !important;
}
#searchbar { #searchbar {
background: var(--bf-bg) !important; background: var(--bf-bg) !important;
border: none !important; border: none !important;
@ -233,24 +272,57 @@ toolbarbutton {
font-weight: 700 !important; 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 { #back-button > .toolbarbutton-icon {
--backbutton-background: transparent !important; --backbutton-background: transparent !important;
border: none !important; border: none !important;
-moz-appearance: -moz-mac-vibrancy-dark !important; -moz-appearance: -moz-mac-vibrancy-dark !important;
} }
#back-button { /* Tracking */
list-style-image: url("left-arrow.svg") !important;
}
#forward-button {
list-style-image: url("right-arrow.svg") !important;
}
#tracking-protection-icon-container { #tracking-protection-icon-container {
/* display: none !important; */ display: none !important;
} }
/* Identity */
#identity-box { #identity-box {
display: none !important; display: none !important;
} }
@ -267,7 +339,6 @@ toolbarbutton {
background: var(--bf-hover-bg) !important; background: var(--bf-hover-bg) !important;
} }
/* /*
░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄ ░▀█▀░█▀█░█▀▄░█▀▄░█▀█░█▀▄
░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄ ░░█░░█▀█░█▀▄░█▀▄░█▀█░█▀▄
@ -276,33 +347,39 @@ toolbarbutton {
The tabs container The tabs container
*/ */
/* Move tab bar beneath the url bar */
#titlebar { #titlebar {
/* Move tab bar beneath the url bar */ /* -moz-box-ordinal-group: 1 !important; */
-moz-box-ordinal-group: 3 !important; -moz-box-ordinal-group: 3 !important;
} }
#titlebar::after {
border-bottom: 0 !important;
}
/* Transparent tabs */
.toolbar-items { .toolbar-items {
background-color: transparent !important; background-color: transparent !important;
-moz-appearance: -moz-mac-vibrancy-dark !important; -moz-appearance: -moz-mac-vibrancy-dark !important;
} }
/* Set minimum height for tab bar */
#tabbrowser-tabs { #tabbrowser-tabs {
/* Set minimum height for tab bar */ --tab-min-height: 0;
--tab-min-height: 0px;
margin-top: 4px !important; margin-top: 4px !important;
margin-bottom: 4px !important; margin-bottom: 4px !important;
margin-left: 20px !important; margin-left: 20px !important;
margin-right: 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,
#tabbrowser-tabs tab:only-of-type + #tabs-newtab-button { #tabbrowser-tabs tab:only-of-type + #tabs-newtab-button {
/* Hide tab bar if there's only one tab */
display: none !important; display: none !important;
} }
/* Stretch Tabs */
.tabbrowser-tab[fadein]:not([pinned]) { .tabbrowser-tab[fadein]:not([pinned]) {
/* Stretch Tabs */
max-width: none !important; max-width: none !important;
} }
@ -321,15 +398,15 @@ The tabs container
opacity: 0.5 !important; opacity: 0.5 !important;
} }
/* Remove the "lines" in tab sides */
.tabbrowser-tab::after, .tabbrowser-tab::after,
.tabbrowser-tab::before { .tabbrowser-tab::before {
/* Remove the "lines" in tabs */
border-left: none !important; border-left: none !important;
} }
.tabbrowser-arrowscrollbox { .tabbrowser-arrowscrollbox {
margin-inline-start: 4px !important; margin-inline-start: 4px !important;
margin-inline-end: 0px !important; margin-inline-end: 0 !important;
} }
.tab-text { .tab-text {
@ -357,7 +434,7 @@ The tabs container
/* Adjust tab label width */ /* Adjust tab label width */
.tab-label-container { .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 */ /* 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; margin-left: 0 !important;
} }
/* Hide close tab button */
.tab-close-button { .tab-close-button {
/* Hide close tab button */
display: none !important; display: none !important;
} }
/* Tab icon */
hbox.tab-content .tab-icon-image { hbox.tab-content .tab-icon-image {
/* Tab icon */
display: initial !important; display: initial !important;
} }
/* Show the icon of pinned tabs */
hbox.tab-content[pinned=true] .tab-icon-image { hbox.tab-content[pinned=true] .tab-icon-image {
/* Show the icon of pinned tabs */
display: initial !important; display: initial !important;
} }
/* Hide text of pinned tabs */
hbox.tab-content[pinned=true] .tab-text { hbox.tab-content[pinned=true] .tab-text {
display: none !important; display: none !important;
} }
/* Hide the blue line on top of tab */
.tab-line, .tab-bottom-line { .tab-line, .tab-bottom-line {
/* Hide the tab line */
display: none !important; display: none !important;
} }
@ -396,17 +474,27 @@ hbox.tab-content[pinned=true] .tab-text {
border-radius: var(--bf-tab-border-radius) !important; border-radius: var(--bf-tab-border-radius) !important;
border-width: 0; border-width: 0;
height: var(--bf-tab-height) !important; height: var(--bf-tab-height) !important;
overflow: hidden;
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 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"] { .tabbrowser-tab[soundplaying="true"] {
/* Audio playing background */
background-color: var(--bf-tab-soundplaying-bg) !important; background-color: var(--bf-tab-soundplaying-bg) !important;
} }
#tabbrowser-tabs {
--tab-loading-fill: var(--bf-color) !important;
}
/* Hide icon of audio */
.tab-icon-sound { .tab-icon-sound {
/* Hide icon of audio */
display: none !important; display: none !important;
} }
@ -417,18 +505,10 @@ hbox.tab-content[pinned=true] .tab-text {
transform: translateY(-50%) !important; transform: translateY(-50%) !important;
} }
#tabs-newtab-button {
list-style-image: url("add.svg") !important;
opacity: 1;
}
.private-browsing-indicator { .private-browsing-indicator {
display: none; display: block;
background: var(--bf-bg); background: transparent;
}
tab.tabbrowser-tab {
overflow: hidden;
} }
/* Remove hover effects on tab bar buttons */ /* Remove hover effects on tab bar buttons */
@ -438,16 +518,43 @@ tab.tabbrowser-tab {
-moz-appearance: -moz-mac-vibrancy-dark !important; -moz-appearance: -moz-mac-vibrancy-dark !important;
} }
tab.tabbrowser-tab:hover { /* Left to Right Alignment of tabs toolbar */
background: var(--bf-hover-bg) !important; /* #TabsToolbar {
box-shadow: 0 1px 4px rgba(0,0,0,.05); direction: rtl;
} }
#tabbrowser-tabs { #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-previous,
.findbar-find-next { .findbar-find-next {
margin: 0px !important; margin: 0 !important;
border: none !important; border: none !important;
} }
#browser #appcontent #tabbrowser-tabbox .findbar-find-fast { #browser #appcontent #tabbrowser-tabbox .findbar-find-fast {
background-color: var(--bf-bg) !important; 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 { menupopup > menu > menupopup {
-moz-appearance: none !important; -moz-appearance: none !important;
background: var(--bf-menupopup-bg) !important; background: var(--bf-menupopup-bg) !important;
color: #fff !important; color: var(--base-color) !important;
border: 0px !important; border: 0 !important;
border-radius: 4px !important; border-radius: 4px !important;
padding: 2px 0px 2px 0px !important; padding: 2px 0 2px 0 !important;
} }
menupopup menuseparator { menupopup menuseparator {
-moz-appearance: none !important; -moz-appearance: none !important;
background: #525A6D !important; background: #525A6D !important;
margin: 2px 0px 2px 0px !important; margin: 2px 0 2px 0 !important;
padding: 0 !important; padding: 0 !important;
border-top: none !important; border-top: none !important;
border-color: transparent !important; border-color: transparent !important;
} }
/* /*
░█░█░▀█▀░█▀█░█▀▄░█▀█░█░█░█▀▄░█░█░▀█▀░▀█▀░█▀█░█▀█░█▀▀
░█▄█░░█░░█░█░█░█░█░█░█▄█░█▀▄░█░█░░█░░░█░░█░█░█░█░▀▀█
░▀░▀░▀▀▀░▀░▀░▀▀░░▀▀▀░▀░▀░▀▀░░▀▀▀░░▀░░░▀░░▀▀▀░▀░▀░▀▀▀
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 { .customizationmode-button {
-moz-appearance: none !important; -moz-appearance: none !important;
background: var(--bf-bg) !important; background: var(--bf-bg) !important;
color: var(--bf-color) !important;
padding: 5px !important; padding: 5px !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
@ -635,4 +641,32 @@ The customization window
.customizationmode-button label { .customizationmode-button label {
color: var(--bf-color) !important; 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;
}