diff --git a/src/userChrome/color_variable_template.css b/src/userChrome/color_variable_template.css new file mode 100644 index 0000000..d7d0f7c --- /dev/null +++ b/src/userChrome/color_variable_template.css @@ -0,0 +1,48 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/color_variable_template.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* You should enable any non-default theme for these to apply properly. Built-in dark and light themes should work */ +:root{ + /* Popup panels */ + --arrowpanel-background: olive !important; + --arrowpanel-border-color: green !important; + --arrowpanel-color: cyan !important; + --arrowpanel-dimmed: rgba(0,0,0,0.4) !important; + /* window and toolbar background */ + --lwt-accent-color: red !important; + --lwt-accent-color-inactive: green !important; + --toolbar-bgcolor: rgba(0,0,0,0.4) !important; + /* tabs with system theme - text is not controlled by variable */ + --tab-selected-bgcolor: powderblue !important; + /* tabs with any other theme */ + --lwt-text-color: cyan !important; + --lwt-selected-tab-background-color: cornflowerblue !important; + /* toolbar area */ + --toolbarbutton-icon-fill: white !important; + --lwt-toolbarbutton-hover-background: orange !important; + --lwt-toolbarbutton-active-background: red !important; + /* urlbar */ + --toolbar-field-border-color: green !important; + --toolbar-field-focus-border-color: pink !important; + --urlbar-popup-url-color: cyan !important; + /* urlbar Firefox < 92 */ + --lwt-toolbar-field-background-color: olive !important; + --lwt-toolbar-field-focus: grey !important; + --lwt-toolbar-field-color: red !important; + --lwt-toolbar-field-focus-color: white !important; + /* urlbar Firefox 92+ */ + --toolbar-field-background-color: olive !important; + --toolbar-field-focus-background-color: grey !important; + --toolbar-field-color: red !important; + --toolbar-field-focus-color: white !important; + /* sidebar - note the sidebar-box rule for the header-area */ + --lwt-sidebar-background-color: purple !important; + --lwt-sidebar-text-color: yellow !important; +} +/* line between nav-bar and tabs toolbar, + also fallback color for border around selected tab */ +#navigator-toolbox{ --lwt-tabs-border-color: cyan !important; } +/* Line above tabs */ +#tabbrowser-tabs{ --lwt-tab-line-color: white !important; } +/* the header-area of sidebar needs this to work */ +#sidebar-box{ --sidebar-background-color: purple !important; } diff --git a/src/userChrome/hide_tabs_scrollbuttons.css b/src/userChrome/hide_tabs_scrollbuttons.css new file mode 100644 index 0000000..9c65593 --- /dev/null +++ b/src/userChrome/hide_tabs_scrollbuttons.css @@ -0,0 +1,65 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_scrollbuttons.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* This should hide tabs scrollbuttons in a manner that preserves the ability to move tab strip when reordering tabs */ + +#tabbrowser-arrowscrollbox{ + --uc-compat-scrollbutton-margin: 1px; /* compatibility for non_floating_sharp_tabs.css */ + --uc-scrollbutton-up-background: linear-gradient(-90deg,transparent,var(--lwt-accent-color) 35%); + --uc-scrollbutton-down-background: linear-gradient(90deg,transparent,var(--lwt-accent-color) 35%); +} + +#tabbrowser-tabs:not([movingtab]){ + --uc-scroll-visibility: hidden; +} +#tabbrowser-tabs[overflow]{ + --uc-scrollbox-base-margin: -31px; + --uc-scrollbox-margin: calc(var(--uc-scrollbox-base-margin) + var(--tab-shadow-max-size)); +} +:root[uidensity="compact"] #tabbrowser-tabs[overflow]{ + --uc-scrollbox-base-margin: -25px; +} +#tabbrowser-arrowscrollbox:not([scrolledtostart="true"]){ + --uc-scrollbox-overflow-start-margin: -1px; +} +#scrollbutton-up ~ spacer{ + visibility: visible !important; +} +spacer[part="overflow-start-indicator"]{ + -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */ + order: -1; + margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important; +} +spacer[part="overflow-end-indicator"]{ + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; +} + +#scrollbutton-down[disabled="true"] > .toolbarbutton-icon, +#scrollbutton-up[disabled="true"] > .toolbarbutton-icon{ + opacity: 0.4; +} +#scrollbutton-up, +#scrollbutton-down{ + position: relative; + z-index: 1; + visibility: var(--uc-scroll-visibility,visible); + background-clip: border-box !important; + background-origin: initial !important; + background-repeat: no-repeat !important; + opacity: 1 !important; +} +#scrollbutton-up{ + margin-inline-start: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-up-background); +} +#scrollbutton-down{ + margin-inline-end: calc(0px - var(--tab-shadow-max-size,0px)) !important; + background-image: var(--uc-scrollbutton-down-background); +} +.scrollbox-clip{ margin-inline: var(--uc-scrollbox-margin,0px); } + +/* Need to reset some things for other scrollboxes */ +.menupopup-arrowscrollbox{ + --tab-shadow-max-size: 0; +} diff --git a/src/userChrome/iconized_main_menu.css b/src/userChrome/iconized_main_menu.css new file mode 100644 index 0000000..d419a90 --- /dev/null +++ b/src/userChrome/iconized_main_menu.css @@ -0,0 +1,45 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/iconized_main_menu.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Adds icons to main menu items which were removed in Proton */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before, +#appMenu-protonMainView > .panel-subview-body > toolbarbutton > image{ + fill: currentColor; + -moz-context-properties: fill; + margin-inline: 0 8px !important; +} +#appMenu-new-tab-button2{ list-style-image: url("chrome://browser/skin/new-tab.svg") } +#appMenu-new-window-button2{ list-style-image: url("chrome://browser/skin/window.svg") } +#appMenu-new-private-window-button2{ list-style-image: url("chrome://browser/skin/privateBrowsing.svg") } +#appMenu-bookmarks-button{ list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") } +#appMenu-history-button{ list-style-image: url("chrome://browser/skin/history.svg") } +#appMenu-downloads-button{ list-style-image: url("chrome://browser/skin/downloads/downloads.svg") } +#appMenu-passwords-button{ list-style-image: url("chrome://browser/skin/login.svg") } +#appMenu-extensions-themes-button{ list-style-image: url("chrome://mozapps/skin/extensions/extension.svg") } +#appMenu-print-button2{ list-style-image: url("chrome://global/skin/icons/print.svg") } +#appMenu-save-file-button2{ list-style-image: url("chrome://browser/skin/save.svg") } +#appMenu-find-button2{ list-style-image: url("chrome://global/skin/icons/search-glass.svg") } +#appMenu-settings-button{ list-style-image: url("chrome://global/skin/icons/settings.svg") } +#appMenu-more-button2{ list-style-image: url("chrome://global/skin/icons/developer.svg") } +#appMenu-help-button2{ list-style-image: url("chrome://global/skin/icons/info.svg") } +#appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") } +/* Use account-button icon for signed in sync item */ +#appMenu-fxa-status2[fxastatus] > toolbarbutton::before{ + display: flex; + content: ""; + width: 16px; + height: 16px; + background-image: var(--avatar-image-url) +} +/* Add somewhat hacky separator to zoom controls so it looks consistent */ +#appMenu-protonMainView > .panel-subview-body::after{ + content: ""; + display: flex; + border-bottom: 1px solid var(--panel-separator-color); + margin: var(--panel-separator-margin); +} + +#appMenu-find-button2 ~ *{ + -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */ + order: 2; +} \ No newline at end of file diff --git a/src/userChrome/numbered_tabs.css b/src/userChrome/numbered_tabs.css new file mode 100644 index 0000000..0710e7d --- /dev/null +++ b/src/userChrome/numbered_tabs.css @@ -0,0 +1,7 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Show a number before tab text*/ + +.tabbrowser-tab:first-child{ counter-reset: nth-tab 0 } /* Change to -1 for 0-indexing */ +.tab-text::before{ content: counter(nth-tab) " "; counter-increment: nth-tab } \ No newline at end of file diff --git a/src/userChrome/round_ui_items.css b/src/userChrome/round_ui_items.css new file mode 100644 index 0000000..2ecbab6 --- /dev/null +++ b/src/userChrome/round_ui_items.css @@ -0,0 +1,47 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/round_ui_items.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Make bunch of things in the main UI round */ + +:root{ --toolbarbutton-border-radius: 24px !important } +#urlbar-input-container > box:hover, +#urlbar-input-container > box[open], +#main-menubar > menu, +.titlebar-button:hover, +#scrollbutton-up, +#scrollbutton-down, +.tab-close-button, +.close-icon > image, +#page-action-buttons > :hover, +.panel-arrowcontent, +.urlbarView-row-inner, +.search-one-offs button, +.subviewbutton-back, +.toolbaritem-combined-buttons > toolbarbutton, +#PopupSearchAutoComplete, +menupopup{ border-radius: 18px } + +button, +.tab-background{ border-radius: 30px !important; } + +.panel-arrowcontent{ margin-inline-end: 0 !important; } +.panel-arrow{ margin-inline: 17px !important; } + +menupopup{ -moz-appearance: none !important; overflow: -moz-hidden-unscrollable !important; } + +.tabbrowser-tab[selected]::after, +.tabbrowser-tab[beforeselected-visible]::after{ border-color: transparent !important; } + +#nav-bar{ box-shadow: none !important; margin-top: 3px } +.tab-line{ display: none } + +.tab-background[selected]{ + border-top-width: 2px !important; + border-top-color: var(--lwt-tab-line-color) !important; +} +.tabbrowser-tab[selected]{ z-index: auto !important; } + +.urlbar-icon, +toolbar toolbarbutton:not(#back-button):not(.bookmark-item):not(.titlebar-button) > .toolbarbutton-icon{ border-radius: 0px !important; clip-path: circle() } + +menugroup:hover > menuitem{ clip-path: circle() } \ No newline at end of file diff --git a/src/userChrome/tab_animated_active_border.css b/src/userChrome/tab_animated_active_border.css new file mode 100644 index 0000000..a4e8a53 --- /dev/null +++ b/src/userChrome/tab_animated_active_border.css @@ -0,0 +1,32 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_animated_active_border.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Creates a colorful animated border around active tab */ + +@keyframes filter{from{ filter: hue-rotate(0deg) } to { filter: hue-rotate(360deg) }} + +.tabbrowser-tab[selected] > .tab-stack::before{ + grid-area: 1/1; + content: ""; + display: inherit; + margin-block: var(--tab-block-margin); + border-radius: var(--tab-border-radius); + z-index: 0; + background-image: conic-gradient( + hsl(0 100% 70%), + hsl(60 100% 45%) 70deg, + hsl(120 100% 55%) 105deg, + hsl(160 100% 60%) 160deg, + hsl(200 100% 60%) 200deg, + hsl(240 100% 65%) 255deg, + hsl(300 100% 60%) 290deg, + hsl(360 100% 70%) 360deg); + background-size: cover; + background-position: center; + animation: filter steps(30) 2s infinite; +} +.tab-background[selected]{ + border: 1px solid transparent !important; + outline: none !important; + background-clip: padding-box !important; +} \ No newline at end of file diff --git a/src/userChrome/tab_close_button_always_on_hover.css b/src/userChrome/tab_close_button_always_on_hover.css new file mode 100644 index 0000000..22add02 --- /dev/null +++ b/src/userChrome/tab_close_button_always_on_hover.css @@ -0,0 +1,11 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tab_close_button_always_on_hover.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Always show tab close button on hover and never otherwise */ +.tabbrowser-tab .tab-close-button{ + display:none; +} +.tabbrowser-tab:not([pinned]):hover .tab-close-button{ + display: flex !important; + align-items: center; +} \ No newline at end of file diff --git a/src/userChrome/tabs_fill_available_width.css b/src/userChrome/tabs_fill_available_width.css new file mode 100644 index 0000000..f7a3094 --- /dev/null +++ b/src/userChrome/tabs_fill_available_width.css @@ -0,0 +1,5 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ +.tabbrowser-tab[fadein]:not([style^="max-width"]){ max-width: 100vw !important } \ No newline at end of file