2018-12-30 12:26:26 +00:00
|
|
|
/* Create a circular placeholder for toolbarbutton and downscale to hide them */
|
|
|
|
|
|
|
|
|
|
/* Create a placeholder for buttons */
|
2018-12-31 18:39:55 +00:00
|
|
|
toolbar .toolbarbutton-1:not([open]),
|
2019-05-01 04:54:44 +00:00
|
|
|
.titlebar-button,
|
2019-10-04 14:18:35 +00:00
|
|
|
#tabbrowser-tabs toolbarbutton,
|
|
|
|
|
toolbarbutton.scrollbutton-up[orient="horizontal"],
|
|
|
|
|
toolbarbutton.scrollbutton-down[orient="horizontal"]{
|
2019-05-05 14:33:18 +00:00
|
|
|
background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill,currentColor) 0,var(--lwt-toolbarbutton-icon-fill,currentColor) 10%,transparent 15% );
|
2018-12-31 18:39:55 +00:00
|
|
|
}
|
2018-12-30 12:26:26 +00:00
|
|
|
/* Hide placeholder on hover */
|
2019-05-01 04:54:44 +00:00
|
|
|
toolbar:hover + toolbar .toolbarbutton-1,
|
|
|
|
|
vbox:hover + toolbar .toolbarbutton-1,
|
|
|
|
|
toolbar:hover .toolbarbutton-1,
|
|
|
|
|
#tabbrowser-tabs:hover toolbarbutton,
|
2019-10-04 14:18:35 +00:00
|
|
|
toolbarbutton.scrollbutton-up[orient="horizontal"]:hover,
|
|
|
|
|
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover,
|
2019-05-01 04:54:44 +00:00
|
|
|
.titlebar-buttonbox:hover > .titlebar-button{ background-image: none }
|
|
|
|
|
|
2018-12-30 12:26:26 +00:00
|
|
|
|
2018-12-31 18:39:55 +00:00
|
|
|
toolbar .toolbarbutton-1 > *,
|
2019-05-01 04:54:44 +00:00
|
|
|
.titlebar-button > *,
|
2019-10-04 14:18:35 +00:00
|
|
|
#tabbrowser-tabs toolbarbutton > *,
|
|
|
|
|
toolbarbutton.scrollbutton-up[orient="horizontal"] > .toolbarbutton-icon,
|
|
|
|
|
toolbarbutton.scrollbutton-down[orient="horizontal"] > .toolbarbutton-icon{
|
2018-12-30 12:26:26 +00:00
|
|
|
transform: scale(0);
|
|
|
|
|
transition: transform 82ms linear !important;
|
|
|
|
|
}
|
2019-05-01 04:54:44 +00:00
|
|
|
|
|
|
|
|
toolbar:hover + toolbar .toolbarbutton-1 > *,
|
|
|
|
|
vbox:hover + toolbar .toolbarbutton-1 > *,
|
2018-12-30 12:26:26 +00:00
|
|
|
toolbar:hover .toolbarbutton-1 > *,
|
2018-12-31 18:39:55 +00:00
|
|
|
.toolbarbutton-1[open] > *,
|
2019-05-01 04:54:44 +00:00
|
|
|
.titlebar-buttonbox:hover > .titlebar-button > *,
|
2019-10-04 14:18:35 +00:00
|
|
|
#tabbrowser-tabs:hover toolbarbutton > *,
|
|
|
|
|
toolbarbutton.scrollbutton-up[orient="horizontal"]:hover > .toolbarbutton-icon,
|
|
|
|
|
toolbarbutton.scrollbutton-down[orient="horizontal"]:hover > .toolbarbutton-icon{
|
2018-12-30 12:26:26 +00:00
|
|
|
transform: scale(1)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Urlbar icons, this way they show colors is applicable */
|
|
|
|
|
.urlbar-icon{ transition: transform 82ms linear !important; }
|
2019-05-01 04:54:44 +00:00
|
|
|
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }
|
2018-12-31 18:39:55 +00:00
|
|
|
|
|
|
|
|
/* The menu button has some margin on non-compact density which creates annnoying transitions */
|
|
|
|
|
/* Lets remove that as well as border since this is minimal style anyway */
|
2019-05-01 04:54:44 +00:00
|
|
|
#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }
|
2019-05-01 07:28:05 +00:00
|
|
|
|
2019-06-01 11:30:01 +00:00
|
|
|
/* Add a glow-effect to some buttons when it has some "alert" */
|
|
|
|
|
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status],
|
|
|
|
|
#navigator-toolbox:not(:hover) #downloads-button[attention]{
|
|
|
|
|
filter: brightness(2) drop-shadow(0 0 3px orange) drop-shadow(0 0 1px orange);
|
|
|
|
|
}
|
|
|
|
|
#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);
|
|
|
|
|
}
|
