DEV: common CSS property for content backgrounds (#23467)

This commit is contained in:
Kris 2023-09-08 12:07:04 -04:00 committed by GitHub
parent 7bcf934765
commit 22747e26fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 105 additions and 54 deletions

View File

@ -4,7 +4,7 @@
<PluginOutlet @name="before-groups-index-container" @connectorTagName="div" />
<DSection @pageClass="groups">
<DSection @pageClass="groups" @class="container groups-index">
<div class="groups-header">
{{#if this.currentUser.can_create_group}}
<DButton

View File

@ -2,59 +2,63 @@
<DiscourseBanner @user={{this.currentUser}} @banner={{this.site.banner}} />
</div>
<div class="list-controls">
<div class="container tags-controls">
{{#if this.canAdminTags}}
<TagsAdminDropdown @actionsMapping={{this.actionsMapping}} />
{{/if}}
<h2>{{i18n "tagging.tags"}}</h2>
<div class="container tags-index">
<div class="list-controls">
<div class="container tags-controls">
{{#if this.canAdminTags}}
<TagsAdminDropdown @actionsMapping={{this.actionsMapping}} />
{{/if}}
<h2>{{i18n "tagging.tags"}}</h2>
</div>
</div>
</div>
<div>
<PluginOutlet
@name="tags-below-title"
@connectorTagName="div"
@outletArgs={{hash model=this.model}}
/>
</div>
<div class="tag-sort-options">
{{i18n "tagging.sort_by"}}
<span class="tag-sort-count {{if this.sortedByCount 'active'}}"><a
href
{{on "click" this.sortByCount}}
>{{i18n "tagging.sort_by_count"}}</a></span>
<span class="tag-sort-name {{if this.sortedByName 'active'}}"><a
href
{{on "click" this.sortById}}
>{{i18n "tagging.sort_by_name"}}</a></span>
</div>
<hr />
<div class="all-tag-lists">
{{#each this.model.extras.categories as |category|}}
<TagList
@tags={{category.tags}}
@sortProperties={{this.sortProperties}}
@categoryId={{category.id}}
<div>
<PluginOutlet
@name="tags-below-title"
@connectorTagName="div"
@outletArgs={{hash model=this.model}}
/>
{{/each}}
</div>
{{#each this.model.extras.tag_groups as |tagGroup|}}
<TagList
@tags={{tagGroup.tags}}
@sortProperties={{this.sortProperties}}
@tagGroupName={{tagGroup.name}}
/>
{{/each}}
<div class="tag-sort-options">
{{i18n "tagging.sort_by"}}
<span class="tag-sort-count {{if this.sortedByCount 'active'}}"><a
href
{{on "click" this.sortByCount}}
>{{i18n "tagging.sort_by_count"}}</a></span>
<span class="tag-sort-name {{if this.sortedByName 'active'}}"><a
href
{{on "click" this.sortById}}
>{{i18n "tagging.sort_by_name"}}</a></span>
</div>
<hr />
<div class="all-tag-lists">
{{#each this.model.extras.categories as |category|}}
<TagList
@tags={{category.tags}}
@sortProperties={{this.sortProperties}}
@categoryId={{category.id}}
/>
{{/each}}
{{#each this.model.extras.tag_groups as |tagGroup|}}
<TagList
@tags={{tagGroup.tags}}
@sortProperties={{this.sortProperties}}
@tagGroupName={{tagGroup.name}}
/>
{{/each}}
{{#if this.model}}
<TagList
@tags={{this.model}}
@sortProperties={{this.sortProperties}}
@titleKey={{this.otherTagsTitleKey}}
/>
{{/if}}
</div>
{{#if this.model}}
<TagList
@tags={{this.model}}
@sortProperties={{this.sortProperties}}
@titleKey={{this.otherTagsTitleKey}}
/>
{{/if}}
</div>

View File

@ -10,6 +10,7 @@ $mobile-breakpoint: 700px;
width: 100%;
overflow: hidden;
height: 100%;
background: var(--d-content-background);
@include breakpoint(tablet) {
width: calc(100% + 10px);

View File

@ -1,6 +1,8 @@
// Topic list navigation & controls
.list-controls {
background: var(--d-content-background);
a.badge-category {
padding: 3px 12px;
font-size: var(--font-up-1);
@ -115,6 +117,10 @@
margin-bottom: 1.5em;
}
#header-list-area {
background: var(--d-content-background);
}
// Topic list body
.topic-list-item.visited .topic-list-data,
@ -369,6 +375,7 @@
}
#list-area {
background: var(--d-content-background);
margin-bottom: 100px;
.empty-topic-list {

View File

@ -5,6 +5,7 @@
.directory {
margin-bottom: 100px;
background: var(--d-content-background);
&.users-directory {
.directory-group-selector {

View File

@ -2,6 +2,7 @@
/* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
width: 100%;
max-width: 700px;
background: var(--d-content-background);
.about-page & {
max-width: unset;
section:not(.admins):not(.moderators):not(.category-moderators) {

View File

@ -4,6 +4,10 @@
@use "sass:math";
.container.group {
background: var(--d-content-background);
}
.group-details-container {
background: var(--primary-very-low);
padding: 20px;

View File

@ -28,6 +28,10 @@
}
}
.container.groups-index {
background: var(--d-content-background);
}
.groups-boxes {
display: grid;
grid-gap: 1em;

View File

@ -1,5 +1,9 @@
// Page not found styles
.not-found-container {
background: var(--d-content-background);
}
.page-not-found {
margin: 0 0 40px 0;

View File

@ -1,4 +1,6 @@
.reviewable {
background: var(--d-content-background);
.flagged-post-header {
width: 100%;
display: flex;

View File

@ -11,6 +11,8 @@
}
.search-container {
background: var(--d-content-background);
.search-header {
@include search-page-spacing();
background: var(--primary-very-low);

View File

@ -1,3 +1,7 @@
.container.tags-index {
background: var(--d-content-background);
}
.topic-title-outlet.choose-tags {
margin-left: 25px;
margin-top: 3px;

View File

@ -1,3 +1,7 @@
#main-outlet > .regular {
background: var(--d-content-background);
}
.button-count.has-pending {
span {
background-color: var(--danger);

View File

@ -330,6 +330,7 @@ a.badge-category {
}
.private_message {
background: var(--d-content-background);
#topic-title {
.edit-topic-title {
position: relative;

View File

@ -1,4 +1,8 @@
/* Default badge styles. */
.show-badge {
background: var(--d-content-background);
}
.user-badge {
padding: 3px 8px;
color: var(--primary);
@ -231,6 +235,10 @@
}
}
.container.badges {
background: var(--d-content-background);
}
.badge-groups {
margin: 20px 0;
color: var(--primary-med-or-secondary-med);

View File

@ -78,6 +78,8 @@
}
.user-main {
background: var(--d-content-background);
.about {
width: 100%;
margin-bottom: 0;

View File

@ -7,7 +7,7 @@
// selectors below are its children
.item,
.user-stream-item {
background-color: var(--secondary);
background: var(--d-content-background, var(--secondary));
border-bottom: 1px solid var(--primary-low);
padding: 1em 0.53em;
list-style: none;

View File

@ -11,6 +11,7 @@
--d-nav-pill-border-radius: var(--d-border-radius);
--d-button-border-radius: var(--d-border-radius);
--d-input-border-radius: var(--d-border-radius);
--d-content-background: initial;
}
// --------------------------------------------------

View File

@ -92,7 +92,7 @@
margin-top: 2em;
padding-bottom: 12px;
margin-bottom: 12px;
background-color: var(--secondary);
background: var(--d-content-background, var(--secondary));
box-sizing: border-box;
.btn.right {

View File

@ -195,6 +195,7 @@ body.has-full-page-chat {
.full-page-chat {
display: grid;
grid-template-columns: var(--full-page-sidebar-width) 1fr;
background: var(--d-content-background);
.chat-full-page-header {
border-top: 1px solid var(--primary-low);

View File

@ -168,7 +168,7 @@
}
.chat-message-container {
background-color: var(--secondary);
background-color: var(--d-content-background, var(--secondary));
&.-errored {
color: var(--primary-medium);