some color fixes, general consistency

This commit is contained in:
Kris Aubuchon 2014-05-06 23:53:04 -04:00
parent 19dec8c87c
commit 22e7fd5ed0
12 changed files with 81 additions and 99 deletions

View File

@ -164,7 +164,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 lighten($primary, 50%); border-left: solid 1px scale-color($primary, $lightness: 90%);
padding: 30px 0 30px 30px; padding: 30px 0 30px 30px;
} }
@ -197,8 +197,8 @@
.input-setting-list { .input-setting-list {
width: 408px; width: 408px;
padding: 1px; padding: 1px;
background-color: white; background-color: $secondary;
border: 1px solid #e6e6e6; border: 1px solid scale-color($primary, $lightness: 90%);
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;
@ -207,17 +207,17 @@
.list-input-item { .list-input-item {
width: 90px; width: 90px;
margin: 2px 1px; margin: 2px 1px;
background-color: white; background-color: $secondary;
border: 1px solid #e6e6e6; border: 1px solid scale-color($primary, $lightness: 90%);
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;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: #00aaff; border-color: $tertiary;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px #00aaff; box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3), 0 0 8px $tertiary;
} }
} }
@ -244,11 +244,11 @@
.setting.overridden { .setting.overridden {
input[type=text] { input[type=text] {
background-color: lighten($highlight, 23%); background-color: scale-color($highlight, $lightness: 50%);
} }
h3 { h3 {
color: darken($highlight, 30%); color: scale-color($highlight, $lightness: -50%);
} }
} }
} }
@ -256,7 +256,7 @@
section.details { section.details {
h1 { h1 {
font-size: 15px; font-size: 15px;
background-color: lighten($primary, 50%); background-color: scale-color($primary, $lightness: 90%);
color: $secondary; color: $secondary;
padding: 0 10px; padding: 0 10px;
margin: 0 0 5px 0; margin: 0 0 5px 0;
@ -264,13 +264,12 @@ section.details {
} }
#selected-controls { #selected-controls {
background-color: lighten($tertiary, 50%); background-color: scale-color($tertiary, $lightness: 75%);
padding: 8px; padding: 8px;
min-height: 27px; min-height: 27px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 1075px; width: 1075px;
border: 1px solid lighten($tertiary, 45%);
} }
.display-row { .display-row {
@ -441,7 +440,7 @@ section.details {
.hex, .opacity { text-align: center; } .hex, .opacity { text-align: center; }
.changed .name { .changed .name {
color: darken($highlight, 30%); color: scale-color($highlight, $lightness: -50%);
} }
} }
} }
@ -453,7 +452,7 @@ section.details {
tr.deleted td.excerpt { opacity: 0.8; background-color: scale-color($danger, $lightness: 30%); } tr.deleted td.excerpt { opacity: 0.8; background-color: scale-color($danger, $lightness: 30%); }
td.message { td.message {
padding: 4px 8px; padding: 4px 8px;
background-color: lighten($highlight, 23%); background-color: scale-color($highlight, $lightness: 30%);
} }
td { vertical-align: top; } td { vertical-align: top; }
th { text-align: left; } th { text-align: left; }
@ -582,14 +581,14 @@ table.api-keys {
.title { .title {
i.fa { i.fa {
color: darken($primary, 40%); color: $primary;
} }
} }
th { th {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
background-color: lighten($primary, 76%); background-color: scale-color($primary, $lightness: 90%);
} }
th.title { th.title {
text-align: left; text-align: left;
@ -599,7 +598,7 @@ table.api-keys {
background-color: $secondary; background-color: $secondary;
} }
tr:hover > th { tr:hover > th {
background-color: lighten($primary, 60%); background-color: scale-color($primary, $lightness: 75%);
} }
} }
@ -721,7 +720,7 @@ table.api-keys {
list-style: none; list-style: none;
} }
a { a {
color: darken($primary, 40%); color: $primary;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
@ -729,10 +728,10 @@ table.api-keys {
} }
.header { .header {
color: darken($primary, 40%); color: $primary;
font-weight: bold; font-weight: bold;
height: 30px; height: 30px;
background-color: lighten($primary, 60%); background-color: scale-color($primary, $lightness: 75%);
cursor: pointer; cursor: pointer;
h1 { h1 {
@ -771,7 +770,7 @@ table.api-keys {
} }
.commit-message { .commit-message {
color: darken($primary, 40%); color: $primary;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
@ -783,7 +782,7 @@ table.api-keys {
.committer-name { .committer-name {
font-weight: bold; font-weight: bold;
color: darken($primary, 40%); color: $primary;
} }
} }
li:last-child { li:last-child {
@ -796,7 +795,7 @@ table.api-keys {
width: 6px; width: 6px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: lighten($primary, 60%); background-color: scale-color($primary, $lightness: 75%);
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@ -807,7 +806,7 @@ table.api-keys {
.content-list { .content-list {
h3 { h3 {
color: darken($primary, 40%); color: $primary;
font-size: 15px; font-size: 15px;
padding-left: 5px; padding-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -818,25 +817,25 @@ table.api-keys {
margin: 0; margin: 0;
li:first-of-type { li:first-of-type {
border-top: 1px solid lighten($primary, 60%); border-top: 1px solid scale-color($primary, $lightness: 90%);
} }
li { li {
border-bottom: 1px solid lighten($primary, 60%); border-bottom: 1px solid scale-color($primary, $lightness: 90%);
} }
li a { li a {
display: block; display: block;
padding: 10px; padding: 10px;
color: darken($primary, 40%); color: $primary;
&:hover { &:hover {
background-color: #eee; background-color: scale-color($primary, $lightness: 90%);
color: darken($primary, 40%); color: $primary;
} }
&.active { &.active {
font-weight: bold; font-weight: bold;
color: darken($primary, 40%); color: $primary;
} }
} }
} }
@ -987,14 +986,14 @@ table.api-keys {
margin: 0 0 20px 6px; margin: 0 0 20px 6px;
a.filter { a.filter {
display: inline-block; display: inline-block;
background-color: lighten($primary, 60%); background-color: scale-color($primary, $lightness: 75%);
padding: 3px 10px; padding: 3px 10px;
border-radius: 3px; border-radius: 3px;
color: darken($primary, 40%); color: $primary;
&:hover { &:hover {
color: darken($primary, 40%); color: $primary;
background-color: lighten($primary, 76%); background-color: scale-color($primary, $lightness: 90%);
} }
@ -1024,11 +1023,11 @@ table.api-keys {
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses { .staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
border-bottom: dotted 1px lighten($primary, 60%); border-bottom: dotted 1px scale-color($primary, $lightness: 75%);
.heading-container { .heading-container {
width: 100%; width: 100%;
background-color: lighten($primary, 60%); background-color: scale-color($primary, $lightness: 90%);
} }
.col.heading { .col.heading {
font-weight: bold; font-weight: bold;
@ -1044,7 +1043,7 @@ table.api-keys {
.ember-list-item-view { .ember-list-item-view {
width: 100%; width: 100%;
border-top: solid 1px lighten($primary, 60%); border-top: solid 1px scale-color($primary, $lightness: 90%);
} }
} }

View File

@ -66,7 +66,7 @@ div.ac-wrap {
display: inline-block; display: inline-block;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color($primary, $lightness: 90%);
&:hover { &:hover {
background-color: scale-color($danger, $lightness: 30%); background-color: scale-color($danger, $lightness: 75%);
border: 1px solid scale-color($danger, $lightness: 30%); border: 1px solid scale-color($danger, $lightness: 30%);
text-decoration: none; text-decoration: none;
color: $danger; color: $danger;

View File

@ -86,11 +86,11 @@
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
.diff-ins { .diff-ins {
background: scale-color($success, $lightness: 60%);; background: scale-color($success, $lightness: 90%);
} }
ins { ins {
color: $success; color: $success;
background: scale-color($success, $lightness: 60%);; background: scale-color($success, $lightness: 90%);
} }
del, .diff-del { del, .diff-del {
code, img { code, img {
@ -113,11 +113,11 @@
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
.diff-del { .diff-del {
background: scale-color($danger, $lightness: 30%); background: scale-color($danger, $lightness: 60%);
} }
del { del {
color: $danger; color: $danger;
background: scale-color($danger, $lightness: 30%); background: scale-color($danger, $lightness: 60%);
} }
span.date { span.date {
font-weight: bold; font-weight: bold;

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: 90%); border-left: 5px solid scale-color($primary, $lightness: 75%);
background: scale-color($primary, $lightness: 90%); background: scale-color($primary, $lightness: 95%);
font-size: 14px; font-size: 14px;
> .source { > .source {
margin-bottom: 12px; margin-bottom: 12px;

View File

@ -2,7 +2,6 @@
// Variables used throughout the theme // Variables used throughout the theme
// -------------------------------------------------- // --------------------------------------------------
// Layout dimensions // Layout dimensions
// -------------------------------------------------- // --------------------------------------------------
@ -10,18 +9,9 @@ $small-width: 950px !default;
$medium-width: 995px !default; $medium-width: 995px !default;
$large-width: 1110px !default; $large-width: 1110px !default;
// Primary color variables // Brand color variables
// -------------------------------------------------- // --------------------------------------------------
$black: #333 !default;
$white: #fff !default;
$blue: #00aaff !default;
$yellow: lighten(#FFFF00, 15%) !default;
$red: #e45735 !default;
$pink: #fa6c8d !default;
$green: #009900 !default;
$google: #5b76f7 !default; $google: #5b76f7 !default;
$facebook: #3b5998 !default; $facebook: #3b5998 !default;
$cas: #70BA61 !default; $cas: #70BA61 !default;
@ -36,12 +26,6 @@ $base-font-size: 14px !default;
$base-line-height: 19px !default; $base-line-height: 19px !default;
$base-font-family: Helvetica, Arial, sans-serif !default; $base-font-family: Helvetica, Arial, sans-serif !default;
// Broad general variables
// --------------------------------------------------
@import "colors"; @import "colors";
/* This file doesn't actually exist, it is injected by DiscourseSassImporter. */ /* This file doesn't actually exist, it is injected by DiscourseSassImporter. */

View File

@ -378,7 +378,7 @@ body {
} }
.input-prepend .add-on, .input-append .add-on { .input-prepend .add-on, .input-append .add-on {
color: $success; color: $success;
background-color: scale-color($success, $lightness: 60%); background-color: scale-color($success, $lightness: 90%);
border-color: $success; border-color: $success;
} }
} }
@ -498,7 +498,7 @@ body {
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: 18px; margin-bottom: 18px;
background-color: scale-color($danger, $lightness: 30%); background-color: scale-color($danger, $lightness: 75%);
color: #c09853; color: #c09853;
} }
.alert .close { .alert .close {
@ -508,15 +508,15 @@ body {
line-height: 18px; line-height: 18px;
} }
.alert-success { .alert-success {
background-color: scale-color($success, $lightness: 75%);; background-color: scale-color($success, $lightness: 90%);
color: $success; color: $success;
} }
.alert-error { .alert-error {
background-color: scale-color($danger, $lightness: 60%); background-color: scale-color($danger, $lightness: 75%);
color: $danger; color: $danger;
} }
.alert-info { .alert-info {
background-color: scale-color($tertiary, $lightness: 75%); background-color: scale-color($tertiary, $lightness: 90%);
color: $primary; color: $primary;
} }
.alert { .alert {

View File

@ -418,7 +418,7 @@
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
background: { background: {
color: $primary; color: #000;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
position: 10px 50%; position: 10px 50%;

View File

@ -54,7 +54,7 @@ h1 .topic-statuses .topic-status i {
position: absolute; position: absolute;
right: 330px; right: 330px;
z-index: 400; z-index: 400;
padding: 2px 8px 3px; padding: 10px 6px 5px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color($primary, $lightness: 90%);
font-size: 12px; font-size: 12px;
background: $secondary; background: $secondary;
@ -121,7 +121,7 @@ nav.post-controls {
} }
.show-replies { .show-replies {
background: scale-color($primary, $lightness: 90%); background: scale-color($primary, $lightness: 95%);
padding: 8px 15px; padding: 8px 15px;
padding-bottom: 20px; padding-bottom: 20px;
margin-left: 0; margin-left: 0;
@ -244,9 +244,9 @@ nav.post-controls {
.row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;} .row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
background: scale-color($primary, $lightness: 90%); background: scale-color($primary, $lightness: 95%);
.quote .title, blockquote, .onebox, .onebox-result { .quote .title, blockquote, .onebox, .onebox-result {
background: scale-color($primary, $lightness: 95%); background: scale-color($primary, $lightness: 90%);
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid scale-color($primary, $lightness: 75%);
} }
@ -271,13 +271,15 @@ nav.post-controls {
} }
.topic-meta-data-inside { .topic-meta-data-inside {
margin: -15px 0 0 0; margin: -15px 0 0 0;
color: $primary; color: scale-color($primary, $lightness: 50%);
a {color: scale-color($primary, $lightness: 50%);}
} }
.topic-meta-data {padding-top: 20px;} .topic-meta-data {padding-top: 20px;}
.arrow {color: scale-color($primary, $lightness: 50%);}
} }
.bottom-round nav.post-controls .show-replies { .bottom-round nav.post-controls .show-replies {
background: scale-color($primary, $lightness: 90%); background: scale-color($primary, $lightness: 95%);
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 8px; padding-bottom: 8px;
&:hover {background: scale-color($primary, $lightness: 90%); &:hover {background: scale-color($primary, $lightness: 90%);
@ -671,19 +673,19 @@ iframe {
} }
} }
.deleted {
.topic-body {
background-color: scale-color($danger, $lightness: 30%);
}
}
.post-hidden { .post-hidden {
opacity: 0.5; opacity: 0.5;
} }
.moderator { .moderator {
.topic-body { .topic-body {
background-color: scale-color($highlight, $lightness: 60%); background-color: scale-color($highlight, $lightness: 75%);
}
}
.deleted {
.topic-body {
background-color: scale-color($danger, $lightness: 75%);
} }
} }
@ -781,7 +783,7 @@ blockquote { /* solo quotes */
.quote-controls { .quote-controls {
float: right; float: right;
color: $primary; color: scale-color($primary, $lightness: 50%);
a { a {
margin: 0; margin: 0;
} }
@ -789,7 +791,7 @@ blockquote { /* solo quotes */
.quote-other-topic:before { .quote-other-topic:before {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
color: $primary; color: scale-color($primary, $lightness: 50%);
font-family: "FontAwesome"; font-family: "FontAwesome";
position: relative; position: relative;
z-index: 20; z-index: 20;

View File

@ -163,9 +163,7 @@ a:hover.reply-new {
bottom: 0; bottom: 0;
width: 0; width: 0;
border-right: 1px solid scale-color($primary, $lightness: 90%); border-right: 1px solid scale-color($primary, $lightness: 90%);
// background-color: #d4eaf4; background-color: scale-color($success, $lightness: 70%);
// background-color: #C5E8F7;
background-color: scale-color($success, $lightness: 60%);
transition: width .75s; transition: width .75s;
} }
} }

View File

@ -124,7 +124,7 @@ display: none;
height: 70px; height: 70px;
text-indent: -9999em; text-indent: -9999em;
background: { background: {
color: $primary; color: #000;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
size: 35px; size: 35px;

View File

@ -240,7 +240,6 @@
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%);
@include box-shadow(0 1px 3px rgba($primary, 0.22));
figure { figure {
float: left; float: left;
margin: 3px 7px 0 0; margin: 3px 7px 0 0;

View File

@ -1,5 +1,5 @@
.gap { .gap {
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color($primary, $lightness: 95%);
padding: 5px 15px; padding: 5px 15px;
color: $primary; color: $primary;
text-align: center; text-align: center;
@ -7,14 +7,14 @@
} }
.topic-post { .topic-post {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 95%);
padding: 6px 0 3px 0; padding: 6px 0 3px 0;
} }
nav.post-controls { nav.post-controls {
background-color: $secondary; background-color: $secondary;
padding: 0; padding: 0;
border-right: 1px solid scale-color($primary, $lightness: 90%); border-right: 1px solid scale-color($primary, $lightness: 95%);
clear: both; clear: both;
button {color: scale-color($primary, $lightness: 50%); button {color: scale-color($primary, $lightness: 50%);
} }
@ -122,7 +122,7 @@ a.star {
border-radius: 5px; border-radius: 5px;
margin: 15px 10px 20px 10px; margin: 15px 10px 20px 10px;
border: 1px solid scale-color($primary, $lightness: 90%); border: 1px solid scale-color($primary, $lightness: 95%);
h3 { h3 {
margin-bottom: 4px; margin-bottom: 4px;
@ -202,7 +202,7 @@ a.star {
} }
.information { .information {
border-top: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 95%);
} }
.domain { .domain {
@ -218,15 +218,15 @@ 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($primary, $lightness: 95%);;
border-left: 1px solid scale-color($primary, $lightness: 90%);; border-left: 1px solid scale-color($primary, $lightness: 95%);;
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary;
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 75%);
&:hover { &:hover {
background: scale-color($primary, $lightness: 75%); background: scale-color($primary, $lightness: 75%);
color: $primary; color: $primary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-bottom: 1px solid scale-color($primary, $lightness: 95%);
} }
.fa { .fa {
@ -239,7 +239,7 @@ a.star {
} }
#topic-footer-buttons { #topic-footer-buttons {
border-top: 1px solid scale-color($primary, $lightness: 90%);; border-top: 1px solid scale-color($primary, $lightness: 95%);;
padding: 20px 10px 0 10px; padding: 20px 10px 0 10px;
} }
@ -285,7 +285,7 @@ span.post-count {
#topic-title { #topic-title {
z-index: 1000; z-index: 1000;
background:scale-color($primary, $lightness: 90%); background-color: scale-color($primary, $lightness: 95%);
margin: 0 0 0 0 !important; margin: 0 0 0 0 !important;
padding: 15px 10px 15px 10px; padding: 15px 10px 15px 10px;
} }
@ -394,7 +394,7 @@ iframe {
} }
.deleted { .deleted {
background-color: $danger; background-color: scale-color($danger, $lightness: 75%);
} }
#show-topic-admin { #show-topic-admin {
@ -468,7 +468,7 @@ blockquote {
.quote .title { .quote .title {
border-left: 5px solid scale-color($primary, $lightness: 75%); border-left: 5px solid scale-color($primary, $lightness: 75%);
background-color: scale-color($primary, $lightness: 90%); background-color: scale-color($primary, $lightness: 95%);
padding: 10px 10px 10px 12px; padding: 10px 10px 10px 12px;
clear: both; clear: both;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }