DEV: common CSS property for content backgrounds (#23467)
This commit is contained in:
parent
7bcf934765
commit
22747e26fd
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
|
||||
.directory {
|
||||
margin-bottom: 100px;
|
||||
background: var(--d-content-background);
|
||||
|
||||
&.users-directory {
|
||||
.directory-group-selector {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -4,6 +4,10 @@
|
|||
|
||||
@use "sass:math";
|
||||
|
||||
.container.group {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.group-details-container {
|
||||
background: var(--primary-very-low);
|
||||
padding: 20px;
|
||||
|
|
|
@ -28,6 +28,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.container.groups-index {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.groups-boxes {
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
// Page not found styles
|
||||
|
||||
.not-found-container {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.page-not-found {
|
||||
margin: 0 0 40px 0;
|
||||
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
.reviewable {
|
||||
background: var(--d-content-background);
|
||||
|
||||
.flagged-post-header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
}
|
||||
|
||||
.search-container {
|
||||
background: var(--d-content-background);
|
||||
|
||||
.search-header {
|
||||
@include search-page-spacing();
|
||||
background: var(--primary-very-low);
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
.container.tags-index {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.topic-title-outlet.choose-tags {
|
||||
margin-left: 25px;
|
||||
margin-top: 3px;
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
#main-outlet > .regular {
|
||||
background: var(--d-content-background);
|
||||
}
|
||||
|
||||
.button-count.has-pending {
|
||||
span {
|
||||
background-color: var(--danger);
|
||||
|
|
|
@ -330,6 +330,7 @@ a.badge-category {
|
|||
}
|
||||
|
||||
.private_message {
|
||||
background: var(--d-content-background);
|
||||
#topic-title {
|
||||
.edit-topic-title {
|
||||
position: relative;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -78,6 +78,8 @@
|
|||
}
|
||||
|
||||
.user-main {
|
||||
background: var(--d-content-background);
|
||||
|
||||
.about {
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -168,7 +168,7 @@
|
|||
}
|
||||
|
||||
.chat-message-container {
|
||||
background-color: var(--secondary);
|
||||
background-color: var(--d-content-background, var(--secondary));
|
||||
|
||||
&.-errored {
|
||||
color: var(--primary-medium);
|
||||
|
|
Loading…
Reference in New Issue