mirror of
https://github.com/discourse/discourse.git
synced 2024-11-28 03:10:11 +08:00
FIX: Dark theme fixes for admin, quotes, code
This commit is contained in:
parent
3edf0e662f
commit
a4da72a83b
|
@ -129,16 +129,16 @@ td.flaggers td {
|
||||||
}
|
}
|
||||||
|
|
||||||
.admin-controls {
|
.admin-controls {
|
||||||
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
|
background-color: dark-light-diff($primary, $secondary, 90%, -65%);
|
||||||
padding: 10px 10px 3px 0;
|
padding: 10px 10px 3px 0;
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
.nav.nav-pills {
|
.nav.nav-pills {
|
||||||
li.active {
|
li.active {
|
||||||
a {
|
a {
|
||||||
border-color: dark-light-diff($primary, $secondary, 90%, -60%);
|
border-color: dark-light-diff($primary, $secondary, 90%, -90%);
|
||||||
background-color: lighten($primary, 40%);
|
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: lighten($primary, 40%);
|
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1113,7 +1113,7 @@ table.api-keys {
|
||||||
.content-list {
|
.content-list {
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
color: dark-light-diff($primary, $secondary, 50%, -60%);
|
color: dark-light-diff($primary, $secondary, 50%, -20%);
|
||||||
font-size: 1.071em;
|
font-size: 1.071em;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
|
@ -7,7 +7,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
.hljs {
|
.hljs {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
color: #333;
|
color: dark-light-choose(#333, #f8f8f8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-comment,
|
.hljs-comment,
|
||||||
|
@ -26,7 +26,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
.hljs-subst,
|
.hljs-subst,
|
||||||
.hljs-request,
|
.hljs-request,
|
||||||
.hljs-status {
|
.hljs-status {
|
||||||
color: #333;
|
color: dark-light-choose(#333, #f8f8f8);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
.hljs-tag .hljs-value,
|
.hljs-tag .hljs-value,
|
||||||
.hljs-phpdoc,
|
.hljs-phpdoc,
|
||||||
.tex .hljs-formula {
|
.tex .hljs-formula {
|
||||||
color: #d14;
|
color: dark-light-choose(#d14, #f66);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-title,
|
.hljs-title,
|
||||||
|
@ -70,14 +70,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
.hljs-tag .hljs-title,
|
.hljs-tag .hljs-title,
|
||||||
.hljs-rules .hljs-property,
|
.hljs-rules .hljs-property,
|
||||||
.django .hljs-tag .hljs-keyword {
|
.django .hljs-tag .hljs-keyword {
|
||||||
color: #000080;
|
color: dark-light-choose(#000080, #99f);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-attribute,
|
.hljs-attribute,
|
||||||
.hljs-variable,
|
.hljs-variable,
|
||||||
.lisp .hljs-body {
|
.lisp .hljs-body {
|
||||||
color: #008080;
|
color: dark-light-choose(#008080, #0ee);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hljs-regexp {
|
.hljs-regexp {
|
||||||
|
@ -132,8 +132,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||||
*/
|
*/
|
||||||
|
|
||||||
p > code, li > code, pre > code {
|
p > code, li > code, pre > code {
|
||||||
color: #333;
|
color: dark-light-choose(#333, #f8f8f8);
|
||||||
background: #f8f8f8;
|
background: dark-light-choose(#f8f8f8, #333);
|
||||||
}
|
}
|
||||||
|
|
||||||
// removed some unnecessary styles here
|
// removed some unnecessary styles here
|
||||||
|
|
|
@ -32,8 +32,8 @@ small {
|
||||||
|
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
|
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
|
||||||
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
|
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,8 +50,8 @@ aside.quote {
|
||||||
.badge-wrapper { margin-left: 5px; }
|
.badge-wrapper { margin-left: 5px; }
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
|
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
|
||||||
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
|
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
|
||||||
color: scale-color($primary, $lightness: 30%);
|
color: scale-color($primary, $lightness: 30%);
|
||||||
// IE will screw up the blockquote underneath if bottom padding is 0px
|
// IE will screw up the blockquote underneath if bottom padding is 0px
|
||||||
padding: 12px 12px 1px 12px;
|
padding: 12px 12px 1px 12px;
|
||||||
|
@ -113,8 +113,8 @@ aside.quote {
|
||||||
.quote-button {
|
.quote-button {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: scale-color($primary, $lightness: 50%);
|
background-color: dark-light-diff($primary, $secondary, 50%, -50%);
|
||||||
color: $secondary;
|
color: dark-light-choose($secondary, $primary);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
z-index: 401;
|
z-index: 401;
|
||||||
|
|
||||||
|
@ -124,7 +124,7 @@ aside.quote {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: scale-color($primary, $lightness: 40%);
|
background-color: dark-light-diff($primary, $secondary, 40%, -40%);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -73,17 +73,16 @@
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
border: none;
|
border: none;
|
||||||
color: $secondary;
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #fff;
|
color: dark-light-choose($primary, scale-color($primary, $lightness: 60%));
|
||||||
background: $tertiary;
|
background: dark-light-choose($tertiary, $tertiary);
|
||||||
|
|
||||||
&[href] {
|
&[href] {
|
||||||
color: $secondary;
|
color: $secondary;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: scale-color($tertiary, $lightness: -20%);
|
background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%));
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
|
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
|
||||||
|
|
|
@ -42,3 +42,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
|
||||||
@return scale-color($adjusted-color, $lightness: $darkness);
|
@return scale-color($adjusted-color, $lightness: $darkness);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@function dark-light-choose($light-theme-result, $dark-theme-result) {
|
||||||
|
@if brightness($primary) < brightness($secondary) {
|
||||||
|
@return $light-theme-result;
|
||||||
|
} @else {
|
||||||
|
@return $dark-theme-result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user