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

css: standardize body text colors.

Browse Source 
* Standardize on one shade of grey for all grey text.
* Use very dark grey instead of black for body text.
This commit is contained in:
evazion
2019-09-17 00:28:41 -05:00
parent 9c96557be8
commit 7461372e07
8 changed files with 30 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/src/styles/base/020_base.scss
View File

@@ -1,6 +1,7 @@
@import "../base/000_vars.scss";
body {
color: var(--text-color);
background-color: var(--body-background-color);
font-family: $base_font_family;
font-size: 87.5%;
@@ -81,7 +82,7 @@ table tfoot {
}
.fineprint {
color: var(--fineprint-color);
color: var(--muted-text-color);
font-style: italic;
font-size: 0.8em;
}

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

@@ -1,14 +1,23 @@
:root {
--very-light-grey: hsl(0, 0%, 95%);
--light-grey: hsl(0, 0%, 90%);
--grey: hsl(0, 0%, 55%);
--dark-grey: hsl(0, 0%, 40%);
--very-dark-grey: hsl(0, 0%, 15%);
}
:root {
--body-background-color: white;
--text-color: var(--very-dark-grey);
--muted-text-color: var(--grey);
--link-color: hsl(213, 100%, 50%);
--link-hover-color: hsl(213, 100%, 75%);
--fineprint-color: #888;
--error-background-color: hsl(0, 100%, 95%); // light red
--success-background-color: hsl(120, 100%, 95%); // light green
--warning-background-color: hsl(50, 100%, 95%); // light yellow
--error-background-color: hsl(0, 100%, 95%); /* light red */
--success-background-color: hsl(120, 100%, 95%); /* light green */
--warning-background-color: hsl(50, 100%, 95%); /* light yellow */
--subnav-menu-background-color: #F5F5FF;
@@ -22,7 +31,6 @@
--user-upgrade-table-row-hover-background-color: #FEF;
--table-header-border: 2px solid #666;
--table-header-text-color: #333;
--table-row-border: 1px solid #CCC;
--table-row-hover-background: hsl(213, 100%, 95%);
--table-even-row-background: #FAFAFA;
@@ -46,9 +54,7 @@
--uploads-dropzone-progress-bar-background-color: var(--link-hover-color);
--forum-new-topic-color: red;
--forum-locked-topic-color: gray;
--forum-level-restricted-topic-color: #F66;
--forum-deleted-topic-color: gray;
--forum-vote-up-color: green;
--forum-vote-meh-color: goldrenrod;
--forum-vote-down-color: red;
@@ -72,7 +78,7 @@
--autocomplete-selected-background-color: var(--subnav-menu-background-color);
--autocomplete-border: 1px solid #CCC;
--autocomplete-arrow-color: black;
--autocomplete-arrow-color: var(--text-color);
--diff-list-added-color: green;
--diff-list-removed-color: red;
@@ -96,7 +102,6 @@
--post-artist-commentary-container-background: #F8F8F8;
--post-artist-commentary-container-border: 1px solid #CCC;
--post-artist-commentary-disabled-color: gray;
--note-body-background: #FFE;
--note-body-border: 1px solid black;
@@ -107,7 +112,7 @@
--note-preview-border: 1px solid red;
--note-preview-background: white;
--note-highlight-color: blue;
--note-tn-color: gray;
--note-tn-color: var(--muted-text-color);
--series-pool-color: #A0A;
--series-pool-hover-color: #B6B;
@@ -115,10 +120,7 @@
--collection-pool-color: var(--general-tag-color);
--collection-pool-hover-color: var(--general-tag-hover-color);
--profile-page-header-color: #333;
--settings-page-active-tab-color: black;
--fetch-source-data-border-color: #666;
--fetch-source-data-border: 1px solid #666;
--post-mode-menu-view-background: white;
--post-mode-menu-edit-background: #5C5;
@@ -133,7 +135,7 @@
--post-mode-menu-translation-background: #5CD;
--post-mode-menu-ban-background: #F33;
--tag-count-color: #CCC;
--tag-count-color: var(--muted-text-color);
--low-post-count-color: red;
--tag-count-indicator-frown-color: red;
@@ -145,12 +147,6 @@
--ugoira-seek-slider-background: #EEE;
--ugoira-seek-slider-progressbar-background: white;
// used for "(deleted)" messages
--inactive-color: #AAA;
// used for "page N" links in /forum_topics and /pools
--last-page-link-color: #666;
--keyboard-shortcut-color: white;
--keyboard-shortcut-background-color: #333;

6
app/javascript/src/styles/common/inline.scss
View File

@@ -25,10 +25,12 @@ kbd.key {
border-radius: 3px;
}
/* used for "(deleted)" messages */
span.inactive {
color: var(--inactive-color);
color: var(--muted-text-color);
}
/* used for "page N" links in /forum_topics and /pools */
td a.last-page {
color: var(--last-page-link-color);
color: var(--muted-text-color);
}

1
app/javascript/src/styles/common/tables.scss
View File

@@ -25,7 +25,6 @@ table.striped {
th {
font-weight: bold;
text-align: left;
color: var(--table-header-text-color);
}
}

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

@@ -64,7 +64,7 @@ div#c-forum-topics {
}
span.locked-topic {
color: var(--forum-locked-topic-color);
color: var(--muted-text-color);
}
span.level-topic {
@@ -81,7 +81,7 @@ div#c-forum-topics {
tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
tr[data-is-deleted="true"] .forum-post-excerpt::after {
content: " (deleted)";
color: var(--forum-deleted-topic-color);
color: var(--muted-text-color);
}
}

6
app/javascript/src/styles/specific/posts.scss
View File

@@ -395,10 +395,6 @@ div#c-posts {
max-height: 20em;
overflow-y: auto;
}
.disabled {
color: var(--post-artist-commentary-disabled-color);
}
}
}
@@ -425,7 +421,7 @@ div#c-posts, div#c-uploads {
border-radius: 4px;
margin: 1em 0;
padding: 1em;
border: 1px solid var(--fetch-source-data-border-color);
border: var(--fetch-source-data-border);
&:not(.loading) #source-info-loading { display: none; }
&.loading #source-info-content { display: none; }

6
app/javascript/src/styles/specific/users.scss
View File

@@ -1,10 +1,6 @@
div#c-users {
div#a-show {
div.box {
h2, h3 {
color: var(--profile-page-header-color);
}
margin-bottom: 2em;
}
@@ -55,7 +51,7 @@ div#c-users {
}
.active {
color: var(--settings-page-active-tab-color);
color: var(--text-color);
}
}

4
app/views/artist_commentaries/_show.html.erb
View File

@@ -26,14 +26,14 @@
<% if artist_commentary.translated_title.present? %>
<%= artist_commentary.translated_title %>
<% else %>
<span class="disabled"><%= artist_commentary.original_title %></span>
<span class="inactive"><%= artist_commentary.original_title %></span>
<% end %>
</h3>
<div class="prose">
<% if artist_commentary.translated_description.present? %>
<%= format_text(artist_commentary.translated_description, :disable_mentions => true) %>
<% else %>
<span class="disabled"><%= format_text(artist_commentary.original_description, :disable_mentions => true) %></span>
<span class="inactive"><%= format_text(artist_commentary.original_description, :disable_mentions => true) %></span>
<% end %>
</div>
</section>