diff --git a/src/zen/common/styles/zen-animations.css b/src/zen/common/styles/zen-animations.css index 8e5aaee3e..7784ef08f 100644 --- a/src/zen/common/styles/zen-animations.css +++ b/src/zen/common/styles/zen-animations.css @@ -37,6 +37,18 @@ } @keyframes zen-dialog-fade-in { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes zen-dialog-fade-in-shifted { from { opacity: 0; transform: translateY(calc(-10% - 10px)); diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index 5f196729a..395a97c2b 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -43,7 +43,7 @@ } /* stylelint-disable-next-line media-query-no-invalid */ - @media (not -moz-pref("zen.view.shift-down-site-on-hover")) { + @media (not -moz-pref("zen.view.shift-down-site-on-hover")) and -moz-pref("zen.view.hide-window-controls") { .browserSidebarContainer:is(.deck-selected, [zen-split="true"]) .browserContainer { transition: margin var(--zen-hidden-toolbar-transition); @@ -60,7 +60,7 @@ } /* stylelint-disable-next-line media-query-no-invalid */ - @media -moz-pref("zen.view.experimental-no-window-controls") or (not -moz-pref("zen.view.hide-window-controls")) or (not -moz-pref("browser.tabs.inTitlebar")) { + @media -moz-pref("zen.view.experimental-no-window-controls") or (not -moz-pref("browser.tabs.inTitlebar")) { :root:not([zen-has-bookmarks="true"])[zen-single-toolbar="true"] & { --margin-top-fix: 0px; } diff --git a/src/zen/common/styles/zen-panels/dialog.css b/src/zen/common/styles/zen-panels/dialog.css index dbec0aae1..b5979bb4c 100644 --- a/src/zen/common/styles/zen-panels/dialog.css +++ b/src/zen/common/styles/zen-panels/dialog.css @@ -10,8 +10,14 @@ box-shadow: 0 10px 8px rgba(0, 0 , 0, 0.15) !important; outline-offset: -1.5px; - &:not([sizeto="available"]) { + @media not (prefers-reduced-motion: reduce) { animation: zen-dialog-fade-in 0.3s ease-out; + } + + .content-prompt-dialog & { + @media not (prefers-reduced-motion: reduce) { + animation: zen-dialog-fade-in-shifted 0.3s ease-out; + } transform: translateY(-10%); } }