diff --git a/scss/box-view.scss b/scss/box-view.scss index 70c2ff2..bbb2b33 100644 --- a/scss/box-view.scss +++ b/scss/box-view.scss @@ -32,19 +32,19 @@ } .experimental-screen { - @include breakpoint(tablet) { - display: none; - } max-width: unset !important; - @media screen and (max-width: 488px) { - display: none; - } width: 100%; display: block; margin: 0; padding: 0; position: relative; container: content-width / inline-size; + @media screen and (max-width: 488px) { + display: none; + } + @include breakpoint(tablet) { + display: none; + } li { list-style: none; margin: 0; @@ -59,6 +59,12 @@ height: var(--d-border-radius-large); background-color: var(--background-color); z-index: 399; + mask: radial-gradient( + circle at var(--d-border-radius-large) var(--d-border-radius-large), + transparent var(--d-border-radius-large), + transparent var(--d-border-radius-large), + black var(--d-border-radius-large) + ); -webkit-mask: radial-gradient( circle at var(--d-border-radius-large) var(--d-border-radius-large), transparent var(--d-border-radius-large), diff --git a/scss/desktop-horizon-fixes.scss b/scss/desktop-horizon-fixes.scss index a8ab039..2766860 100644 --- a/scss/desktop-horizon-fixes.scss +++ b/scss/desktop-horizon-fixes.scss @@ -51,13 +51,12 @@ .bulk-select-topics { position: absolute; right: -1em; - @media screen and (max-width: 1048px) { - right: 0; - } - background: var(--secondary); border-radius: 0 0 0 var(--d-border-radius); padding: 1em; + @media screen and (max-width: 1048px) { + right: 0; + } button { white-space: nowrap; } diff --git a/scss/main.scss b/scss/main.scss index 50b0a27..e6932f6 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -65,6 +65,11 @@ body:not(.has-full-page-chat) { width: 100%; max-width: unset; padding-bottom: var(--spacing-block-l); + border-radius: var(--d-border-radius-large); + background-color: var(--d-content-background); + @include breakpoint(medium) { + border-radius: 0px; + } html.composer-open & { padding-bottom: var(--composer-height); } @@ -76,11 +81,6 @@ body:not(.has-full-page-chat) { padding-inline: var(--spacing-inline-l); } } - border-radius: var(--d-border-radius-large); - @include breakpoint(medium) { - border-radius: 0px; - } - background-color: var(--d-content-background); } } } diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 94100df..3762246 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -174,14 +174,6 @@ position: relative; } .topic-status-card { - @include breakpoint("large", min-width) { - position: absolute; - right: 0px; - top: -20px; - background-color: var(--d-content-background); - height: 20px; - font-size: var(--font-down-3); - } height: min-content; margin-left: auto; display: flex; @@ -195,6 +187,14 @@ border: 1px solid var(--status-color); color: var(--status-color); width: min-content; + @include breakpoint("large", min-width) { + position: absolute; + right: 0px; + top: -20px; + background-color: var(--d-content-background); + height: 20px; + font-size: var(--font-down-3); + } svg { font-size: var(--font-down-1); color: var(--status-color); @@ -384,9 +384,6 @@ //card with excerpt (all in horizon since the toggle is gone) &.excerpt-expanded { grid-template-columns: 20px min-content auto minmax(0, 100px); - @include breakpoint(extra-large, $rule: min-width) { - grid-template-columns: 20px min-content auto min-content; - } grid-template-areas: ". . . dropdown" "avatar update metadata metadata" @@ -399,6 +396,10 @@ max-width: 100%; } + @include breakpoint(extra-large, $rule: min-width) { + grid-template-columns: 20px min-content auto min-content; + } + @include breakpoint(mobile-extra-large) { grid-template-columns: auto min-content; grid-template-areas: @@ -599,6 +600,9 @@ body.user-messages-page { // Bulk select .bulk-select-enabled .topic-list-body .topic-list-item { + grid-template-areas: + "bulk-select . . . status" + "bulk-select activity activity . category"; td.topic-likes-replies-data { display: none; } @@ -622,9 +626,6 @@ body.user-messages-page { "bulk-select activity activity . . ."; } } - grid-template-areas: - "bulk-select . . . status" - "bulk-select activity activity . category"; .bulk-select { grid-area: bulk-select; padding: 0; diff --git a/scss/topic.scss b/scss/topic.scss index 14616c0..588ef02 100644 --- a/scss/topic.scss +++ b/scss/topic.scss @@ -45,8 +45,6 @@ //should probably get rid of this extra specificity class in core? .timeline-container.timeline-fullscreen { @include breakpoint("medium", $rule: max-width) { - .topic-timeline .timeline-scrollarea-wrapper { - } .topic-timeline .timeline-scrollarea .timeline-scroller