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

Add some extra rules for reworked tab scrollbuttons

Browse source
This commit is contained in:
MrOtherGuy 2020-03-29 10:11:18 +03:00
parent 865a304afd
commit 6d741b997a
3 changed files with 64 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
chrome/minimal_toolbarbuttons.css
View file

@ -5,7 +5,9 @@ toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], 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% ); 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 */
@ -38,6 +40,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon
transform: scale(1) 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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }

22
chrome/minimal_toolbarbuttons_v2.css
View file

@ -14,7 +14,9 @@ toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], 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% ); 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 */
@ -49,6 +51,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon
transform: scale(1) 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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }

25
chrome/minimal_toolbarbuttons_v3.css
View file

@ -1,6 +1,7 @@
/* Create a circular placeholder for toolbarbutton and downscale to hide them */ /* Create a circular placeholder for toolbarbutton and downscale to hide them */
/* 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,
#nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]), #nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]),
@ -9,7 +10,9 @@ toolbar .toolbarbutton-1:not([open]),
.titlebar-button, .titlebar-button,
#tabbrowser-tabs toolbarbutton, #tabbrowser-tabs toolbarbutton,
toolbarbutton.scrollbutton-up[orient="horizontal"], 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% ); 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,8 +21,6 @@ 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; }
#urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, #urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *,
@ -46,6 +47,24 @@ toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon
transform: scale(1) 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 icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; } .urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) } #urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }