github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-20 17:33:00 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: highlight vars updates (#20346)

Browse Source 
* UX: replace highlight vars in popup menu

* UX: replace highlight vars in autcomplete

* UX: replace highlight vars in menu-panel

* UX: update style guide

* UX: bulk replace highlight vars in various small appearances
This commit is contained in:
chapoi 2023-02-21 16:15:49 +07:00 committed by GitHub
parent 452539bf5b
commit 87de3c2319
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 43 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -226,7 +226,7 @@ $mobile-breakpoint: 700px;
border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em;
&.overridden {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
h3 {
font-weight: normal;

6
app/assets/stylesheets/common/admin/admin_report.scss
View File

@ -121,11 +121,11 @@
.average-chart {
padding: 0.5em;
border: 1px solid var(--highlight-high);
color: var(--highlight-high);
border: 1px solid var(--highlight);
color: var(--highlight);
margin-bottom: 1em;
text-align: center;
background: var(--highlight-low);
background: var(--highlight-bg);
}
.filters {

4
app/assets/stylesheets/common/admin/customize.scss
View File

@ -65,7 +65,7 @@
}
.field-warning {
background-color: var(--highlight-low);
background-color: var(--highlight-bg);
}
.admin-container {
@ -886,7 +886,7 @@ table.permalinks {
.robots-txt-edit {
div.overridden {
background: var(--highlight-medium);
background: var(--highlight-bg);
padding: 7px;
margin-bottom: 7px;
}

6
app/assets/stylesheets/common/admin/settings.scss
View File

@ -110,7 +110,7 @@
}
.setting.overridden {
input {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
h3 {
position: relative;
@ -122,7 +122,7 @@
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background-color: var(--highlight-high);
background-color: var(--primary-low);
}
}
}
@ -130,7 +130,7 @@
input[type="text"],
input[type="password"],
textarea {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
}
.warning {

2
app/assets/stylesheets/common/base/alert.scss
View File

@ -24,7 +24,7 @@
color: var(--primary);
}
&.alert-warning {
background-color: var(--highlight-low);
background-color: var(--highlight-bg);
color: var(--primary);
}
&.alert-info {

4
app/assets/stylesheets/common/base/compose.scss
View File

@ -423,12 +423,12 @@ html.composer-open {
padding: 0.3em 1em;
@include hover {
background-color: var(--highlight-low);
background-color: var(--d-hover);
text-decoration: none;
}
&.selected {
background-color: var(--tertiary-low);
background-color: var(--d-selected);
.username,
.name,

2
app/assets/stylesheets/common/base/directory.scss
View File

@ -82,7 +82,7 @@
}
}
.me {
background-color: var(--highlight-low-or-medium);
background-color: var(--highlight-bg);
.username a,
.name a,
.title,

4
app/assets/stylesheets/common/base/header.scss
View File

@ -286,10 +286,6 @@
}
}
.highlight-strong {
background-color: var(--highlight-medium);
}
// topic info in the header
.extra-info-wrapper {
display: flex;

2
app/assets/stylesheets/common/base/history.scss
View File

@ -99,7 +99,7 @@
font-weight: bold;
}
span.edit-reason {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
padding: 3px 5px 5px 5px;
}
.d-icon-ban {

16
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -129,10 +129,10 @@
}
&.active {
background-color: var(--tertiary-low);
background-color: var(--d-selected);
}
&:hover {
background-color: var(--highlight-medium);
background-color: var(--d-hover);
}
}
}
@ -174,12 +174,12 @@
}
&:hover {
background-color: var(--highlight-medium);
background-color: var(--d-hover);
outline: none;
}
&:focus-within {
background: var(--highlight-medium);
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;
@ -283,7 +283,7 @@
color: var(--primary);
&:hover,
&:focus {
background-color: var(--highlight-medium);
background-color: var(--d-hover);
outline: none;
}
@ -401,7 +401,7 @@
}
li {
background-color: var(--tertiary-low);
background-color: var(--d-selected);
box-sizing: border-box;
list-style-type: none;
@ -444,12 +444,12 @@
}
&:hover {
background-color: var(--highlight-medium);
background-color: var(--d-hover);
outline: none;
}
&:focus-within {
background: var(--highlight-medium);
background: var(--d-hover);
a {
// we don't need the link focus because we're styling the parent
outline: 0;

2
app/assets/stylesheets/common/base/modal.scss
View File

@ -221,7 +221,7 @@
display: block;
&:hover,
&:focus {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
.search-category {
display: flex;

2
app/assets/stylesheets/common/base/new-user.scss
View File

@ -173,7 +173,7 @@
.discourse-no-touch & {
&:hover {
background: var(--highlight-medium);
background: var(--highlight-bg);
color: currentColor;
}
}

4
app/assets/stylesheets/common/base/onebox.scss
View File

@ -406,7 +406,7 @@ pre.onebox code ol.lines li {
}
pre.onebox code li.selected {
background-color: var(--highlight-low-or-medium);
background-color: var(--highlight-bg);
}
pre.onebox code {
@ -921,7 +921,7 @@ iframe.vimeo-onebox {
.video-container {
.notice {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
padding: 10px 20px;
position: absolute;
width: calc(100% - 40px);

2
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -35,7 +35,7 @@
&:focus,
&:hover {
color: var(--primary);
background: var(--tertiary-low);
background: var(--d-hover);
.d-icon {
color: var(--primary-medium);

2
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -344,7 +344,7 @@ $search-pad-horizontal: 0.5em;
// and the focus/hover styles from the header in those cases wouldn't follow
&:focus,
&:hover {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
.topic {

3
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -206,14 +206,13 @@
// add staff color
.moderator {
.regular > .cooked {
//background-color: var(--highlight-low-or-medium);
background-color: var(--highlight-bg);
}
.clearfix > .topic-meta-data > .names {
span.user-title {
color: var(--primary-high-or-secondary-low);
a {
background-color: var(--highlight-low-or-medium);
background-color: var(--highlight-bg);
padding-left: 4px;
padding-right: 4px;
}

2
app/assets/stylesheets/common/base/topic.scss
View File

@ -364,7 +364,7 @@ a.badge-category {
justify-content: space-between;
padding: 0.5em;
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
margin-top: 1em;
max-width: 757px;
}

2
app/assets/stylesheets/common/components/tap-tile.scss
View File

@ -20,7 +20,7 @@
}
&.active {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
.d-icon {

4
app/assets/stylesheets/common/components/user-stream-item.scss
View File

@ -13,7 +13,7 @@
list-style: none;
&.moderator-action {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
&.deleted {
@ -78,7 +78,7 @@
}
.edit-reason {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
padding: 3px 5px 5px 5px;
}

2
app/assets/stylesheets/desktop/compose.scss
View File

@ -91,7 +91,7 @@
z-index: z("composer", "dropdown") + 1;
padding: 1.5em;
box-shadow: shadow("dropdown");
background: var(--highlight-medium);
background: var(--highlight-bg);
&.urgent {
background: var(--danger-low);

2
app/assets/stylesheets/desktop/topic.scss
View File

@ -101,7 +101,7 @@
}
#topic-filter {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
padding: 8px;
bottom: 0;
position: fixed;

2
app/assets/stylesheets/embed.scss
View File

@ -84,7 +84,7 @@ article.post {
color: var(--primary-high);
}
a.staff {
background-color: var(--highlight-low);
background-color: var(--highlight-bg);
}
a.new-user {

2
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -332,7 +332,7 @@ pre.codeblock-buttons code {
}
span.highlighted {
background-color: var(--highlight-low);
background-color: var(--highlight-bg);
}
.topic-avatar {

6
plugins/chat/assets/stylesheets/common/chat-message.scss
View File

@ -67,7 +67,7 @@
}
&.chat-action {
background-color: var(--highlight-medium);
background-color: var(--highlight-bg);
}
&.errored {
@ -253,7 +253,7 @@
}
.chat-message.chat-message-bookmarked {
background: var(--highlight-low);
background: var(--highlight-bg);
}
.not-mobile-device & .chat-message-reaction-list .chat-message-react-btn {
@ -290,7 +290,7 @@
}
.chat-message.chat-message-bookmarked {
background: var(--highlight-low);
background: var(--highlight-bg);
}
.has-full-page-chat .chat-message .onebox:not(img),

4
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/03-colors.hbs
View File

@ -74,10 +74,8 @@
<StyleguideExample @title="highlight">
<section class="color-row">
<ColorExample @color="highlight-low" />
<ColorExample @color="highlight-medium" />
<ColorExample @color="highlight-bg" />
<ColorExample @color="highlight" />
<ColorExample @color="highlight-high" />
</section>
</StyleguideExample>

10
plugins/styleguide/assets/stylesheets/colors.scss
View File

@ -107,14 +107,8 @@
.quaternary {
background-color: var(--quaternary);
}
.highlight-low {
background-color: var(--highlight-low);
}
.highlight-medium {
background-color: var(--highlight-medium);
}
.highlight-high {
background-color: var(--highlight-high);
.highlight-bg {
background-color: var(--highlight-bg);
}
.highlight {
background-color: var(--highlight);