From 89dfae2f88fd30fa17a60c55429a552be2dd1f71 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Mon, 8 Jun 2020 17:41:27 +0300 Subject: [PATCH] Make button effect work on scrollbuttons --- chrome/button_effect_scale_onclick.css | 3 ++ chrome/button_effect_scale_onhover.css | 5 +++- chrome/minimal_toolbarbuttons.css | 38 ++++++------------------ chrome/minimal_toolbarbuttons_v2.css | 36 +++++------------------ chrome/minimal_toolbarbuttons_v3.css | 40 +++++++------------------- 5 files changed, 32 insertions(+), 90 deletions(-) diff --git a/chrome/button_effect_scale_onclick.css b/chrome/button_effect_scale_onclick.css index 037c4e9..78eb1c9 100644 --- a/chrome/button_effect_scale_onclick.css +++ b/chrome/button_effect_scale_onclick.css @@ -15,11 +15,14 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon transition: padding 83ms linear !important; } +toolbarbutton#scrollbutton-up:active > .toolbarbutton-icon, toolbarbutton:not(.toolbarbutton-1):active > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon, .menuitem-iconic:active .menu-iconic-icon{ transform: scale(0.6) !important; } +toolbarbutton#scrollbutton-down:active > .toolbarbutton-icon{ transform: scale(-0.6) !important; } + toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon{ padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px) + 3px) !important; diff --git a/chrome/button_effect_scale_onhover.css b/chrome/button_effect_scale_onhover.css index f526741..4ac501a 100644 --- a/chrome/button_effect_scale_onhover.css +++ b/chrome/button_effect_scale_onhover.css @@ -14,12 +14,13 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon, .urlbar-icon{ transition: padding 83ms linear !important; } - +toolbarbutton#scrollbutton-up > .toolbarbutton-icon, toolbarbutton:not(.toolbarbutton-1) > .toolbarbutton-icon, toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, .menuitem-iconic .menu-iconic-icon{ transform: scale(0.8) !important; } +toolbarbutton#scrollbutton-down > .toolbarbutton-icon{ transform: scale(-0.8) !important; } toolbar .toolbarbutton-1 > .toolbarbutton-icon{ padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px) + 2px) !important; @@ -27,11 +28,13 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon{ #page-action-buttons .urlbar-icon:not(:hover){ padding: calc(var(--urlbar-icon-padding) + 2px) !important; } +toolbarbutton#scrollbutton-up:not([disabled]):hover > .toolbarbutton-icon, toolbarbutton:not(.toolbarbutton-1):not([disabled]):hover > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-badge-stack > .toolbarbutton-icon, .menuitem-iconic:not([disabled]):hover .menu-iconic-icon{ transform: none !important; } +toolbarbutton#scrollbutton-down:not([disabled]):hover > .toolbarbutton-icon{transform: scale(-1) !important;} toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon{ padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px)) !important; diff --git a/chrome/minimal_toolbarbuttons.css b/chrome/minimal_toolbarbuttons.css index 9fdc1ac..d64dec3 100644 --- a/chrome/minimal_toolbarbuttons.css +++ b/chrome/minimal_toolbarbuttons.css @@ -7,10 +7,8 @@ See the above repository for updates as well as full license text. */ toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, -toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"], -toolbarbutton#scrollbutton-up[orient="horizontal"], -toolbarbutton#scrollbutton-down[orient="horizontal"]{ +#scrollbutton-up:not(:hover), +#scrollbutton-down:not(:hover){ 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 */ @@ -18,48 +16,28 @@ 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 > *, -toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, -toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ +#tabbrowser-tabs toolbarbutton > *{ transform: scale(0); transition: transform 82ms linear !important; } +#scrollbutton-up > .toolbarbutton-icon, +#scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; } toolbar:hover + toolbar .toolbarbutton-1 > *, vbox:hover + toolbar .toolbarbutton-1 > *, toolbar:hover .toolbarbutton-1 > *, .toolbarbutton-1[open] > *, .titlebar-buttonbox:hover > .titlebar-button > *, -#tabbrowser-tabs:hover toolbarbutton > *, -toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, -toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ +#tabbrowser-tabs:hover toolbarbutton > *{ transform: scale(1) } - -/* Extra rules for reworked tab overflow scrollbuttons */ - -toolbarbutton#scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, -toolbarbutton#scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ - transform: scale(0) !important; - transition: transform 82ms linear !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(1) !important; -} -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(-1, 1) !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover, -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover{ background: none !important; } +#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important } +#scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important } /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } diff --git a/chrome/minimal_toolbarbuttons_v2.css b/chrome/minimal_toolbarbuttons_v2.css index b3f42a1..001e224 100644 --- a/chrome/minimal_toolbarbuttons_v2.css +++ b/chrome/minimal_toolbarbuttons_v2.css @@ -16,18 +16,14 @@ such as, nav-bar buttons are not shown when urlbar is hovered toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, -toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"], -toolbarbutton#scrollbutton-up[orient="horizontal"], -toolbarbutton#scrollbutton-down[orient="horizontal"]{ +#scrollbutton-up:not(:hover), +#scrollbutton-down:not(:hover){ 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, -toolbarbutton.scrollbutton-up[orient="horizontal"]:hover, -toolbarbutton.scrollbutton-down[orient="horizontal"]:hover{ background-image: none } +#tabbrowser-tabs:hover toolbarbutton{ background-image: none } #urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, #urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, @@ -36,41 +32,23 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover{ background-image: no #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; } +#scrollbutton-up > .toolbarbutton-icon, +#scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; } 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) } - -/* Extra rules for reworked tab overflow scrollbuttons */ - -toolbarbutton#scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, -toolbarbutton#scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ - transform: scale(0) !important; - transition: transform 82ms linear !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(1) !important; -} -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(-1, 1) !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover, -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover{ background: none !important; } +#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important } +#scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important } /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } diff --git a/chrome/minimal_toolbarbuttons_v3.css b/chrome/minimal_toolbarbuttons_v3.css index 1083392..ac9de8e 100644 --- a/chrome/minimal_toolbarbuttons_v3.css +++ b/chrome/minimal_toolbarbuttons_v3.css @@ -12,10 +12,8 @@ See the above repository for updates as well as full license text. */ toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, -toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"], -toolbarbutton#scrollbutton-up[orient="horizontal"], -toolbarbutton#scrollbutton-down[orient="horizontal"]{ +#scrollbutton-up:not(:hover), +#scrollbutton-down:not(:hover){ 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 */ @@ -31,12 +29,12 @@ toolbar:hover .toolbarbutton-1, #nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]) > *, toolbar .toolbarbutton-1 > *, .titlebar-button > *, -#tabbrowser-tabs toolbarbutton > *, -toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, -toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ +#tabbrowser-tabs toolbarbutton > *{ transform: scale(0); transition: transform 82ms linear !important; } +#scrollbutton-up > .toolbarbutton-icon, +#scrollbutton-down > .toolbarbutton-icon{ transform: scale(0) !important; transition: transform 82ms linear !important; } toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *, #nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack, @@ -44,29 +42,11 @@ 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 > *, -toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, -toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(1) +#tabbrowser-tabs:hover toolbarbutton > *{ + transform: scale(1); } - -/* Extra rules for reworked tab overflow scrollbuttons */ - -toolbarbutton#scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon, -toolbarbutton#scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{ - transform: scale(0) !important; - transition: transform 82ms linear !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(1) !important; -} -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{ - transform: scale(-1, 1) !important; -} - -toolbarbutton#scrollbutton-up[orient="horizontal"]:hover, -toolbarbutton#scrollbutton-down[orient="horizontal"]:hover{ background: none !important; } +#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important } +#scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important } /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } @@ -84,4 +64,4 @@ toolbarbutton#scrollbutton-down[orient="horizontal"]:hover{ background: none !im #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