diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css index 73e446185..291d2ca47 100644 --- a/app/assets/stylesheets/events.css +++ b/app/assets/stylesheets/events.css @@ -220,14 +220,14 @@ .events__column-header { background-color: var(--color-canvas); grid-row-start: 1; - inset-block-start: calc(var(--block-space) * -1); - margin-block-end: var(--events-gap); - padding-block: calc(var(--events-gap) * 3) var(--events-gap); + inset-block-start: var(--custom-safe-inset-top); + margin-block: calc(var(--events-gap) * 2) var(--events-gap); + padding-block: var(--events-gap); position: sticky; z-index: var(--z-events-column-header); @media (max-width: 639px) { - margin-inline: calc(var(--main-padding) * -1); + margin-inline: calc(var(--main-padding) * -0.5); padding-inline: var(--main-padding); } } @@ -239,12 +239,16 @@ } .events__maximize-button { - inset: calc(var(--events-gap) * 3) 0 auto auto; + inset: 50% var(--events-gap) auto auto; outline-offset: -2px; position: absolute; - transform: translateY(-10%); + transform: translateY(-50%); z-index: 1; + @media (max-width: 639px) { + inset-inline-end: 0; + } + @media (any-hover: hover ) { opacity: 0; diff --git a/app/assets/stylesheets/ios.css b/app/assets/stylesheets/ios.css index 3a05e5956..6bd68634f 100644 --- a/app/assets/stylesheets/ios.css +++ b/app/assets/stylesheets/ios.css @@ -3,5 +3,15 @@ .hide-on-ios { display: none; } + + /* Events + /* ------------------------------------------------------------------------ */ + + .events__column-header { + -webkit-backdrop-filter: blur(16px); + backdrop-filter: blur(16px); + background-color: oklch(from var(--color-canvas) l c h / 0.5); + border-radius: 10em; + } } }