tm24fan8/firefox-csshacks
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make button effect work on scrollbuttons

Browse Source
This commit is contained in:
MrOtherGuy
2020-06-08 17:41:27 +03:00
parent 0385fbec50
commit 89dfae2f88
5 changed files with 32 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
chrome/minimal_toolbarbuttons_v3.css
View File

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