Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

bettering support for dark ez-themes

This commit is contained in:
Kris Aubuchon 2014-08-06 09:31:13 -04:00
parent 562d2e0c86
commit 38696e5a30
24 changed files with 125 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,7 +93,7 @@ td.flaggers td {
width: 460px; width: 460px;
right: 0px; right: 0px;
z-index: 990; z-index: 990;
box-shadow: 0 2px 6px scale-color-diff(); box-shadow: 0 2px 6px rgba(0,0,0, .8);
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
padding: 12px 12px 5px; padding: 12px 12px 5px;
@ -108,7 +108,7 @@ td.flaggers td {
} }
.admin-controls { .admin-controls {
background-color: darken($secondary, 5%); background-color: dark-light-diff($primary, $secondary, 90%, -20%);
padding: 10px 10px 3px 0; padding: 10px 10px 3px 0;
height: 35px; height: 35px;
.nav.nav-pills { .nav.nav-pills {
@ -272,7 +272,8 @@ td.flaggers td {
.setting.overridden { .setting.overridden {
input[type=text] { input[type=text] {
background-color: scale-color($highlight, $lightness: 50%); background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
} }
h3 { h3 {
@ -681,7 +682,7 @@ table.api-keys {
background-color: scale-color-diff(); background-color: scale-color-diff();
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 10px; margin-top: 10px;
box-shadow: inset 0 0 10px rgba($primary, .1); box-shadow: inset 0 0 10px rgba(0,0,0, .1);
.look-here { .look-here {
float: left; float: left;
@ -843,7 +844,7 @@ table.api-keys {
.content-list { .content-list {
h3 { h3 {
color: $primary; color: dark-light-diff($primary, $secondary, 90%, -60%);
font-size: 15px; font-size: 15px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;

2
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -17,7 +17,7 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border-top: 1px solid scale-color-diff(); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
background: rgba($secondary, .8); background: rgba($secondary, .8);
> tbody > tr { > tbody > tr {

10
app/assets/stylesheets/common/base/alert.scss
View File

@ -31,15 +31,15 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
&.alert-success { &.alert-success {
background-color: scale-color($success, $lightness: 90%); background-color: dark-light-diff($success, $secondary, 50%, -60%);
color: $success; color: $primary;
} }
&.alert-error { &.alert-error {
background-color: scale-color($danger, $lightness: 75%); background-color: rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
color: $danger; color: $primary;
} }
&.alert-info { &.alert-info {
background-color: scale-color($tertiary, $lightness: 90%); background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
color: $primary; color: $primary;
} }
} }

10
app/assets/stylesheets/common/base/header.scss
View File

@ -4,7 +4,7 @@
top: 0; top: 0;
z-index: 1001; z-index: 1001;
background-color: $header_background; background-color: $header_background;
box-shadow: 0 2px 4px -2px rgba($header_primary, .25); box-shadow: 0 2px 4px -2px rgba(0,0,0, .25);
.docked & { .docked & {
position: fixed; position: fixed;
@ -152,7 +152,7 @@
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
padding: 5px; padding: 5px;
@include box-shadow(0 2px 2px rgba($primary, .4)); @include box-shadow(0 2px 2px rgba(0,0,0, .4));
// note these topic counts only appear for anons in the category hamburger drop down // note these topic counts only appear for anons in the category hamburger drop down
b.topics-count { b.topics-count {
@ -179,18 +179,18 @@
} }
&:hover a:not(.badge-notification) { &:hover a:not(.badge-notification) {
background-color: scale-color($highlight, $lightness: 60%); background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
} }
button {margin-left: 5px;} button {margin-left: 5px;}
} }
.heading a:hover { .heading a:hover {
background-color: scale-color($highlight, $lightness: 60%); background-color: dark-light-diff($highlight, $secondary, 50%, -30%);
} }
.selected { .selected {
background-color: scale-color($tertiary, $lightness: 90%); background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
} }

6
app/assets/stylesheets/common/base/modal.scss
View File

@ -18,7 +18,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1040;
background-color: $primary; background-color: #111;
&.fade { &.fade {
opacity: 0; opacity: 0;
} }
@ -54,7 +54,7 @@
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8); box-shadow: 0 3px 7px rgba(0,0,0, .8);
background-clip: padding-box; background-clip: padding-box;
} }
@ -87,7 +87,7 @@
.modal { .modal {
.nav { .nav {
padding: 10px 30px 10px 15px; padding: 10px 30px 10px 15px;
background-color: lighten($secondary, 76%); background-color: dark-light-diff($secondary, $primary, 10%, -15%);
li > a { li > a {
font-size: 14px; font-size: 14px;
} }

3
app/assets/stylesheets/common/base/pagedown.scss
View File

@ -124,7 +124,8 @@
} }
.wmd-prompt-background { .wmd-prompt-background {
background-color: $primary; background-color: #111;
box-shadow: 0 3px 7px rgba(0,0,0, .8);
} }
.wmd-prompt-dialog { .wmd-prompt-dialog {

2
app/assets/stylesheets/common/base/share_link.scss
View File

@ -4,7 +4,7 @@
position: absolute; position: absolute;
left: 20px; left: 20px;
z-index: 990; z-index: 990;
box-shadow: 0 1px 5px rgba($primary, .4); box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-color: scale-color-diff(); background-color: scale-color-diff();
padding: 6px 10px 10px 10px; padding: 6px 10px 10px 10px;
width: 300px; width: 300px;

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

@ -44,7 +44,7 @@ aside.quote {
} }
.cooked .highlight { .cooked .highlight {
background-color: scale-color($highlight, $lightness: 40%); background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
padding: 2px; padding: 2px;
margin: -2px; margin: -2px;
} }

4
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -1,8 +1,8 @@
/* Default badge styles. */ /* Default badge styles. */
.user-badge { .user-badge {
padding: 3px 8px; padding: 3px 8px;
color: darken($primary, 40%);; color: $primary;
border: 1px solid lighten($primary, 60%); border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
font-size: $base-font-size * 0.86; font-size: $base-font-size * 0.86;
line-height: 19px; line-height: 19px;
margin: 0; margin: 0;

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

@ -115,8 +115,8 @@ h1 a.badge-category div {vertical-align: top;}
padding: 3px 5px; padding: 3px 5px;
color: $primary; color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1); text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: #ddd; background-color: dark-light-diff($primary, $secondary, 90%, -65%);
border-color: #aaa; border-color: dark-light-diff($primary, $secondary, 90%, -65%);
font-size: 12px; font-size: 12px;
@include box-shadow(inset 0 1px 0 rgba($primary, 0.22)); @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.22));
} }

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

@ -14,6 +14,8 @@
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all .25s;
&:active { &:active {
text-shadow: none; text-shadow: none;
} }
@ -43,13 +45,13 @@
border: none; border: none;
color: $primary; color: $primary;
font-weight: normal; font-weight: normal;
background: scale-color-diff(); background: dark-light-diff($primary, $secondary, 90%, -65%);
&[href] { &[href] {
color: $primary; color: $primary;
} }
&:hover { &:hover {
background: #aaa; background: dark-light-diff($primary, $secondary, 65%, -75%);
color: #fff; color: #fff;
} }
&:active { &:active {
@ -120,7 +122,7 @@
.btn-social { .btn-social {
color: $secondary; color: $secondary;
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary, 0.2);
@include box-shadow(inset 0 1px 0 rgba($primary, 0.1)); @include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.1));
&[href] { &[href] {
color: $secondary; color: $secondary;
} }

6
app/assets/stylesheets/common/components/navs.css.scss
View File

@ -29,9 +29,10 @@
color: $primary; color: $primary;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
transition: background .15s;
&:hover { &:hover {
color: $quaternary; color: $quaternary;
background-color: scale-color($quaternary, $lightness: 70%); background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
} }
} }
&.active > a, > a.active { &.active > a, > a.active {
@ -50,9 +51,8 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: scale-color-diff(); background-color: scale-color-diff();
@include box-shadow(0 1px 0 scale-color-diff());
> li { > li {
border-bottom: 2px solid scale-color($primary, $lightness: 80%); border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -30%);
&:last-of-type { &:last-of-type {
border-bottom: 0; border-bottom: 0;
} }

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

@ -31,6 +31,20 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
@import "plugins_variables"; @import "plugins_variables";
@function brightness($color) {
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); //w3c definition of color brightness
}
@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
@if brightness($adjusted-color) < brightness($comparison-color) {
@return scale-color($adjusted-color, $lightness: $lightness)
} @else {
@return scale-color($adjusted-color, $lightness: $darkness)
}
}
//phasing out scale-color-diff for dark-light-diff
@function scale-color-diff() { @function scale-color-diff() {
@if lightness($primary) < lightness($secondary) { @if lightness($primary) < lightness($secondary) {
@return scale-color($primary, $lightness: 90%) @return scale-color($primary, $lightness: 90%)

6
app/assets/stylesheets/common/input_tip.scss
View File

@ -6,12 +6,10 @@
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
z-index: 101; z-index: 101;
@include border-radius-all(2px);
border: solid 1px #955;
&.bad { &.bad {
background-color: #b66; background: dark-light-diff($danger, $secondary, 20%, -40%);
color: white; color: white;
box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55; box-shadow: 1px 1px 5px rgba(0,0,0, .7);
} }
&.hide, &.good { &.hide, &.good {
display: none; display: none;

6
app/assets/stylesheets/desktop/compose.scss
View File

@ -13,11 +13,11 @@
.composer-popup { .composer-popup {
@include box-shadow(3px 3px 3px rgba($primary, 0.34)); @include box-shadow(3px 3px 3px rgba(0,0,0, 0.34));
background: scale-color($highlight, $lightness: 50%); background: dark-light-diff($highlight, $secondary, 50%, -40%);
&.urgent { &.urgent {
background: scale-color($danger, $lightness: 50%); background: dark-light-diff($danger, $secondary, 50%, -40%);
} }
h3 { h3 {

13
app/assets/stylesheets/desktop/discourse.scss
View File

@ -24,6 +24,7 @@ html {font-size: 14px/19px;}
} }
} }
@media all @media all
and (max-width : 570px) { and (max-width : 570px) {
body { body {
@ -33,7 +34,9 @@ and (max-width : 570px) {
.full-width { .full-width {
min-width: 0; min-width: 0;
} }
.d-header .current-username a {display: none;} .d-header .current-username a {display: none;}
} }
header { header {
@ -54,7 +57,7 @@ body {
color: $danger; color: $danger;
} }
a.star { a.star {
color: scale-color($primary, $lightness: 75%); color: dark-light-diff($secondary, $primary, 80%, -20%);
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f005"; content: "\f005";
@ -213,7 +216,7 @@ body {
background-color:$secondary; background-color:$secondary;
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary, .3); box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
} }
@ -222,7 +225,7 @@ body {
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary, .3); box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
} }
@ -230,13 +233,13 @@ body {
textarea:focus { textarea:focus {
border-color: $tertiary; border-color: $tertiary;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary; box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
} }
input { input {
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus { &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
border-color: $tertiary; border-color: $tertiary;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary; box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
} }
} }

4
app/assets/stylesheets/desktop/modal.scss
View File

@ -19,7 +19,7 @@
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8); box-shadow: 0 3px 7px rgba(0,0,0, .8);
background-clip: padding-box; background-clip: padding-box;
} }
@ -63,11 +63,11 @@ animation: modal .25s;
font-size: 20px; font-size: 20px;
padding: 10px 15px 7px; padding: 10px 15px 7px;
} }
.close {margin: 10px;}
} }
.close { .close {
float: right; float: right;
font-size: 20px; font-size: 20px;
margin: 10px 10px 0;
text-decoration: none; text-decoration: none;
color: scale-color($primary, $lightness: 35%); color: scale-color($primary, $lightness: 35%);
cursor: pointer; cursor: pointer;

2
app/assets/stylesheets/desktop/poster_expansion.scss
View File

@ -5,7 +5,7 @@
width: 460px; width: 460px;
left: 20px; left: 20px;
z-index: 990; z-index: 990;
box-shadow: 0 2px 6px scale-color-diff(); box-shadow: 0 2px 6px rgba(0,0,0, .6);
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
padding: 12px 12px 5px 12px; padding: 12px 12px 5px 12px;

2
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -123,7 +123,7 @@
.sortable { .sortable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: scale-color-diff(); background-color: dark-light-diff($primary, $secondary, 90%, -75%);
} }
@include unselectable; @include unselectable;
} }

63
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -99,13 +99,13 @@ nav.post-controls {
} }
.show-replies { .show-replies {
background: scale-color-diff(); background: dark-light-diff($primary, $secondary, 90%, -65%);
padding: 8px 15px; padding: 8px 15px;
padding-bottom: 20px; padding-bottom: 20px;
margin-left: 0; margin-left: 0;
span.badge-posts {color: scale-color($primary, $lightness: 60%);} span.badge-posts {color: scale-color($primary, $lightness: 60%);}
&:hover { &:hover {
background: scale-color-diff(); background: dark-light-diff($primary, $secondary, 90%, -65%);
span.badge-posts {color: $primary;} span.badge-posts {color: $primary;}
} }
i { i {
@ -116,17 +116,17 @@ nav.post-controls {
button.create { button.create {
margin-right: 0; margin-right: 0;
color: $tertiary; color: $tertiary;
background: scale-color($tertiary, $lightness: 90%); background: dark-light-diff($tertiary, $secondary, 90%, -65%);
padding: 8px 20px; padding: 8px 20px;
margin-left: 10px; margin-left: 10px;
&:hover { color: $secondary; &:hover { color: $secondary;
background: $tertiary; background: dark-light-diff($tertiary, $secondary, 0%, -20%)
} }
&:active { &:active {
background: scale-color($tertiary, $lightness: 50%); background: dark-light-diff($tertiary, $secondary, 50%, -35%);
@include box-shadow(inset 0 1px 3px rgba($primary, .3)); @include box-shadow(inset 0 1px 3px rgba(0,0,0, .3));
} }
@ -150,7 +150,7 @@ nav.post-controls {
} }
&:active { &:active {
@include box-shadow(inset 0 1px 3px rgba($primary, .4)); @include box-shadow(inset 0 1px 3px rgba(0,0,0, .4));
} }
&.hidden { &.hidden {
@ -165,8 +165,9 @@ nav.post-controls {
color: $secondary; color: $secondary;
} }
&.like:hover {color: $love; &.like:hover {
background: scale-color($love, $lightness: 75%); color: $love;
background: dark-light-diff($love, $secondary, 85%, -60%)
} }
&.has-like {color: $love;} &.has-like {color: $love;}
@ -240,11 +241,13 @@ nav.post-controls {
width: 86%; width: 86%;
padding-left: 1%; padding-left: 1%;
padding-right: 1%; padding-right: 1%;
border: none;
} }
.topic-avatar { .topic-avatar {
width: 45px; width: 45px;
margin: 0 10px 0 15px; margin: 0 10px 0 15px;
border: none;
} }
@ -283,7 +286,7 @@ nav.post-controls {
.fa-arrow-up {margin-left: 5px;} .fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;} .row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
background: scale-color-diff(); background: dark-light-diff($primary, $secondary, 90%, -65%);
.quote .title, blockquote, .onebox, .onebox-result { .quote .title, blockquote, .onebox, .onebox-result {
background: darken(scale-color-diff(), 5%); background: darken(scale-color-diff(), 5%);
@ -328,7 +331,7 @@ a.star {
.topic-map { .topic-map {
margin: 20px 0 0 0; margin: 20px 0 0 0;
background: scale-color(scale-color-diff(), $lightness: 40%); background: dark-light-diff($primary, $secondary, 90%, -65%);
.buttons .btn { .buttons .btn {
&:hover {border: 1px solid $primary !important;} &:hover {border: 1px solid $primary !important;}
@ -437,15 +440,15 @@ a.star {
float: right; float: right;
.btn { .btn {
border: 0; border: 0;
border-bottom: 1px solid scale-color-diff(); border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -75%);
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary;
background: scale-color-diff(); background: dark-light-diff($primary, $secondary, 80%, -75%);
&:hover { &:hover {
background: scale-color($primary, $lightness: 75%); background: dark-light-diff($primary, $secondary, 65%, -85%);
color: $primary; color: $primary;
border: none !important; border: none !important;
border-bottom: 1px solid scale-color($primary, $lightness: 75%) !important; border-bottom: 1px solid dark-light-diff($primary, $secondary, 65%, -85%) !important;
span.badge-posts {color: $primary;} span.badge-posts {color: $primary;}
} }
@ -561,7 +564,10 @@ text-overflow: ellipsis;
margin-right: 7px; margin-right: 7px;
font-size: 20px; font-size: 20px;
margin-top: 6px; margin-top: 6px;
color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
} }
a.star.starred {color: $danger !important;}
.topic-statuses { .topic-statuses {
margin-top: -2px; margin-top: -2px;
@ -604,13 +610,13 @@ text-overflow: ellipsis;
.moderator { .moderator {
.topic-body { .topic-body {
background-color: scale-color($highlight, $lightness: 75%); background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
} }
} }
.deleted { .deleted {
.topic-body { .topic-body {
background-color: scale-color($danger, $lightness: 75%); background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
} }
} }
@ -764,14 +770,15 @@ $topic-avatar-width: 45px;
float: left; float: left;
position: relative; position: relative;
z-index: 2; z-index: 2;
border-top: 1px solid scale-color-diff(); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding: 12px $topic-body-width-padding 15px $topic-body-width-padding; padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
} }
} }
.topic-avatar { .topic-avatar {
border-top: 1px solid scale-color-diff(); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding-top: 16px; padding-top: 16px;
width: $topic-avatar-width; width: $topic-avatar-width;
float: left; float: left;
@ -830,7 +837,7 @@ $topic-avatar-width: 45px;
list-style: none; list-style: none;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
box-shadow: 0 1px 5px rgba($primary, .4); box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-clip: padding-box; background-clip: padding-box;
span {font-size: 12px;} span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;} .title {font-weight: bold; display: block; font-size: 14px;}
@ -852,7 +859,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: $primary; color: $primary;
text-decoration: none; text-decoration: none;
background-color: scale-color($highlight, $lightness: 60%); background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
} }
@ -860,7 +867,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .disabled > a:hover { .dropdown-menu .disabled > a:hover {
text-decoration: none; text-decoration: none;
color: $primary; color: $primary;
background-color: scale-color($tertiary, $lightness: 90%); background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
cursor: default; cursor: default;
} }
@ -893,7 +900,7 @@ $topic-avatar-width: 45px;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
left: 50%; left: 50%;
background-color: scale-color($tertiary, $lightness: 50%); background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
border: 1px solid $tertiary; border: 1px solid $tertiary;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
@ -945,13 +952,13 @@ $topic-avatar-width: 45px;
} }
&:active { &:active {
@include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%)); @include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2)); @include box-shadow(inset 0 1px 3px rgba(0,0,0, 0.2));
color: $secondary; color: $secondary;
} }
&[disabled] { &[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%)); @include linear-gradient($tertiary, darken($tertiary, 20%));
@include box-shadow((inset 0 1px 0 rgba($primary, 0.33), inset 0 -1px 2px rgba($primary, 0.2))); @include box-shadow((inset 0 1px 0 rgba(0,0,0, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
} }
} }
} }
@ -1007,7 +1014,7 @@ a.attachment:before {
display: block; display: block;
position: absolute; position: absolute;
left: 767px; left: 767px;
color: scale-color-diff(); color: rgba(dark-light-diff($primary, $secondary, 90%, -65%) , .8);
font: 90px/1 FontAwesome; font: 90px/1 FontAwesome;
content: "\f05c"; content: "\f05c";
z-index: -5; z-index: -5;
@ -1043,7 +1050,7 @@ a.attachment:before {
} }
span.highlighted { span.highlighted {
background-color: scale-color($highlight, $lightness: 70%); background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
} }
.username.new-user a { .username.new-user a {

10
app/assets/stylesheets/desktop/topic.scss
View File

@ -86,7 +86,7 @@ a.reply-new {
a:hover.reply-new { a:hover.reply-new {
color: $tertiary; color: $tertiary;
i { i {
background: scale-color($tertiary, $lightness: 75%); background: dark-light-diff($tertiary, $secondary, 90%, -65%);
border: 1px solid $tertiary; border: 1px solid $tertiary;
} }
} }
@ -109,7 +109,7 @@ a:hover.reply-new {
} }
#topic-closing-info { #topic-closing-info {
border-top: 1px solid scale-color-diff(); border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding-top: 10px; padding-top: 10px;
height: 20px; height: 20px;
} }
@ -131,7 +131,7 @@ a:hover.reply-new {
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
padding: 5px; padding: 5px;
background: $secondary; background: $secondary;
@include box-shadow(0 0px 2px rgba($primary, .2)); @include box-shadow(0 0px 2px rgba(0,0,0, .2));
position: relative; position: relative;
left: 345px; left: 345px;
@ -209,7 +209,7 @@ a:hover.reply-new {
bottom: 0; bottom: 0;
width: 0; width: 0;
border-right: 1px solid scale-color-diff(); border-right: 1px solid scale-color-diff();
background-color: scale-color($success, $lightness: 70%); background-color: dark-light-diff($success, $secondary, 60%, -35%);
transition: width .75s; transition: width .75s;
} }
} }
@ -283,7 +283,7 @@ kbd
background-color: $secondary; background-color: $secondary;
border:1px solid scale-color-diff(); border:1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 0 rgba($primary, .9); box-shadow: 0 1px 0 rgba(0,0,0, .8);
color: $primary; color: $primary;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;

23
app/assets/stylesheets/desktop/user.scss
View File

@ -151,7 +151,7 @@
} }
.about { .about {
background-color: $primary; background-color: dark-light-diff($primary, $secondary, 0%, -75%);
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
@ -182,7 +182,8 @@
} }
a[href] { a[href] {
color: $secondary; color: dark-light-diff($secondary, $primary, 75%, -10%);
} }
img.avatar { img.avatar {
@ -197,19 +198,19 @@
position: relative; position: relative;
float: left; float: left;
width: 71%; width: 71%;
color: $secondary; color: dark-light-diff($secondary, $primary, 75%, 0%);
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
h1, h2 {font-weight: bold;} h1, h2 {font-weight: bold;}
.bio { .bio {
color: $secondary; color: dark-light-diff($secondary, $primary, 75%, 0%);
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
a[href] { a[href] {
color: $secondary; color: dark-light-diff($secondary, $primary, 75%, 0%);
text-decoration: underline; text-decoration: underline;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px; text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
} }
@ -223,7 +224,7 @@
.secondary { .secondary {
float: right; float: right;
background-color: rgba(scale-color($primary, $lightness: 20%), .9); background-color: rgba(dark-light-diff($primary, $secondary, 20%, -85%), .9);
text-align: right; text-align: right;
padding: 0 10px; padding: 0 10px;
max-width: 20%; max-width: 20%;
@ -232,16 +233,18 @@
margin: 0 0 7px 0; margin: 0 0 7px 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: dark-light-diff($secondary, $primary, 75%, -10%);
} }
dt { dt {
color: rgba($secondary, .7); color: dark-light-diff($secondary, $primary, 50%, -40%);
margin: 0; margin: 0;
} }
} }
} }
.controls { .controls {
background-color: scale-color($primary, $lightness: 30%); background-color: dark-light-diff($primary, $secondary, 30%, -80%);
padding: 12px; padding: 12px;
height: 30px; height: 30px;
@ -300,11 +303,11 @@
color: $primary; color: $primary;
} }
.item.moderator-action { .item.moderator-action {
background-color: scale-color($highlight, $lightness: 50%); background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
} }
.item.deleted { .item.deleted {
opacity: 0.8; opacity: 0.8;
background-color: scale-color($danger, $lightness: 50%); background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
} }
.item.hidden { .item.hidden {
display: block; display: block;

2
app/assets/stylesheets/mobile/modal.scss
View File

@ -21,7 +21,7 @@
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
@include border-radius-all (6px); @include border-radius-all (6px);
box-shadow: 0 3px 7px rgba($primary, 0.3); box-shadow: 0 3px 7px rgba(0,0,0, 0.3);
background-clip: padding-box; background-clip: padding-box;
} }

6
app/assets/stylesheets/mobile/topic.scss
View File

@ -50,7 +50,7 @@
} }
.docked #topic-progress { .docked #topic-progress {
box-shadow: 0 0 3px rbga($primary, .5); box-shadow: 0 0 3px rbga(0,0,0, .5);
} }
#topic-progress-wrapper { #topic-progress-wrapper {
@ -67,7 +67,7 @@
border: 1px solid scale-color-diff(); border: 1px solid scale-color-diff();
padding: 5px; padding: 5px;
background: $secondary; background: $secondary;
@include box-shadow(0 0px 2px rgba($primary, .2)); @include box-shadow(0 0px 2px rgba(0,0,0, .2));
position: absolute; position: absolute;
bottom: 34px; bottom: 34px;
@ -104,7 +104,7 @@
} }
#topic-progress { #topic-progress {
box-shadow: 0 0 3px rbga($primary, .7); box-shadow: 0 0 3px rbga(0,0,0, .7);
position: relative; position: relative;
&.hidden { &.hidden {
display: none; display: none;