jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

forum: change style of new/approved/pending/rejected labels.

Browse Source 
Change the new, approved, pending, and rejected labels in the forum to
use an outlined pill style (like user levels in user tooltips) instead
of a filled background style. This is less obtrusive and more readable
in dark mode.
This commit is contained in:
evazion
2021-02-22 03:43:47 -06:00
parent bc9e2faa9e
commit 7b1815ad8e
4 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/src/styles/base/040_colors.css
View File

@@ -161,7 +161,7 @@ html {
--forum-vote-down-color: var(--red-5);
--forum-topic-status-new-color: var(--red-4);
--forum-topic-status-pending-color: var(--azure-5);
--forum-topic-status-pending-color: var(--blue-5);
--forum-topic-status-approved-color: var(--green-4);
--forum-topic-status-rejected-color: var(--red-4);
@@ -368,10 +368,10 @@ body[data-current-user-theme="dark"] {
--forum-vote-meh-color: var(--yellow-2);
--forum-vote-down-color: var(--red-4);
--forum-topic-status-new-color: var(--red-4);
--forum-topic-status-pending-color: var(--blue-4);
--forum-topic-status-approved-color: var(--green-4);
--forum-topic-status-rejected-color: var(--red-4);
--forum-topic-status-new-color: var(--red-3);
--forum-topic-status-pending-color: var(--azure-3);
--forum-topic-status-approved-color: var(--green-3);
--forum-topic-status-rejected-color: var(--red-3);
--moderation-report-text-color: var(--red-4);
--moderation-report-background-color: var(--red-9);

32
app/javascript/src/styles/specific/forum.scss
View File

@@ -8,37 +8,49 @@ div#c-forum-topics {
white-space: nowrap;
}
.topic-status {
a.topic-status {
margin-right: 0.25em;
vertical-align: bottom;
&.label {
display: inline-block;
font-size: 0.7em;
text-transform: uppercase;
border-radius: 3px;
padding: 4px;
color: white;
border: 1px solid;
border-radius: 0.25rem;
background-color: var(--body-background-color);
padding: 0.125rem 0.25rem;
&:hover {
color: var(--inverse-text-color);
}
}
&.icon {
color: var(--muted-text-color);
font-size: 1em;
}
&.new {
background-color: var(--forum-topic-status-new-color);
color: var(--forum-topic-status-new-color);
border-color: var(--forum-topic-status-new-color);
&:hover { background-color: var(--forum-topic-status-new-color); }
}
&.pending {
background-color: var(--forum-topic-status-pending-color);
color: var(--forum-topic-status-pending-color);
border-color: var(--forum-topic-status-pending-color);
&:hover { background-color: var(--forum-topic-status-pending-color); }
}
&.approved {
background-color: var(--forum-topic-status-approved-color);
color: var(--forum-topic-status-approved-color);
border-color: var(--forum-topic-status-approved-color);
&:hover { background-color: var(--forum-topic-status-approved-color); }
}
&.rejected {
background-color: var(--forum-topic-status-rejected-color);
color: var(--forum-topic-status-rejected-color);
border-color: var(--forum-topic-status-rejected-color);
&:hover { background-color: var(--forum-topic-status-rejected-color); }
}
}