Init

.gitignore

@@ -0,0 +1,69 @@
+# ---> Windows
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# ---> Linux
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+# ---> macOS
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

LICENSE

@@ -0,0 +1,16 @@
+MIT No Attribution
+
+Copyright <YEAR> <COPYRIGHT HOLDER>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this
+software and associated documentation files (the "Software"), to deal in the Software
+without restriction, including without limitation the rights to use, copy, modify,
+merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,6 @@
+# photon.css
+
+Firefox 57-89 版光子主题的 userChrome 与 userContent 配置, 使 LibreWolf 等 firefox 衍生浏览器拥有包含 photon 主题的 Firefox 57-89 版体验  
+
+userChrome 基于 https://github.com/dceban1998/Firefox-Classic-Photon, 并做了部分修改  
+userContent 基于 Firefox 89 版做了修改  

inline_tab_audio_icons.css

@@ -0,0 +1,21 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/inline_tab_audio_icons.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* Shows tab audio icons next to the tab icon, and by default removes the tab secondary line */
+
+.tabbrowser-tab:not([pinned]) .tab-icon-stack:is([muted],[soundplaying],[activemedia-blocked]){
+  grid-template-areas: "a s";
+}
+.tabbrowser-tab:not([pinned]) .tab-icon-overlay:is([muted],[soundplaying],[activemedia-blocked]){ grid-area: s; }
+.tab-icon-overlay,.tab-icon-image{ opacity: 1 !important; }
+
+.tab-icon-overlay:not([pinned]){
+  padding: 0px !important;
+  margin-inline: -3px 1px !important;
+}
+
+/* secondary audio label ain't much use with this style, but feel free to remove the next line if you want to show it. */
+.tab-secondary-label{ display: none }
+
+/* show the secondary label when video is in PiP */
+.tab-secondary-label[pictureinpicture]{ display: -moz-box }

non_floating_sharp_tabs.css

@@ -0,0 +1,102 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions. */
+
+/* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
+
+:root[id]{
+  --proton-tab-block-margin: 0px !important;
+  --tab-block-margin: 0px !important;
+  --tabs-shadow-size: 1px !important;
+
+  /* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color  */
+  --lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
+}
+
+:root:not(:-moz-lwtheme){
+--tab-selected-bgcolor: var(--toolbar-bgcolor) !important;
+}
+
+/* Uncomment next line to force specific color for tab top line */
+#tabbrowser-tabs{ --tab-line-color: #0a84ff !important; }
+
+/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
+#nav-bar{
+  /* This overrides value in compact_proton.css */
+  /*box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;*/
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color) !important;
+}
+.tab-background[selected]{
+  /*border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;*/
+  border-inline: none !important;
+}
+
+#TabsToolbar{
+  --toolbarbutton-inner-padding: 7px !important;
+}
+#navigator-toolbox:not([movingtab]) > #titlebar > #TabsToolbar{
+  --toolbar-bgcolor: transparent;
+}
+
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
+#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important;  }
+
+/* tabs newtab button needs some special styling... */
+#tabs-newtab-button{ padding-inline: 2px !important; }
+#tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
+  border-radius: 3px !important; 
+  width: initial !important; 
+  height: initial !important;
+  padding: 6px !important;
+}
+:root[uidensity="compact"] #tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
+  padding: 7px !important;
+}
+
+#scrollbutton-up,
+#scrollbutton-down{ border-radius: 0 !important; border-width: 0 !important; padding-inline: 3px !important; }
+
+/* tab shaping */
+.tabbrowser-tab{ padding-inline: 0 !important; }
+
+:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{ min-height: calc(var(--tab-min-height) + 2px) !important; }
+
+.tab-content[pinned]{ padding-inline: 11px !important; }
+
+.tab-background{
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+
+/* Line to mark selected tab */
+.tab-background[selected]::before,
+.tabbrowser-tab:hover > stack > .tab-background::before{
+  display: -moz-box;
+  height: 2px;
+  content: "";
+}
+.tab-stack:hover > .tab-background::before{
+  background-color: inherit;
+}
+.tab-stack > .tab-background[selected]::before{
+  background-color: highlight;
+  background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color));
+}
+/* Photon-like tab on hover animation for the top line */
+@keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
+
+.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms}
+
+/* Disable animation for selected and pinned tabs */
+.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
+
+/* moves context-line to the bottom */
+.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; }
+
+/* Non-selected tab's tab-line hover animation */
+@media (prefers-reduced-motion: no-preference) {
+  .tab-line:not([selected=true]):not([multiselected]) {
+    transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
+  }
+}

photon_tab_separators.css

@@ -0,0 +1,52 @@
+/* Tab separators */
+
+.titlebar-spacer[type="pre-tabs"] {
+  border-inline-end: 1px solid var(--lwt-background-tab-separator-color, currentColor);
+  opacity: 0.2;
+}
+
+.tabbrowser-tab::after,
+.tabbrowser-tab::before {
+  border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor);
+  margin-block: 5px 4px;
+  opacity: 0.3;
+}
+
+/* Move the ::before pseudo-element on tabs 1px to the left
+ * to avoid resizing the tab when the pseudo-element is removed again
+ * (this currently happens when a tab is dragged and dropped).
+ *
+ * Note that this doesn't perfectly solve the issue (dragged tabs
+ * may still resize very slightly) on some DPI settings with uneven
+ * scaling factors on Windows, because of bug 477157.
+ */
+.tabbrowser-tab::before {
+  margin-inline-start: -1px;
+}
+
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
+/* Show full height tab separators on hover and multiselection. */
+.tabbrowser-tab:hover::after,
+#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after,
+.tabbrowser-tab[multiselected]::after,
+#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
+  margin-top: var(--tabs-top-border-width);
+  margin-bottom: 0;
+}
+
+/* Show full height tab separators on selected tabs. */
+#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after,
+#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before,
+.tabbrowser-tab[visuallyselected]::after {
+  border-color: var(--tabs-border-color);
+  margin-top: 0;
+  margin-bottom: var(--tabs-navbar-shadow-size);
+  opacity: 1;
+}
+
+.tabbrowser-tab::after,
+/* Also show separators beside the selected tab when dragging it. */
+#tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
+  content: "";
+  display: block;
+}

tab_separator_lines.css

@@ -0,0 +1,20 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_separator_lines.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* Bring back tab separator lines that were removed in Proton */
+
+.tabbrowser-tab{
+  border-inline-end: 1px solid transparent !important;
+  border-image: 0 1 linear-gradient(
+    transparent 20%,
+    color-mix(in srgb, currentColor 20%, transparent) 20%,
+    color-mix(in srgb, currentColor 20%, transparent) 80%,
+    transparent 80%
+  );
+}
+
+.tabbrowser-tab:hover,
+.tabbrowser-tab[beforehovered],
+.tabbrowser-tab[selected],
+.tabbrowser-tab[last-visible-tab],
+.tabbrowser-tab[beforeselected-visible]{ border-image: none !important; }

userChrome.css

@@ -0,0 +1,50 @@
+/* ### ###    PhotonUI Sharp Tabs, Non floating    ### ### */
+@import "non_floating_sharp_tabs.css";
+@import "inline_tab_audio_icons.css";
+@import "photon_tab_separators.css";
+/*@import "tab_separator_lines.css";*/
+
+/* Enable urlbar border when focused */
+
+#urlbar:focus-within > #urlbar-background {
+    border-color: -moz-accent-color !important;
+    border-width: 1px !important;
+    border-radius:2px !important;
+}
+
+#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
+  /* Disable gap between the last pinned tab and the first visible tab */
+  margin-inline-start: 0 !important;
+}
+
+/* Disable tab label mask on hover */
+.tabbrowser-tab[visuallyselected=true]:hover,
+#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):hover {
+  --tab-label-mask-size: 0 !important;
+}
+
+/* Add a gradient mask for the tab title */
+.tab-label-container {
+mask-image: linear-gradient(to left, transparent, black 2em) !important;
+}
+
+/* Hovering on "Close tab" button won't change the gradient mask width for tab title */
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
+padding-inline-start: inherit !important;
+width: auto !important;
+}
+
+/* Disable tab label mask
+ * Proton default value = 2em
+ * This is a tweak. Photo does contain this mask.
+ */
+.tabbrowser-tab {
+  --tab-label-mask-size: 0 !important;
+}
+
+:root {
+  --tab-min-height: 35px !important;
+  --tabs-border-color: rgba(0,0,0,.3);
+  --tabs-navbar-shadow-size: 1px;
+  --toolbarbutton-border-radius: 2px !important;
+}