codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-23 23:58:31 -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%);}
.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: dark-light-diff($primary, $secondary, 45%, -30%);}
.topic-list {
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,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
color: dark-light-choose(#998, #bba);
font-style: italic;
}
@ -33,14 +33,14 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #099;
color: dark-light-choose(#099, #aff);
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: dark-light-choose(#d14, #f66);
color: dark-light-choose(#d14, #f99);
}
.hljs-title,
@ -62,7 +62,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
color: dark-light-choose(#458, #9AE);
font-weight: bold;
}
@ -89,7 +89,7 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073;
color: dark-light-choose(#990073, #fbe);
}
.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 {
background: $secondary;
@ -51,7 +56,9 @@
border-radius: 3px 3px 0 0;
border-color: $tertiary;
}
.select2-drop {
color: dark-light-diff($primary, $secondary, -50%, 50%);
}
.select2-drop-active {
border: 1px solid $tertiary;
border-top: 0;

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

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

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

@ -3,7 +3,6 @@
display: inline-block;
&:hover .meta {
background: $primary;
opacity: 1;
transition: opacity .5s;
}
@ -18,8 +17,8 @@
position: absolute;
bottom: 0;
width: 100%;
color: $secondary;
background: $primary;
color: dark-light-choose($secondary, $primary);
background: dark-light-choose($primary, lighten($secondary, 10%));
opacity: 0;
transition: opacity .2s;
@ -39,7 +38,7 @@
.informations {
margin: 6px;
padding-right: 20px;
color: scale-color($primary, $lightness: 50%);
color: dark-light-diff($primary, $secondary, 50%, -50%);
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;
width:35px;
left: -40px;
background: #F7F7F7;
background: dark-light-choose(#F7F7F7, #070707);
color:#AFAFAF;
text-align:right;
padding-right:5px;
@ -174,8 +174,10 @@ pre.onebox code ol{
margin-left:0px;
line-height:1.5em;
}
pre.onebox code {
background-color: dark-light-choose(#fff, #000);
}
pre.onebox code li{
background-color:#fff;
padding-left:5px;
}
@ -194,7 +196,7 @@ pre.onebox code ol.lines li {
}
pre.onebox code li.selected{
background-color:#F8EEC7
background-color: dark-light-choose(#F8EEC7, #541);
}
pre.onebox code {

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

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