diff --git a/chrome/minimal_toolbarbuttons_v3.css b/chrome/minimal_toolbarbuttons_v3.css new file mode 100644 index 0000000..958289b --- /dev/null +++ b/chrome/minimal_toolbarbuttons_v3.css @@ -0,0 +1,57 @@ +/* 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 */ +#urlbar-container:hover ~ .toolbarbutton-1:not([open]), +#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 ~ toolbaritem:not([open]) > .toolbarbutton-1, +toolbar .toolbarbutton-1:not([open]), +.titlebar-button, +#tabbrowser-tabs toolbarbutton{ + 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 */ +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 } + +#urlbar-container:hover ~ .toolbarbutton-1:not([open]) > *, +#urlbar-container:hover ~ #stop-reload-button > .toolbarbutton-1 > *, +#nav-bar > #nav-bar-customization-target:hover ~ toolbarbutton:not([open]) > *, + +toolbar .toolbarbutton-1 > *, +.titlebar-button > *, +#tabbrowser-tabs toolbarbutton > *{ + transform: scale(0); + transition: transform 82ms linear !important; +} + +toolbar:hover .toolbarbutton-1:not(#PanelUI-menu-button) > *, +#nav-bar-overflow-button:hover + #PanelUI-button > .toolbarbutton-1 > stack, +#PanelUI-menu-button:hover > stack, +#titlebar:hover ~ toolbar .toolbarbutton-1 > *, +.toolbarbutton-1[open] > *, +.titlebar-buttonbox:hover > .titlebar-button > *, +#tabbrowser-tabs:hover toolbarbutton > *{ + 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) } + +/* 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" */ +#PanelUI-button:not(:hover) > #PanelUI-menu-button[badge-status]{ filter: brightness(2) drop-shadow(0 0 3px orange) drop-shadow(0 0 1px orange) } + +#PanelUI-button:not(:hover) > #PanelUI-menu-button[badge-status^="update"]{ filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 0 cyan) }