Merge 21750e2 from MrOtherGuy/firefox-csshacks

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; }

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;
+}

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;
+}

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 }

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() }

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;
+}

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;
+}

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 }