github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-28 14:08:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #3665 from riking/dark-theme-fix

Browse Source 
Dark theme fixes, part 1
This commit is contained in:
Robin Ward 2015-08-18 16:24:52 -04:00
commit 6001371d17
9 changed files with 61 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -129,16 +129,16 @@ td.flaggers td {
}
.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;
@include clearfix;
.nav.nav-pills {
li.active {
a {
border-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: lighten($primary, 40%);
border-color: dark-light-diff($primary, $secondary, 90%, -90%);
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
&:hover {
background-color: lighten($primary, 40%);
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
}
}
}
@ -1113,7 +1113,7 @@ table.api-keys {
.content-list {
h3 {
color: dark-light-diff($primary, $secondary, 50%, -60%);
color: dark-light-diff($primary, $secondary, 50%, -20%);
font-size: 1.071em;
padding-left: 5px;
margin-bottom: 10px;

14
app/assets/stylesheets/common/base/code_highlighting.scss
View File

@ -7,7 +7,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs {
display: block;
padding: 0.5em;
color: #333;
color: dark-light-choose(#333, #f8f8f8);
}
.hljs-comment,
@ -26,7 +26,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
color: dark-light-choose(#333, #f8f8f8);
font-weight: bold;
}
@ -40,7 +40,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: #d14;
color: dark-light-choose(#d14, #f66);
}
.hljs-title,
@ -70,14 +70,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
color: dark-light-choose(#000080, #99f);
font-weight: normal;
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080;
color: dark-light-choose(#008080, #0ee);
}
.hljs-regexp {
@ -132,8 +132,8 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
p > code, li > code, pre > code {
color: #333;
background: #f8f8f8;
color: dark-light-choose(#333, #f8f8f8);
background: dark-light-choose(#f8f8f8, #333);
}
// removed some unnecessary styles here

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

@ -32,8 +32,8 @@ small {
blockquote {
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
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%, -65%);
overflow: hidden;
clear: both;
}

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

@ -13,8 +13,8 @@ a.loading-onebox {
.onebox-result {
margin-top: 15px;
padding: 12px 25px 12px 12px;
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
background: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
font-size: 1em;
> .source {
margin-bottom: 12px;
@ -90,8 +90,8 @@ a.loading-onebox {
aside.onebox {
padding: 12px 25px 12px 12px;
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
background: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
font-size: 1em;
header {
@ -148,8 +148,8 @@ aside.onebox .onebox-body .onebox-avatar {
blockquote {
aside.onebox {
background: dark-light-diff($primary, $secondary, 97%, -45%);
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%, -65%);
}
}

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

@ -50,8 +50,8 @@ aside.quote {
.badge-wrapper { margin-left: 5px; }
.title {
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -75%);
background-color: dark-light-diff($primary, $secondary, 97%, -65%);
color: scale-color($primary, $lightness: 30%);
// IE will screw up the blockquote underneath if bottom padding is 0px
padding: 12px 12px 1px 12px;
@ -113,8 +113,8 @@ aside.quote {
.quote-button {
display: none;
position: absolute;
background-color: scale-color($primary, $lightness: 50%);
color: $secondary;
background-color: dark-light-diff($primary, $secondary, 50%, -50%);
color: dark-light-choose($secondary, $primary);
padding: 10px;
z-index: 401;
@ -124,7 +124,7 @@ aside.quote {
}
&:hover {
background-color: scale-color($primary, $lightness: 40%);
background-color: dark-light-diff($primary, $secondary, 40%, -40%);
cursor: pointer;
}
}

4
app/assets/stylesheets/common/components/badges.css.scss
View File

@ -244,9 +244,9 @@
// New posts
&.new-posts, &.unread-posts {
background-color: scale-color($tertiary, $lightness: 50%);
background-color: dark-light-choose(scale-color($tertiary, $lightness: 50%), scale-color($tertiary, $lightness: 20%));
color: $secondary;
font-weight: normal;
font-weight: dark-light-choose(normal, bold);
}
&.new-topic {

5
app/assets/stylesheets/common/components/buttons.css.scss
View File

@ -73,9 +73,8 @@
.btn-primary {
border: none;
color: $secondary;
font-weight: normal;
color: #fff;
color: dark-light-choose(#fff, scale-color($primary, $lightness: 60%));
background: $tertiary;
&[href] {
@ -83,7 +82,7 @@
}
&:hover {
color: #fff;
background: scale-color($tertiary, $lightness: -20%);
background: dark-light-choose(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -20%));
}
&:active {
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));

7
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -42,3 +42,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
@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;
}
}

51
app/assets/stylesheets/desktop/user-card.scss
View File

@ -1,4 +1,5 @@
// styles that apply to the "share" popup when sharing a link to a post or topic
// Colors should mostly be absolute here, it will look the same in dark & light themes
#user-card {
position: absolute;
@ -6,20 +7,19 @@
left: -9999px;
top: -9999px;
z-index: 990;
box-shadow: 0 2px 6px rgba(0,0,0,.6);
box-shadow: 0 2px 12px rgba($primary, .6);
margin-top: -2px;
background-color: $primary;
color: $secondary;
color: #ffffff;
background-size: cover;
background-position: center center;
background: #222222 center center;
min-height: 175px;
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s;
opacity: 0;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
-webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s;
&.show {
opacity: 1;
-webkit-transform: scale(1);
@ -29,7 +29,7 @@
.card-content {
padding: 12px 12px 0 12px;
background: rgba($primary, .85);
background: rgba(#222222, .85);
margin-top: 80px;
&:after {
@ -55,7 +55,6 @@
}
h1 {
display: inline-block;
min-width: 120px;
font-size: 1.786em;
line-height: 1.25;
@ -65,11 +64,11 @@
overflow: hidden;
text-overflow: ellipsis;
a {
color: $secondary;
color: #fff;
}
i {
font-size: .8em;
color: $secondary;
color: #fff;
}
}
@ -83,7 +82,7 @@
overflow: hidden;
text-overflow: ellipsis;
a {
color: $secondary;
color: #fff;
}
}
@ -91,11 +90,11 @@
font-size: 0.929em;
font-weight: normal;
margin-top: 0;
color: dark-light-diff($secondary, $primary, 25%, -25%);
color: scale-color(#fff, $lightness: 25%);
overflow: hidden;
text-overflow: ellipsis;
a {
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: scale-color(#222, $lightness: 50%);
}
}
@ -103,10 +102,10 @@
font-size: 0.929em;
font-weight: normal;
margin-top: 0;
color: $primary;
color: #222;
.group-link {
color: $primary;
color: #222;
}
}
@ -118,11 +117,11 @@
display: inline;
margin-right: 5px;
.desc, a {
color: dark-light-diff($secondary, $primary, 50%, -50%);
color: scale-color(#fff, $lightness: 50%);
}
}
div {display: inline; color: scale-color($primary, $lightness: 50%);
.group-link {color: scale-color($primary, $lightness: 50%);}
div {display: inline; color: scale-color(#222, $lightness: 50%);
.group-link {color: scale-color(#222, $lightness: 50%);}
}
}
@ -140,7 +139,7 @@
clear: left;
a {
color: $secondary;
color: #fff;
text-decoration: underline;
}
img {
@ -148,7 +147,7 @@
}
a.mention {
background-color: dark-light-diff($secondary, $primary, 50%, -60%);
background-color: scale-color(#fff, $lightness: 50%);
}
.overflow {
max-height: 60px;
@ -180,7 +179,7 @@
}
.new-user a {
color: scale-color($primary, $lightness: 70%);
color: scale-color(#222, $lightness: 70%);
}
&.show-badges {
@ -210,12 +209,12 @@
.user-badge {
background: transparent;
color: dark-light-diff($primary, $secondary, 50%, -50%);
border-color: dark-light-diff($primary, $secondary, 50%, -50%);
color: scale-color(#222, $lightness: 50%);
border-color: scale-color(#222, $lightness: 50%);
}
h3 {
color: $primary;
color: #222;
font-size: 1em;
margin-bottom: -8px;
}
@ -242,6 +241,6 @@
right: 12px;
bottom: 12px;
font-size: 2.143em;
i {color: $secondary;}
i {color: #fff;}
}
}