diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css index 31e102308..de71dbbb4 100644 --- a/app/assets/stylesheets/bar.css +++ b/app/assets/stylesheets/bar.css @@ -12,15 +12,19 @@ padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom)); place-content: center; position: fixed; - transition: padding-inline 350ms cubic-bezier(0.25, 1.25, 0.5, 1); z-index: var(--z-terminal); @media (prefers-color-scheme: dark) { border-block: 1px solid var(--color-ink-lighter); } + } - &:has(.bar__placeholder[hidden]) { - padding-inline: calc((100dvw - 60ch) / 2); + .bar__input { + transform: translateX(50%); + transition: transform 350ms cubic-bezier(0.25, 1.25, 0.5, 1); + + .bar:has(.bar__placeholder[hidden]) & { + transform: translateX(0); } } diff --git a/app/assets/stylesheets/conversation.css b/app/assets/stylesheets/conversation.css index b9a027a1f..0856d6d37 100644 --- a/app/assets/stylesheets/conversation.css +++ b/app/assets/stylesheets/conversation.css @@ -8,11 +8,14 @@ position: absolute; } - .conversation__composer-input { + .conversation__composer-input.input { --focus-ring-size: 0; + --input-border-color: var(--color-ink-light); --input-border-radius: 0; - --input-border-size: 0; - --input-padding: 0 0.5em; + --input-padding: 0.1em; + + border-width: 0 0 1px; + max-inline-size: 40ch; } .conversation__message { diff --git a/app/assets/stylesheets/search.css b/app/assets/stylesheets/search.css index 6ae4c0052..3f857822e 100644 --- a/app/assets/stylesheets/search.css +++ b/app/assets/stylesheets/search.css @@ -17,10 +17,15 @@ /* ------------------------------------------------------------------------ */ .search__form-input { + --clear-icon-size: 1em; --focus-ring-size: 0; + --input-border-color: var(--color-ink-light); --input-border-radius: 0; - --input-border-size: 0; - --input-padding: 0 0.5em; + --input-padding: 0.1em; + + border-width: 0 0 1px; + max-inline-size: 40ch; + &::-webkit-search-cancel-button { --clear-icon-size: 0.75rem; diff --git a/app/views/bar/_bar.html.erb b/app/views/bar/_bar.html.erb index f76e44ea4..87c133be6 100644 --- a/app/views/bar/_bar.html.erb +++ b/app/views/bar/_bar.html.erb @@ -28,11 +28,11 @@ <% end %> -