diff --git a/app/assets/stylesheets/fizzy-menu.css b/app/assets/stylesheets/boxcar-menu.css similarity index 87% rename from app/assets/stylesheets/fizzy-menu.css rename to app/assets/stylesheets/boxcar-menu.css index 1d768e9d6..e60a56bb9 100644 --- a/app/assets/stylesheets/fizzy-menu.css +++ b/app/assets/stylesheets/boxcar-menu.css @@ -6,12 +6,12 @@ img { block-size: auto; - inline-size: 1.15em; - margin-inline-end: 0.8ch; + inline-size: 1.15em; + margin-inline-end: 0.8ch; } } - .input:is(.fizzy-menu-trigger) { + .input:is(.boxcar-menu-trigger) { --input-background: var(--color-canvas); --input-border-color: transparent; --input-padding: 0.3em 2em 0.3em 0.75em; @@ -58,7 +58,7 @@ } } - .fizzy-menu:is(.panel) { + .boxcar-menu:is(.panel) { --panel-border-color: var(--color-selected-dark); --panel-border-radius: 1.4em; --panel-size: 45ch; @@ -71,15 +71,24 @@ flex-direction: column; gap: 2px; scrollbar-gutter: stable both-edges; + + /* Safari doesn't position the sticky footer properly during the + * transition, so we need to delay the footer entrance. */ + .popup__footer { + animation: safari-sticky-footer-hack 0s; + animation-delay: var(--dialog-duration); + animation-fill-mode: both; + inset-inline: var(--block-space); + } } - .fizzy-menu__close { + .boxcar-menu__close { @media (any-hover: hover) { display: none; } } - .fizzy-menu__hotkeys { + .boxcar-menu__hotkeys { --gap: 8px; align-items: center; diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index 41c6420b3..825414807 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -14,9 +14,39 @@ position: absolute; transform: translateX(-50%); z-index: var(--z-popup); + opacity: 0; + transform: scale(0.2) translateX(-50%); + transform-origin: top left; + transition: var(--dialog-duration) allow-discrete; + transition-property: display, opacity, overlay, transform; + + &::backdrop { + background-color: var(--color-always-black); + opacity: 0; + transform: scale(1); + transition: var(--dialog-duration) allow-discrete; + transition-property: display, opacity, overlay; + } &[open] { display: flex; + opacity: 1; + transform: scale(1) translateX(-50%); + + &::backdrop { + opacity: 0.5; + } + } + + @starting-style { + &[open] { + opacity: 0; + transform: scale(0.2) translateX(-50%); + } + + &[open]::backdrop { + opacity: 0; + } } &.orient-left { @@ -179,54 +209,6 @@ z-index: 1; } - /* Variants - /* ------------------------------------------------------------------------ */ - - .popup--animated { - opacity: 0; - transform: scale(0.2) translateX(-50%); - transform-origin: top left; - transition: var(--dialog-duration) allow-discrete; - transition-property: display, opacity, overlay, transform; - - &::backdrop { - background-color: var(--color-always-black); - opacity: 0; - transform: scale(1); - transition: var(--dialog-duration) allow-discrete; - transition-property: display, opacity, overlay; - } - - /* Safari doesn't position the sticky footer properly during the - * transition, so we need to delay the footer entrance. */ - .popup__footer { - animation: safari-sticky-footer-hack 0s; - animation-delay: var(--dialog-duration); - animation-fill-mode: both; - inset-inline: var(--block-space); - } - - &[open] { - opacity: 1; - transform: scale(1) translateX(-50%); - - &::backdrop { - opacity: 0.5; - } - } - - @starting-style { - &[open] { - opacity: 0; - transform: scale(0.2) translateX(-50%); - } - - &[open]::backdrop { - opacity: 0; - } - } - } - @keyframes safari-sticky-footer-hack { 0% { position: absolute; } 100% { position: sticky; } diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css index 8acbe1b84..d3f849805 100644 --- a/app/assets/stylesheets/print.css +++ b/app/assets/stylesheets/print.css @@ -35,8 +35,8 @@ print-color-adjust: exact; } - .fizzy-menu, - .fizzy-menu-trigger, + .boxcar-menu, + .boxcar-menu-trigger, .header__actions { display: none; } diff --git a/app/views/my/menus/_button.html.erb b/app/views/my/menus/_button.html.erb index f9682605f..589c69bf2 100644 --- a/app/views/my/menus/_button.html.erb +++ b/app/views/my/menus/_button.html.erb @@ -1,4 +1,4 @@ -<%= tag.button class:"fizzy-menu-trigger input input--select center flex-inline align-center txt-normal", +<%= tag.button class:"boxcar-menu-trigger input input--select center flex-inline align-center txt-normal", data: { action: "click->dialog#open:stop keydown.j@document->hotkey#click keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click", controller: "hotkey" } do %> diff --git a/app/views/my/menus/_hotkeys.html.erb b/app/views/my/menus/_hotkeys.html.erb index 4d991da9c..dba59159c 100644 --- a/app/views/my/menus/_hotkeys.html.erb +++ b/app/views/my/menus/_hotkeys.html.erb @@ -1,4 +1,4 @@ -