diff --git a/app/assets/stylesheets/components/_buku_x3_status.scss b/app/assets/stylesheets/components/_buku_x3_status.scss index 5e51608dd..8cbf70d9f 100644 --- a/app/assets/stylesheets/components/_buku_x3_status.scss +++ b/app/assets/stylesheets/components/_buku_x3_status.scss @@ -149,19 +149,6 @@ transform: translateY(-100%); } - &__deadline { - // Mirror the label just below the rope. - position: absolute; - left: calc(var(--character-width) * 0.93); - right: calc(var(--character-width) * 0.93); - top: calc(var(--character-width) * 0.619 + var(--space-s)); - z-index: 1; - margin: 0; - font-size: var(--font-size-s); - font-style: italic; - text-align: center; - } - &__tug { --character-width: clamp(64px, 24cqi, 160px); diff --git a/app/assets/stylesheets/components/_top_banner.scss b/app/assets/stylesheets/components/_top_banner.scss index 24646a2a4..db5605b10 100644 --- a/app/assets/stylesheets/components/_top_banner.scss +++ b/app/assets/stylesheets/components/_top_banner.scss @@ -18,6 +18,47 @@ border-bottom: 2px solid #92400e; } +.top-banner--announcement { + position: relative; + padding-inline: 2.5rem; + text-align: center; + background: var(--color-brand-yellow); + color: var(--color-set-1-bg); + text-shadow: none; + + .top-banner__text { + margin: 0; + } +} + +.top-banner__dismiss { + position: absolute; + top: 50%; + right: 0.5rem; + display: grid; + place-items: center; + width: 1.75rem; + height: 1.75rem; + padding: 0; + border: 0; + border-radius: 4px; + background: transparent; + color: inherit; + font-size: 1.25rem; + line-height: 1; + cursor: pointer; + transform: translateY(-50%); + + &:hover { + background: rgba(0, 0, 0, 0.1); + } + + &:focus-visible { + outline: 2px solid currentColor; + outline-offset: 1px; + } +} + .top-banner--impersonation { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-bottom: 3px solid #991b1b; diff --git a/app/components/buku_x3_status_component.html.erb b/app/components/buku_x3_status_component.html.erb index 83da5a1f6..a02b8df15 100644 --- a/app/components/buku_x3_status_component.html.erb +++ b/app/components/buku_x3_status_component.html.erb @@ -40,7 +40,6 @@ beans <%= display_hours(:bean) %> h shipped -
stardance ends october 31st!
<% end %> diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f97b7fe75..93fa6db2d 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -89,6 +89,14 @@ <% end %>