diff --git a/README.md b/README.md
index b99394f..ae1705d 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
# 🐺 Photon Australis
-Bringing sexy curves back to Firefox Photon.
+Bringing sexy curves back to Firefox Photon AND Proton.
@@ -14,10 +14,17 @@ Bringing sexy curves back to Firefox Photon.
## Why?
Because all you sexy Firefox users deserve something sexier than ugly, blocky square. (Who wants to be square, right?)
+## ⚠ Support note ⚠:
+This is a ***NEW*** release that supports Firefox Proton (version 89+). If you are running an older version of Firefox with Photon, please visit [this link](https://github.com/wilfredwee/photon-australis/tree/0.10).
+
+This is regular used and tested by me in these following configurations:
+1. Firefox Developer Edition on Dark Theme + Windows 10 on Dark Theme.
+1. Firefox Developer Edition on Default Theme + MacOS on Dark Theme.
+
## 😍 How do I get this sexy thing? 😍
Since Firefox 57+, the only way to customize your browser UI is through `userChrome.css`. Learn more [here](http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes).
-Rough instructions:
+### General Instructions:
1. Go to your Firefox browser, type `about:config` in your url bar.
1. Search for `toolkit.legacyUserProfileCustomizations.stylesheets` and set it to `true`
1. Type `about:profiles` in your url bar.
@@ -33,9 +40,15 @@ Rough instructions:
**WARNING:** Newer versions of Firefox with Mojave or Windows 10 Dark Mode will cause Firefox to use the `Dark` theme by default. In this case, you should use the [userChrome-dark.css](./userChrome-dark.css) theme.
1. Restart Firefox and enjoy some sexy curves :D
+### Special Instructions for Default Theme users:
+If you are using the [Default Theme](./userChrome-default.css) but your MacOS is using the Dark Theme, you can go to `about:config` -> search for `ui.systemUsesDarkTheme` and **ADD** (click the '+' sign) a ***Number***. Set the value to `0`. Restart the browser.
+
## 😞 Something is broken 😞
-Fret not! Please create an [issue](https://github.com/wilfredwee/photon-australis/issues/new) and I'll see what I can do.
+Fell free to create an [issue](https://github.com/wilfredwee/photon-australis/issues/new) and I'll see what I can do. However, I'm unable to guarantee quick (or any) responses as this project is in maintenance mode.
## FAQ
### How do I add back tab separators and borders around the tabs?
Please follow these instructions created by a helpful Redditor: https://www.reddit.com/r/FirefoxCSS/comments/bzd5dz/help_with_australis_css/
+
+### Nothing has changed for me
+Make sure that your file extension for `userChrome.css` is correct. Most likely a problem for Windows, refer to [this issue](https://github.com/wilfredwee/photon-australis/issues/104).
diff --git a/userChrome-dark.css b/userChrome-dark.css
index c2939f1..884a2df 100644
--- a/userChrome-dark.css
+++ b/userChrome-dark.css
@@ -1,6 +1,7 @@
:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
+ --tab-border-radius: 0 !important;
}
.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
@@ -20,6 +21,8 @@
/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
+ min-height: 33px !important;
+ max-height: 33px !important;
}
.tabbrowser-tab[first-visible-tab="true"] {
@@ -38,7 +41,7 @@
border: none !important;
}
-/* Styles to account for when window is resized small, and margin-inline-start kicks in */
+/* Styles to account for when tab scrollbar is visible, and margin-inline-start kicks in */
.tabbrowser-tab[pinned="true"] {
width: 40px !important; /* Actual photon pinned tab is 41px, but 40px removes pixelated artifact from pinned tab favicon */
}
@@ -53,6 +56,32 @@
border: none !important;
}
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+ padding-inline: 0px !important;
+}
+
+.tab-background {
+ margin-bottom: 0 !important;
+ display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+ flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+ margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+ background-color: rgba(0,0,0,0) !important;
+ height: inherit !important;
+ border-radius: 0px !important;
+ margin: 0px !important;
+}
+
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
@@ -187,17 +216,17 @@
/* Color specific customizations */
:root {
- --svg-selected-before: url("data:image/svg+xml;utf8,");
+ --svg-selected-before: url("data:image/svg+xml;utf8,");
- --svg-selected-after: url("data:image/svg+xml;utf8,");
+ --svg-selected-after: url("data:image/svg+xml;utf8,");
--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
2px,
- rgb(50, 50, 52) 2px,
- rgb(50, 50, 52)
+ rgb(42, 43, 51) 2px,
+ rgb(42, 43, 51)
),
none !important;
@@ -234,6 +263,7 @@
}
}
+/* Dark theme */
@media (-moz-windows-accent-color-in-titlebar) {
:root[tabsintitlebar]:not(:-moz-window-inactive) {
background-color: #000000 !important;
@@ -248,10 +278,15 @@
background-image: var(--svg-selected-after) !important;
}
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
background-image: var(--background-selected-middle) !important;
}
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+ box-shadow: none !important;
+}
+
+
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
}
@@ -260,7 +295,7 @@
background-image: var(--svg-hover-after) !important;
}
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
background-image: var(--background-hover-middle) !important;
}
diff --git a/userChrome-default.css b/userChrome-default.css
index 9e5ddb7..0a2614d 100644
--- a/userChrome-default.css
+++ b/userChrome-default.css
@@ -1,6 +1,7 @@
:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
+ --tab-border-radius: 0 !important;
}
.tabbrowser-arrowscrollbox .arrowscrollbox-scrollbox {
@@ -20,6 +21,8 @@
/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
+ min-height: 33px !important;
+ max-height: 33px !important;
}
.tabbrowser-tab[first-visible-tab="true"] {
@@ -53,6 +56,52 @@
border: none !important;
}
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+ padding-inline: 0px !important;
+}
+
+.tab-background {
+ margin-bottom: 0 !important;
+ display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+ flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+ margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+ background-color: rgba(0,0,0,0) !important;
+ height: inherit !important;
+ border-radius: 0px !important;
+ margin: 0px !important;
+}
+
+/* Default theme customization: Vibrant (transparent, dark) titlebar for mac */
+:root:is([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
+ appearance: auto !important;
+ -moz-default-appearance: -moz-mac-vibrant-titlebar-dark !important;
+ -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark !important;
+ background-color: #232323 !important;
+ color: hsl(240, 9%, 98%) !important;
+ text-shadow: none !important;
+}
+
+#navigator-toolbox {
+ background-color: transparent !important;
+}
+
+#new-tab-button > .toolbarbutton-icon,
+#tabs-newtab-button > .toolbarbutton-icon {
+ fill: rgb(249,249,250) !important;
+}
+/* End default theme customizations */
+
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
@@ -242,9 +291,12 @@
background-image: var(--svg-selected-after) !important;
}
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
background-image: var(--background-selected-middle) !important;
+}
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+ box-shadow: none !important;
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
@@ -255,9 +307,8 @@
background-image: var(--svg-hover-after) !important;
}
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
background-image: var(--background-hover-middle) !important;
-
}
#tabs-newtab-button:hover {
diff --git a/userChrome-light.css b/userChrome-light.css
index b6cf08a..f484829 100644
--- a/userChrome-light.css
+++ b/userChrome-light.css
@@ -1,6 +1,7 @@
:root {
--tab-curve-width: 30px;
--tabs-border: transparent !important;
+ --tab-border-radius: 0 !important;
}
#navigator-toolbox:-moz-lwtheme {
@@ -24,6 +25,8 @@
/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar {
padding-inline-start: 15px !important;
+ min-height: 33px !important;
+ max-height: 33px !important;
}
.tabbrowser-tab[first-visible-tab="true"] {
@@ -57,6 +60,32 @@
border: none !important;
}
+/* Remove uneeded styles from Proton */
+.tabbrowser-tab {
+ padding-inline: 0px !important;
+}
+
+.tab-background {
+ margin-bottom: 0 !important;
+ display: flex !important;
+}
+
+.tab-background > .tab-context-line {
+ flex: 1 !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+ margin-inline-start: 0px !important;
+}
+
+/* Remove container colors */
+.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
+ background-color: rgba(0,0,0,0) !important;
+ height: inherit !important;
+ border-radius: 0px !important;
+ margin: 0px !important;
+}
+
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
@@ -245,10 +274,14 @@
background-image: var(--svg-selected-after) !important;
}
-.tab-background[selected="true"] > spacer {
+.tab-background[selected="true"] > .tab-context-line {
background-image: var(--background-selected-middle) !important;
}
+.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
+ box-shadow: none !important;
+}
+
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
background-image: var(--svg-hover-before) !important;
}
@@ -257,7 +290,7 @@
background-image: var(--svg-hover-after) !important;
}
-.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
+.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-context-line {
background-image: var(--background-hover-middle) !important;
}