fenix-fox/chrome/minimal_toolbarbuttons.css

44 lines
1.8 KiB
CSS
Raw Normal View History

2018-12-30 13:26:26 +01:00
/* Create a circular placeholder for toolbarbutton and downscale to hide them */
/* Create a placeholder for buttons */
2018-12-31 19:39:55 +01:00
toolbar .toolbarbutton-1:not([open]),
.titlebar-button,
#tabbrowser-tabs toolbarbutton{
2018-12-31 19:39:55 +01:00
background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill) 0,var(--lwt-toolbarbutton-icon-fill) 10%,transparent 15% );
}
2018-12-30 13:26:26 +01:00
/* Hide placeholder on hover */
toolbar:hover + toolbar .toolbarbutton-1,
vbox:hover + toolbar .toolbarbutton-1,
toolbar:hover .toolbarbutton-1,
#tabbrowser-tabs:hover toolbarbutton,
.titlebar-buttonbox:hover > .titlebar-button{ background-image: none }
2018-12-30 13:26:26 +01:00
2018-12-31 19:39:55 +01:00
toolbar .toolbarbutton-1 > *,
.titlebar-button > *,
#tabbrowser-tabs toolbarbutton > *{
2018-12-30 13:26:26 +01:00
transform: scale(0);
transition: transform 82ms linear !important;
}
toolbar:hover + toolbar .toolbarbutton-1 > *,
vbox:hover + toolbar .toolbarbutton-1 > *,
2018-12-30 13:26:26 +01:00
toolbar:hover .toolbarbutton-1 > *,
2018-12-31 19:39:55 +01:00
.toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *,
#tabbrowser-tabs:hover toolbarbutton > *{
2018-12-30 13:26:26 +01:00
transform: scale(1)
}
/* Urlbar icons, this way they show colors is applicable */
.urlbar-icon{ transition: transform 82ms linear !important; }
#urlbar:not(:hover) .urlbar-icon:not([open]){ transform: scale(0.3) }
2018-12-31 19:39:55 +01: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 */
#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }
/* Add a glow-effect to menu-button when it has some "alert" */
#nav-bar:not(:hover) > #PanelUI-button > #PanelUI-menu-button[badge-status]{ 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"]{ filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 0 cyan) }