reduce transitions by fixing the state when previous sibling is hovered

This commit is contained in:
MrOtherGuy 2019-05-01 07:54:44 +03:00
parent 344b068c4f
commit 6c3f2db5f4

View file

@ -2,27 +2,38 @@
/* Create a placeholder for buttons */ /* Create a placeholder for buttons */
toolbar .toolbarbutton-1:not([open]), 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% ); 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 */ /* 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 > *, toolbar .toolbarbutton-1 > *,
.titlebar-button > *{ .titlebar-button > *,
#tabbrowser-tabs toolbarbutton > *{
transform: scale(0); transform: scale(0);
transition: transform 82ms linear !important; transition: transform 82ms linear !important;
} }
toolbar:hover + toolbar .toolbarbutton-1 > *,
vbox:hover + toolbar .toolbarbutton-1 > *,
toolbar:hover .toolbarbutton-1 > *, toolbar:hover .toolbarbutton-1 > *,
.toolbarbutton-1[open] > *, .toolbarbutton-1[open] > *,
.titlebar-buttonbox:hover > .titlebar-button > *{ .titlebar-buttonbox:hover > .titlebar-button > *,
#tabbrowser-tabs:hover toolbarbutton > *{
transform: scale(1) transform: scale(1)
} }
/* 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{ 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 */ /* 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 */ /* Lets remove that as well as border since this is minimal style anyway */
#PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; } #PanelUI-button{ border-left: 0px !important; margin-left: 0px !important; }