diff options
| -rw-r--r-- | .treeStyleTabs.css.bak | 209 | ||||
| -rw-r--r-- | .userChrome.css.bak | 94 | ||||
| -rw-r--r-- | treeStyleTabs.css | 194 | ||||
| -rw-r--r-- | userChrome.css | 143 | ||||
| -rw-r--r-- | userContent.css | 4 |
5 files changed, 644 insertions, 0 deletions
diff --git a/.treeStyleTabs.css.bak b/.treeStyleTabs.css.bak new file mode 100644 index 0000000..02e38cf --- /dev/null +++ b/.treeStyleTabs.css.bak @@ -0,0 +1,209 @@ +/* + * Tree Style Tabs - Photon Theme (Customized) + * Based on official TST Photon theme + * + * Custom colors: + * - Background: rgba(0, 54, 54, 0.3) + * - Active/Focused tab: rgba(0, 67, 68, 0.3) + */ + +/* ═══════════════════════════════════════════════════════════════════ + 🎨 COLOR VARIABLES + ═══════════════════════════════════════════════════════════════════ */ + +:root { + --toolbar-non-lwt-bgcolor: var(--in-content-page-background); + --toolbar-non-lwt-textcolor: var(--in-content-page-color); + + --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor)); + --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface)); + --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor)); + --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor)); + --tab-text-active: var(--tab-text); + --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor); + --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed))); + --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-box-background-hover))); + --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, var(--in-content-button-background-mixed))); + --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, var(--in-content-button-background-active-mixed))); + --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor)); + --throbber-color: var(--browser-loading-indicator, var(--tab-text)); + --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active)); + + --tabbar-bg: light-dark( + var(--browser-bg-darker, darkgray), + var(--browser-bg-darker, var(--dark-frame)) + ); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🌳 CUSTOM BACKGROUND COLOR + ═══════════════════════════════════════════════════════════════════ */ + +:root, +body, +#background { + background-color: rgba(0, 54, 54, 0.3) !important; + background-image: var(--browser-bg-images, none); + background-position: var(--browser-bg-position, left); + background-size: var(--browser-bg-size, auto); + background-repeat: var(--browser-bg-repeat, none); +} + +:root.right, +:root.right #background { + background-position: right; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📑 TAB STYLING + ═══════════════════════════════════════════════════════════════════ */ + +tab-item, +.after-tabs button, +.after-tabs [role="button"], +#subpanel-container, +#dummy-tab-color-box { + --tab-surface: var(--tab-surface-regular); + --tab-text: var(--tab-text-regular); + --tab-text-shadow: var(--browser-textshadow-for-header-image, none); +} + +tab-item-substance, +.after-tabs button, +.after-tabs [role="button"], +#subpanel-container, +#dummy-tab-color-box { + background: var(--tab-surface); + color: var(--tab-text); + text-shadow: var(--tab-text-shadow); +} + +tab-item * { + color: var(--tab-text); +} + +tab-item:not(.active) tab-item-substance:hover, +.after-tabs button:hover, +.after-tabs [role="button"]:hover { + --tab-surface: var(--tab-surface-hover); + --tab-text: var(--tab-text-regular); +} + +#subpanel-selector-anchor:hover { + background: var(--tab-surface-hover); + color: var(--tab-text-regular); +} + + +/* ═══════════════════════════════════════════════════════════════════ + ⭐ ACTIVE/FOCUSED TAB - CUSTOM COLOR + ═══════════════════════════════════════════════════════════════════ */ + +tab-item.active { + --tab-surface: rgba(0, 67, 68, 0.3) !important; + --throbber-color: var(--throbber-color-active); + --tab-text: var(--tab-text-active); + --tab-text-inverted: var(--tab-text-active-inverted); +} + +tab-item.bundled-active, +tab-item.active tab-item-substance:hover { + --tab-surface: rgba(0, 67, 68, 0.3) !important; +} + +tab-item.active tab-item-substance { + background: rgba(0, 67, 68, 0.3) !important; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🎯 TAB CLOSE BUTTON + ═══════════════════════════════════════════════════════════════════ */ + +tab-closebox { + background: none transparent; + border: none 0 transparent; + margin-block: 0; + margin-inline: 0; + padding-block: 0.1em; + padding-inline: 0.1em; +} + +tab-item .burster { + --throbber-color: var(--tab-loading-fill); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 💫 DROP SHADOWS + ═══════════════════════════════════════════════════════════════════ */ + +:root { + --shadow-color: rgba(0, 0, 0, 0.04); + --shadow-blur: 0.2em; +} + +:root.left tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance { + box-shadow: -0.3em 0.3em var(--shadow-blur) var(--shadow-color); +} + +:root.right tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance { + box-shadow: 0.3em 0.3em var(--shadow-blur) var(--shadow-color); +} + +.after-tabs button, +.after-tabs [role="button"] { + box-shadow: 0 0.3em var(--shadow-blur) var(--shadow-color); +} + +:root.left #tabbar { + box-shadow: inset -0.2em 0.2em var(--shadow-blur) var(--shadow-color); +} + +:root.right #tabbar { + box-shadow: inset 0.2em 0.2em var(--shadow-blur) var(--shadow-color); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📚 Z-INDEX MANAGEMENT + ═══════════════════════════════════════════════════════════════════ */ + +/* Transparent tabs are shown above solid tabs. + We have to set z-index to show all tabs in the same layer. */ +tab-item { + z-index: auto; +} + +.after-tabs button, +.after-tabs [role="button"] { + z-index: 100; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📋 SCROLLBAR STYLING + ═══════════════════════════════════════════════════════════════════ */ + +#tabbar:not(.scrollbar-autohide) #pinned-tabs-container, +#tabbar:not(.scrollbar-autohide) #normal-tabs-container { + scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed))) + var(--theme-colors-toolbar, var(--in-content-box-background)); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🔧 FIX "UNDEFINED" TEXT AT BOTTOM + ═══════════════════════════════════════════════════════════════════ */ + +/* Hide undefined text in bottom buttons */ +.after-tabs button::after, +.after-tabs [role="button"]::after { + content: "" !important; + display: none !important; +} + +/* Alternative: Hide the entire after-tabs section if not needed */ +/* .after-tabs { display: none !important; } */ diff --git a/.userChrome.css.bak b/.userChrome.css.bak new file mode 100644 index 0000000..036fede --- /dev/null +++ b/.userChrome.css.bak @@ -0,0 +1,94 @@ +/* ===== GLOBAL UI TRANSPARENCY ===== */ + +/* Main browser window */ +#main-window, +#navigator-toolbox, +#browser, +#browser-panel, +#sidebar-box { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Toolbars (tab bar, nav bar, bookmarks bar) */ +#TabsToolbar, +#nav-bar, +#PersonalToolbar, +.toolbar-items { + background-color: rgba(0, 54, 54, 0.3) !important; + background-image: none !important; +} + +/* Sidebar */ +#sidebar, +#sidebar-header { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Menus & popups */ +menupopup, +panelview, +.panel-subview-body, +.popup-internal-box { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* URL bar dropdown */ +#urlbar-background, +.urlbarView { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Remove forced opaque themes */ +:root { + --toolbar-bgcolor: transparent !important; + --lwt-accent-color: transparent !important; + --lwt-toolbar-field-background-color: rgba(0,54,54,0.3) !important; + --toolbar-field-background-color: rgba(0, 15, 15, 0.3) !important; + --toolbar-field-focus-background-color: rgba(0, 67, 68, 1) !important; + --tabs-navbar-separator-color: rgba(0, 0, 0, 0) !important; +} + +.tabbrowser-tab[selected="true"] .tab-background, +.tabbrowser-tab[multiselected="true"] .tab-background { + background-color: rgba(0, 67, 68, 0.3) !important; +} + +/* Hide the normal tab bar */ +#TabsToolbar { + visibility: collapse !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; +} + +/* Hide the bookmarks / personal toolbar */ +#PersonalToolbar { + visibility: collapse !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; +} + +/* Sidebar background when TST is open */ +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { + background: rgba(0,54,54,0.3) !important; +} +/* Hide the Tree Style Tabs sidebar header */ +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { + display: none !important; +} + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Sidebar overall background */ +#sidebar-box { + background-color: #003636 !important; +} + +/* Tree Style Tab tab background */ +treechildren::-moz-tree-row(odd), +treechildren::-moz-tree-row(even) { + background-color: #003636 !important; +} diff --git a/treeStyleTabs.css b/treeStyleTabs.css new file mode 100644 index 0000000..1a63270 --- /dev/null +++ b/treeStyleTabs.css @@ -0,0 +1,194 @@ +/* + * Tree Style Tabs - Photon Theme (Customized) + * Based on official TST Photon theme + * + * Custom colors: + * - Background: rgba(0, 54, 54, 0.3) + * - Active/Focused tab: rgba(0, 67, 68, 0.3) + */ + +/* ═══════════════════════════════════════════════════════════════════ + 🎨 COLOR VARIABLES + ═══════════════════════════════════════════════════════════════════ */ + +:root { + --toolbar-non-lwt-bgcolor: var(--in-content-page-background); + --toolbar-non-lwt-textcolor: var(--in-content-page-color); + + --tab-like-surface: var(--browser-bg-base, var(--toolbar-non-lwt-bgcolor)); + --tab-surface-regular: var(--browser-bg-for-header-image, var(--tab-like-surface)); + --tab-text-regular: var(--browser-fg, var(--toolbar-non-lwt-textcolor)); + --tab-text-inverted: var(--browser-bg-more-lighter, var(--toolbar-non-lwt-bgcolor)); + --tab-text-active: var(--tab-text); + --tab-text-active-inverted: var(--toolbar-non-lwt-bgcolor); + --tab-border: var(--browser-border, var(--browser-bg-more-darker, var(--in-content-box-border-color-mixed))); + --tab-surface-hover: var(--browser-bg-hover-for-header-image, var(--browser-bg-more-lighter, var(--in-content-box-background-hover))); + --tab-surface-active: var(--browser-bg-active-for-header-image, var(--face-highlight-more-lighter, var(--in-content-button-background-mixed))); + --tab-surface-active-hover: var(--browser-bg-active-for-header-image, var(--face-highlight-more-more-lighter, var(--in-content-button-background-active-mixed))); + --tab-dropmarker: var(--browser-fg, var(--toolbar-non-lwt-textcolor)); + --throbber-color: var(--browser-loading-indicator, var(--tab-text)); + --throbber-color-active: var(--browser-loading-indicator, var(--tab-text-active)); + + --tabbar-bg: light-dark( + var(--browser-bg-darker, darkgray), + var(--browser-bg-darker, var(--dark-frame)) + ); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🌳 CUSTOM BACKGROUND COLOR + ═══════════════════════════════════════════════════════════════════ */ + +:root, +body, +#background { + background-color: rgba(0, 54, 54, 1) !important; + background-image: var(--browser-bg-images, none); + background-position: var(--browser-bg-position, left); + background-size: var(--browser-bg-size, auto); + background-repeat: var(--browser-bg-repeat, none); +} + +:root.right, +:root.right #background { + background-position: right; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📑 TAB STYLING + ═══════════════════════════════════════════════════════════════════ */ + +tab-item, +.after-tabs button, +.after-tabs [role="button"], +#subpanel-container, +#dummy-tab-color-box { + --tab-surface: var(--tab-surface-regular); + --tab-text: var(--tab-text-regular); + --tab-text-shadow: var(--browser-textshadow-for-header-image, none); +} + +tab-item-substance, +.after-tabs button, +.after-tabs [role="button"], +#subpanel-container, +#dummy-tab-color-box { + background: var(--tab-surface); + color: var(--tab-text); + text-shadow: var(--tab-text-shadow); +} + +tab-item * { + color: var(--tab-text); +} + +tab-item:not(.active) tab-item-substance:hover, +.after-tabs button:hover, +.after-tabs [role="button"]:hover { + --tab-surface: var(--tab-surface-hover); + --tab-text: var(--tab-text-regular); +} + +#subpanel-selector-anchor:hover { + background: var(--tab-surface-hover); + color: var(--tab-text-regular); +} + + +/* ═══════════════════════════════════════════════════════════════════ + ⭐ ACTIVE/FOCUSED TAB - CUSTOM COLOR + ═══════════════════════════════════════════════════════════════════ */ + +tab-item.active { + --tab-surface: rgba(0, 67, 68, 0.3) !important; + --throbber-color: var(--throbber-color-active); + --tab-text: var(--tab-text-active); + --tab-text-inverted: var(--tab-text-active-inverted); +} + +tab-item.bundled-active, +tab-item.active tab-item-substance:hover { + --tab-surface: rgba(0, 67, 68, 0.3) !important; +} + +tab-item.active tab-item-substance { + background: rgba(0, 67, 68, 1) !important; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🎯 TAB CLOSE BUTTON + ═══════════════════════════════════════════════════════════════════ */ + +tab-closebox { + background: none transparent; + border: none 0 transparent; + margin-block: 0; + margin-inline: 0; + padding-block: 0.1em; + padding-inline: 0.1em; +} + +tab-item .burster { + --throbber-color: var(--tab-loading-fill); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 💫 DROP SHADOWS + ═══════════════════════════════════════════════════════════════════ */ + +:root { + --shadow-color: rgba(0, 0, 0, 0.04); + --shadow-blur: 0.2em; +} + +:root.left tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance { + box-shadow: -0.3em 0.3em var(--shadow-blur) var(--shadow-color); +} + +:root.right tab-item:not(.pinned):not(.collapsed):not(#dummy-tab) tab-item-substance { + box-shadow: 0.3em 0.3em var(--shadow-blur) var(--shadow-color); +} + +.after-tabs button, +.after-tabs [role="button"] { + box-shadow: 0 0.3em var(--shadow-blur) var(--shadow-color); +} + +:root.left #tabbar { + box-shadow: inset -0.2em 0.2em var(--shadow-blur) var(--shadow-color); +} + +:root.right #tabbar { + box-shadow: inset 0.2em 0.2em var(--shadow-blur) var(--shadow-color); +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📚 Z-INDEX MANAGEMENT + ═══════════════════════════════════════════════════════════════════ */ + +/* Transparent tabs are shown above solid tabs. + We have to set z-index to show all tabs in the same layer. */ +tab-item { + z-index: auto; +} + +.after-tabs button, +.after-tabs [role="button"] { + z-index: 100; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 📋 SCROLLBAR STYLING + ═══════════════════════════════════════════════════════════════════ */ + +#tabbar:not(.scrollbar-autohide) #pinned-tabs-container, +#tabbar:not(.scrollbar-autohide) #normal-tabs-container { + scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed))) + var(--theme-colors-toolbar, var(--in-content-box-background)); +} diff --git a/userChrome.css b/userChrome.css new file mode 100644 index 0000000..ca6a255 --- /dev/null +++ b/userChrome.css @@ -0,0 +1,143 @@ +/* ═══════════════════════════════════════════════════════════════════ + 🎨 GLOBAL UI TRANSPARENCY + ═══════════════════════════════════════════════════════════════════ */ + +/* Main browser window */ +#main-window, +#navigator-toolbox, +#browser, +#browser-panel, +#sidebar-box { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Toolbars (tab bar, nav bar, bookmarks bar) */ +#TabsToolbar, +#nav-bar, +#PersonalToolbar, +.toolbar-items { + background-color: rgba(0, 54, 54, 0.3) !important; + background-image: none !important; +} + +/* Sidebar */ +#sidebar { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Menus & popups */ +menupopup, +panelview, +.panel-subview-body, +.popup-internal-box { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* URL bar dropdown */ +#urlbar-background, +.urlbarView { + background-color: rgba(0, 54, 54, 0.3) !important; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🎨 CSS VARIABLES & THEME OVERRIDES + ═══════════════════════════════════════════════════════════════════ */ + +/* Remove forced opaque themes */ +:root { + --toolbar-bgcolor: transparent !important; + --lwt-accent-color: transparent !important; + --lwt-toolbar-field-background-color: rgba(0,54,54,0.3) !important; + --toolbar-field-background-color: rgba(0, 15, 15, 0.3) !important; + --toolbar-field-focus-background-color: rgba(0, 67, 68, 1) !important; + --tabs-navbar-separator-color: rgba(0, 0, 0, 0) !important; +} + +.tabbrowser-tab[selected="true"] .tab-background, +.tabbrowser-tab[multiselected="true"] .tab-background { + background-color: rgba(0, 67, 68, 0.3) !important; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🙈 HIDE UI ELEMENTS + ═══════════════════════════════════════════════════════════════════ */ + +/* Hide the normal tab bar */ +#TabsToolbar { + visibility: collapse !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; +} + +/* Hide the bookmarks / personal toolbar */ +#PersonalToolbar { + visibility: collapse !important; + height: 0 !important; + margin: 0 !important; + padding: 0 !important; + border: none !important; +} + +/* Hide all sidebar headers (History, Bookmarks, etc.) */ +/* For old sidebar (sidebar.revamp: false) */ +#sidebar-header { + display: none !important; +} + +/* For new revamped sidebar (sidebar.revamp: true) - Firefox 146+ */ +#sidebar-panel-header { + display: none !important; +} + + +/* ═══════════════════════════════════════════════════════════════════ + 🌳 TREE STYLE TABS CONFIGURATION + ═══════════════════════════════════════════════════════════════════ */ + +@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Sidebar background when TST is open */ +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { + background: rgba(0, 54, 54, 0.3) !important; +} + +/* Sidebar content background when TST is active */ +#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar { + background-color: rgba(0, 54, 54, 0.3) !important; +} + +/* Sidebar overall background */ +#sidebar-box { + background-color: #003636 !important; +} + +/* Tree Style Tab tab background */ +treechildren::-moz-tree-row(odd), +treechildren::-moz-tree-row(even) { + background-color: #003636 !important; +} + +/* ═══════════════════════════════════════════════════════════════════ + URL SETTINGS + ═══════════════════════════════════════════════════════════════════ */ + +/* Always show full URL, even when focused */ +#urlbar[focused] #urlbar-input, +#urlbar:not([focused]) #urlbar-input { + text-align: left !important; +} + +/* Disable URL reveal-on-hover behavior */ +#urlbar-input { + overflow: visible !important; +} + + +#identity-box.extensionPage:has(label[value*="Startpage"]) { + display: none !important; +} + diff --git a/userContent.css b/userContent.css new file mode 100644 index 0000000..a1e1002 --- /dev/null +++ b/userContent.css @@ -0,0 +1,4 @@ +:root { + --in-content-page-background: #00000000 !important; + --in-content-box-background: #00000088 !important; +} |