From 6c3f2db5f4e09f6759728858688815cedfcf554c Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Wed, 1 May 2019 07:54:44 +0300 Subject: [PATCH] reduce transitions by fixing the state when previous sibling is hovered --- chrome/minimal_toolbarbuttons.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/chrome/minimal_toolbarbuttons.css b/chrome/minimal_toolbarbuttons.css index 54c91dd..236d2c9 100644 --- a/chrome/minimal_toolbarbuttons.css +++ b/chrome/minimal_toolbarbuttons.css @@ -2,27 +2,38 @@ /* Create a placeholder for buttons */ toolbar .toolbarbutton-1:not([open]), -.titlebar-button{ +.titlebar-button, +#tabbrowser-tabs toolbarbutton{ background-image: radial-gradient(circle at center, var(--lwt-toolbarbutton-icon-fill) 0,var(--lwt-toolbarbutton-icon-fill) 10%,transparent 15% ); } /* Hide placeholder on hover */ -toolbar:hover .toolbarbutton-1,.titlebar-buttonbox:hover > .titlebar-button{ background-image: none } +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 } + toolbar .toolbarbutton-1 > *, -.titlebar-button > *{ +.titlebar-button > *, +#tabbrowser-tabs toolbarbutton > *{ transform: scale(0); transition: transform 82ms linear !important; } + +toolbar:hover + toolbar .toolbarbutton-1 > *, +vbox:hover + toolbar .toolbarbutton-1 > *, toolbar:hover .toolbarbutton-1 > *, .toolbarbutton-1[open] > *, -.titlebar-buttonbox:hover > .titlebar-button > *{ +.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{ transform: scale(0.3) } +#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; } \ No newline at end of file +#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }