pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add selectors for shadow root tab scrollbuttons

Browse source
This commit is contained in:
MrOtherGuy 2019-10-04 17:18:35 +03:00
parent 6976d7dfc4
commit 2738b40472
3 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
chrome/minimal_toolbarbuttons.css
View file

@ -3,7 +3,9 @@
/* Create a placeholder for buttons */ /* Create a placeholder for buttons */
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"],
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 */
@ -11,12 +13,16 @@ 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;
} }
@ -26,7 +32,9 @@ 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)
} }

12
chrome/minimal_toolbarbuttons_v2.css
View file

@ -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]), #nav-bar > #nav-bar-customization-target:hover ~ toolbaritem:not([open]),
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"],
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{ 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 ~ .toolbarbutton-1:not([open]) > *,
#urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, #urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *,
@ -27,6 +31,8 @@ toolbar:hover .toolbarbutton-1,
#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;
@ -36,6 +42,8 @@ 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)

27
chrome/minimal_toolbarbuttons_v3.css
View file

@ -1,10 +1,5 @@
/* Create a circular placeholder for toolbarbutton and downscale to hide them */ /* 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 */ /* Create a placeholder for buttons */
#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,
@ -12,25 +7,29 @@ Sort of mix'n'match of v1 & v2
#nav-bar > #nav-bar-customization-target:hover ~ toolbaritem:not([open]) > .toolbarbutton-1, #nav-bar > #nav-bar-customization-target:hover ~ toolbaritem:not([open]) > .toolbarbutton-1,
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"],
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 + 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,
#tabbrowser-tabs:hover toolbarbutton, #tabbrowser-tabs:hover toolbarbutton,
.titlebar-buttonbox:hover > .titlebar-button{ toolbarbutton.scrollbutton-up[orient="horizontal"]:hover,
background-image: none; toolbarbutton.scrollbutton-down[orient="horizontal"]:hover,
} .titlebar-buttonbox:hover > .titlebar-button{ 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 > *,
#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;
} }
@ -41,7 +40,9 @@ 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,
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{
transform: scale(1) 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"], #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);
} }