fix offset refresh button with Proton

This commit is contained in:
bmFtZQ 2021-05-08 19:18:38 +08:00 committed by GitHub
parent d1b2a37702
commit 217d667240
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -105,30 +105,37 @@ panel .toolbarbutton-badge:not(.feature-callout) {
padding-inline: 2px;
}
/* fix animation with the new Firefox icons (Firefox: 89 or higher) */
@keyframes reload-stop-animation {
from { transform: translateX(0); }
to { transform: translateX(-450px); }
}
#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-name: reload-stop-animation !important;
}
#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-timing-function: steps(25) !important;
animation-duration: 417ms !important;
}
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-timing-function: steps(25) !important;
animation-duration: 417ms !important;
}
#reload-button>.toolbarbutton-animatable-box,
#stop-button>.toolbarbutton-animatable-box,
#nav-bar-overflow-button>.toolbarbutton-animatable-box {
margin-inline-start: calc((16px + 2 * 12px - 18px) / 2) !important;
width: 18px !important;
}
@media (-moz-proton) {
/* fix animation with the new Firefox icons (Firefox: 89 or higher) */
@keyframes reload-stop-animation {
from { transform: translateX(0); }
to { transform: translateX(-450px); }
}
#stop-reload-button[animate] > #reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-name: reload-stop-animation !important;
}
#reload-button:not([displaystop]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-timing-function: steps(25) !important;
animation-duration: 417ms !important;
}
#reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
animation-timing-function: steps(25) !important;
animation-duration: 417ms !important;
}
:where(#reload-button, #stop-button) > .toolbarbutton-icon,
:where(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
translate: 0 !important;
}
}