diff --git a/app/assets/javascripts/discourse/templates/selected-posts.hbs b/app/assets/javascripts/discourse/templates/selected-posts.hbs index 87bb29fe5df..781b2282769 100644 --- a/app/assets/javascripts/discourse/templates/selected-posts.hbs +++ b/app/assets/javascripts/discourse/templates/selected-posts.hbs @@ -9,7 +9,7 @@ {{/if}} {{#if canDeleteSelected}} - {{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete"}} + {{d-button action="deleteSelected" icon="trash-o" label="topic.multi_select.delete" class="btn-danger"}} {{/if}} {{#if canSplitTopic}} diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss index 3ddd5bbb599..c8cf624aff2 100644 --- a/app/assets/stylesheets/common/base/topic-admin-menu.scss +++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss @@ -88,3 +88,39 @@ margin: 0 10px; } } + +// Select posts + +.selected-posts { + border: 1px solid $tertiary-medium; + background-color: $tertiary-low; + .btn { + border: none; + color: $secondary; + font-weight: normal; + margin-bottom: 10px; + &:not(.btn-danger) { + background: $tertiary; + border-color: $tertiary; + &[href] { + color: $secondary; + } + &:hover { + color: $secondary; + background: $tertiary-high; + } + &:active { + @include linear-gradient( + darken($tertiary, 18%), + darken($tertiary, 12%) + ); + color: $secondary; + } + } + &[disabled] { + text-shadow: 0 1px 0 rgba($primary, 0.2); + @include linear-gradient($tertiary, darken($tertiary, 20%)); + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33); + } + } +} diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss index 72f67b03aed..187388115e4 100644 --- a/app/assets/stylesheets/common/base/topic-post.scss +++ b/app/assets/stylesheets/common/base/topic-post.scss @@ -709,6 +709,43 @@ a.mention-group { } } +// Select posts + +.topic-post { + &.selected { + article.boxed { + .select-posts { + button.select-post { + background-color: $tertiary; + color: $secondary; + border-color: $tertiary; + } + } + .topic-body { + .contents:after { + display: none; + } + } + } + } + article.boxed { + position: relative; + .select-posts { + position: absolute; + right: 5em; + z-index: z("base") + 1; + top: 0.5em; + height: 100px; + button { + margin-left: 8px; + background-color: $primary-low; + color: $primary; + box-shadow: shadow("dropdown"); + } + } + } +} + @media all and (max-width: 767px) { .reply-to-tab { span { diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss index b52b9580f6a..dfdc70fd04f 100644 --- a/app/assets/stylesheets/desktop/topic-post.scss +++ b/app/assets/stylesheets/desktop/topic-post.scss @@ -780,9 +780,8 @@ $topic-avatar-width: 45px; width: 200px; position: fixed; z-index: z("dropdown"); - background-color: $tertiary-low; - border: 1px solid $tertiary; - padding: 5px; + box-shadow: shadow("card"); + padding: 0.714em; margin-bottom: 5px; right: 10px; @include breakpoint(extra-large, min-width) { @@ -791,7 +790,7 @@ $topic-avatar-width: 45px; left: 50%; } button { - width: 180px; + width: 100%; margin: 4px auto; display: inline-block; text-align: left; @@ -817,63 +816,6 @@ $topic-avatar-width: 45px; margin-right: 7px; } } - .btn { - border: none; - color: $secondary; - font-weight: normal; - margin-bottom: 10px; - background: $tertiary-medium; - &[href] { - color: $secondary; - } - &:hover { - color: $secondary; - background: $tertiary-high; - } - &:active { - @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%)); - color: $secondary; - } - &[disabled] { - text-shadow: 0 1px 0 rgba($primary, 0.2); - @include linear-gradient($tertiary, darken($tertiary, 20%)); - box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.33); - } - } -} - -.topic-post { - &.selected { - article.boxed { - .select-posts { - button.select-post { - background-color: $tertiary-medium; - color: $secondary; - } - } - .topic-body { - .contents:after { - display: none; - } - } - } - } - article.boxed { - position: relative; - .select-posts { - position: absolute; - right: 0; - z-index: z("base") + 1; - top: 3em; - height: 100px; - button { - margin-left: 8px; - background-color: dark-light-choose($primary-low-mid, $secondary-high); - border: 1px solid dark-light-choose($primary-medium, $secondary-high); - color: $primary; - } - } - } } a.attachment:before { diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss index 39667290835..620325161aa 100644 --- a/app/assets/stylesheets/mobile/topic-post.scss +++ b/app/assets/stylesheets/mobile/topic-post.scss @@ -363,18 +363,7 @@ iframe { } .selected-posts { - width: 97%; padding: 0.1em 0.7em; - background-color: srgb-scale($tertiary, $secondary, 15%); - .btn { - margin-bottom: 10px; - color: $secondary; - background: $tertiary; - clear: both; - } - p { - clear: both; - } } // hide the full set of selection buttons on mobile @@ -385,18 +374,6 @@ iframe { // unhide the simple "select just this post" button button.select-post { display: inline-block; - position: absolute; - z-index: z("base") + 1; - left: 200px; - background-color: srgb-scale($tertiary, $secondary, 60%); - color: $secondary; - padding: 5px; -} - -.post-select { - float: right; - margin-right: 20px; - margin-top: -20px; } .deleted {