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

making the color customizer a little nicer with dark themes

Browse source
This commit is contained in:
Kris Aubuchon 2014-05-19 01:17:59 -04:00
parent 5901ed6842
commit ffa33c572c
31 changed files with 166 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
app/assets/stylesheets/common/admin/admin_base.scss
View file

@ -9,8 +9,8 @@
width: 100%; width: 100%;
tr {text-align: left;} tr {text-align: left;}
td, th {padding: 8px;} td, th {padding: 8px;}
th {border-top: 1px solid scale-color($primary, $lightness: 90%);} th {border-top: 1px solid scale-color-diff();}
td {border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);} td {border-bottom: 1px solid scale-color-diff(); border-top: 1px solid scale-color-diff();}
tr:hover { background-color: darken($secondary, 2.5%); } tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($primary, 50%); } tr.selected { background-color: lighten($primary, 50%); }
.filters input { margin-bottom: 0; } .filters input { margin-bottom: 0; }
@ -20,7 +20,7 @@
font-size: 12px; font-size: 12px;
float: right; float: right;
margin-right: 10px; margin-right: 10px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
padding: 2px 5px; padding: 2px 5px;
border-radius: 5px; border-radius: 5px;
color: $primary; color: $primary;
@ -92,7 +92,7 @@
.nav.nav-pills { .nav.nav-pills {
li.active { li.active {
a { a {
border-color: scale-color($primary, $lightness: 90%); border-color: scale-color-diff();
background-color: lighten($primary, 40%); background-color: lighten($primary, 40%);
&:hover { &:hover {
background-color: lighten($primary, 40%); background-color: lighten($primary, 40%);
@ -165,7 +165,7 @@
@include small-width { width: 700px; } @include small-width { width: 700px; }
min-height: 800px; min-height: 800px;
margin-left: 0; margin-left: 0;
border-left: solid 1px scale-color($primary, $lightness: 90%); border-left: solid 1px scale-color-diff();
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
} }
@ -199,7 +199,7 @@
width: 408px; width: 408px;
padding: 1px; padding: 1px;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3); box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@ -209,7 +209,7 @@
width: 90px; width: 90px;
margin: 2px 1px; margin: 2px 1px;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3); box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@ -257,7 +257,7 @@
section.details { section.details {
h1 { h1 {
font-size: 15px; font-size: 15px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: $secondary; color: $secondary;
padding: 0 10px; padding: 0 10px;
margin: 0 0 5px 0; margin: 0 0 5px 0;
@ -282,7 +282,7 @@ section.details {
&.highlight-danger { &.highlight-danger {
background-color: scale-color($danger, $lightness: 50%); background-color: scale-color($danger, $lightness: 50%);
} }
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
&:before, &:after { &:before, &:after {
display: table; display: table;
content: ""; content: "";
@ -591,7 +591,7 @@ table.api-keys {
th { th {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
th.title { th.title {
text-align: left; text-align: left;
@ -636,7 +636,7 @@ table.api-keys {
&.detected-problems { &.detected-problems {
@include border-radius-all(5px); @include border-radius-all(5px);
background-color: scale-color($primary, $lightness: 90%); 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($primary, .1);
@ -703,7 +703,7 @@ table.api-keys {
.commits-widget { .commits-widget {
border: solid 1px scale-color($primary, $lightness: 90%); border: solid 1px scale-color-diff();
width: 500px; width: 500px;
height: 180px; height: 180px;
margin-bottom: 36px; margin-bottom: 36px;
@ -757,7 +757,7 @@ table.api-keys {
@extend .clearfix; @extend .clearfix;
line-height: 1.0em; line-height: 1.0em;
padding: 6px 8px; padding: 6px 8px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
.left { .left {
float: left; float: left;
} }
@ -767,7 +767,7 @@ table.api-keys {
img { img {
margin-top: 2px; margin-top: 2px;
border: solid 1px scale-color($primary, $lightness: 90%); border: solid 1px scale-color-diff();
padding: 2px; padding: 2px;
background-color: $secondary; background-color: $secondary;
} }
@ -802,7 +802,7 @@ table.api-keys {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-left: solid 1px scale-color($primary, $lightness: 90%); border-left: solid 1px scale-color-diff();
} }
} }
@ -820,10 +820,10 @@ table.api-keys {
margin: 0; margin: 0;
li:first-of-type { li:first-of-type {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
} }
li { li {
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
} }
li a { li a {
@ -832,7 +832,7 @@ table.api-keys {
color: $primary; color: $primary;
&:hover { &:hover {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: $primary; color: $primary;
} }
@ -996,7 +996,7 @@ table.api-keys {
color: $primary; color: $primary;
&:hover { &:hover {
color: $primary; color: $primary;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
@ -1030,7 +1030,7 @@ table.api-keys {
.heading-container { .heading-container {
width: 100%; width: 100%;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
.col.heading { .col.heading {
font-weight: bold; font-weight: bold;
@ -1046,7 +1046,7 @@ table.api-keys {
.ember-list-item-view { .ember-list-item-view {
width: 100%; width: 100%;
border-top: solid 1px scale-color($primary, $lightness: 90%); border-top: solid 1px scale-color-diff();
} }
} }

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

@ -18,7 +18,7 @@
max-width: 300px; max-width: 300px;
.colorpicker { .colorpicker {
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
margin-right: 2px; margin-right: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;

12
app/assets/stylesheets/common/base/compose.scss
View file

@ -3,13 +3,13 @@
position: absolute; position: absolute;
width: 240px; width: 240px;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
li { li {
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
a[href] { a[href] {
padding: 5px; padding: 5px;
display: block; display: block;
@ -20,10 +20,10 @@
font-size: 11px; font-size: 11px;
} }
&.selected { &.selected {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
@include hover { @include hover {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
text-decoration: none; text-decoration: none;
} }
} }
@ -43,7 +43,7 @@ div.ac-wrap.disabled {
div.ac-wrap { div.ac-wrap {
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
padding: 5px 4px 1px 4px; padding: 5px 4px 1px 4px;
div.item { div.item {
float: left; float: left;
@ -62,7 +62,7 @@ div.ac-wrap {
border-radius: 12px; border-radius: 12px;
width: 10px; width: 10px;
display: inline-block; display: inline-block;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
&:hover { &:hover {
background-color: scale-color($danger, $lightness: 75%); background-color: scale-color($danger, $lightness: 75%);
border: 1px solid scale-color($danger, $lightness: 30%); border: 1px solid scale-color($danger, $lightness: 30%);

6
app/assets/stylesheets/common/base/discourse.scss
View file

@ -97,10 +97,10 @@ body {
width: 540px; width: 540px;
background-color: $secondary; background-color: $secondary;
padding: 0 10px 13px 10px; padding: 0 10px 13px 10px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
.preview { .preview {
margin-top: 8px; margin-top: 8px;
border: 1px dashed scale-color($primary, $lightness: 90%); border: 1px dashed scale-color-diff();
padding: 8px 8px 0 8px; padding: 8px 8px 0 8px;
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -147,7 +147,7 @@ body {
.avatar-wrapper { .avatar-wrapper {
background-color: $secondary; background-color: $secondary;
display: inline-block; display: inline-block;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
@include border-radius-all(5px); @include border-radius-all(5px);
img { img {
@include border-radius-all(4px); @include border-radius-all(4px);

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

@ -27,7 +27,7 @@
} }
} }
#revision-details { #revision-details {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
padding: 5px; padding: 5px;
margin-top: 10px; margin-top: 10px;
} }

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

@ -51,8 +51,8 @@
max-width: 710px; max-width: 710px;
margin: 0 auto; margin: 0 auto;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8); box-shadow: 0 3px 7px rgba($primary, .8);
background-clip: padding-box; background-clip: padding-box;
@ -73,7 +73,7 @@
.modal-footer { .modal-footer {
margin: 0 15px; margin: 0 15px;
padding: 14px 0 15px; padding: 14px 0 15px;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
} }
.modal-footer:before, .modal-footer:before,
.modal-footer:after { .modal-footer:after {
@ -91,7 +91,7 @@
li > a { li > a {
font-size: 14px; font-size: 14px;
} }
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
} }
@ -144,7 +144,7 @@
font-weight: normal; font-weight: normal;
} }
&.btn-reply-here { &.btn-reply-here {
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
text-shadow: none; text-shadow: none;
color: $primary; color: $primary;
} }

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

@ -13,8 +13,8 @@ a.loading-onebox {
.onebox-result { .onebox-result {
margin-top: 15px; margin-top: 15px;
padding: 12px 25px 12px 12px; padding: 12px 25px 12px 12px;
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid darken(scale-color-diff(), 10%);
background: scale-color($primary, $lightness: 95%); background: scale-color-diff();
font-size: 14px; font-size: 14px;
> .source { > .source {
margin-bottom: 12px; margin-bottom: 12px;
@ -91,8 +91,8 @@ a.loading-onebox {
aside.onebox { aside.onebox {
margin-top: 15px; margin-top: 15px;
padding: 12px 25px 12px 12px; padding: 12px 25px 12px 12px;
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid darken(scale-color-diff(), 10%);
background: scale-color($primary, $lightness: 95%); background: scale-color-diff();
font-size: 14px; font-size: 14px;
header { header {

12
app/assets/stylesheets/common/base/pagedown.scss
View file

@ -26,7 +26,7 @@
height: 20px; height: 20px;
margin-right: 8px; margin-right: 8px;
margin-left: 5px; margin-left: 5px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
display: inline-block; display: inline-block;
float: left; float: left;
} }
@ -63,7 +63,7 @@
} }
.wmd-button:hover { .wmd-button:hover {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
@ -125,8 +125,8 @@
} }
.wmd-prompt-dialog { .wmd-prompt-dialog {
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
.wmd-prompt-dialog > div { .wmd-prompt-dialog > div {
@ -135,12 +135,12 @@
} }
.wmd-prompt-dialog > form > input[type="text"] { .wmd-prompt-dialog > form > input[type="text"] {
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
color: $primary; color: $primary;
} }
.wmd-prompt-dialog > form > input[type="button"] { .wmd-prompt-dialog > form > input[type="button"] {
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
font-family: trebuchet MS, helvetica, sans-serif; font-family: trebuchet MS, helvetica, sans-serif;
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;

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

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

2
app/assets/stylesheets/common/base/topic-admin-menu.scss
View file

@ -11,7 +11,7 @@
background-color: $secondary; background-color: $secondary;
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
position: fixed; position: fixed;
top: 70px; top: 70px;
right: 10px; right: 10px;

4
app/assets/stylesheets/common/components/buttons.css.scss
View file

@ -39,7 +39,7 @@
border: none; border: none;
color: $primary; color: $primary;
font-weight: normal; font-weight: normal;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
&[href] { &[href] {
color: $primary; color: $primary;
@ -51,7 +51,7 @@
&:active { &:active {
} }
&[disabled] { &[disabled] {
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
&:hover { color: scale-color($primary, $lightness: 70%); } &:hover { color: scale-color($primary, $lightness: 70%); }
cursor: not-allowed; cursor: not-allowed;
} }

1
app/assets/stylesheets/common/components/keyboard_shortcuts.css.scss
View file

@ -1,5 +1,4 @@
.topic-list-item td:first-child, .topic-post { .topic-list-item td:first-child, .topic-post {
background-color: inherit;
border-left: 1px solid transparent; border-left: 1px solid transparent;
} }

4
app/assets/stylesheets/common/components/navs.css.scss
View file

@ -50,8 +50,8 @@
border: 1px solid scale-color($primary, $lightness: 60%); border: 1px solid scale-color($primary, $lightness: 60%);
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
@include box-shadow(0 1px 0 scale-color($primary, $lightness: 90%)); @include box-shadow(0 1px 0 scale-color-diff());
> li { > li {
border-bottom: 1px solid scale-color($primary, $lightness: 60%); border-bottom: 1px solid scale-color($primary, $lightness: 60%);
&:last-of-type { &:last-of-type {

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

@ -39,7 +39,7 @@ hr {
height: 1px; height: 1px;
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
padding: 0; padding: 0;
} }

10
app/assets/stylesheets/common/foundation/variables.scss
View file

@ -29,3 +29,13 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
/* These files don't actually exist. They're injected by DiscourseSassImporter. */ /* These files don't actually exist. They're injected by DiscourseSassImporter. */
@import "theme_variables"; @import "theme_variables";
@import "plugins_variables"; @import "plugins_variables";
@function scale-color-diff() {
@if lightness($primary) < lightness($secondary) {
@return scale-color($primary, $lightness: 95%)
}
@else {
@return scale-color($primary, $lightness: -60%)
}
}

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

@ -101,7 +101,7 @@
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
height: 0; height: 0;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
bottom: 0; bottom: 0;
font-size: 14px; font-size: 14px;
position: fixed; position: fixed;
@ -148,7 +148,7 @@
&.draft { &.draft {
height: 40px !important; height: 40px !important;
cursor: pointer; cursor: pointer;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
.draft-text { .draft-text {
display: block; display: block;
} }
@ -161,7 +161,7 @@
} }
&.saving { &.saving {
height: 40px !important; height: 40px !important;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
.saving-text { .saving-text {
display: block; display: block;
} }
@ -280,11 +280,11 @@
margin-right: 10px; margin-right: 10px;
float: left; float: left;
&:disabled { &:disabled {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
} }
#wmd-input:disabled { #wmd-input:disabled {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
color: $primary; color: $primary;
@ -299,7 +299,7 @@
} }
} }
#wmd-preview { #wmd-preview {
border: 1px dashed scale-color($primary, $lightness: 90%); border: 1px dashed scale-color-diff();
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
@ -328,7 +328,7 @@
.show-admin-options { .show-admin-options {
vertical-align: top; vertical-align: top;
margin-top: 8px; margin-top: 8px;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
&:hover { &:hover {
color: $secondary; color: $secondary;
background: $primary; background: $primary;
@ -453,7 +453,7 @@
#wmd-button-bar { #wmd-button-bar {
top: 0; top: 0;
position: absolute; position: absolute;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
background-color: $secondary; background-color: $secondary;
z-index: 100; z-index: 100;
} }

22
app/assets/stylesheets/desktop/discourse.scss
View file

@ -113,22 +113,22 @@ body {
.grippie { .grippie {
width: 100%; width: 100%;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border-width: 1px 0; border-width: 1px 0;
cursor: row-resize; cursor: row-resize;
height: 11px; height: 11px;
overflow: hidden; overflow: hidden;
background-color: scale-color($primary, $lightness: 95%); background-color: scale-color-diff();
display:block; display:block;
background: image-url("grippie.png") scale-color($primary, $lightness: 95%) no-repeat center 3px; background: image-url("grippie.png") scale-color-diff() no-repeat center 3px;
} }
} }
blockquote { blockquote {
/* 13px left is intentional here to properly align with post quotes */ /* 13px left is intentional here to properly align with post quotes */
padding: 10px 4px 4px 13px; padding: 10px 4px 4px 13px;
background-color: scale-color($primary, $lightness: 95%); background-color: scale-color-diff();
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid darken(scale-color-diff(), 10%);
} }
.topic-statuses { .topic-statuses {
@ -223,7 +223,7 @@ body {
width: 210px; width: 210px;
height: auto; height: auto;
background-color:$secondary; background-color:$secondary;
border: 1px solid scale-color($primary, $lightness: 90%); 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($primary, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@ -232,7 +232,7 @@ body {
input { input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] { &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); 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($primary, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
@ -269,7 +269,7 @@ body {
select { select {
width: 220px; width: 220px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
&[multiple], &[size] { &[multiple], &[size] {
height: auto; height: auto;
} }
@ -319,8 +319,8 @@ body {
} }
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
border-color: scale-color($primary, $lightness: 90%); border-color: scale-color-diff();
} }
input { input {
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] { &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@ -416,7 +416,7 @@ body {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
} }
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn { .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
margin-left: -1px; margin-left: -1px;

16
app/assets/stylesheets/desktop/header.scss
View file

@ -75,14 +75,14 @@
&:hover { &:hover {
color: $primary; color: $primary;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-left: 1px solid transparent; border-left: 1px solid transparent;
border-right: 1px solid transparent; border-right: 1px solid transparent;
} }
&:active { &:active {
color: $primary; color: $primary;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
} }
.active .icon { .active .icon {
@ -90,9 +90,9 @@
color: #7b7b7b; color: #7b7b7b;
background-color: $secondary; background-color: $secondary;
cursor: default; cursor: default;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
border-left: 1px solid scale-color($primary, $lightness: 90%); border-left: 1px solid scale-color-diff();
border-right: 1px solid scale-color($primary, $lightness: 90%); border-right: 1px solid scale-color-diff();
&:after { &:after {
display: block; display: block;
position: absolute; position: absolute;
@ -163,7 +163,7 @@
right: 0; right: 0;
z-index: 1100; z-index: 1100;
overflow: auto; overflow: auto;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
background-color: $secondary; background-color: $secondary;
@include box-shadow(0 2px 2px rgba($primary, .4)); @include box-shadow(0 2px 2px rgba($primary, .4));
@ -182,9 +182,9 @@
} }
} }
.heading { .heading {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
color: darken($primary, 40%); color: darken($primary, 40%);
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;

6
app/assets/stylesheets/desktop/modal.scss
View file

@ -16,8 +16,8 @@
height: auto; height: auto;
margin: -250px 0 0 -305px; margin: -250px 0 0 -305px;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8); box-shadow: 0 3px 7px rgba($primary, .8);
background-clip: padding-box; background-clip: padding-box;
@ -57,7 +57,7 @@ animation: modal .25s;
margin-left: -1px; margin-left: -1px;
} }
.modal-header { .modal-header {
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
h3 { h3 {
color: $quaternary; color: $quaternary;
font-size: 20px; font-size: 20px;

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($primary, $lightness: 90%); box-shadow: 0 2px 6px scale-color-diff();
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $secondary;
padding: 12px 12px 5px 12px; padding: 12px 12px 5px 12px;

16
app/assets/stylesheets/desktop/topic-list.scss
View file

@ -59,7 +59,7 @@
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
margin: 0 0 10px; margin: 0 0 10px;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
.fa-thumb-tack {color: $primary;} .fa-thumb-tack {color: $primary;}
.fa-thumb-tack.unpinned {color: $primary;} .fa-thumb-tack.unpinned {color: $primary;}
@ -68,7 +68,7 @@
> tbody > tr { > tbody > tr {
&:nth-child(even) { &:nth-child(even) {
background-color: scale-color($primary, $lightness: 96%); background-color: rgba($primary, .04);
} }
&.archived a { &.archived a {
opacity: 0.6; opacity: 0.6;
@ -115,7 +115,7 @@
padding: 0; padding: 0;
background: transparent; background: transparent;
&:hover { &:hover {
color: scale-color($primary, $lightness: 90%); color: scale-color-diff();
} }
} }
@ -213,7 +213,7 @@
.sortable { .sortable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
@include unselectable; @include unselectable;
} }
@ -374,10 +374,10 @@
width: 165px; width: 165px;
} }
> footer { > footer {
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border-top: 0; border-top: 0;
padding: 7px 10px; padding: 7px 10px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
figure { figure {
float: left; float: left;
margin: 3px 7px 0 0; margin: 3px 7px 0 0;
@ -438,7 +438,7 @@
.list-controls { .list-controls {
.home { .home {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: $primary; color: $primary;
} }
@ -516,7 +516,7 @@ ol.category-breadcrumb {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
background-color: $secondary; background-color: $secondary;
max-height: 350px; max-height: 350px;
padding: 8px 7px 0 7px; padding: 8px 7px 0 7px;

60
app/assets/stylesheets/desktop/topic-post.scss
View file

@ -1,5 +1,5 @@
.gap { .gap {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
padding: 5px 0; padding: 5px 0;
color: lighten($primary, 35%); color: lighten($primary, 35%);
cursor: pointer; cursor: pointer;
@ -7,7 +7,7 @@
width: 80%; width: 80%;
&:hover { &:hover {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
@include medium-width { @include medium-width {
@ -54,7 +54,7 @@ h1 .topic-statuses .topic-status i {
right: 330px; right: 330px;
z-index: 400; z-index: 400;
padding: 13px 6px 5px; padding: 13px 6px 5px;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
font-size: 12px; font-size: 12px;
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
@include medium-width { @include medium-width {
@ -111,13 +111,13 @@ nav.post-controls {
} }
.show-replies { .show-replies {
background: scale-color($primary, $lightness: 95%); background: scale-color-diff();
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: lighten($primary, 76%); background: scale-color-diff();
span.badge-posts {color: $primary;} span.badge-posts {color: $primary;}
} }
i { i {
@ -157,7 +157,7 @@ nav.post-controls {
margin-left: 3px; margin-left: 3px;
transition: all linear 0.15s; transition: all linear 0.15s;
&:hover { &:hover {
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
color: $primary; color: $primary;
} }
@ -211,7 +211,7 @@ nav.post-controls {
background-color: $secondary; background-color: $secondary;
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
position: absolute; position: absolute;
text-align: left; text-align: left;
bottom: 0; bottom: 0;
@ -244,7 +244,7 @@ nav.post-controls {
.embedded-posts { .embedded-posts {
h1, h2, h3 {margin: 10px 0;} h1, h2, h3 {margin: 10px 0;}
a.mention {background: scale-color($primary, $lightness: 90%);} a.mention {background: scale-color-diff();}
&.bottom { &.bottom {
&.hidden {display: block; opacity: 0; } &.hidden {display: block; opacity: 0; }
@ -269,13 +269,13 @@ nav.post-controls {
.topic-avatar {padding-left: 15px;} .topic-avatar {padding-left: 15px;}
.post-date {color: scale-color($primary, $lightness: 50%);} .post-date {color: scale-color($primary, $lightness: 50%);}
.fa-arrow-up {margin-left: 5px;} .fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;} .row {border-top: 1px solid scale-color-diff(); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
background: scale-color($primary, $lightness: 95%); background: scale-color-diff();
.quote .title, blockquote, .onebox, .onebox-result { .quote .title, blockquote, .onebox, .onebox-result {
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid darken(scale-color-diff(), 10%);
} }
&.bottom { margin-top: -11px;} &.bottom { margin-top: -11px;}
@ -295,10 +295,10 @@ nav.post-controls {
} }
.bottom-round nav.post-controls .show-replies { .bottom-round nav.post-controls .show-replies {
background: scale-color($primary, $lightness: 95%); background: scale-color-diff();
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 8px; padding-bottom: 8px;
&:hover {background: scale-color($primary, $lightness: 90%); &:hover {background: scale-color-diff();
} }
} }
@ -322,7 +322,7 @@ a.star {
.topic-map { .topic-map {
margin: 20px 0 0 0; margin: 20px 0 0 0;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
.buttons .btn { .buttons .btn {
&:hover {border: 1px solid $primary !important;} &:hover {border: 1px solid $primary !important;}
@ -410,7 +410,7 @@ a.star {
color: $primary; color: $primary;
} }
.information { .information {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
} }
.participants { // PMs // .participants { // PMs //
@ -429,10 +429,10 @@ a.star {
float: right; float: right;
.btn { .btn {
border: 0; border: 0;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
&:hover { &:hover {
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 75%);
color: $primary; color: $primary;
@ -467,7 +467,7 @@ a.star {
clear: left; clear: left;
padding: 20px 0 15px 0; padding: 20px 0 15px 0;
#topic-list > tbody > tr:nth-child(even) { #topic-list > tbody > tr:nth-child(even) {
background-color: scale-color($primary, $lightness: 97%); background-color: rgba($primary, .04);
} }
#topic-list > tbody > tr:nth-child(odd) { #topic-list > tbody > tr:nth-child(odd) {
background-color: $secondary; background-color: $secondary;
@ -605,7 +605,7 @@ iframe {
a.mention { a.mention {
padding: 2px 4px; padding: 2px 4px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
} }
@ -677,7 +677,7 @@ blockquote { /* solo quotes */
margin: 14px 0; margin: 14px 0;
padding: 12px; padding: 12px;
a.mention {background: scale-color($primary, $lightness: 90%);} a.mention {background: scale-color-diff();}
p:first-of-type {margin-top: 0;} p:first-of-type {margin-top: 0;}
p:last-of-type {margin-bottom: 0;} p:last-of-type {margin-bottom: 0;}
} }
@ -685,14 +685,14 @@ blockquote { /* solo quotes */
.quote { /* quotes with attribution */ .quote { /* quotes with attribution */
margin-top: 14px; margin-top: 14px;
blockquote {margin-top: 0; padding-top: 0; blockquote {margin-top: 0; padding-top: 0;
.onebox-result {background-color: $primary;} .onebox-result {background-color: scale-color-diff();}
} }
.title { .title {
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid darken(scale-color-diff(), 10%);
background-color: scale-color($primary, $lightness: 95%); background-color: scale-color-diff();
padding: 12px; padding: 12px;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }
img {margin-top: -4px;} img {margin-top: -4px;}
@ -756,7 +756,7 @@ blockquote { /* solo quotes */
.topic-body { .topic-body {
float: left; float: left;
position: relative; position: relative;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
padding: 12px 0 15px 0; padding: 12px 0 15px 0;
&.highlighted { &.highlighted {
background-color: scale-color($tertiary, $lightness: 85%); background-color: scale-color($tertiary, $lightness: 85%);
@ -766,7 +766,7 @@ blockquote { /* solo quotes */
} }
} }
.topic-avatar { .topic-avatar {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
padding-top: 16px; padding-top: 16px;
.wiki { .wiki {
@ -828,7 +828,7 @@ blockquote { /* solo quotes */
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
box-shadow: 0 1px 5px rgba($primary, .4); box-shadow: 0 1px 5px rgba($primary, .4);
background-clip: padding-box; background-clip: padding-box;
span {font-size: 12px;} span {font-size: 12px;}
@ -982,8 +982,8 @@ blockquote { /* solo quotes */
background-color: scale-color($primary, $lightness: 70%); background-color: scale-color($primary, $lightness: 70%);
border-top: 1px solid $tertiary; border-top: 1px solid $tertiary;
border-left: 1px solid $tertiary; border-left: 1px solid $tertiary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
border-right: 1px solid scale-color($primary, $lightness: 90%); border-right: 1px solid scale-color-diff();
color: $primary; color: $primary;
} }
} }
@ -1006,7 +1006,7 @@ a.attachment:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 10px;
color: scale-color($primary, $lightness: 90%); color: scale-color-diff();
font: 90px/1 FontAwesome; font: 90px/1 FontAwesome;
content: "\f05c"; content: "\f05c";
z-index: -5; z-index: -5;

14
app/assets/stylesheets/desktop/topic.scss
View file

@ -58,7 +58,7 @@
.private_message #topic-title .private-message-glyph { display: inline; } .private_message #topic-title .private-message-glyph { display: inline; }
#topic-closing-info { #topic-closing-info {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
padding-top: 10px; padding-top: 10px;
height: 20px; height: 20px;
} }
@ -79,7 +79,7 @@ a.reply-new {
i { i {
margin-right: 5px; margin-right: 5px;
background: $secondary; background: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
padding: 1.5px 3px; padding: 1.5px 3px;
border-radius: 20px; border-radius: 20px;
transition: linear 0.15s; transition: linear 0.15s;
@ -102,7 +102,7 @@ a:hover.reply-new {
display: none; display: none;
} }
border: none; border: none;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);
width: 130px; width: 130px;
height: 34px; height: 34px;
@ -151,7 +151,7 @@ a:hover.reply-new {
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 0; width: 0;
border-right: 1px solid scale-color($primary, $lightness: 90%); border-right: 1px solid scale-color-diff();
background-color: scale-color($success, $lightness: 70%); background-color: scale-color($success, $lightness: 70%);
transition: width .75s; transition: width .75s;
} }
@ -197,7 +197,7 @@ pre {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
max-height: 500px; max-height: 500px;
} }
} }
@ -213,7 +213,7 @@ sup{top:-0.5em; }
sub{bottom:-0.25em; } sub{bottom:-0.25em; }
figure{margin:0; } figure{margin:0; }
fieldset{ fieldset{
border:1px solid scale-color($primary, $lightness: 90%); border:1px solid scale-color-diff();
margin:0 2px; margin:0 2px;
padding:0.35em 0.625em 0.75em; padding:0.35em 0.625em 0.75em;
} }
@ -225,7 +225,7 @@ legend{
kbd kbd
{ {
background-color: $secondary; background-color: $secondary;
border:1px solid scale-color($primary, $lightness: 90%); 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($primary, .9);
color: $primary; color: $primary;

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

@ -135,7 +135,7 @@
.user-content { .user-content {
padding: 10px 8px; padding: 10px 8px;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
margin-bottom: 10px; margin-bottom: 10px;
.btn.right { .btn.right {
@ -152,13 +152,13 @@
th { th {
text-align: left; text-align: left;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
padding: 5px; padding: 5px;
} }
td { td {
padding: 5px; padding: 5px;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
} }
} }
} }
@ -314,7 +314,7 @@
.item { .item {
padding: 20px 8px 15px 8px; padding: 20px 8px 15px 8px;
background-color: $secondary; background-color: $secondary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
} }
.type { .type {
color: $primary; color: $primary;

6
app/assets/stylesheets/embed.css.scss
View file

@ -13,7 +13,7 @@ article.post {
} }
.quote .title { .quote .title {
border-left: 5px solid scale-color($primary, $lightness: 90%); border-left: 5px solid scale-color-diff();
background-color: lighten($primary, 76%); background-color: lighten($primary, 76%);
padding: 10px 10px 0 12px; padding: 10px 10px 0 12px;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }
@ -26,8 +26,8 @@ article.post {
blockquote { blockquote {
padding: 10px 8px 10px 13px; padding: 10px 8px 10px 13px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
background-color: scale-color($primary, $lightness: 95%); background-color: scale-color-diff();
border-left: 5px solid scale-color($primary, $lightness: 90%); border-left: 5px solid darken(scale-color-diff(), 10%);
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
} }

10
app/assets/stylesheets/mobile/compose.scss
View file

@ -41,7 +41,7 @@ display: none;
width: 100%; width: 100%;
z-index: 1039; z-index: 1039;
height: 0; height: 0;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
bottom: 0; bottom: 0;
font-size: 14px; font-size: 14px;
position: fixed; position: fixed;
@ -87,7 +87,7 @@ display: none;
&.draft { &.draft {
height: 60px !important; height: 60px !important;
cursor: pointer; cursor: pointer;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
.draft-text { .draft-text {
display: block; display: block;
position: absolute; position: absolute;
@ -102,7 +102,7 @@ display: none;
} }
&.saving { &.saving {
height: 40px !important; height: 40px !important;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
.saving-text { .saving-text {
display: block; display: block;
} }
@ -216,7 +216,7 @@ display: none;
} }
} }
#wmd-preview { #wmd-preview {
border: 1px dashed scale-color($primary, $lightness: 90%); border: 1px dashed scale-color-diff();
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
p { p {
@ -356,7 +356,7 @@ display: none;
#wmd-button-bar { #wmd-button-bar {
top: 0; top: 0;
position: absolute; position: absolute;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
background-color: $secondary; background-color: $secondary;
z-index: 100; z-index: 100;
} }

4
app/assets/stylesheets/mobile/header.scss
View file

@ -85,7 +85,7 @@
position: relative; position: relative;
color: scale-color($primary, $lightness: 75%); color: scale-color($primary, $lightness: 75%);
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
cursor: default; cursor: default;
&:after { &:after {
display: block; display: block;
@ -156,7 +156,7 @@
right: 0; right: 0;
z-index: 1100; z-index: 1100;
margin-top: -1px; margin-top: -1px;
border: 1px solid scale-color($primary, $lightness: 90%);; border: 1px solid scale-color-diff();;
background-color: $secondary; background-color: $secondary;
@include box-shadow(0 1px 1px rgba($primary, 0.2)); @include box-shadow(0 1px 1px rgba($primary, 0.2));

10
app/assets/stylesheets/mobile/topic-list.scss
View file

@ -44,7 +44,7 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color-diff();
> tbody > tr { > tbody > tr {
background-color: $secondary; background-color: $secondary;
@ -241,7 +241,7 @@
display: none; display: none;
} }
> footer { > footer {
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
border-top: 0; border-top: 0;
padding: 7px 10px; padding: 7px 10px;
background-color: scale-color($primary, $lightness: 95%); background-color: scale-color($primary, $lightness: 95%);
@ -305,7 +305,7 @@
.list-controls { .list-controls {
.home { .home {
color: $primary; color: $primary;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
} }
.badge-category { .badge-category {
@ -398,7 +398,7 @@ span.posted {
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: $secondary; background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@ -452,7 +452,7 @@ ol.category-breadcrumb {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
border: 1px solid scale-color($primary, $lightness: 90%);; border: 1px solid scale-color-diff();;
background-color: $secondary; background-color: $secondary;
height: 200px; height: 200px;
padding: 8px 5px 0 7px; padding: 8px 5px 0 7px;

4
app/assets/stylesheets/mobile/topic-post.scss
View file

@ -87,7 +87,7 @@ button {
background-color: $secondary; background-color: $secondary;
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color-diff();
position: absolute; position: absolute;
text-align: left; text-align: left;
bottom: 0; bottom: 0;
@ -264,7 +264,7 @@ a.star {
border-left: 1px solid scale-color($primary, $lightness: 95%);; border-left: 1px solid scale-color($primary, $lightness: 95%);;
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 90%); background: scale-color-diff();
&:hover { &:hover {
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 75%);
color: $primary; color: $primary;

2
app/assets/stylesheets/mobile/topic.scss
View file

@ -65,7 +65,7 @@
display: none; display: none;
} }
border: none; border: none;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: $primary; color: $primary;
width: 130px; width: 130px;
height: 34px; height: 34px;

8
app/assets/stylesheets/mobile/user.scss
View file

@ -81,7 +81,7 @@
display: block; display: block;
width: 220px; width: 220px;
min-height: 200px; min-height: 200px;
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
color: $primary; color: $primary;
word-wrap: break-word; word-wrap: break-word;
} }
@ -104,7 +104,7 @@
margin-bottom: 50px; margin-bottom: 50px;
.about { .about {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color-diff();
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
margin-bottom: 10px; margin-bottom: 10px;
@ -131,7 +131,7 @@
} }
img.avatar { img.avatar {
border: 3px solid scale-color($primary, $lightness: 90%); border: 3px solid scale-color-diff();
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -221,7 +221,7 @@
.item { .item {
padding: 10px 8px; padding: 10px 8px;
background-color: $secondary; background-color: $secondary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color-diff();
} }
.type { .type {
color: scale-color($primary, $lightness: 50%); color: scale-color($primary, $lightness: 50%);