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

css: factor out colors from main css (#4158).

Browse Source
This commit is contained in:
evazion
2019-09-17 00:28:41 -05:00
parent d203a543d0
commit c325bfa199
52 changed files with 519 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/src/styles/common/autocomplete.scss
View File

@@ -1,14 +1,12 @@
@import "../base/000_vars.scss";
.ui-autocomplete {
font-size: 0.9em;
.ui-state-active {
border: none;
margin: 0 -1px;
background-color: #F0F0F0;
border-left: 1px solid #C5C5C5;
border-right: 1px solid #C5C5C5;
background-color: var(--autocomplete-background-color);
border-left: 1px solid var(--autocomplete-border-color);
border-right: 1px solid var(--autocomplete-border-color);
}
.ui-menu-item-wrapper {

2
app/javascript/src/styles/common/blacklists.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
#blacklist-box {
display: none;
margin-bottom: 1em;

16
app/javascript/src/styles/common/diffs.scss
View File

@@ -1,43 +1,43 @@
.diff-list {
.added, .added a {
color: green;
color: var(--diff-list-added-color);
text-decoration: none;
margin-right: 0.5em;
}
.added.obsolete, .added.obsolete a {
color: darkGreen;
color: var(--diff-list-obsolete-added-color);
}
.removed, .removed a {
color: red;
color: var(--dif-list-removed-color);
text-decoration: line-through;
margin-right: 0.5em;
}
.removed.obsolete, .removed.obsolete a {
color: darkRed;
color: var(--diff-list-obsolete-removed-color);
}
}
.diff-list {
ins, ins a {
color: green;
color: var(--diff-list-added-color);
text-decoration: none;
margin-right: 0.5em;
}
del, del a {
color: red;
color: var(--diff-list-removed-color);
text-decoration: line-through;
margin-right: 0.5em;
}
ins.obsolete, ins.obsolete a {
color: darkGreen;
color: var(--diff-list-obsolete-added-color);
}
del.obsolete, del.obsolete a {
color: darkRed;
color: var(--diff-list-obsolete-removed-color);
}
}

15
app/javascript/src/styles/common/dtext.scss
View File

@@ -55,18 +55,25 @@ div.prose {
font-size: 1.2em;
margin: 0.5em 0;
padding: 0.5em 1em;
background: #EEE;
background: var(--dtext-code-background-color);
white-space: pre-wrap;
}
blockquote {
margin-bottom: 1em;
padding: 1em 1em 0.2em;
border: var(--dtext-blockquote-border);
background: var(--dtext-blockquote-background);
}
code {
font-family: monospace;
background: #EEE;
background: var(--dtext-code-background);
}
div.expandable {
margin-bottom: 1em;
border: 1px inset #666;
border: var(--dtext-expand-border);
}
div.expandable-header {
@@ -81,7 +88,7 @@ div.prose {
div.expandable-content {
display: none;
padding: 0.4em;
border-top: 1px solid #666;
border-top: 1px solid var(--dtext-expand-border-color);
> :last-child {
margin-bottom: 0;

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

@@ -1,26 +1,24 @@
@import "../base/000_vars.scss";
span.error {
display: block;
font-weight: bold;
color: red;
color: var(--error-color);
}
span.link {
color: $link_color;
color: var(--link-color);
cursor: pointer;
}
span.count {
color: #CCC;
color: var(--tag-count-color);
margin-left: 0.5em;
}
kbd.key {
background: #333;
border: 1px solid #333;
background: var(--keyboard-shortcut-background-color);
border: 1px solid var(--keyboard-shortcut-background-color);
padding: 1px 6px;
color: white;
color: var(--keyboard-shortcut-color);
/* width: 1em;*/
text-align: center;
display: inline-block;
@@ -28,9 +26,9 @@ kbd.key {
}
span.inactive {
color: #AAA;
color: var(--inactive-color);
}
td a.last-page {
color: #666;
color: var(--last-page-link-color);
}

32
app/javascript/src/styles/common/jquery_ui_custom.scss
View File

@@ -9,11 +9,11 @@
}
.ui-widget-content a {
color: $link_color;
color: var(--link-color);
}
.ui-widget-content a:hover {
color: $link_hover_color;
color: var(--link-hover-color);
}
div.ui-dialog {
@@ -21,7 +21,7 @@ div.ui-dialog {
overflow: visible;
font-size: 1em;
z-index: 999 !important;
box-shadow: 2px 2px 1px grey;
box-shadow: var(--jquery-ui-dialog-box-shadow);
padding: 0;
.ui-dialog-titlebar {
@@ -36,33 +36,29 @@ div.ui-dialog {
}
.ui-state-highlight {
border: 1px solid #FCEEC1;
background: #FDF5D9;
color: #363636;
border: var(--jquery-ui-state-highlight-border);
background: var(--jquery-ui-state-highlight-background);
color: var(--jquery-ui-state-highlight-color);
a, a:active, a:visited {
color: $link_color;
color: var(--link-color);
}
a:hover {
color: $link_hover_color;
color: var(--link-hover-color);
}
}
.ui-state-error {
border: 1px solid #FBC7C6;
background: #FDDFDE;
border: var(--jquery-ui-state-error-border);
background: var(--jquery-ui-state-error-background);
}
.ui-button {
margin: 0;
padding: 0.25em 1em;
background-color: #f6f6f6;
border-top: 1px solid silver;
border-left: 1px solid silver;
border-bottom: 1px solid darkgrey;
border-right: 1px solid darkgrey;
background: linear-gradient(#f6f6f6, #e5e5e5);
border: var(--jquery-ui-button-border);
background: var(--jquery-ui-button-background);
&.sub {
font-size: 90%;
@@ -75,8 +71,8 @@ div.ui-dialog {
}
.ui-button:hover {
box-shadow: 1px 1px grey;
background: linear-gradient(#fefefe, #f0f0f0);
box-shadow: var(--jquery-ui-button-hover-box-shadow);
background: var(--jquery-ui-button-hover-background);
}
.ui-front {

14
app/javascript/src/styles/common/main_layout.scss
View File

@@ -6,12 +6,12 @@ div#search {
div#search-box button {
-webkit-appearance: button;
border: 1px solid $link_color;
background-color: $link_color;
color: #FFF;
border: 1px solid var(--link-color);
background-color: var(--link-color);
color: var(--search-box-button-color);
&:hover, &:focus {
border: 1px solid $link_hover_color;
background-color: $link_hover_color;
border: 1px solid var(--link-hover-color);
background-color: var(--link-hover-color);
}
}
@@ -55,7 +55,7 @@ div#page {
button[type=submit] {
padding: 2px 6px;
background: #EEE;
background: var(--sidebar-submit-button-color);
}
#search-box button[type=submit] {
@@ -84,7 +84,7 @@ footer#page-footer {
margin-top: 1em;
text-align: center;
padding: 1em 0 1em;
border-top: 1px solid #EEE;
border-top: var(--footer-border);
}
div.clearfix {

4
app/javascript/src/styles/common/news.scss
View File

@@ -1,7 +1,7 @@
div#news-updates {
padding: 5px;
background: #EEE;
border-bottom: 2px solid #666;
background: var(--news-updates-background);
border-bottom: var(--news-updates-border);
overflow: hidden;
font-size: 0.8em;

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

@@ -4,7 +4,7 @@ div.error-messages {
h1 {
font-size: 1em;
color: #A00;
color: var(--error-message-color);
}
}
@@ -17,8 +17,8 @@ div#notice {
z-index: 100;
&:not(.ui-state-error) {
background-color: #FFFBBF;
border: 1px solid #CCC999;
background: var(--notice-background);
border: var(--notice-border);
}
}

8
app/javascript/src/styles/common/page_header.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
#maintoggle {
display: none;
}
@@ -12,7 +10,7 @@ header#top {
menu {
margin-top: -2px;
background: $menu_color;
background: var(--subnav-menu-background-color);
padding: 6px 20px;
form {
@@ -39,13 +37,13 @@ header#top {
background: none;
li.current a {
background: $menu_color;
background: var(--subnav-menu-background-color);
font-weight: bold;
}
li#nav-sign-in a {
font-weight: bold;
color: #e00;
color: var(--sign-in-link-color);
}
li.forum-updated a {

12
app/javascript/src/styles/common/paginator.scss
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div.paginator {
display: block;
padding: 2em 0 1em 0;
@@ -13,17 +11,17 @@ div.paginator {
}
&.more {
color: grey;
color: var(--paginator-ellipsis-color);
}
a.arrow:hover {
background: white;
color: $link_color;
background: var(--paginator-arrow-background-color);
color: var(--paginator-arrow-color);
}
a:hover {
background: $link_color;
color: white;
background: var(--paginator-arrow-color);
color: var(--paginator-arrow-background-color);
}
span {

18
app/javascript/src/styles/common/spoiler.scss
View File

@@ -1,16 +1,8 @@
.spoiler {
color: black;
background: black;
.spoiler, .spoiler a {
color: var(--dtext-spoiler-color);
background: var(--dtext-spoiler-background-color);
}
.spoiler a {
color: black;
}
.spoiler:hover {
color: white;
}
.spoiler:hover a{
color: white;
.spoiler:hover, .spoiler:hover a {
color: var(--dtext-spoiler-hover-color);
}

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

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
table.striped {
td, th {
padding: 4px 6px;
@@ -7,10 +5,10 @@ table.striped {
tbody {
tr {
border-bottom: 1px solid #CCC;
border-bottom: var(--table-row-border);
&:hover {
background-color: $highlight_color;
background: var(--table-row-hover-background);
}
}
}
@@ -21,18 +19,18 @@ table.striped {
thead {
tr {
border-bottom: 2px solid #666;
border-bottom: var(--table-header-border);
}
th {
font-weight: bold;
text-align: left;
color: #333;
color: var(--table-header-text-color);
}
}
tr:nth-child(even) {
background-color: #FAFAFA;
background: var(--table-even-row-background);
}
}

6
app/javascript/src/styles/common/tags.scss.erb
View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
<% TagCategory.css_mapping.each do |category,cssmap| %>
.category-<%= category %> a,
a.tag-type-<%= category %>,
@@ -16,7 +14,7 @@
}
&.selected {
color: white;
color: var(--selected-tag-color);
}
}
@@ -32,7 +30,7 @@
}
&.selected {
color: white;
color: var(--selected-tag-color);
}
}
<% end %>

16
app/javascript/src/styles/common/user_styles.scss
View File

@@ -1,27 +1,23 @@
a.user-admin.with-style {
color: red;
color: var(--user-admin-color);
}
a.user-moderator.with-style {
color: orange;
}
a.user-contributor.with-style {
color: purple;
color: var(--user-moderator-color);
}
a.user-builder.with-style {
color: #6633FF;
color: var(--user-builder-color);
}
a.user-platinum.with-style {
color: gray;
color: var(--user-platinum-color);
}
a.user-gold.with-style {
color: #0000FF;
color: var(--user-gold-color);
}
a.user-member.with-style {
color: auto;
color: var(--user-member-color);
}