fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-11-10 03:40:14 +00:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
chrome/button_effect_scale_onclick.css
View file

@ -15,11 +15,14 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon
transition: padding 83ms linear !important; transition: padding 83ms linear !important;
} }
toolbarbutton#scrollbutton-up:active > .toolbarbutton-icon,
toolbarbutton:not(.toolbarbutton-1):active > .toolbarbutton-icon, toolbarbutton:not(.toolbarbutton-1):active > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-badge-stack > .toolbarbutton-icon,
.menuitem-iconic:active .menu-iconic-icon{ .menuitem-iconic:active .menu-iconic-icon{
transform: scale(0.6) !important; transform: scale(0.6) !important;
} }
toolbarbutton#scrollbutton-down:active > .toolbarbutton-icon{ transform: scale(-0.6) !important; }
toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon{ toolbar .toolbarbutton-1:not([disabled]):active > .toolbarbutton-icon{
padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px) + 3px) !important; padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px) + 3px) !important;

5
chrome/button_effect_scale_onhover.css
View file

@ -14,12 +14,13 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon,
.urlbar-icon{ .urlbar-icon{
transition: padding 83ms linear !important; transition: padding 83ms linear !important;
} }
toolbarbutton#scrollbutton-up > .toolbarbutton-icon,
toolbarbutton:not(.toolbarbutton-1) > .toolbarbutton-icon, toolbarbutton:not(.toolbarbutton-1) > .toolbarbutton-icon,
toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
.menuitem-iconic .menu-iconic-icon{ .menuitem-iconic .menu-iconic-icon{
transform: scale(0.8) !important; transform: scale(0.8) !important;
} }
toolbarbutton#scrollbutton-down > .toolbarbutton-icon{ transform: scale(-0.8) !important; }
toolbar .toolbarbutton-1 > .toolbarbutton-icon{ toolbar .toolbarbutton-1 > .toolbarbutton-icon{
padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px) + 2px) !important; 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; } #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, toolbarbutton:not(.toolbarbutton-1):not([disabled]):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-badge-stack > .toolbarbutton-icon,
.menuitem-iconic:not([disabled]):hover .menu-iconic-icon{ .menuitem-iconic:not([disabled]):hover .menu-iconic-icon{
transform: none !important; transform: none !important;
} }
toolbarbutton#scrollbutton-down:not([disabled]):hover > .toolbarbutton-icon{transform: scale(-1) !important;}
toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon{ toolbar .toolbarbutton-1:not([disabled]):hover > .toolbarbutton-icon{
padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px)) !important; padding: calc(var(--toolbarbutton-inner-padding) + var(--uc-back-extra-padding,0px)) !important;

38
chrome/minimal_toolbarbuttons.css
View file

@ -7,10 +7,8 @@ See the above repository for updates as well as full license text. */
toolbar .toolbarbutton-1:not([open]), toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], #scrollbutton-up:not(:hover),
toolbarbutton.scrollbutton-down[orient="horizontal"], #scrollbutton-down:not(:hover){
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% ); 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 */ /* Hide placeholder on hover */
@ -18,48 +16,28 @@ toolbar:hover + toolbar .toolbarbutton-1,
vbox:hover + toolbar .toolbarbutton-1, vbox:hover + toolbar .toolbarbutton-1,
toolbar:hover .toolbarbutton-1, toolbar:hover .toolbarbutton-1,
#tabbrowser-tabs:hover toolbarbutton, #tabbrowser-tabs:hover toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"]:hover,
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover,
.titlebar-buttonbox:hover > .titlebar-button{ background-image: none } .titlebar-buttonbox:hover > .titlebar-button{ background-image: none }
toolbar .toolbarbutton-1 > *, toolbar .toolbarbutton-1 > *,
.titlebar-button > *, .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); transform: scale(0);
transition: transform 82ms linear !important; 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 > *, toolbar:hover + toolbar .toolbarbutton-1 > *,
vbox:hover + toolbar .toolbarbutton-1 > *, vbox:hover + toolbar .toolbarbutton-1 > *,
toolbar:hover .toolbarbutton-1 > *, toolbar:hover .toolbarbutton-1 > *,
.toolbarbutton-1[open] > *, .toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *, .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) transform: scale(1)
} }
#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important }
/* Extra rules for reworked tab overflow scrollbuttons */ #scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important }
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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .urlbar-icon{ transition: transform 82ms linear !important; }

36
chrome/minimal_toolbarbuttons_v2.css
View file

@ -16,18 +16,14 @@ such as, nav-bar buttons are not shown when urlbar is hovered
toolbar .toolbarbutton-1:not([open]), toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], #scrollbutton-up:not(:hover),
toolbarbutton.scrollbutton-down[orient="horizontal"], #scrollbutton-down:not(:hover){
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% ); 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 */ /* Hide placeholder on hover */
toolbar:hover .toolbarbutton-1, toolbar:hover .toolbarbutton-1,
.titlebar-buttonbox:hover > .titlebar-button, .titlebar-buttonbox:hover > .titlebar-button,
#tabbrowser-tabs:hover toolbarbutton, #tabbrowser-tabs:hover toolbarbutton{ background-image: none }
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 ~ .toolbarbutton-1:not([open]) > *,
#urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, #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 > *, #titlebar:hover ~ toolbar .toolbarbutton-1 > *,
toolbar .toolbarbutton-1 > *, toolbar .toolbarbutton-1 > *,
#tabbrowser-tabs toolbarbutton > *, #tabbrowser-tabs toolbarbutton > *,
toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon,
toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon,
.titlebar-button > *{ .titlebar-button > *{
transform: scale(0); transform: scale(0);
transition: transform 82ms linear !important; 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) > *, toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *,
#nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack, #nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack,
#PanelUI-menu-button:hover > stack, #PanelUI-menu-button:hover > stack,
#tabbrowser-tabs:hover toolbarbutton > *, #tabbrowser-tabs:hover toolbarbutton > *,
toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon,
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon,
.toolbarbutton-1[open] > *, .toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *{ .titlebar-buttonbox:hover > .titlebar-button > *{
transform: scale(1) transform: scale(1)
} }
#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important }
/* Extra rules for reworked tab overflow scrollbuttons */ #scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important }
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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .urlbar-icon{ transition: transform 82ms linear !important; }

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]), toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], #scrollbutton-up:not(:hover),
toolbarbutton.scrollbutton-down[orient="horizontal"], #scrollbutton-down:not(:hover){
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% ); 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 */ /* Hide placeholder on hover */
@ -31,12 +29,12 @@ toolbar:hover .toolbarbutton-1,
#nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]) > *, #nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]) > *,
toolbar .toolbarbutton-1 > *, toolbar .toolbarbutton-1 > *,
.titlebar-button > *, .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); transform: scale(0);
transition: transform 82ms linear !important; 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) > *, toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *,
#nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack, #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 > *, #titlebar:hover ~ toolbar .toolbarbutton-1 > *,
.toolbarbutton-1[open] > *, .toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *, .titlebar-buttonbox:hover > .titlebar-button > *,
#tabbrowser-tabs:hover toolbarbutton > *, #tabbrowser-tabs:hover toolbarbutton > *{
toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon, transform: scale(1);
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{
transform: scale(1)
} }
#scrollbutton-up:hover > .toolbarbutton-icon{ transform: scale(1) !important }
/* Extra rules for reworked tab overflow scrollbuttons */ #scrollbutton-down:hover > .toolbarbutton-icon{ transform: scale(-1) !important }
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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .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"], #nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status^="update"],
#navigator-toolbox:not(:hover) #downloads-button[attention="success"]{ #navigator-toolbox:not(:hover) #downloads-button[attention="success"]{
filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan); filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan);
} }