codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-28 01:56:01 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Dark theme fixes, part 2
This commit is contained in:
Sam 2015-08-19 08:15:47 +10:00
commit 08ce974b3a
8 changed files with 52 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/common/base/_topic-list.scss
View file

@ -16,8 +16,8 @@
} }
} }
html.anon .topic-list a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 45%);} html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
.topic-list a.title.visited:not(.badge-notification) {color: scale-color($primary, $lightness: 45%);} .topic-list a.title.visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
.topic-list { .topic-list {
width: 100%; width: 100%;

10
app/assets/stylesheets/common/base/code_highlighting.scss
View file

@ -14,7 +14,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-template_comment, .hljs-template_comment,
.diff .hljs-header, .diff .hljs-header,
.hljs-javadoc { .hljs-javadoc {
color: #998; color: dark-light-choose(#998, #bba);
font-style: italic; font-style: italic;
} }
@ -33,14 +33,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-number, .hljs-number,
.hljs-hexcolor, .hljs-hexcolor,
.ruby .hljs-constant { .ruby .hljs-constant {
color: #099; color: dark-light-choose(#099, #aff);
} }
.hljs-string, .hljs-string,
.hljs-tag .hljs-value, .hljs-tag .hljs-value,
.hljs-phpdoc, .hljs-phpdoc,
.tex .hljs-formula { .tex .hljs-formula {
color: dark-light-choose(#d14, #f66); color: dark-light-choose(#d14, #f99);
} }
.hljs-title, .hljs-title,
@ -62,7 +62,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.haskell .hljs-type, .haskell .hljs-type,
.vhdl .hljs-literal, .vhdl .hljs-literal,
.tex .hljs-command { .tex .hljs-command {
color: #458; color: dark-light-choose(#458, #9AE);
font-weight: bold; font-weight: bold;
} }
@ -89,7 +89,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.lisp .hljs-keyword, .lisp .hljs-keyword,
.tex .hljs-special, .tex .hljs-special,
.hljs-prompt { .hljs-prompt {
color: #990073; color: dark-light-choose(#990073, #fbe);
} }
.hljs-built_in, .hljs-built_in,

11
app/assets/stylesheets/common/base/combobox.scss
View file

@ -37,7 +37,12 @@
} }
} }
.select2-container-multi .select2-choices {
background-color: $secondary;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: $secondary url(/assets/select2-spinner.gif) no-repeat 100% !important;
}
.select2-container a.select2-choice { .select2-container a.select2-choice {
background: $secondary; background: $secondary;
@ -51,7 +56,9 @@
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
border-color: $tertiary; border-color: $tertiary;
} }
.select2-drop {
color: dark-light-diff($primary, $secondary, -50%, 50%);
}
.select2-drop-active { .select2-drop-active {
border: 1px solid $tertiary; border: 1px solid $tertiary;
border-top: 0; border-top: 0;

2
app/assets/stylesheets/common/base/header.scss
View file

@ -61,7 +61,7 @@
.icon { .icon {
display: block; display: block;
padding: 3px; padding: 3px;
color: scale-color($header_primary, $lightness: 50%); color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
border-top: 1px solid transparent; border-top: 1px solid transparent;

7
app/assets/stylesheets/common/base/lightbox.scss
View file

@ -3,7 +3,6 @@
display: inline-block; display: inline-block;
&:hover .meta { &:hover .meta {
background: $primary;
opacity: 1; opacity: 1;
transition: opacity .5s; transition: opacity .5s;
} }
@ -18,8 +17,8 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
color: $secondary; color: dark-light-choose($secondary, $primary);
background: $primary; background: dark-light-choose($primary, lighten($secondary, 10%));
opacity: 0; opacity: 0;
transition: opacity .2s; transition: opacity .2s;
@ -39,7 +38,7 @@
.informations { .informations {
margin: 6px; margin: 6px;
padding-right: 20px; padding-right: 20px;
color: scale-color($primary, $lightness: 50%); color: dark-light-diff($primary, $secondary, 50%, -50%);
font-size: 1em; font-size: 1em;
} }

8
app/assets/stylesheets/common/base/onebox.scss
View file

@ -159,7 +159,7 @@ pre.onebox code ol.lines li:before {
display:inline-block; display:inline-block;
width:35px; width:35px;
left: -40px; left: -40px;
background: #F7F7F7; background: dark-light-choose(#F7F7F7, #070707);
color:#AFAFAF; color:#AFAFAF;
text-align:right; text-align:right;
padding-right:5px; padding-right:5px;
@ -174,8 +174,10 @@ pre.onebox code ol{
margin-left:0px; margin-left:0px;
line-height:1.5em; line-height:1.5em;
} }
pre.onebox code {
background-color: dark-light-choose(#fff, #000);
}
pre.onebox code li{ pre.onebox code li{
background-color:#fff;
padding-left:5px; padding-left:5px;
} }
@ -194,7 +196,7 @@ pre.onebox code ol.lines li {
} }
pre.onebox code li.selected{ pre.onebox code li.selected{
background-color:#F8EEC7 background-color: dark-light-choose(#F8EEC7, #541);
} }
pre.onebox code { pre.onebox code {

8
app/assets/stylesheets/desktop/compose.scss
View file

@ -65,14 +65,14 @@
} }
.similar-topics { .similar-topics {
background-color: scale-color($tertiary, $lightness: 60%); background-color: dark-light-choose(scale-color($tertiary, $lightness: 60%), scale-color($tertiary, $lightness: -60%));
a[href] { a[href] {
color: #000; color: dark-light-diff($primary, $secondary, -10%, 10%);
} }
.posts-count { .posts-count {
background-color: scale-color($tertiary, $lightness: -40%); background-color: dark-light-choose(scale-color($tertiary, $lightness: -40%), scale-color($tertiary, $lightness: 40%));
} }
ul { ul {
@ -82,7 +82,7 @@
} }
.search-link { .search-link {
.fa, .blurb { .fa, .blurb {
color: scale-color($tertiary, $lightness: -40%); color: dark-light-choose(scale-color($tertiary, $lightness: -40%), scale-color($tertiary, $lightness: 40%));
} }
} }
} }

43
app/assets/stylesheets/desktop/user-card.scss
View file

@ -1,6 +1,9 @@
// styles that apply to the "share" popup when sharing a link to a post or topic // 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 // Colors should mostly be absolute here, it will look the same in dark & light themes
$user_card_primary: #fff;
$user_card_background: #222;
#user-card { #user-card {
position: absolute; position: absolute;
width: 500px; width: 500px;
@ -9,9 +12,9 @@
z-index: 990; z-index: 990;
box-shadow: 0 2px 12px rgba($primary, .6); box-shadow: 0 2px 12px rgba($primary, .6);
margin-top: -2px; margin-top: -2px;
color: #ffffff; color: $user_card_primary;
background-size: cover; background-size: cover;
background: #222222 center center; background: $user_card_background center center;
min-height: 175px; min-height: 175px;
-webkit-transition: opacity .2s, -webkit-transform .2s; -webkit-transition: opacity .2s, -webkit-transform .2s;
transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s;
@ -29,7 +32,7 @@
.card-content { .card-content {
padding: 12px 12px 0 12px; padding: 12px 12px 0 12px;
background: rgba(#222222, .85); background: rgba($user_card_background, .85);
margin-top: 80px; margin-top: 80px;
&:after { &:after {
@ -64,11 +67,11 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: #fff; color: $user_card_primary;
} }
i { i {
font-size: .8em; font-size: .8em;
color: #fff; color: $user_card_primary;
} }
} }
@ -82,7 +85,7 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: #fff; color: $user_card_primary;
} }
} }
@ -90,11 +93,11 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: scale-color(#fff, $lightness: 25%); color: scale-color($user_card_primary, $lightness: 25%);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
a { a {
color: scale-color(#222, $lightness: 50%); color: scale-color($user_card_background, $lightness: 50%);
} }
} }
@ -102,10 +105,10 @@
font-size: 0.929em; font-size: 0.929em;
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
color: #222; color: $user_card_background;
.group-link { .group-link {
color: #222; color: $user_card_background;
} }
} }
@ -117,11 +120,11 @@
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;
.desc, a { .desc, a {
color: scale-color(#fff, $lightness: 50%); color: scale-color($user_card_primary, $lightness: 50%);
} }
} }
div {display: inline; color: scale-color(#222, $lightness: 50%); div {display: inline; color: scale-color($user_card_background, $lightness: 50%);
.group-link {color: scale-color(#222, $lightness: 50%);} .group-link {color: scale-color($user_card_background, $lightness: 50%);}
} }
} }
@ -139,7 +142,7 @@
clear: left; clear: left;
a { a {
color: #fff; color: $user_card_primary;
text-decoration: underline; text-decoration: underline;
} }
img { img {
@ -147,7 +150,7 @@
} }
a.mention { a.mention {
background-color: scale-color(#fff, $lightness: 50%); background-color: scale-color($user_card_primary, $lightness: 50%);
} }
.overflow { .overflow {
max-height: 60px; max-height: 60px;
@ -179,7 +182,7 @@
} }
.new-user a { .new-user a {
color: scale-color(#222, $lightness: 70%); color: scale-color($user_card_background, $lightness: 70%);
} }
&.show-badges { &.show-badges {
@ -209,12 +212,12 @@
.user-badge { .user-badge {
background: transparent; background: transparent;
color: scale-color(#222, $lightness: 50%); color: scale-color($user_card_background, $lightness: 50%);
border-color: scale-color(#222, $lightness: 50%); border-color: scale-color($user_card_background, $lightness: 50%);
} }
h3 { h3 {
color: #222; color: $user_card_background;
font-size: 1em; font-size: 1em;
margin-bottom: -8px; margin-bottom: -8px;
} }
@ -241,6 +244,6 @@
right: 12px; right: 12px;
bottom: 12px; bottom: 12px;
font-size: 2.143em; font-size: 2.143em;
i {color: #fff;} i {color: $user_card_primary;}
} }
} }