From 8ad74dee0f4f5588b61e4163c015e6a2572fa64b Mon Sep 17 00:00:00 2001 From: Wang Zhiyu Date: Sun, 5 Jul 2026 21:07:45 +0800 Subject: [PATCH] Init --- .gitignore | 69 ++++++++++++++++++++++++ LICENSE | 16 ++++++ README.md | 6 +++ inline_tab_audio_icons.css | 21 ++++++++ non_floating_sharp_tabs.css | 102 ++++++++++++++++++++++++++++++++++++ photon_tab_separators.css | 52 ++++++++++++++++++ tab_separator_lines.css | 20 +++++++ userChrome.css | 50 ++++++++++++++++++ 8 files changed, 336 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 inline_tab_audio_icons.css create mode 100644 non_floating_sharp_tabs.css create mode 100644 photon_tab_separators.css create mode 100644 tab_separator_lines.css create mode 100644 userChrome.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c7459ee --- /dev/null +++ b/.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 + diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a4e9dc9 --- /dev/null +++ b/LICENSE @@ -0,0 +1,16 @@ +MIT No Attribution + +Copyright + +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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..d945bd6 --- /dev/null +++ b/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 版做了修改 diff --git a/inline_tab_audio_icons.css b/inline_tab_audio_icons.css new file mode 100644 index 0000000..a798d0b --- /dev/null +++ b/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 } \ No newline at end of file diff --git a/non_floating_sharp_tabs.css b/non_floating_sharp_tabs.css new file mode 100644 index 0000000..3f28ff2 --- /dev/null +++ b/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); + } +} diff --git a/photon_tab_separators.css b/photon_tab_separators.css new file mode 100644 index 0000000..0bf5a87 --- /dev/null +++ b/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; +} diff --git a/tab_separator_lines.css b/tab_separator_lines.css new file mode 100644 index 0000000..351152f --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/userChrome.css b/userChrome.css new file mode 100644 index 0000000..5653189 --- /dev/null +++ b/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; +}