From 2738b404721372d87a33e4398242641e5fa15619 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 4 Oct 2019 17:18:35 +0300 Subject: [PATCH] Add selectors for shadow root tab scrollbuttons --- chrome/minimal_toolbarbuttons.css | 14 +++++++++++--- chrome/minimal_toolbarbuttons_v2.css | 12 ++++++++++-- chrome/minimal_toolbarbuttons_v3.css | 27 ++++++++++++++------------- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/chrome/minimal_toolbarbuttons.css b/chrome/minimal_toolbarbuttons.css index 8b3a7a3..1bfdfaa 100644 --- a/chrome/minimal_toolbarbuttons.css +++ b/chrome/minimal_toolbarbuttons.css @@ -3,7 +3,9 @@ /* Create a placeholder for buttons */ toolbar .toolbarbutton-1:not([open]), .titlebar-button, -#tabbrowser-tabs toolbarbutton{ +#tabbrowser-tabs toolbarbutton, +toolbarbutton.scrollbutton-up[orient="horizontal"], +toolbarbutton.scrollbutton-down[orient="horizontal"]{ background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill,currentColor) 0,var(--lwt-toolbarbutton-icon-fill,currentColor) 10%,transparent 15% ); } /* Hide placeholder on hover */ @@ -11,12 +13,16 @@ toolbar:hover + toolbar .toolbarbutton-1, vbox:hover + toolbar .toolbarbutton-1, toolbar:hover .toolbarbutton-1, #tabbrowser-tabs:hover toolbarbutton, +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover, .titlebar-buttonbox:hover > .titlebar-button{ background-image: none } toolbar .toolbarbutton-1 > *, .titlebar-button > *, -#tabbrowser-tabs toolbarbutton > *{ +#tabbrowser-tabs toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ transform: scale(0); transition: transform 82ms linear !important; } @@ -26,7 +32,9 @@ vbox:hover + toolbar .toolbarbutton-1 > *, toolbar:hover .toolbarbutton-1 > *, .toolbarbutton-1[open] > *, .titlebar-buttonbox:hover > .titlebar-button > *, -#tabbrowser-tabs:hover toolbarbutton > *{ +#tabbrowser-tabs:hover toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ transform: scale(1) } diff --git a/chrome/minimal_toolbarbuttons_v2.css b/chrome/minimal_toolbarbuttons_v2.css index de98d90..f8f1f6e 100644 --- a/chrome/minimal_toolbarbuttons_v2.css +++ b/chrome/minimal_toolbarbuttons_v2.css @@ -12,13 +12,17 @@ such as, nav-bar buttons are not shown when urlbar is hovered #nav-bar > #nav-bar-customization-target:hover ~ toolbaritem:not([open]), toolbar .toolbarbutton-1:not([open]), .titlebar-button, -#tabbrowser-tabs toolbarbutton{ +#tabbrowser-tabs toolbarbutton, +toolbarbutton.scrollbutton-up[orient="horizontal"], +toolbarbutton.scrollbutton-down[orient="horizontal"]{ background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill,currentColor) 0,var(--lwt-toolbarbutton-icon-fill,currentColor) 10%,transparent 15% ); } /* Hide placeholder on hover */ toolbar:hover .toolbarbutton-1, .titlebar-buttonbox:hover > .titlebar-button, -#tabbrowser-tabs:hover toolbarbutton{ background-image: none } +#tabbrowser-tabs:hover toolbarbutton, +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover{ background-image: none } #urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, #urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, @@ -27,6 +31,8 @@ toolbar:hover .toolbarbutton-1, #titlebar:hover ~ toolbar .toolbarbutton-1 > *, toolbar .toolbarbutton-1 > *, #tabbrowser-tabs toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon, .titlebar-button > *{ transform: scale(0); transition: transform 82ms linear !important; @@ -36,6 +42,8 @@ toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *, #nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack, #PanelUI-menu-button:hover > stack, #tabbrowser-tabs:hover toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon, .toolbarbutton-1[open] > *, .titlebar-buttonbox:hover > .titlebar-button > *{ transform: scale(1) diff --git a/chrome/minimal_toolbarbuttons_v3.css b/chrome/minimal_toolbarbuttons_v3.css index a3381de..4ca56f2 100644 --- a/chrome/minimal_toolbarbuttons_v3.css +++ b/chrome/minimal_toolbarbuttons_v3.css @@ -1,10 +1,5 @@ /* Create a circular placeholder for toolbarbutton and downscale to hide them */ -/* -Difference to minimal_toolbarbuttons.css: -Sort of mix'n'match of v1 & v2 -*/ - /* Create a placeholder for buttons */ #urlbar-container:hover ~ .toolbarbutton-1:not([open]), #urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1, @@ -12,25 +7,29 @@ Sort of mix'n'match of v1 & v2 #nav-bar > #nav-bar-customization-target:hover ~ toolbaritem:not([open]) > .toolbarbutton-1, toolbar .toolbarbutton-1:not([open]), .titlebar-button, -#tabbrowser-tabs toolbarbutton{ +#tabbrowser-tabs toolbarbutton, +toolbarbutton.scrollbutton-up[orient="horizontal"], +toolbarbutton.scrollbutton-down[orient="horizontal"]{ background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill,currentColor) 0,var(--lwt-toolbarbutton-icon-fill,currentColor) 10%,transparent 15% ); } - /* Hide placeholder on hover */ + toolbar:hover + toolbar .toolbarbutton-1, vbox:hover + toolbar .toolbarbutton-1, toolbar:hover .toolbarbutton-1, #tabbrowser-tabs:hover toolbarbutton, -.titlebar-buttonbox:hover > .titlebar-button{ - background-image: none; -} +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover, +.titlebar-buttonbox:hover > .titlebar-button{ background-image: none; } #urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, #urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, #nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]) > *, toolbar .toolbarbutton-1 > *, .titlebar-button > *, -#tabbrowser-tabs toolbarbutton > *{ +#tabbrowser-tabs toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ transform: scale(0); transition: transform 82ms linear !important; } @@ -41,7 +40,9 @@ toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *, #titlebar:hover ~ toolbar .toolbarbutton-1 > *, .toolbarbutton-1[open] > *, .titlebar-buttonbox:hover > .titlebar-button > *, -#tabbrowser-tabs:hover toolbarbutton > *{ +#tabbrowser-tabs:hover toolbarbutton > *, +toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, +toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ transform: scale(1) } @@ -61,4 +62,4 @@ toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *, #nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status^="update"], #navigator-toolbox:not(:hover) #downloads-button[attention="success"]{ filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan); -} \ No newline at end of file +}