From 6d741b997a1259067ea2b2bd0ae2e2b11f22cf64 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sun, 29 Mar 2020 10:11:18 +0300 Subject: [PATCH] Add some extra rules for reworked tab scrollbuttons --- chrome/minimal_toolbarbuttons.css | 22 +++++++++++++++++++++- chrome/minimal_toolbarbuttons_v2.css | 22 +++++++++++++++++++++- chrome/minimal_toolbarbuttons_v3.css | 25 ++++++++++++++++++++++--- 3 files changed, 64 insertions(+), 5 deletions(-) diff --git a/chrome/minimal_toolbarbuttons.css b/chrome/minimal_toolbarbuttons.css index 1bfdfaa..2656fab 100644 --- a/chrome/minimal_toolbarbuttons.css +++ b/chrome/minimal_toolbarbuttons.css @@ -5,7 +5,9 @@ toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"]{ +toolbarbutton.scrollbutton-down[orient="horizontal"], +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 */ @@ -38,6 +40,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon 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; } + /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } diff --git a/chrome/minimal_toolbarbuttons_v2.css b/chrome/minimal_toolbarbuttons_v2.css index f8f1f6e..c2cfebd 100644 --- a/chrome/minimal_toolbarbuttons_v2.css +++ b/chrome/minimal_toolbarbuttons_v2.css @@ -14,7 +14,9 @@ toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"]{ +toolbarbutton.scrollbutton-down[orient="horizontal"], +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 */ @@ -49,6 +51,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon 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; } + /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } diff --git a/chrome/minimal_toolbarbuttons_v3.css b/chrome/minimal_toolbarbuttons_v3.css index 4ca56f2..b5171a7 100644 --- a/chrome/minimal_toolbarbuttons_v3.css +++ b/chrome/minimal_toolbarbuttons_v3.css @@ -1,6 +1,7 @@ /* Create a circular placeholder for toolbarbutton and downscale to hide them */ /* Create a placeholder for buttons */ + #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]), @@ -9,7 +10,9 @@ toolbar .toolbarbutton-1:not([open]), .titlebar-button, #tabbrowser-tabs toolbarbutton, toolbarbutton.scrollbutton-up[orient="horizontal"], -toolbarbutton.scrollbutton-down[orient="horizontal"]{ +toolbarbutton.scrollbutton-down[orient="horizontal"], +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 */ @@ -18,8 +21,6 @@ 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; } #urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, @@ -46,6 +47,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon 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; } + /* Urlbar icons, this way they show colors is applicable */ .urlbar-icon{ transition: transform 82ms linear !important; } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }