diff --git a/src/app.css b/src/app.css index 7834b5e2..bc3fef3e 100644 --- a/src/app.css +++ b/src/app.css @@ -946,8 +946,8 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { position: absolute; left: 0; font-size: 10px; - color: var(--carousel-color); - padding: 8px; + color: var(--text-insignificant-color); + padding: 6px; } .ui-state { @@ -966,9 +966,17 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) { animation: appear 0.2s ease-out; border: 1px solid var(--outline-color); background-color: var(--bg-blur-color); - border-radius: 8px; + border-radius: 16px; overflow: hidden; box-shadow: 0 1px var(--bg-color); + + &:has(.status-badge:not(:empty)) { + border-top-right-radius: 8px; + } + + .status-carousel.boosts-carousel & { + border-top-left-radius: 8px; + } } .status-carousel-link::focus { background-color: var(--link-bg-hover-color); diff --git a/src/components/status.css b/src/components/status.css index 08a635f8..0b24de15 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -684,6 +684,24 @@ /* min-height: 0 !important; */ max-height: none !important; } +.status-carousel .status .media-container { + margin-inline: -16px; + max-width: calc(100% + 16px + 16px) !important; + + figure figcaption { + padding-inline: 16px !important; + } + + &:not(.media-figure-multiple .media-container) { + margin-bottom: -16px; + } + + .media { + --media-radius: 0; + --media-radius-inner: 0; + box-sizing: border-box; + } +} .status:not(.large):not(.status-carousel .status) .media-container.media-eq1:has([data-orientation='portrait']) { width: 85%; @@ -708,6 +726,7 @@ overflow: hidden; min-height: 80px; border: var(--media-border-width) solid var(--outline-color); + vertical-align: top; } .status .media-container:not(.media-eq1) .media { aspect-ratio: auto !important;