Merge pull request #2313 from awesomerobot/master

simplifying and segmenting color variables
This commit is contained in:
Jeff Atwood 2014-05-05 23:07:46 -07:00
commit ab3ab26cc4
48 changed files with 766 additions and 920 deletions

View File

@ -8,10 +8,10 @@
width: 100%;
tr {text-align: left;}
td, th {padding: 8px;}
th {border-top: 1px solid $primary_border_color;}
td {border-bottom: 1px solid $primary_border_color; border-top: 1px solid $primary_border_color;}
tr:hover { background-color: darken($primary_background_color, 2.5%); }
tr.selected { background-color: lighten($tertiary_background_color, 58%); }
th {border-top: 1px solid scale-color($primary, $lightness: 90%);}
td {border-bottom: 1px solid scale-color($primary, $lightness: 90%); border-top: 1px solid scale-color($primary, $lightness: 90%);}
tr:hover { background-color: darken($secondary, 2.5%); }
tr.selected { background-color: lighten($primary, 50%); }
.filters input { margin-bottom: 0; }
}
@ -19,10 +19,10 @@
font-size: 12px;
float: right;
margin-right: 10px;
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
padding: 2px 5px;
border-radius: 5px;
color: $secondary_text_color;
color: $primary;
}
.admin-content {
@ -52,11 +52,11 @@
.bar {
margin-top: 5px;
background-color: $emphasis_text_color;
background-color: $tertiary;
display: inline-block;
text-align: right;
padding-right: 8px;
color: $tertiary_text_color;
color: $secondary;
}
}
}
@ -65,13 +65,13 @@
.admin-loading {
width: 100px;
margin: 0 auto 30px auto;
background-color: $secondary_background_color;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $tertiary_text_color;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
@ -85,16 +85,16 @@
}
.admin-controls {
background-color: darken($primary_background_color, 5%);
background-color: darken($secondary, 5%);
padding: 10px 10px 3px 0;
height: 35px;
.nav.nav-pills {
li.active {
a {
border-color: darken($primary_border_color, 10%);
background-color: $tertiary_background_color;
border-color: scale-color($primary, $lightness: 90%);
background-color: lighten($primary, 40%);
&:hover {
background-color: $tertiary_background_color;
background-color: lighten($primary, 40%);
}
}
}
@ -102,7 +102,7 @@
h1 {
font-size: 20px;
line-height: 25px;
color: $secondary_text_color;
color: $primary;
}
.controls {
margin-left: 10px;
@ -153,8 +153,8 @@
border-right: none;
}
li a.active {
color: $tertiary_text_color;
background-color: $nav-stacked-background-color-active;
color: $secondary;
background-color: $danger;
}
}
@ -164,7 +164,7 @@
@include small-width { width: 700px; }
min-height: 800px;
margin-left: 0;
border-left: solid 1px lighten($nav-stacked-border-color, 5%);
border-left: solid 1px lighten($primary, 50%);
padding: 30px 0 30px 30px;
}
@ -224,14 +224,14 @@
.btn.list-add-value {
margin: 0px 3px;
padding: 4px 10px;
color: $link-color;
color: $tertiary;
}
}
.desc {
padding-top: 3px;
color: $secondary_text_color;
color: $primary;
font-size: 80%;
line-height: 1.4em;
}
@ -244,11 +244,11 @@
.setting.overridden {
input[type=text] {
background-color: lighten($highlight_background_color, 40%);
background-color: lighten($highlight, 23%);
}
h3 {
color: darken($highlight_text_color, 30%);
color: darken($highlight, 30%);
}
}
}
@ -256,21 +256,21 @@
section.details {
h1 {
font-size: 15px;
background-color: lighten($secondary_background_color, 50%);
color: $tertiary_text_color;
background-color: lighten($primary, 50%);
color: $secondary;
padding: 0 10px;
margin: 0 0 5px 0;
}
}
#selected-controls {
background-color: lighten($emphasis_background_color, 50%);
background-color: lighten($tertiary, 50%);
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
border: 1px solid lighten($emphasis_border_color, 45%);
border: 1px solid lighten($tertiary, 45%);
}
.display-row {
@ -280,9 +280,9 @@ section.details {
border-top: 0;
}
&.highlight-danger {
background-color: $warning_background_color;
background-color: $danger;
}
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
&:before, &:after {
display: table;
content: "";
@ -364,7 +364,7 @@ section.details {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $secondary_text_color;
color: $primary;
}
}
}
@ -421,7 +421,7 @@ section.details {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $secondary_text_color;
color: $primary;
}
}
}
@ -441,7 +441,7 @@ section.details {
.hex, .opacity { text-align: center; }
.changed .name {
color: darken($highlight_text_color, 30%);
color: darken($highlight, 30%);
}
}
}
@ -450,10 +450,10 @@ section.details {
.admin-flags {
tr.hidden-post td.excerpt { opacity: 0.4; }
tr.deleted td.excerpt { opacity: 0.8; background-color: $warning_background_color; }
tr.deleted td.excerpt { opacity: 0.8; background-color: scale-color($danger, $lightness: 30%); }
td.message {
padding: 4px 8px;
background-color: $highlight_background_color;
background-color: lighten($highlight, 23%);
}
td { vertical-align: top; }
th { text-align: left; }
@ -533,13 +533,13 @@ section.details {
}
.up-to-date {
color: $success_text_color;
color: $success;
}
.updates-available {
color: $warning_text_color;
color: $danger;
}
.critical-updates-available {
color: $warning_text_color;
color: $danger;
}
}
@ -582,24 +582,24 @@ table.api-keys {
.title {
i.fa {
color: $primary_text_color;
color: darken($primary, 40%);
}
}
th {
font-weight: normal;
text-align: center;
background-color: lighten($secondary_background_color, 76%);
background-color: lighten($primary, 76%);
}
th.title {
text-align: left;
}
thead {
tr:hover > td {
background-color: $primary_background_color;
background-color: $secondary;
}
tr:hover > th {
background-color: lighten($secondary_background_color, 60%);
background-color: lighten($primary, 60%);
}
}
@ -612,13 +612,13 @@ table.api-keys {
}
&.trending-up {
color: $success_text_color;
color: $success;
i.up {
display: inline;
}
}
&.trending-down {
color: $warning_text_color;
color: $danger;
i.down {
display: inline;
}
@ -634,11 +634,10 @@ table.api-keys {
&.detected-problems {
@include border-radius-all(5px);
background-color: lighten($secondary_background_color, 76%);
border: 1px solid $primary_border_color;
background-color: scale-color($primary, $lightness: 90%);
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px rgba($primary_border_color, .4);
box-shadow: inset 0 0 10px rgba($primary, .1);
.look-here {
float: left;
@ -647,7 +646,7 @@ table.api-keys {
.fa {
font-size: 32px;
vertical-align: middle;
color: $secondary_text_color
color: $primary
}
}
@ -661,7 +660,7 @@ table.api-keys {
text-align: right;
}
.btn {
background-color: lighten($secondary_background_color, 60%);
background-color: lighten($primary, 60%);
}
ul {
margin-left: 0;
@ -702,7 +701,7 @@ table.api-keys {
.commits-widget {
border: solid 1px $primary_border_color;
border: solid 1px scale-color($primary, $lightness: 90%);
width: 500px;
height: 180px;
margin-bottom: 36px;
@ -722,7 +721,7 @@ table.api-keys {
list-style: none;
}
a {
color: $primary_text_color;
color: darken($primary, 40%);
text-decoration: none;
}
a:hover {
@ -730,11 +729,10 @@ table.api-keys {
}
.header {
color: $primary_text_color;
color: darken($primary, 40%);
font-weight: bold;
height: 30px;
border-bottom: solid 1px $primary_border_color;
background-color: lighten($secondary_background_color, 60%);
background-color: lighten($primary, 60%);
cursor: pointer;
h1 {
@ -746,7 +744,7 @@ table.api-keys {
}
.header:hover h1 {
color: $link-color-hover;
color: $tertiary;
}
.commits-list {
@ -757,8 +755,7 @@ table.api-keys {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
border-bottom: solid 1px $primary_border_color;
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
.left {
float: left;
}
@ -768,25 +765,25 @@ table.api-keys {
img {
margin-top: 2px;
border: solid 1px $primary_border_color;
border: solid 1px scale-color($primary, $lightness: 90%);
padding: 2px;
background-color: $primary_background_color;
background-color: $secondary;
}
.commit-message {
color: $primary_text_color;
color: darken($primary, 40%);
font-size: 12px;
font-weight: bold;
}
.commit-meta {
color: $secondary_text_color;
color: $primary;
font-size: 12px;
}
.committer-name {
font-weight: bold;
color: $primary_text_color;
color: darken($primary, 40%);
}
}
li:last-child {
@ -799,18 +796,18 @@ table.api-keys {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: lighten($secondary_background_color, 60%);
background-color: lighten($primary, 60%);
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px $primary_border_color;
border-left: solid 1px scale-color($primary, $lightness: 90%);
}
}
.content-list {
h3 {
color: $primary_text_color;
color: darken($primary, 40%);
font-size: 15px;
padding-left: 5px;
margin-bottom: 10px;
@ -821,25 +818,25 @@ table.api-keys {
margin: 0;
li:first-of-type {
border-top: 1px solid $primary_border_color;
border-top: 1px solid lighten($primary, 60%);
}
li {
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid lighten($primary, 60%);
}
li a {
display: block;
padding: 10px;
color: $primary_text_color;
color: darken($primary, 40%);
&:hover {
background-color: #eee;
color: $primary_text_color;
color: darken($primary, 40%);
}
&.active {
font-weight: bold;
color: $primary_text_color;
color: darken($primary, 40%);
}
}
}
@ -855,7 +852,7 @@ table.api-keys {
margin-left: 20px;
p.description {
color: $secondary_text_color;
color: $primary;
}
.controls {
@ -990,14 +987,14 @@ table.api-keys {
margin: 0 0 20px 6px;
a.filter {
display: inline-block;
background-color: lighten($secondary_background_color, 60%);
background-color: lighten($primary, 60%);
padding: 3px 10px;
border-radius: 3px;
color: $primary_text_color;
color: darken($primary, 40%);
&:hover {
color: $primary_text_color;
background-color: lighten($secondary_background_color, 76%);
color: darken($primary, 40%);
background-color: lighten($primary, 76%);
}
@ -1027,11 +1024,11 @@ table.api-keys {
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
border-bottom: dotted 1px $primary_border_color;
border-bottom: dotted 1px lighten($primary, 60%);
.heading-container {
width: 100%;
background-color: lighten($secondary_background_color, 76%);
background-color: lighten($primary, 60%);
}
.col.heading {
font-weight: bold;
@ -1047,7 +1044,7 @@ table.api-keys {
.ember-list-item-view {
width: 100%;
border-top: solid 1px $primary_border_color;
border-top: solid 1px lighten($primary, 60%);
}
}
@ -1059,10 +1056,10 @@ table.api-keys {
.leader-requirements {
.fa-check {
color: $success_text_color;
color: $success;
}
.fa-times {
color: $warning_text_color;
color: $danger;
}
}
@ -1074,7 +1071,7 @@ $rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default;
.btn-rollback {
color: $tertiary_text_color;
color: $secondary;
background: $rollback;
&:hover {
background: $rollback-dark;

View File

@ -1,6 +1,6 @@
.fa-thumb-tack.unpinned {
@include fa-icon-rotate(315deg, 1);
color: $secondary_text_color;
color: $primary;
}
.topic-statuses .fa {

View File

@ -3,7 +3,7 @@
#simple-container {
@include border-radius-all(10px);
background-color: $primary_background_color;
background-color: $secondary;
padding: 20px;
width: 550px;
margin: 0 auto;

View File

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

View File

@ -4,11 +4,11 @@
}
.topic-count {
font-size: 11px;
color: $secondary_text_color;
color: $primary;
display: inline-block;
}
.highlighted .topic-count {
color: $tertiary_text_color;
color: $secondary;
}
.category-desc {
margin: 6px 0 0 3px;

View File

@ -2,28 +2,28 @@
z-index: 999999;
position: absolute;
width: 240px;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
ul {
list-style: none;
padding: 0;
margin: 0;
li {
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
a[href] {
padding: 5px;
display: block;
span.username {
color: $primary_text_color;
color: darken($primary, 40%);
}
span.name {
font-size: 11px;
}
&.selected {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 90%);
}
@include hover {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 90%);
text-decoration: none;
}
}
@ -42,8 +42,8 @@ div.ac-wrap.disabled {
div.ac-wrap {
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
padding: 5px 10px;
div.item {
float: left;
@ -64,12 +64,12 @@ div.ac-wrap {
border-radius: 10px;
width: 10px;
display: inline-block;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
&:hover {
background-color: $warning_background_color;
border: 1px solid $warning_border_color;
background-color: scale-color($danger, $lightness: 30%);
border: 1px solid scale-color($danger, $lightness: 30%);
text-decoration: none;
color: $warning_text_color;
color: $danger;
}
}
}
@ -94,7 +94,7 @@ div.ac-wrap {
}
.examples {
margin: 10px 0 0 0;
color: $secondary_text_color;
color: $primary;
}
}

View File

@ -1,42 +1,42 @@
a.no-href {
a.no-href {
cursor: pointer;
}
body {
button.ok {
background: $btn-success-background;
color: $tertiary_text_color;
background: $success;
color: $secondary;
@include hover {
background: lighten($btn-success-background, 10%);
color: $tertiary_text_color;
background: lighten($success, 10%);
color: $secondary;
}
}
button.cancel {
background: $btn-danger-background-color;
color: $tertiary_text_color;
background: $danger;
color: $secondary;
@include hover {
background: lighten($btn-danger-background-color, 10%);
color: $tertiary_text_color;
background: lighten($danger, 10%);
color: $secondary;
}
}
.coldmap-high {
color: $coldmap-high !important;
color: scale-color($tertiary, $lightness: 40%) !important;
}
.coldmap-med {
color: $coldmap-med !important;
color: $tertiary !important;
}
.coldmap-low {
color: $coldmap-low !important;
color: scale-color($tertiary, $lightness: -10%) !important;
}
.heatmap-high {
color: $heatmap-high !important;
color: scale-color($danger, $lightness: 30%) !important;
}
.heatmap-med {
color: $heatmap-med !important;
color: $danger !important;
}
.heatmap-low {
color: $heatmap-low !important;
color: darken($danger, 10%) !important;
}
#loading-message {
position: absolute;
@ -44,7 +44,7 @@ body {
text-align: center;
top: 120px;
left: 500px;
color: lighten($primary_text_color, 35%);
color: $primary;
}
.top-space {
margin-top: 10px;
@ -54,7 +54,7 @@ body {
}
.message {
@include border-radius-all(8px);
background-color: $primary_background_color;
background-color: $secondary;
padding: 14px;
h2 {
margin-bottom: 20px;
@ -69,7 +69,7 @@ body {
.contents {
padding-top: 10px;
a[href] {
color: $tertiary_text_color;
color: $secondary;
}
}
}
@ -81,10 +81,10 @@ body {
.tip {
display: inline-block;
&.good {
color: $success_text_color;
color: $success;
}
&.bad {
color: $warning_text_color;
color: $danger;
}
}
}
@ -95,12 +95,12 @@ body {
#pagedown-editor {
width: 540px;
background-color: $primary_background_color;
background-color: $secondary;
padding: 0 10px 13px 10px;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
.preview {
margin-top: 8px;
border: 1px dashed $primary_border_color;
border: 1px dashed scale-color($primary, $lightness: 90%);
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
@ -120,7 +120,7 @@ body {
font-size: 15px;
line-height: 23px;
text-align: center;
color: $primary_background_color;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
@ -145,9 +145,9 @@ body {
}
.avatar-wrapper {
background-color: $primary_background_color;
background-color: $secondary;
display: inline-block;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
@include border-radius-all(5px);
img {
@include border-radius-all(4px);
@ -157,6 +157,6 @@ body {
.profiler-results.profiler-left {
top: 60px !important;
}
}

View File

@ -8,7 +8,7 @@
#revision-controls {
float: left;
.btn[disabled]:hover {
color: lighten($primary_text_color, 35%);
color: $primary;
}
}
#revision-numbers {
@ -27,7 +27,7 @@
}
}
#revision-details {
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
padding: 5px;
margin-top: 10px;
}
@ -67,63 +67,63 @@
}
ins, .diff-ins {
code, img {
border: 2px solid $success_border_color;
border: 2px solid $success;
}
img {
opacity: .75;
filter: alpha(opacity=75);
}
a {
color: $success_text_color;
color: $success;
text-decoration: none;
}
}
img.diff-ins, code.diff-ins {
border: 2px solid $success_border_color;
border: 2px solid $success;
}
img.diff-ins {
opacity: .75;
filter: alpha(opacity=75);
}
.diff-ins {
background: $success_background_color;
background: scale-color($success, $lightness: 60%);;
}
ins {
color: $success_text_color;
background: $success_background_color;
color: $success;
background: scale-color($success, $lightness: 60%);;
}
del, .diff-del {
code, img {
border: 2px solid $warning_border_color;
border: 2px solid $danger;
}
img {
opacity: .5;
filter: alpha(opacity=50);
}
a {
color: $warning_text_color;
color: $danger;
text-decoration: none;
}
}
img.diff-del, code.diff-del {
border: 2px solid $warning_border_color;
border: 2px solid $danger;
}
img.diff-del {
opacity: .5;
filter: alpha(opacity=50);
}
.diff-del {
background: $warning_background_color;
background: scale-color($danger, $lightness: 30%);
}
del {
color: $warning_text_color;
background: $warning_background_color;
color: $danger;
background: scale-color($danger, $lightness: 30%);
}
span.date {
font-weight: bold;
}
span.edit-reason {
background-color: $highlight_background_color;
background-color: lighten($highlight, 23%);
padding: 3px 5px 5px 5px;
}
.modal-header {

View File

@ -3,7 +3,7 @@
display: inline-block;
&:hover .meta {
background: lighten($secondary_background_color, 60%);
background: $primary;
opacity: 1;
@include transition(opacity .5s);
}
@ -17,8 +17,8 @@
position: absolute;
bottom: 0;
width: 100%;
color: $tertiary_text_color;
background: $secondary_background_color;
color: $secondary;
background: $primary;
opacity: 0;
@include transition(opacity .2s);
@ -38,7 +38,7 @@
.informations {
margin: 6px;
padding-right: 20px;
color: lighten($primary_text_color, 35%);
color: $primary;
font-size: 14px;
}

View File

@ -18,7 +18,7 @@
bottom: 0;
left: 0;
z-index: 1040;
background-color: $secondary_background_color;
background-color: $primary;
&.fade {
opacity: 0;
}
@ -50,11 +50,11 @@
.modal-inner-container {
max-width: 710px;
margin: 0 auto;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
border: 1px solid lighten($primary_border_color, 10%);
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border: 1px solid scale-color($primary, $lightness: 90%);
box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
box-shadow: 0 3px 7px rgba($primary, .8);
background-clip: padding-box;
}
@ -73,7 +73,7 @@
.modal-footer {
margin: 0 15px;
padding: 14px 0 15px;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
}
.modal-footer:before,
.modal-footer:after {
@ -87,11 +87,11 @@
.modal {
.nav {
padding: 10px 30px;
background-color: lighten($primary_background_color, 76%);
background-color: lighten($secondary, 76%);
li > a {
font-size: 14px;
}
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
@ -105,17 +105,17 @@
height: 80px;
}
label {
color: lighten($primary_text_color, 35%);
color: $primary;
}
p {
color: $primary_text_color;
color: darken($primary, 40%);;
font-size: 13px;
}
.archetype-option {
margin-bottom: 20px;
}
.warning {
color: $warning_text_color !important;
color: $danger !important;
}
}
.password-confirmation {
@ -144,9 +144,9 @@
font-weight: normal;
}
&.btn-reply-here {
background: lighten($secondary_background_color, 60%);
background: scale-color($primary, $lightness: 90%);
text-shadow: none;
color: lighten($primary_text_color, 35%);
color: $primary;
}
}
.cancel {

View File

@ -1,7 +1,7 @@
.fa.muted {
color: $notification_badge_background_color;
color: scale-color($primary, $lightness: 40%);
}
.fa.tracking, .fa.watching {
color: lighten($emphasis_text_color, 20%);
color: $tertiary;
font-weight: normal;
}

View File

@ -13,14 +13,14 @@ a.loading-onebox {
.onebox-result {
margin-top: 15px;
padding: 12px 25px 12px 12px;
border-left: 5px solid $primary_border_color;
background: lighten($secondary_background_color, 76%);
border-left: 5px solid scale-color($primary, $lightness: 90%);
background: scale-color($primary, $lightness: 90%);
font-size: 14px;
> .source {
margin-bottom: 12px;
margin-right: 10px;
display: block;
color: $primary_text_color;
color: $primary;
position: relative;
height: 20px;
.info {
@ -91,13 +91,13 @@ a.loading-onebox {
aside.onebox {
margin-top: 15px;
padding: 12px 25px 12px 12px;
border-left: 5px solid $primary_border_color;
background: lighten($secondary_background_color, 76%);
border-left: 5px solid scale-color($primary, $lightness: 90%);
background: scale-color($primary, $lightness: 90%);
font-size: 14px;
header {
a[href] {
color: $primary_text_color;
color: $primary;
text-decoration: none;
}
}
@ -118,12 +118,12 @@ aside.onebox {
}
a[href] {
color: $link_color;
color: scale-color($tertiary, $lightness: -20%);
text-decoration: none;
}
a[href]:visited {
color: $link_color;
color: scale-color($tertiary, $lightness: -20%);
}
img {

View File

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

View File

@ -4,8 +4,8 @@
position: absolute;
left: 20px;
z-index: 990;
box-shadow: 0 1px 5px rgba($primary_shadow_color, .4);
background-color: lighten($secondary_background_color, 60%);
box-shadow: 0 1px 5px rgba($primary, .4);
background-color: scale-color($primary, $lightness: 90%);
padding: 6px 10px 10px 10px;
width: 300px;
display: none;
@ -29,7 +29,7 @@
float: right;
font-size: 20px;
a {
color: $primary_text_color;
color: $primary;
}
}
}

View File

@ -8,10 +8,10 @@
}
.topic-admin-menu {
background-color: $primary_background_color;
background-color: $secondary;
width: 205px;
padding: 10px;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
position: fixed;
top: 70px;
right: 10px;

View File

@ -4,8 +4,8 @@
left: -5px;
bottom: -5px;
text-shadow:
-1px -1px 0 $btn-primary-background-color,
1px 1px 0 $btn-primary-background-color,
1px -1px 0 $btn-primary-background-color,
-1px 1px 0 $btn-primary-background-color;
-1px -1px 0 scale-color($tertiary, $lightness: -10%),
1px 1px 0 scale-color($tertiary, $lightness: -10%),
1px -1px 0 scale-color($tertiary, $lightness: -10%),
-1px 1px 0 scale-color($tertiary, $lightness: -10%);
}

View File

@ -1,13 +1,13 @@
/* Default badge styles. */
.user-badge {
padding: 3px 8px;
color: $primary_text_color;
border: 1px solid $secondary-border-color;
color: darken($primary, 40%);;
border: 1px solid lighten($primary, 60%);
font-size: $base-font-size * 0.86;
line-height: 16px;
margin: 0;
display: inline-block;
background-color: $primary_background_color;
background-color: $secondary;
.fa {
padding-right: 3px;
@ -50,7 +50,7 @@
/* Badge listing in /badges. */
table.badges-listing {
margin: 20px 0;
border-bottom: 1px solid $primary-border-color;
border-bottom: 1px solid $primary;
.user-badge {
font-size: $base-font-size;
@ -62,7 +62,7 @@ table.badges-listing {
td.grant-count {
font-size: 0.8em;
color: $secondary_text_color;
color: $primary;
text-align: right;
}
@ -71,7 +71,7 @@ table.badges-listing {
}
tr {
border-top: 1px solid $primary-border-color;
border-top: 1px solid $primary;
}
}
@ -80,18 +80,18 @@ table.badges-listing {
.badge-user {
display: inline-block;
padding: 5px 10px;
border: 1px solid $secondary_border_color;
border: 1px solid lighten($primary, 60%);
margin-bottom: 3px;
.details {
float: right;
margin: 0 10px;
padding-top: 3px;
color: $primary_text_color;
color: darken($primary, 40%);;
}
.date {
display: block;
color: $secondary_text_color;
color: $primary;
}
}
}

View File

@ -8,7 +8,7 @@
.fa {
width: 15px;
display: inline-block;
color: $secondary_text_color;
color: $primary;
}
.avatar-wrapper {
border: none;
@ -40,7 +40,7 @@
h2 {
a {
font-size: 14px;
color: $link_color;
color: scale-color($tertiary, $lightness: -10%);;
cursor: pointer;
}
}

View File

@ -32,9 +32,9 @@
.badge-category {
padding: 6px;
color: $tertiary_text_color;
color: $secondary;
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
}
@ -66,21 +66,21 @@ h1 a.badge-category div {vertical-align: top;}
.badge-notification {
@extend %badge;
padding: 4px;
color: $tertiary_text_color;
color: $secondary;
font-size: 11px;
line-height: 1;
min-width: 11px;
text-align: center;
background-color: $notification_badge_background_color;
background-color: scale-color($primary, $lightness: 90%);
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
// New posts
&.new-posts, &.unread-posts {
background-color: lighten($emphasis_text_color, 20%);
color: $tertiary_text_color;
background-color: scale-color($tertiary, $lightness: 50%);
color: $secondary;
font-weight: normal;
}
@ -106,7 +106,7 @@ h1 a.badge-category div {vertical-align: top;}
font-size: 14px;
line-height: 1;
&[href] {
color: $topic-list-td-color;
color: scale-color($primary, $lightness: 40%);
}
}
@ -116,10 +116,10 @@ h1 a.badge-category div {vertical-align: top;}
.badge-group {
@extend %badge;
padding: 3px 5px;
color: $primary_text_color;
text-shadow: 0 1px 0 rgba($secondary_shadow_color, 0.2);
color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: #ddd;
border-color: #aaa;
font-size: 12px;
@include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.52));
@include box-shadow(inset 0 1px 0 rgba($primary, 0.22));
}

View File

@ -37,23 +37,22 @@
.btn {
border: none;
color: $primary_text_color;
color: $primary;
font-weight: normal;
background: lighten($secondary_background_color, 73%);
background: scale-color($primary, $lightness: 90%);
&[href] {
color: $btn-default-color;
color: $primary;
}
&:hover {
background: #aaa;
color: #fff;
}
&:active {
@include linear-gradient( darken(#aaa, 8%), #aaa);
}
&[disabled] {
background: $btn-default-background-color;
&:hover { color: $primary_text_color; }
background: scale-color($primary, $lightness: 90%);
&:hover { color: scale-color($primary, $lightness: 70%); }
cursor: not-allowed;
}
}
@ -69,24 +68,24 @@
.btn-primary {
border: none;
color: $tertiary_text_color;
color: $secondary;
font-weight: normal;
color: #fff;
background: $btn-primary-background-color;
background: $tertiary;
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
&:hover {
color: #fff;
background: darken($btn-primary-background-color, 12%);
background: scale-color($tertiary, $lightness: -20%);
}
&:active {
@include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
@include linear-gradient(scale-color($tertiary, $lightness: -20%), scale-color($tertiary, $lightness: -10%));
color: #fff;
}
&[disabled] {
background: $btn-primary-background-color;
background: $tertiary;
}
}
@ -94,20 +93,20 @@
// --------------------------------------------------
.btn-danger {
color: $tertiary_text_color;
color: $secondary;
font-weight: normal;
background: $btn-danger-background-color;
background: $danger;
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
&:hover{
background: $btn-danger-background-color-dark;
background: scale-color($danger, $lightness: -20%);
}
&:active {
@include linear-gradient($btn-danger-background-color-dark, $btn-danger-background-color);
@include linear-gradient(scale-color($danger, $lightness: -20%), $danger);
}
&[disabled] {
background: $btn-danger-background-color;
background: $danger;
}
}
@ -115,11 +114,11 @@
// --------------------------------------------------
.btn-social {
color: $tertiary_text_color;
text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
@include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.1));
color: $secondary;
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include box-shadow(inset 0 1px 0 rgba($primary, 0.1));
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
&:before {
margin-right: 7px;

View File

@ -4,7 +4,7 @@
}
.topic-list-item.selected td:first-child, .topic-post.selected {
border-left: 1px solid $topic-list-starred-color;
border-left: 1px solid $danger;
}
.topic-list-item.selected {

View File

@ -26,18 +26,17 @@
> a {
border: none;
padding: 5px 12px;
color: $nav-pills-color;
color: $primary;
font-size: 16px;
line-height: 20px;
&:hover {
color: $nav-pills-color-hover;
background-color: $nav-pills-background-color-hover;
color: $danger;
background-color: scale-color($danger, $lightness: 70%);
}
}
&.active > a, > a.active {
border-color: darken($nav-pills-background-color-active, 10%);
color: $tertiary_text_color;
background-color: $nav-pills-background-color-active;
color: $secondary;
background-color: $danger;
}
}
}
@ -48,13 +47,13 @@
.nav-stacked {
position: relative;
@extend %nav;
border: 1px solid $nav-stacked-border-color;
border: 1px solid scale-color($primary, $lightness: 60%);
padding: 0;
overflow: hidden;
background-color: $nav-stacked-background-color;
@include box-shadow(0 1px 0 $secondary_shadow_color);
background-color: scale-color($primary, $lightness: 90%);
@include box-shadow(0 1px 0 scale-color($primary, $lightness: 90%));
> li {
border-bottom: 1px solid $nav-stacked-divider-color;
border-bottom: 1px solid scale-color($primary, $lightness: 60%);
&:last-of-type {
border-bottom: 0;
}
@ -64,13 +63,13 @@
font-size: 16px;
line-height: 20px;
cursor: pointer;
color: $nav-stacked-color;
color: $primary;
}
}
.active > a,
.active .fa-chevron-right {
color: $tertiary_text_color;
background-color: $nav-stacked-background-color-active;
color: $secondary;
background-color: $danger;
}
.count {
font-size: 12px;
@ -79,7 +78,7 @@
.fa-chevron-right {
float: right;
margin: 0;
color: $nav-stacked-chevron-color;
color: scale-color($primary, $lightness: 60%);
font-size: 14px;
line-height: 20px;
}

View File

@ -6,9 +6,9 @@
// --------------------------------------------------
html {
color: $primary_text_color;
color: $primary;
font: #{$base-font-size}/#{$base-line-height} $base-font-family;
background-color: $primary_background_color;
background-color: $secondary;
overflow-y: scroll;
-webkit-font-smoothing: subpixel-antialiased;
}
@ -17,17 +17,17 @@ html {
// --------------------------------------------------
a {
color: $link-color;
color: $tertiary;
text-decoration: none;
cursor: pointer;
&:visited {
color: $link-color-visited;
color: $tertiary;
}
&:hover {
color: $link-color-hover;
color: $tertiary;
}
&:active {
color: $link-color-active;
color: $tertiary;
}
}
@ -39,7 +39,7 @@ hr {
height: 1px;
margin: 1em 0;
border: 0;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding: 0;
}

View File

@ -0,0 +1,7 @@
$primary: #333 !default;
$secondary: #fff !default;
$tertiary: #0088cc !default;
$highlight: #ffff4d !default;
$danger: #e45735 !default;
$success: #009900 !default;
$love: #fa6c8d !default;

View File

@ -39,151 +39,10 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
// Broad general variables
// --------------------------------------------------
$primary_border_color: lighten($black, 70%);
$secondary_border_color: lighten($black, 76%);
$tertiary_border_color: $white;
$highlight_border_color: $yellow;
$emphasis_border_color: $blue;
$warning_border_color: lighten($red, 20%);
$success_border_color: $green;
$primary_background_color: $white;
$secondary_background_color: $black;
$tertiary_background_color: lighten($black, 10%);
$moderator_background_color: lighten($yellow, 30%) !default;
$emphasis_background_color: lighten($blue, 45%);
$success_background_color: lighten($green, 50%);
$warning_background_color: lighten($red, 30%);
$highlight_background_color: lighten($yellow, 23%);
$like_background_color: lighten($pink, 25%);
$composer_background_color: lighten($black, 70%);
$notification_badge_background_color: lighten($black, 35%) !default;
$primary_text_color: $black;
$secondary_text_color: lighten($black, 40%);
$tertiary_text_color: $white;
$warning_text_color: $red;
$success_text_color: $green;
$emphasis_text_color: $blue;
$highlight_text_color: $yellow;
$like_color: $pink;
$primary_shadow_color: $black;
$secondary_shadow_color: $white;
$warning_shadow_color: lighten($red, 20%);
$success_shadow_color: $green;
$highlight: $yellow;
$header_item_highlight: lighten($blue, 45%);
$link_color: darken($blue, 10%);
$secondary_link_color: $white;
$muted-link-color: lighten($black, 35%);
$muted-important-link-color: lighten($black, 35%);
$link-color-visited: darken($blue, 10%) !default;
$link-color-hover: darken($blue, 10%) !default;
$link-color-active: darken($blue, 10%) !default;
$heatmap_high: lighten($red, 10%);
$heatmap_med: $red;
$heatmap_low: darken($red, 10%);
$coldmap_high: lighten($blue, 10%);
$coldmap_med: $blue;
$coldmap_low: darken($blue, 10%);
// Specific element variables
// --------------------------------------------------
// Buttons
// --------------------------------------------------
// Default button
$btn-default-color: $black !default;
$btn-default-background-color: lighten($black, 50%) !default;
$btn-default-background-color-hover: lighten($black, 76%) !default;
// Primary button
$btn-primary-border-color: darken($blue, 10%) !default;
$btn-primary-background-color: $blue !default;
$btn-primary-background-color-dark: $blue !default;
$btn-primary-background-color-light: lighten($blue, 30%) !default;
// Danger button (delete, etc)
$btn-danger-border-color: darken($red, 10%) !default;
$btn-danger-background-color: $red !default;
$btn-danger-background-color-dark: darken($red, 10%) !default;
$btn-danger-background-color-light: $red !default;
$btn-success-background: lighten($green, 5%);
// Navigation menus
// --------------------------------------------------
// Pill nav
$nav-pills-color: $black !default;
$nav-pills-color-hover: $red !default;
$nav-pills-border-color-hover: lighten($red, 35%) !default;
$nav-pills-background-color-hover: lighten($red, 35%) !default;
$nav-pills-color-active: $red !default;
$nav-pills-border-color-active: darken($red, 10%) !default;
$nav-pills-background-color-active: $red !default;
// Stacked nav
$nav-stacked-color: $black !default;
$nav-stacked-border-color: lighten($black, 60%) !default;
$nav-stacked-background-color: lighten($black, 76%) !default;
$nav-stacked-divider-color: lighten($black, 60%) !default;
$nav-stacked-chevron-color: lighten($black, 50%) !default;
$nav-stacked-border-color-active: $red !default;
$nav-stacked-background-color-active: $red !default;
// Button nav
$nav-button-color: lighten($black, 35%) !default;
$nav-button-color-hover: $black !default;
$nav-button-background-color-hover: lighten($black, 60%) !default;
$nav-button-color-active: $black !default;
$nav-button-background-color-active: lighten($black, 60%) !default;
// Header
$modal-header-color: $red !default;
$modal-header-border-color: lighten($black, 50%) !default;
$modal-close-button-color: lighten($black, 50%);
$nav-like-button-color-hover: $pink !default;
$nav-like-button-background-color-hover: lighten($pink, 22%) !default;
$nav-like-button-color-active: darken($pink, 10%) !default;
$nav-like-button-background-color-active: lighten($pink, 22%) !default;
// Topic list
// --------------------------------------------------
$topic-list-border-color: lighten($black, 50%) !default;
$topic-list-th-color: lighten($black, 35%) !default;
$topic-list-th-border-color: lighten($black, 50%) !default;
$topic-list-th-background-color: lighten($black, 76%) !default;
$topic-list-td-color: lighten($black, 35%) !default;
$topic-list-td-border-color: lighten($black, 60%) !default;
$topic-list-star-color: lighten($black, 60%) !default;
$topic-list-starred-color: $red !default;
$quote-background: lighten($black, 76%);
$topicMenuColor: darken($white, 80%);
$bookmarkColor: $blue;
@import "colors";
/* This file doesn't actually exist, it is injected by DiscourseSassImporter. */
@import "plugins_variables";

View File

@ -18,7 +18,7 @@
}
.close {
float: right;
color: $primary_text_color;
color: $primary;
opacity: 0.5;
font-size: 15px;
margin-left: 4px;

View File

@ -13,13 +13,11 @@
.composer-popup {
@include box-shadow(3px 3px 3px rgba($primary_shadow_color, 0.14));
background: lighten($highlight, 15%);
border: 1px solid $highlight_border_color;
@include box-shadow(3px 3px 3px rgba($primary, 0.34));
background: scale-color($highlight, $lightness: 50%);
&.urgent {
background: lighten($warning_border_color, 15%);
border: 1px solid $warning_border_color;
background: scale-color($danger, $lightness: 50%);
}
h3 {
@ -32,7 +30,7 @@
a.close {
float: right;
color: $primary_text_color;
color: $primary;
opacity: 0.5;
font-size: 15px;
}
@ -58,15 +56,14 @@
}
.similar-topics {
background-color: $emphasis_background_color;
border: 1px solid $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 40%);
a[href] {
color: #000;
}
.posts-count {
color: darken($link_color, 40%);
color: scale-color($tertiary, $lightness: -40%);
font-size: 12px;
}
}
@ -91,20 +88,20 @@
#file-uploading {
left: 51%;
font-size: 12px;
color: $secondary_text_color;
color: $primary;
}
#draft-status {
right: 51%;
color: $primary_text_color;
color: $primary;
&.flash {
color: $warning_text_color;
color: $danger;
}
}
@include transition(height 0.4s ease);
width: 100%;
z-index: 1039;
height: 0;
background-color: rgba($composer_background_color, 0.96);
background-color: scale-color($primary, $lightness: 90%);
bottom: 0;
font-size: 14px;
position: fixed;
@ -115,7 +112,7 @@
right: 13px;
position: absolute;
font-size: 15px;
color: $primary_text_color;
color: $primary;
text-decoration: none;
&:before {
font-family: "FontAwesome";
@ -151,7 +148,7 @@
&.draft {
height: 40px !important;
cursor: pointer;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
.draft-text {
display: block;
}
@ -164,7 +161,7 @@
}
&.saving {
height: 40px !important;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
.saving-text {
display: block;
}
@ -186,7 +183,7 @@
height: 70px;
text-indent: -9999em;
background: {
color: $primary_text_color;
color: #000;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
size: 35px;
@ -216,12 +213,12 @@
input#reply-title {
padding: 7px 10px;
margin: 6px 10px 3px 0;
color: $primary_text_color;
color: $primary;
}
input#reply-title {
width: 400px;
color: $primary_text_color;
color: $primary;
}
.wmd-controls {
@ -276,18 +273,18 @@
}
}
#reply-title {
color: $primary_text_color;
color: $primary;
margin-right: 10px;
float: left;
&:disabled {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 90%);
}
}
#wmd-input:disabled {
background-color: lighten($primary_background_color, 60%);
background-color: scale-color($primary, $lightness: 90%);
}
#wmd-input, #wmd-preview {
color: $primary_text_color;
color: $primary;
video {
max-width: 100%;
@ -299,7 +296,7 @@
}
}
#wmd-preview {
border: 1px dashed $primary_border_color;
border: 1px dashed scale-color($primary, $lightness: 90%);
overflow: auto;
visibility: visible;
@ -328,10 +325,10 @@
.show-admin-options {
vertical-align: top;
margin-top: 8px;
background: lighten($secondary_background_color, 60%);
background: scale-color($primary, $lightness: 90%);
&:hover {
color: $tertiary_text_color;
background: lighten($secondary_background_color, 35%);
color: $secondary;
background: $primary;
}
}
.title-input .popup-tip {
@ -391,7 +388,7 @@
min-height: 100%;
padding: 7px;
margin: 0;
background-color: $primary_background_color;
background-color: $secondary;
word-wrap: break-word;
// set up proper header margins in post preview
@ -453,8 +450,8 @@
#wmd-button-bar {
top: 0;
position: absolute;
border-bottom: 1px solid $primary_border_color;
background-color: $primary_background_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
background-color: $secondary;
z-index: 100;
}
}

View File

@ -56,21 +56,21 @@ body {
height: 100%;
@include border-radius-all(5px);
&.white {
background-color: $primary_background_color;
background-color: $secondary;
}
}
#main {
.fa-star.starred {
color: $warning_text_color;
color: $danger;
}
a.star {
color: lighten($primary_text_color, 60%);
color: scale-color($primary, $lightness: 75%);
&:before {
font-family: "FontAwesome";
content: "\f005";
}
&.starred {
color: $warning_text_color;
color: $danger;
@include hover {
opacity: 1;
&:before {
@ -113,22 +113,22 @@ body {
.grippie {
width: 100%;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
border-width: 1px 0;
cursor: row-resize;
height: 11px;
overflow: hidden;
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 95%);
display:block;
background: image-url("grippie.png") lighten($secondary_background_color, 76%) no-repeat center 3px;
background: image-url("grippie.png") scale-color($primary, $lightness: 95%) no-repeat center 3px;
}
}
blockquote {
/* 13px left is intentional here to properly align with post quotes */
padding: 10px 4px 4px 13px;
background-color: $quote-background;
border-left: 5px solid $primary_border_color;
background-color: scale-color($primary, $lightness: 95%);
border-left: 5px solid scale-color($primary, $lightness: 75%);
}
.topic-statuses {
@ -150,7 +150,7 @@ blockquote {
body {
input, textarea, select {
color: $primary_text_color;
color: $primary;
}
code, pre {
@ -203,7 +203,7 @@ body {
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: $primary_text_color;
color: $primary;
}
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"] {
@ -213,7 +213,7 @@ body {
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: $primary_text_color;
color: $primary;
}
}
input {
@ -222,33 +222,33 @@ body {
textarea {
width: 210px;
height: auto;
background-color:$primary_background_color;
border: 1px solid $primary_border_color;
background-color:$secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
box-shadow: inset 0 1px 1px rgba($primary, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
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"] {
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
box-shadow: inset 0 1px 1px rgba($primary, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
}
textarea:focus {
border-color: $emphasis_border_color;
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
}
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 {
border-color: $emphasis_border_color;
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
}
}
@ -269,7 +269,7 @@ body {
select {
width: 220px;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
&[multiple], &[size] {
height: auto;
}
@ -319,8 +319,8 @@ body {
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed;
background-color: lighten($secondary_background_color, 76%);
border-color: $primary_border_color;
background-color: scale-color($primary, $lightness: 90%);
border-color: scale-color($primary, $lightness: 90%);
}
input {
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@ -330,66 +330,66 @@ body {
.control-group {
&.warning {
> label {
color: $warning_text_color;
color: $danger;
}
.checkbox, .radio, input, select, textarea {
color: $warning_text_color;
border-color: $warning_border_color;
color: $danger;
border-color: $danger;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: darken($warning_border_color, 25%);
box-shadow: 0 0 6px $warning_shadow_color;
border-color: scale-color($danger, $lightness: -30%);
box-shadow: 0 0 6px $danger;
}
.input-prepend .add-on, .input-append .add-on {
color: $warning_text_color;
background-color: $warning_background_color;
border-color: $warning_border_color;
color: $danger;
background-color: $danger;
border-color: $danger;
}
}
&.error {
> label {
color: $warning_text_color;
color: $danger;
}
.checkbox, .radio, input, select, textarea {
color: $warning_text_color;
border-color: $warning_border_color;
color: $danger;
border-color: $danger;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: darken($warning_border_color, 20%);
box-shadow: 0 0 6px $warning_shadow_color;
border-color: scale-color($danger, $lightness: -30%);
box-shadow: 0 0 6px $danger;
}
.input-prepend .add-on, .input-append .add-on {
color: $warning_text_color;
background-color: $warning_background_color;
border-color: darken($warning_border_color, 10%);
color: $danger;
background-color: scale-color($danger, $lightness: 30%);
border-color: scale-color($danger, $lightness: -20%);
}
}
&.success {
> label {
color: $success_text_color;
color: $success;
}
.checkbox, .radio, input, select, textarea {
color: $success_text_color;
border-color: $success_border_color;
color: $success;
border-color: $success;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: $success_border_color;
box-shadow: 0 0 6px $success_shadow_color;
border-color: $success;
box-shadow: 0 0 6px $success;
}
.input-prepend .add-on, .input-append .add-on {
color: $success_text_color;
background-color: $success_background_color;
border-color: $success_border_color;
color: $success;
background-color: scale-color($success, $lightness: 60%);
border-color: $success;
}
}
}
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
color: $warning_text_color;
border-color: $warning_border_color;
color: $danger;
border-color: $danger;
}
input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
border-color: $warning_border_color;
box-shadow: 0 0 6px $warning_shadow_color;
border-color: $danger;
box-shadow: 0 0 6px $danger;
}
.input-prepend, .input-append {
@ -414,16 +414,16 @@ body {
line-height: 18px;
text-align: center;
vertical-align: middle;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
}
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
margin-left: -1px;
border-radius: 0;
}
.input-prepend .active, .input-append .active {
background-color: $warning_background_color;
border-color: $warning_border_color;
background-color: scale-color($danger, $lightness: 30%);
border-color: $danger;
}
.input-prepend {
.add-on, .btn {
@ -498,8 +498,7 @@ body {
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
background-color: $warning_background_color;
border: 1px solid $warning_border_color;
background-color: scale-color($danger, $lightness: 30%);
color: #c09853;
}
.alert .close {
@ -509,19 +508,16 @@ body {
line-height: 18px;
}
.alert-success {
background-color: $success_background_color;
border-color: $success_border_color;
color: $success_text_color;
background-color: scale-color($success, $lightness: 60%);;
color: $success;
}
.alert-error {
background-color: $warning_background_color;
border-color: $warning_border_color;
color: $warning_text_color;
background-color: scale-color($danger, $lightness: 30%);
color: $danger;
}
.alert-info {
background-color: $emphasis_background_color;
border-color: $emphasis_background_color;
color: $primary_text_color;
background-color: scale-color($tertiary, $lightness: 75%);
color: $primary;
}
.alert {
.close {
@ -529,11 +525,11 @@ body {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: $primary_text_color;
color: $primary;
opacity: 0.2;
filter: alpha(opacity = 20);
@include hover {
color: $primary_text_color;
color: $primary;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
@ -551,7 +547,7 @@ body {
.bootbox.modal {
.modal-footer {
a.btn-primary {
color: $tertiary_text_color;
color: $secondary;
}
}
}

View File

@ -8,8 +8,8 @@
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 4px -2px rgba($primary_text_color, .45);
background-color: $primary_background_color;
box-shadow: 0 2px 4px -2px rgba($primary, .25);
background-color: $secondary;
padding-top: 3px;
.docked & {
position: fixed;
@ -42,7 +42,7 @@
.current-username {
float: left;
a {
color: $secondary_text_color;
color: $primary;
font-size: 14px;
display:block;
margin-top: 10px;
@ -62,7 +62,7 @@
.icon {
display: block;
padding: 3px;
color: $nav-button-color;
color: scale-color($primary, $lightness: 50%);
text-decoration: none;
cursor: pointer;
border-top: 1px solid transparent;
@ -71,25 +71,25 @@
&:hover {
color: $nav-button-color-hover;
background-color: $nav-button-background-color-hover;
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
&:active {
color: $nav-button-color-active;
background-color: $nav-button-background-color-active;
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
}
}
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $primary_background_color;
background-color: $secondary;
cursor: default;
border-top: 1px solid $primary_border_color;
border-left: 1px solid $primary_border_color;
border-right: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
border-left: 1px solid scale-color($primary, $lightness: 90%);
border-right: 1px solid scale-color($primary, $lightness: 90%);
&:after {
display: block;
position: absolute;
@ -99,7 +99,7 @@
width: 100%;
height: 0;
content: "";
border-top: 1px solid $tertiary_border_color;
border-top: 1px solid $secondary;
}
&:hover {
border-bottom: none;
@ -123,15 +123,15 @@
}
.unread-notifications {
right: -4px;
background-color: $emphasis_text_color;
background-color: $tertiary;
}
.unread-private-messages {
left: -4px;
background-color: $success_text_color;
background-color: $success;
}
}
.flagged-posts {
background-color: $warning_text_color;
background-color: $danger;
}
}
@ -155,9 +155,9 @@
right: 0;
z-index: 1100;
overflow: auto;
border: 1px solid $primary_border_color;
background-color: $primary_background_color;
@include box-shadow(0 2px 2px rgba($primary_shadow_color, .4));
border: 1px solid scale-color($primary, $lightness: 90%);
background-color: $secondary;
@include box-shadow(0 2px 2px rgba($primary, .4));
// Common
@ -174,29 +174,29 @@
}
}
.heading {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
border-bottom: 1px solid $primary_border_color;
color: $primary_text_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
color: darken($primary, 40%);
font-weight: bold;
font-size: 12px;
line-height: 15px;
}
.selected {
background-color: $header-item-highlight;
background-color: $tertiary;
}
// Notifications
&#notifications-dropdown {
.fa {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
}
li {
background-color: $header-item-highlight;
background-color: $tertiary;
}
.read {
background-color: $primary_background_color;
background-color: $secondary;
}
.none {
padding: 5px;
@ -216,7 +216,7 @@
position: absolute;
top: 13px;
right: 13px;
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
font-size: 18px;
}
.no-results {

View File

@ -11,7 +11,7 @@
#login-form {
a {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 35%);
cursor: pointer;
}
}
@ -49,7 +49,7 @@
tr.instructions {
label {
color: $secondary_text_color;
color: $primary;
}
}

View File

@ -15,11 +15,11 @@
width: 610px;
height: auto;
margin: -250px 0 0 -305px;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
border: 1px solid lighten($primary_border_color, 10%);
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
border: 1px solid scale-color($primary, $lightness: 90%);
box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
box-shadow: 0 3px 7px rgba($primary, .8);
background-clip: padding-box;
}
@ -57,9 +57,9 @@ animation: modal .25s;
margin-left: -1px;
}
.modal-header {
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
h3 {
color: $nav-pills-background-color-active;
color: $danger;
font-size: 20px;
padding: 10px 15px 7px;
}
@ -68,10 +68,10 @@ animation: modal .25s;
font-size: 20px;
margin: 10px 10px 0;
text-decoration: none;
color: $modal-close-button-color;
color: scale-color($primary, $lightness: 35%);
cursor: pointer;
&:hover {
color: darken($modal-close-button-color,20);
color: $primary;
}
}
}
@ -122,11 +122,11 @@ animation: modal .25s;
li {
margin: 0 4px 8px 0;
a {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
cursor: pointer;
}
a:hover {
color: $primary_text_color;
color: scale-color($primary, $lightness: 40%);
}
}
}

View File

@ -5,9 +5,9 @@
width: 460px;
left: 20px;
z-index: 990;
box-shadow: 0 2px 6px $primary_border_color;
box-shadow: 0 2px 6px scale-color($primary, $lightness: 90%);
margin-top: -2px;
background-color: $primary_background_color;
background-color: $secondary;
padding: 12px 12px 5px 12px;
h1 {
@ -18,7 +18,7 @@
margin-bottom: 8px;
a {
color: $primary_text_color;
color: $primary;
}
}
@ -29,7 +29,7 @@
margin-bottom: 5px;
a {
color: $primary_text_color;
color: $primary;
}
}
@ -37,16 +37,16 @@
font-size: 13px;
font-weight: normal;
margin-top: 0;
color: $secondary_text_color;
color: $primary;
}
.groups {
font-size: 13px;
font-weight: normal;
margin-top: 0;
color: $secondary_text_color;
color: $primary;
.group-link {
color: $primary_text_color;
color: $primary;
}
}
@ -66,7 +66,7 @@
p.loading {
margin-top: 45px;
color: $secondary_text_color;
color: $primary;
}
.btn {
@ -74,7 +74,7 @@
}
.new-user a {
color: $secondary_text_color;
color: $primary;
}
&.show-badges {
@ -98,7 +98,7 @@
margin-top: 20px;
h3 {
line-height: 43px;
color: $primary_text_color;
color: $primary;
font-size: 14px;
margin-bottom: -8px;
}
@ -110,4 +110,3 @@
}
}
}

View File

@ -59,16 +59,16 @@
border-collapse: separate;
border-spacing: 0;
margin: 0 0 10px;
border-top: 1px solid $primary-border-color;
.fa-thumb-tack {color: $primary_text_color;}
.fa-thumb-tack.unpinned {color: $secondary_text_color;}
border-top: 1px solid scale-color($primary, $lightness: 90%);
.fa-thumb-tack {color: $primary;}
.fa-thumb-tack.unpinned {color: $primary;}
a.title {color: $primary_text_color;}
a.title:visited:not(.badge-notification) {color: lighten($primary_text_color, 35%);}
a.title {color: $primary;}
a.title:visited:not(.badge-notification) {color: scale-color($primary, $lightness: 35%);}
> tbody > tr {
&:nth-child(odd) {
background-color: lighten($secondary_background_color, 77%);
&:nth-child(even) {
background-color: scale-color($primary, $lightness: 96%);
}
&.archived a {
opacity: 0.6;
@ -79,11 +79,11 @@
}
&.category-description {
td {
color: $nav-pills-border-color-active;
color: $danger;
}
}
&.highlighted {
background-color: $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 85%);
}
}
th,
@ -100,15 +100,14 @@
}
}
th {
color: $topic-list-th-color;
color: $primary;
font-weight: normal;
font-size: 14px;
button i.fa {color: $topic-list-th-color;}
button i.fa {color: $primary;}
}
td {
//border-top: 1px solid $topic-list-td-border-color;
color: $topic-list-td-color;
color: scale-color($primary, $lightness: 50%);
font-size: 14px;
}
@ -116,7 +115,7 @@
padding: 0;
background: transparent;
&:hover {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 90%);
}
}
@ -135,7 +134,7 @@
font-size: 16px;
i.score {
color: $success_text_color;
color: $success;
cursor: pointer;
}
}
@ -143,7 +142,7 @@
.topic-excerpt {
font-size: 13px;
margin-top: 8px;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
word-break: break-word;
padding-right: 50px;
line-height: 1.4;
@ -194,7 +193,7 @@
}
.avatar {
&.latest {
@include box-shadow(0 0 6px 1px desaturate(lighten($link_color, 18%), 35%));
@include box-shadow(0 0 6px 1px desaturate(scale-color($tertiary, $lightness: 30%), 35%));
}
}
.num {
@ -209,7 +208,7 @@
.sortable {
cursor: pointer;
&:hover {
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
}
@include unselectable;
}
@ -316,7 +315,7 @@
.featured-topic {
margin: 6px 0;
a.last-posted-at, a.last-posted-at:visited {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
}
}
@ -358,7 +357,7 @@
.category-list-item {
margin-bottom: 10px;
#topic-list tbody tr:nth-child(even) {
background-color: $primary_background_color;
background-color: $secondary;
}
th .badge-category {
float: left;
@ -370,14 +369,14 @@
width: 165px;
}
> footer {
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
border-top: 0;
padding: 7px 10px;
background-color: lighten($topic-list-th-background-color, 2%);
background-color: scale-color($primary, $lightness: 90%);
figure {
float: left;
margin: 3px 7px 0 0;
color: lighten($topic-list-th-color, 5%);
color: scale-color($primary, $lightness: 10%);
font-weight: bold;
font-size: 12px;
}
@ -415,11 +414,11 @@
width: 200px;
margin: 0 auto;
padding: 10px 0 10px 43px;
color: $primary_background_color;
color: $secondary;
font-size: 18px;
line-height: 25px;
background: {
color: $primary_text_color;
color: $primary;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 50%;
@ -434,8 +433,8 @@
.list-controls {
.home {
background-color: lighten($secondary_background_color, 76%);
color: $primary_text_color;
background-color: scale-color($primary, $lightness: 90%);
color: $primary;
}
.badge-category {
@ -471,7 +470,7 @@
background-color: transparent;
padding: 0;
border: 0;
color: lighten($warning_text_color, 10%);
color: scale-color($danger, $lightness: 20%);
font-size: 13px;
cursor: default;
}
@ -512,8 +511,8 @@ ol.category-breadcrumb {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
border: 1px solid $primary_border_color;
background-color: $primary_background_color;
border: 1px solid scale-color($primary, $lightness: 90%);
background-color: $secondary;
max-height: 350px;
padding: 8px 7px 0 7px;
z-index: 100;
@ -541,7 +540,7 @@ ol.category-breadcrumb {
position: fixed;
right: 20px;
padding: 5px;
background-color: $primary_background_color;
background-color: $secondary;
}
button.dismiss-read {

View File

@ -1,13 +1,13 @@
.gap {
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
padding: 5px 0;
color: lighten($primary_text_color, 35%);
color: lighten($primary, 35%);
cursor: pointer;
text-align: center;
width: 80%;
&:hover {
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
}
@include medium-width {
@ -55,10 +55,10 @@ h1 .topic-statuses .topic-status i {
right: 330px;
z-index: 400;
padding: 2px 8px 3px;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
font-size: 12px;
background: $primary_background_color;
color: $secondary_text_color;
background: $secondary;
color: scale-color($primary, $lightness: 50%);
@include medium-width {
right: 300px;
}
@ -111,7 +111,7 @@ section.post-menu-area, .post-actions {
nav.post-controls {
padding: 0;
button {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 60%);
margin-right: 2px;
}
@ -121,14 +121,14 @@ nav.post-controls {
}
.show-replies {
background: lighten($secondary_background_color, 76%);
background: scale-color($primary, $lightness: 90%);
padding: 8px 15px;
padding-bottom: 20px;
margin-left: 0;
span.badge-posts {color: lighten($primary_text_color, 50%);}
span.badge-posts {color: scale-color($primary, $lightness: 60%);}
&:hover {
background: lighten($secondary_background_color, 76%);
span.badge-posts {color: $primary_text_color;}
background: lighten($primary, 76%);
span.badge-posts {color: $primary;}
}
i {
margin-left: 5px;
@ -137,18 +137,18 @@ nav.post-controls {
button.create {
margin-right: 0;
color: $link-color;
background: $emphasis_background_color;
color: $tertiary;
background: scale-color($tertiary, $lightness: 90%);
padding: 8px 20px;
margin-left: 10px;
&:hover { color: $tertiary_text_color;
background: $emphasis_text_color;
&:hover { color: $secondary;
background: $tertiary;
}
&:active {
background: $emphasis_background_color;
@include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .3));
background: scale-color($tertiary, $lightness: 40%);
@include box-shadow(inset 0 1px 3px rgba($primary, .3));
}
@ -167,12 +167,12 @@ nav.post-controls {
margin-left: 3px;
transition: all linear 0.15s;
&:hover {
background: lighten($secondary_background_color, 76%);
color: $primary_text_color;
background: scale-color($primary, $lightness: 90%);
color: $primary;
}
&:active {
@include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .4));
@include box-shadow(inset 0 1px 3px rgba($primary, .4));
}
&.hidden {
@ -183,12 +183,12 @@ nav.post-controls {
}
&.delete:hover {
background: $warning_text_color;
color: $tertiary_text_color;
background: $danger;
color: $secondary;
}
&.like:hover {color: $like_color;
background: $like_background_color;
&.like:hover {color: $love;
background: scale-color($love, $lightness: 75%);
}
&.bookmark {padding: 8px 11px; }
@ -204,11 +204,11 @@ nav.post-controls {
}
}
&.last-read {
color: $warning_text_color;
color: $danger;
}
&.bookmarked {
&:before {
color: $link-color;
color: $tertiary;
}
}
}
@ -217,7 +217,7 @@ nav.post-controls {
.embedded-posts {
h1, h2, h3 {margin: 10px 0;}
a.mention {background: lighten($secondary_background_color, 70%);}
a.mention {background: scale-color($primary, $lightness: 90%);}
&.bottom {
.topic-meta-data {padding-left: 13px;}
&.hidden {display: block; opacity: 0; }
@ -241,13 +241,13 @@ nav.post-controls {
}
&.top.span14 {padding-left: 0;}
.topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid $primary_border_color; padding-top: 7px;}
.row {border-top: 1px solid scale-color($primary, $lightness: 90%); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;}
background: lighten($secondary_background_color, 76%);
background: scale-color($primary, $lightness: 90%);
.quote .title, blockquote, .onebox, .onebox-result {
background: lighten($secondary_background_color, 70%);
border-left: 5px solid lighten($secondary_background_color, 60%);
background: scale-color($primary, $lightness: 95%);
border-left: 5px solid scale-color($primary, $lightness: 75%);
}
&.bottom { margin-top: -11px;}
@ -266,21 +266,21 @@ nav.post-controls {
width: 300px;
a {
font-weight: bold;
color: lighten($primary_text_color, 25%);
color: scale-color($primary, $lightness: 30%);
}
}
.topic-meta-data-inside {
margin: -15px 0 0 0;
color: $secondary_text_color;
color: $primary;
}
.topic-meta-data {padding-top: 20px;}
}
.bottom-round nav.post-controls .show-replies {
background: lighten($secondary_background_color, 76%);
background: scale-color($primary, $lightness: 90%);
margin-bottom: 0;
padding-bottom: 8px;
&:hover {background: lighten($secondary_background_color, 76%);
&:hover {background: scale-color($primary, $lightness: 90%);
}
}
@ -304,10 +304,10 @@ a.star {
.topic-map {
margin: 20px 0 0 0;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);
.buttons .btn {
&:hover {border: 1px solid $primary_border_color !important;}
&:hover {border: 1px solid $primary !important;}
}
.topic-links li {
@ -316,13 +316,13 @@ a.star {
h3 {
margin-bottom: 4px;
color: $primary_text_color;
color: $primary;
line-height: 23px;
}
h4 {
margin: 0 0 3px 0;
color: $secondary_text_color;
color: $primary;
font-weight: normal;
font-size: 12px;
line-height: 15px;
@ -340,7 +340,7 @@ a.star {
span.domain {
font-size: 10px;
color: $secondary_text_color;
color: $primary;
}
@ -379,7 +379,7 @@ a.star {
line-height: 20px;
}
.number, i {
color: $secondary_text_color;
color: $primary;
}
.avatar + a {
float: left;
@ -389,10 +389,10 @@ a.star {
.links,
.information {
padding: 7px 14px;
color: $primary_text_color;
color: $primary;
}
.information {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
}
.participants { // PMs //
@ -411,16 +411,16 @@ a.star {
float: right;
.btn {
border: 0;
border-bottom: 1px solid lighten($secondary_background_color, 76%);
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
padding: 0 23px;
color: $primary_text_color;
background: lighten($secondary_background_color, 76%);
color: $primary;
background: scale-color($primary, $lightness: 90%);
&:hover {
background: lighten($secondary_background_color, 60%);
color: $primary_text_color;
background: scale-color($primary, $lightness: 75%);
color: $primary;
border: none !important;
border-bottom: 1px solid lighten($secondary_background_color, 60%) !important;
span.badge-posts {color: $primary_text_color;}
border-bottom: 1px solid scale-color($primary, $lightness: 75%) !important;
span.badge-posts {color: $primary;}
}
&.collapsed {
@ -440,7 +440,7 @@ a.star {
padding: 10px 10px 0 0;
p {
line-height: 32px;
color: $secondary_text_color;
color: $primary;
}
}
@ -449,15 +449,14 @@ a.star {
clear: left;
padding: 20px 0 15px 0;
#topic-list > tbody > tr:nth-child(even) {
background-color: lighten($secondary_background_color, 77%);
background-color: scale-color($primary, $lightness: 97%);
}
#topic-list > tbody > tr:nth-child(odd) {
background-color: $primary_background_color;
background-color: $secondary;
}
table {
box-shadow: none;
border-radius: 0;
border-color: $primary_border_color;
margin-top: 10px;
}
@ -467,8 +466,8 @@ a.star {
}
span.post-count {
background: $secondary_background_color;
color: $tertiary_text_color;
background: $primary;
color: $secondary;
opacity: .8;
}
@ -487,13 +486,13 @@ button.expand-post {
.quote-button {
display: none;
position: absolute;
background-color: lighten($secondary_background_color, 50%);
color: $tertiary_text_color;
background-color: scale-color($primary, $lightness: 50%);
color: $secondary;
padding: 10px;
z-index: 401;
&:hover {
background-color: lighten($secondary_background_color, 50%);
background-color: scale-color($primary, $lightness: 40%);
cursor: pointer;
}
}
@ -511,12 +510,12 @@ iframe {
width: 78%;
max-width: 800px;
.topic-statuses {
i { color: $primary_text_color;
i { color: $primary;
}
.unpinned { color: $secondary_text_color;}
.unpinned { color: $primary;}
}
.topic-link {color: $primary_text_color;}
.topic-link {color: $primary;}
}
@ -559,7 +558,7 @@ iframe {
.topic-meta-data {
margin-bottom: 10px;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding-top: 30px;
width: 92px;
@ -599,16 +598,16 @@ iframe {
.username a {
font-weight: bold;
color: lighten($primary_text_color, 25%);
color: scale-color($primary, $lightness: 20%);
font-size: 13px;
}
.new-user a {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
}
a.user-group {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
width: 100%;
}
@ -620,7 +619,7 @@ iframe {
font-weight: normal;
font-size: 12px;
margin-top: 2px;
a {color: $secondary_text_color;}
a {color: $primary;}
}
}
@ -661,8 +660,8 @@ iframe {
a.mention {
padding: 2px 4px;
color: $primary_text_color;
background: lighten($secondary_background_color, 76%);
color: $primary;
background: scale-color($primary, $lightness: 90%);
}
@ -674,7 +673,7 @@ iframe {
.deleted {
.topic-body {
background-color: $warning_background_color;
background-color: scale-color($danger, $lightness: 30%);
}
}
@ -684,7 +683,7 @@ iframe {
.moderator {
.topic-body {
background-color: $highlight_background_color;
background-color: scale-color($highlight, $lightness: 60%);
}
}
@ -726,7 +725,7 @@ iframe {
.staff a {
margin: -2px 0 0 0;
background-color: $highlight_background_color;
background-color: scale-color($highlight, $lightness: 60%);
}
.topic-meta-data {
@ -741,7 +740,7 @@ iframe {
.user-title {
margin-top: 5px;
color: $secondary_text_color;
color: $primary;
overflow: hidden;
font-size: 80%;
line-height: 13px;
@ -749,7 +748,7 @@ iframe {
.info-line {
margin: 10px 0;
color: $secondary_text_color;
color: $primary;
}
@ -757,7 +756,7 @@ blockquote { /* solo quotes */
margin: 14px 0;
padding: 12px;
a.mention {background: lighten($secondary_background_color, 70%);}
a.mention {background: scale-color($primary, $lightness: 90%);}
p:first-of-type {margin-top: 0;}
p:last-of-type {margin-bottom: 0;}
}
@ -765,14 +764,14 @@ blockquote { /* solo quotes */
.quote { /* quotes with attribution */
margin-top: 14px;
blockquote {margin-top: 0; padding-top: 0;
.onebox-result {background-color: $secondary_text_color;}
.onebox-result {background-color: $primary;}
}
.title {
border-left: 5px solid $primary_border_color;
background-color: lighten($secondary_background_color, 76%);
border-left: 5px solid scale-color($primary, $lightness: 75%);
background-color: scale-color($primary, $lightness: 90%);
padding: 12px;
.avatar { margin-right: 7px; }
img {margin-top: -4px;}
@ -782,7 +781,7 @@ blockquote { /* solo quotes */
.quote-controls {
float: right;
color: $secondary_text_color;
color: $primary;
a {
margin: 0;
}
@ -790,7 +789,7 @@ blockquote { /* solo quotes */
.quote-other-topic:before {
display: inline-block;
margin-left: 8px;
color: $secondary_text_color;
color: $primary;
font-family: "FontAwesome";
position: relative;
z-index: 20;
@ -824,7 +823,7 @@ blockquote { /* solo quotes */
margin-bottom: 20px;
margin-top: 2px;
}
a {color: $secondary_text_color;}
a {color: scale-color($primary, $lightness: 50%);}
li {margin-bottom: 10px;}
}
}
@ -832,10 +831,10 @@ blockquote { /* solo quotes */
.topic-body {
float: left;
position: relative;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding: 20px 0 15px 0;
&.highlighted {
background-color: $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 85%);
}
img, svg {
max-width: 100%;
@ -877,7 +876,7 @@ blockquote { /* solo quotes */
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid $primary_text_color;
border-top: 4px solid $primary;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
@ -894,9 +893,9 @@ blockquote { /* solo quotes */
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
box-shadow: 0 1px 5px rgba($primary_shadow_color, .4);
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
box-shadow: 0 1px 5px rgba($primary, .4);
background-clip: padding-box;
span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;}
@ -907,7 +906,7 @@ blockquote { /* solo quotes */
clear: both;
font-weight: normal;
line-height: 18px;
color: $primary_text_color;
color: $primary;
& > div {
margin-left: 26px;
@ -916,16 +915,16 @@ blockquote { /* solo quotes */
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: $tertiary_text_color;
color: $secondary;
text-decoration: none;
background-color: $emphasis_text_color;
background-color: scale-color($tertiary, $lightness: 50%);
}
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover {
text-decoration: none;
color: $primary_text_color;
background-color: $moderator_background_color;
color: $primary;
background-color: scale-color($highlight, $lightness: 25%);
cursor: default;
}
@ -958,8 +957,8 @@ blockquote { /* solo quotes */
position: fixed;
z-index: 1000;
left: 50%;
background-color: $emphasis_background_color;
border: 1px solid $emphasis_border_color;
background-color: scale-color($tertiary, $lightness: 40%);
border: 1px solid $tertiary;
padding: 5px;
margin-bottom: 5px;
@ -987,7 +986,7 @@ blockquote { /* solo quotes */
}
h3 {
font-size: 25px;
color: $primary_text_color;
color: $primary;
margin-bottom: 5px;
i {
margin-right: 7px;
@ -995,28 +994,28 @@ blockquote { /* solo quotes */
}
.btn {
border: none;
color: $tertiary_text_color;
color: $secondary;
font-weight: normal;
margin-bottom: 10px;
background: $btn-primary-background-color;
background: scale-color($tertiary, $lightness: 40%);
&[href] {
color: $tertiary_text_color;
color: $secondary;
}
&:hover
{
color: $tertiary_text_color;
background: darken($btn-primary-background-color, 12%);
color: $secondary;
background: scale-color($tertiary, $lightness: 20%);
}
&:active {
@include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
@include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, 0.2));
color: $tertiary_text_color;
@include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
color: $secondary;
}
&[disabled] {
text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($primary_shadow_color, 0.33), inset 0 -1px 2px rgba($primary_shadow_color, 0.2)));
text-shadow: 0 1px 0 rgba($primary, 0.2);
@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)));
}
}
}
@ -1025,8 +1024,8 @@ blockquote { /* solo quotes */
article.boxed {
.select-posts {
button.select-post {
background-color: $emphasis_background_color;
color: $tertiary_text_color;
background-color: scale-color($tertiary, $lightness: 40%);
color: $secondary;
}
}
.topic-body {
@ -1047,12 +1046,12 @@ blockquote { /* solo quotes */
top: 4px;
button {
background-color: lighten($secondary_background_color, 60%);
border-top: 1px solid $tertiary_border_color;
border-left: 1px solid $tertiary_border_color;
border-bottom: 1px solid $primary_border_color;
border-right: 1px solid $primary_border_color;
color: $secondary_text_color;
background-color: scale-color($primary, $lightness: 70%);
border-top: 1px solid $tertiary;
border-left: 1px solid $tertiary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
border-right: 1px solid scale-color($primary, $lightness: 90%);
color: $primary;
}
}
}
@ -1074,7 +1073,7 @@ a.attachment:before {
position: absolute;
top: 0;
left: 10px;
color: lighten($primary_text_color, 76%);
color: scale-color($primary, $lightness: 90%);
font: 90px/1 FontAwesome;
content: "\f05c";
z-index: -5;

View File

@ -1,5 +1,5 @@
.post-info a {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 60%);
}
@ -49,7 +49,7 @@
margin: 0;
line-height: 1.2em;
overflow: hidden;
a {color: $primary_text_color;}
a {color: $primary;}
a.badge-category { vertical-align: top; margin-top: 4px; }
a.edit-topic { font-size: 15px; position: absolute; margin-left: 8px; }
}
@ -63,11 +63,11 @@
.private-message-glyph { display: none; }
}
.private-message-glyph { color: lighten($primary_text_color, 60%); }
.private-message-glyph { color: scale-color($primary, $lightness: 75%); }
.private_message #topic-title .private-message-glyph { display: inline; }
#topic-closing-info {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding-top: 10px;
height: 20px;
}
@ -85,8 +85,8 @@
i {
font-size: 12px;
margin-right: 5px;
background: $primary_background_color;
border: 1px solid $primary_border_color;
background: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
padding: 2px 4px;
border-radius: 20px;
transition: linear 0.15s;
@ -96,12 +96,12 @@
a.reply-new {
position: absolute;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
margin-top: -2px;}
a:hover.reply-new {
color: $link-color;
i {background: $emphasis_background_color;
border: 1px solid $emphasis_border_color;
color: $tertiary;
i {background: scale-color($tertiary, $lightness: 75%);
border: 1px solid $tertiary;
padding: 2px 4px;
}
}
@ -113,8 +113,8 @@ a:hover.reply-new {
display: none;
}
border: none;
background-color: lighten($primary_text_color, 70%);
color: lighten($primary_text_color, 35%);
background-color: scale-color($primary, $lightness: 90%);
color: scale-color($primary, $lightness: 50%);
width: 130px;
height: 34px;
@ -134,7 +134,7 @@ a:hover.reply-new {
left: 4px;
border: 0;
background: none;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
width: 50%;
text-align: left;
height: 30px;
@ -149,7 +149,7 @@ a:hover.reply-new {
}
&:disabled {
cursor: default;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
}
}
h4 {
@ -162,10 +162,10 @@ a:hover.reply-new {
top: 0;
bottom: 0;
width: 0;
border-right: 1px solid $primary_border_color;
border-right: 1px solid scale-color($primary, $lightness: 90%);
// background-color: #d4eaf4;
// background-color: #C5E8F7;
background-color: $success_background_color;
background-color: scale-color($success, $lightness: 60%);
transition: width .75s;
}
}
@ -183,14 +183,14 @@ a:hover.reply-new {
}
}
.heatmap-high {color: $heatmap-high !important;}
.heatmap-med {color: $heatmap-med !important;}
.heatmap-low {color: $heatmap-low !important;}
.heatmap-high {color: scale-color($danger, $lightness: 20%) !important;}
.heatmap-med {color: $danger !important;}
.heatmap-low {color: scale-color($danger, $lightness: -20%) !important;}
#topic-filter {
background-color: $highlight_background_color;
background-color: scale-color($highlight, $lightness: 25%);
padding: 8px;
bottom: 0;
position: fixed;
@ -209,8 +209,8 @@ pre {
white-space:pre-wrap;
display: block;
padding: 5px 10px;
color: $primary_text_color;
background: lighten($secondary_background_color, 76%);
color: $primary;
background: scale-color($primary, $lightness: 90%);
max-height: 500px;
}
}
@ -226,7 +226,7 @@ sup{top:-0.5em; }
sub{bottom:-0.25em; }
figure{margin:0; }
fieldset{
border:1px solid $primary_border_color;
border:1px solid scale-color($primary, $lightness: 90%);
margin:0 2px;
padding:0.35em 0.625em 0.75em;
}
@ -237,11 +237,11 @@ legend{
kbd
{
background-color: $primary_background_color;
border:1px solid $primary_border_color;
background-color: $secondary;
border:1px solid scale-color($primary, $lightness: 90%);
border-radius: 3px;
box-shadow: 0 1px 0 rgba($primary_shadow_color, .9);
color: $primary_text_color;
box-shadow: 0 1px 0 rgba($primary, .9);
color: $primary;
display: inline-block;
font-size: 12px;
line-height: 1.4;

View File

@ -17,7 +17,7 @@
line-height: 18px;
}
.description, .hint {
color: $secondary_text_color;
color: $primary;
}
.hint {
font-style: italic;

View File

@ -2,7 +2,7 @@
.groups {
.group-link {
color: $link_color;
color: $tertiary;
}
}
@ -49,7 +49,7 @@
background-position: center center;
background-size: cover;
background-color: $secondary_background_color;
background-color: $primary;
}
#profile-background-controls {
@ -57,13 +57,13 @@
}
.static {
color: $primary_text_color;
color: $primary;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.instructions {
color: $secondary_text_color;
color: $primary;
margin-left: 160px;
margin-top: 5px;
margin-bottom: 10px;
@ -74,12 +74,12 @@
margin-left: 3px;
}
.instructions a[href] {
color: $link_color;
color: $tertiary;
}
.warning {
background-color: $warning_background_color;
background-color: scale-color($danger, $lightness: 30%);
padding: 5px 8px;
color: $primary_background_color;
color: $secondary;
width: 520px;
}
@ -97,7 +97,7 @@
float: left;
h3 {
color: $primary_text_color;
color: $primary;
margin: 20px 0 10px 0;
}
@ -130,15 +130,15 @@
}
span.last-seen-at {
float: right;
color: $secondary_text_color;
color: $primary;
}
}
}
.user-content {
padding: 10px 8px;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);
margin-bottom: 10px;
.btn.right {
@ -155,25 +155,25 @@
th {
text-align: left;
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
padding: 5px;
}
td {
padding: 5px;
border-bottom: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
}
}
.about {
background-color: $secondary_background_color;
background-color: $primary;
background-size: cover;
background-position: center center;
margin-bottom: 10px;
overflow: hidden;
color: $secondary_text_color;
color: $primary;
.details {
@ -194,34 +194,33 @@
}
a[href] {
color: $secondary_link_color;
color: $secondary;
}
img.avatar {
border: 3px solid $tertiary_border_color;
margin-bottom: 10px;
background-color: $secondary_background_color;
background-color: $primary;
}
.suspended {
color: $warning_text_color;
color: $danger;
}
.primary {
margin-top: 20px;
float: left;
width: 65%;
color: $tertiary_text_color;
color: $secondary;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
h1, h2 {font-weight: bold;}
.bio {
color: $tertiary_text_color;
color: $secondary;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
a[href] {
color: $tertiary_text_color;
color: $secondary;
text-decoration: underline;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
@ -232,26 +231,26 @@
.secondary {
float: right;
background-color: rgba($tertiary_background_color, .9);
background-color: rgba(scale-color($primary, $lightness: 50%), .9);
text-align: right;
padding: 0 20px;
max-width: 165px;
dd {
color: rgba($tertiary_text_color, .7);
color: rgba($secondary, .7);
margin: 0 0 7px 0;
overflow: hidden;
text-overflow: ellipsis;
}
dt {
color: rgba($tertiary_text_color, .7);
color: rgba($secondary, .7);
margin: 0;
}
}
}
.controls {
background-color: $tertiary_background_color;
background-color: scale-color($primary, $lightness: 50%);
padding: 12px;
height: 30px;
@ -279,7 +278,7 @@
.avatar {
float: left;
margin-right: 10px;
border: 2px solid $tertiary_border_color;
border: 2px solid $tertiary;
width: 45px;
height: 45px;
}
@ -298,19 +297,20 @@
}
}
.user-stream {
.excerpt {
margin: 5px 0;
font-size: 13px;
word-wrap: break-word;
color: $primary_text_color;
color: $primary;
}
.item.moderator-action {
background-color: $moderator_background_color;
background-color: scale-color($highlight, $lightness: 50%);
}
.item.deleted {
opacity: 0.8;
background-color: $warning_background_color;
background-color: scale-color($danger, $lightness: 50%);
}
.item.hidden {
display: block;
@ -318,19 +318,19 @@
}
.item {
padding: 20px 8px 15px 8px;
background-color: $primary_background_color;
border-bottom: 1px solid $primary_border_color;
background-color: $secondary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
.type {
color: $primary_text_color;
color: $primary;
}
span.name {
color: $secondary_text_color;
color: $primary;
}
.time {
display: block;
float: right;
color: $secondary_text_color;
color: $primary;
margin-right: 8px;
font-size: 11px;
}
@ -344,7 +344,7 @@
font-size: 14px;
}
.edit-reason {
background-color: $moderator_background_color;
background-color: scale-color($highlight, $lightness: 25%);
padding: 3px 5px 5px 5px;
}
}

View File

@ -12,7 +12,7 @@ article.post {
.quote .title {
border-left: 5px solid $primary_border_color;
background-color: lighten($secondary_background_color, 76%);
background-color: lighten($primary, 76%);
padding: 10px 10px 0 12px;
.avatar { margin-right: 7px; }
}
@ -57,7 +57,7 @@ article.post {
}
a.new-user {
color: lighten($primary_text_color, 35%);
color: lighten($primary, 35%);
}
}
}

View File

@ -28,20 +28,20 @@ display: none;
#file-uploading {
left: 51%;
font-size: 12px;
color: darken($tertiary_text_color, 40%);
color: scale-color($secondary, $lightness: 50%);
}
#draft-status {
right: 70px;
color: lighten($primary_text_color, 60%);
color: scale-color($primary, $lightness: 75%);
&.flash {
color: $warning_text_color;
color: $danger;
}
}
@include transition(height 0.4s ease);
width: 100%;
z-index: 1039;
height: 0;
background-color: $composer_background_color;
background-color: scale-color($primary, $lightness: 90%);
bottom: 0;
font-size: 14px;
position: fixed;
@ -52,7 +52,7 @@ display: none;
right: 13px;
position: absolute;
font-size: 15px;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
text-decoration: none;
&:before {
font-family: "FontAwesome";
@ -87,7 +87,7 @@ display: none;
&.draft {
height: 60px !important;
cursor: pointer;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
.draft-text {
display: block;
position: absolute;
@ -102,7 +102,7 @@ display: none;
}
&.saving {
height: 40px !important;
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
.saving-text {
display: block;
}
@ -124,7 +124,7 @@ display: none;
height: 70px;
text-indent: -9999em;
background: {
color: $primary_text_color;
color: $primary;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
size: 35px;
@ -197,14 +197,14 @@ display: none;
#reply-title {
margin-right: 10px;
&:disabled {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 75%);
}
}
#wmd-input:disabled {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 75%);
}
#wmd-input, #wmd-preview {
color: $primary_text_color;
color: darken($primary, 40%);
video {
max-width: 100%;
@ -216,7 +216,7 @@ display: none;
}
}
#wmd-preview {
border: 1px dashed $primary_border_color;
border: 1px dashed scale-color($primary, $lightness: 90%);
overflow: auto;
visibility: visible;
p {
@ -298,7 +298,7 @@ display: none;
min-height: 100%;
padding: 7px;
margin: 0;
background-color: $primary_background_color;
background-color: $secondary;
word-wrap: break-word;
// set up proper header margins in post preview
@ -357,8 +357,8 @@ display: none;
#wmd-button-bar {
top: 0;
position: absolute;
border-bottom: 1px solid $primary_border_color;
background-color: $primary_background_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
background-color: $secondary;
z-index: 100;
}
}

View File

@ -3,7 +3,7 @@
// throughout the Discourse application
body {
background-color: $primary_background_color;
background-color: $secondary;
}
.container {
@ -25,25 +25,25 @@ body {
padding: 10px 10px 10px 10px;
}
&.white {
background-color: $primary_background_color;
background-color: $secondary;
}
}
#main {
.fa-star.starred {
color: $highlight_text_color;
color: $highlight;
}
a.star {
display: inline-block;
font-size: 15px;
line-height: 1;
color: $secondary_text_color;
color: $primary;
&:before {
font-family: "FontAwesome";
content: "\f005";
}
&.starred {
color: #fe1;
text-shadow: 0 0 3px rgba($primary_shadow_color, 0.5);
text-shadow: 0 0 3px rgba($primary, 0.5);
@include hover {
opacity: 1;
&:before {
@ -91,8 +91,8 @@ body {
blockquote {
/* 13px left is intentional here to properly align with post quotes */
padding: 10px 8px 10px 13px;
background-color: $quote-background;
border-left: 5px solid darken($quote-background, 20%);
background-color: scale-color($secondary, $lightness: 95%);
border-left: 5px solid scale-color($secondary, $lightness: 75%);
p {
margin: 0 0 10px 0;
}
@ -108,7 +108,7 @@ blockquote {
display: inline-block;
i {
font-size: 15px;
color: darken($tertiary_text_color, 60%);
color: darken($secondary, 60%);
}
}
}

View File

@ -9,8 +9,8 @@
position: absolute;
top: 0;
z-index: 1001;
background-color: $primary_background_color;
box-shadow: 0 0 3px rgba($primary_shadow_color, .6);
background-color: $secondary;
box-shadow: 0 0 3px rgba($primary, .6);
.docked & {
position: fixed;
@ -47,7 +47,7 @@
float: left;
display: none;
a {
color: $primary_text_color;
color: darken($primary, 40%);
font-size: 14px;
line-height: 40px;
}
@ -66,24 +66,24 @@
.icon {
display: block;
padding: 4px;
color: $nav-button-color;
color: scale-color($primary, $lightness: 50%);
text-decoration: none;
cursor: pointer;
&:hover {
color: $nav-button-color-hover;
background-color: $nav-button-background-color-hover;
color: $primary;
background-color: scale-color($primary, $lightness: 75%);
}
&:active {
color: $nav-button-color-active;
background-color: $nav-button-background-color-active;
color: $primary;
background-color: scale-color($primary, $lightness: 75%);
}
}
.active .icon {
position: relative;
color: lighten($primary_text_color, 60%);
background-color: $primary_background_color;
color: scale-color($primary, $lightness: 75%);
background-color: $secondary;
cursor: default;
@include box-shadow((6px 0 6px -6px rgba($primary_shadow_color, 0.2), -6px 0 6px -6px rgba($primary_shadow_color, 0.2), inset 0 13px 13px -13px rgba($primary_shadow_color, 0.1)));
@include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
&:after {
display: block;
position: absolute;
@ -93,7 +93,7 @@
width: 100%;
height: 0;
content: "";
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
}
}
[class^="fa fa-"] {
@ -114,16 +114,16 @@
}
.unread-notifications {
right: -4px;
background-color: $emphasis_background_color;
color: $emphasis_text_color;
background-color: scale-color($tertiary, $lightness: 40%);
color: $tertiary;
}
.unread-private-messages {
left: -4px;
background-color: $success_text_color;
background-color: $success;
}
}
.flagged-posts {
background-color: $warning_text_color;
background-color: $danger;
}
}
@ -146,9 +146,9 @@
right: 0;
z-index: 1100;
margin-top: -1px;
border: 1px solid $primary_border_color;
background-color: $primary_background_color;
@include box-shadow(0 1px 1px rgba($primary_shadow_color, 0.2));
border: 1px solid scale-color($primary, $lightness: 90%);;
background-color: $secondary;
@include box-shadow(0 1px 1px rgba($primary, 0.2));
// Common
@ -165,7 +165,7 @@
}
}
.heading {
color: $primary_text_color;
color: $primary;
font-weight: bold;
font-size: 12px;
line-height: 15px;
@ -173,7 +173,7 @@
}
.selected {
background-color: $header-item-highlight;
background-color: $tertiary;
}
// Notifications
@ -183,10 +183,10 @@
color: #777;
}
li {
background-color: $header-item-highlight;
background-color: $tertiary;
}
.read {
background-color: $primary_background_color;
background-color: $secondary;
}
.none {
padding: 5px;
@ -202,7 +202,7 @@
padding: 5px;
font-size: 16px;
&:focus {
@include box-shadow((inset 0 1px 1px rgba($primary_shadow_color, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
@include box-shadow((inset 0 1px 1px rgba($primary, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
}
}
.searching {

View File

@ -16,7 +16,7 @@
#login-form {
a {
color: $secondary_text_color;
color: $primary;
cursor: pointer;
}
label {float: left; display: block;}

View File

@ -16,12 +16,12 @@
overflow: auto;
width: 100%;
height: auto;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($secondary, $lightness: 90%);
border: 1px solid rgba(0, 0, 0, 0.3);
@include border-radius-all (6px);
box-shadow: 0 3px 7px rgba($primary_shadow_color, 0.3);
box-shadow: 0 3px 7px rgba($primary, 0.3);
background-clip: padding-box;
}
@ -50,7 +50,7 @@
}
.modal-header {
h3 {
color: $nav-pills-background-color-active;
color: $danger;
font-size: 15px;
padding: 0 0 0 20px;
}
@ -60,7 +60,7 @@
padding: 15px; // more pixels to touch
margin: -15px 0 0 0;
text-decoration: none;
color: $modal-close-button-color;
color: $primary;
cursor: pointer;
}
}

View File

@ -44,13 +44,13 @@
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid $primary_border_color;
border-bottom: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);;
> tbody > tr {
background-color: $primary_background_color;
background-color: $secondary;
&:nth-child(even) {
background-color: darken($primary_background_color, 4%);
background-color: darken($secondary, 4%);
}
&.archived a {
opacity: 0.6;
@ -61,7 +61,7 @@
}
}
&.highlighted {
background-color: $highlight_background_color;
background-color: scale-color($tertiary, $lightness: 75%);
}
}
th,
@ -78,7 +78,7 @@
}
}
th {
color: $topic-list-th-color;
color: $primary;
font-weight: bold;
font-size: 13px;
&:first-of-type {
@ -89,14 +89,14 @@
}
}
td {
color: $topic-list-td-color;
color: $primary;
font-size: 14px;
}
.main-link {
font-size: 16px;
i.score {
color: $success_text_color;
color: $success;
cursor: pointer;
}
}
@ -104,7 +104,7 @@
.topic-excerpt {
font-size: 14px;
margin-top: 8px;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
word-break: break-word;
}
@ -133,7 +133,7 @@
margin-right: 14px;
}
.fa {
color: lighten($black, 50%);
color: scale-color($primary, $lightness: 50%);
}
.fa-heart{
position: relative;
@ -194,7 +194,7 @@
.featured-topic {
margin: 8px 0;
a.last-posted-at, a.last-posted-at:visited {
color: lighten($primary_text_color, 50%);
color: scale-color($primary, $lightness: 50%);
}
}
}
@ -221,7 +221,7 @@
.category-list-item {
margin-bottom: 10px;
#topic-list tbody tr:nth-child(even) {
background-color: $primary_background_color;
background-color: $secondary;
}
.badge-category {
float: left;
@ -232,18 +232,17 @@
display: none;
}
> footer {
border-bottom: 1px solid $topic-list-border-color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
border-top: 0;
padding: 7px 10px;
background-color: lighten($topic-list-th-background-color, 2%);
@include box-shadow(0 1px 3px rgba($primary_shadow_color, 0.22));
background-color: scale-color($primary, $lightness: 95%);
@include box-shadow(0 1px 3px rgba($primary, 0.22));
figure {
float: left;
margin: 3px 7px 0 0;
color: lighten($topic-list-th-color, 5%);
color: scale-color($primary, $lightness: 10%);
font-weight: bold;
font-size: 12px;
text-shadow: 0 1px 0 $secondary_shadow_color;
}
figcaption {
display: inline;
@ -279,11 +278,11 @@
width: 200px;
margin: 0 auto;
padding: 10px 0 10px 43px;
color: $tertiary_text_color;
color: $secondary;
font-size: 18px;
line-height: 25px;
background: {
color: $primary_text_color;
color: #000;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 50%;
@ -297,8 +296,8 @@
.list-controls {
.home {
color: $primary_text_color;
background-color: lighten($secondary_background_color, 76%);
color: $primary;
background-color: scale-color($primary, $lightness: 90%);
}
.badge-category {
@ -331,7 +330,7 @@
background-color: transparent;
padding: 0;
border: 0;
color: lighten($warning_text_color, 10%);
color: scale-color($danger, $lightness: 20%);
font-size: 13px;
cursor: default;
}
@ -373,7 +372,7 @@ span.posted {
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid $primary_text_color;
border-top: 4px solid $primary;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
@ -390,8 +389,8 @@ span.posted {
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: $primary_background_color;
border: 1px solid $primary_border_color;
background-color: $secondary;
border: 1px solid scale-color($primary, $lightness: 90%);;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
@ -406,14 +405,14 @@ span.posted {
clear: both;
font-weight: normal;
line-height: 18px;
color: $primary_text_color;
color: $primary;
}
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: $tertiary_text_color;
color: $secondary;
text-decoration: none;
background-color: $emphasis_text_color;
background-color: $tertiary;
}
.open > .dropdown-menu {
display: block;
@ -445,8 +444,8 @@ ol.category-breadcrumb {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
border: 1px solid $primary_border_color;
background-color: $primary_background_color;
border: 1px solid scale-color($primary, $lightness: 90%);;
background-color: $secondary;
width: 200px;
height: 200px;
padding: 8px 5px 0 7px;
@ -464,4 +463,3 @@ ol.category-breadcrumb {
margin-bottom: 10px;
}
}

View File

@ -1,13 +1,13 @@
.gap {
background-color: lighten($secondary_background_color, 76%);
background-color: scale-color($primary, $lightness: 90%);
padding: 5px 15px;
color: $secondary_text_color;
color: $primary;
text-align: center;
margin: 0 10px;
}
.topic-post {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
padding: 6px 0 3px 0;
&:first-of-type {
border-top: none;
@ -15,11 +15,11 @@
}
nav.post-controls {
background-color: $primary_background_color;
background-color: $secondary;
padding: 0;
border-right: 1px solid $primary_border_color;
border-right: 1px solid scale-color($primary, $lightness: 90%);
margin-top: 10px;
button {color: lighten($primary_text_color, 35%);
button {color: scale-color($primary, $lightness: 50%);
border-radius: 4px;
margin-right: 2px;
@ -42,7 +42,7 @@ span.badge-posts {
button.create {
float: right !important;
margin-right: 0;
color: $primary_text_color;
color: $primary;
padding-right: 7px;}
}
@ -75,11 +75,10 @@ button {
}
}
&.last-read {
color: $warning_text_color;
}
color: $danger;}
&.bookmarked {
&:before {
color: $bookmarkColor;
color: $tertiary;
}
}
}
@ -130,17 +129,17 @@ a.star {
border-radius: 5px;
margin: 15px 10px 20px 10px;
border: 1px solid $primary_border_color;
border: 1px solid scale-color($primary, $lightness: 90%);;
h3 {
margin-bottom: 4px;
color: $primary_text_color;
color: $primary;
line-height: 23px;
}
h4 {
margin: 0 0 3px 0;
color: $secondary_text_color;
color: $primary;
font-weight: normal;
font-size: 12px;
line-height: 15px;
@ -197,7 +196,7 @@ a.star {
line-height: 20px;
}
.number {
color: $emphasis_text_color;
color: $tertiary;
}
.avatar + a {
float: left;
@ -207,11 +206,11 @@ a.star {
.links,
.information {
padding: 7px 14px;
color: $primary_text_color;
color: $primary;
}
.information {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);
}
.topic-links {
.badge-notification {
@ -222,15 +221,15 @@ a.star {
float: right;
.btn {
border: 0;
border-bottom: 1px solid $primary_border_color;
border-left: 1px solid $primary_border_color;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);;
border-left: 1px solid scale-color($primary, $lightness: 90%);;
padding: 0 23px;
color: $primary_text_color;
background: lighten($secondary_background_color, 60%);
color: $primary;
background: scale-color($primary, $lightness: 75%);
&:hover {
background: lighten($secondary_background_color, 60%);
color: $primary_text_color;
border-bottom: 1px solid $primary_border_color;
background: scale-color($primary, $lightness: 75%);
color: $primary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
.fa {
@ -243,7 +242,7 @@ a.star {
}
#topic-footer-buttons {
border-top: 1px solid $primary_border_color;
border-top: 1px solid scale-color($primary, $lightness: 90%);;
padding: 20px 10px 0 10px;
}
@ -267,8 +266,8 @@ a.star {
span.post-count {
background: $secondary_background_color;
color: $tertiary_text_color;
background: $primary;
color: $secondary;
opacity: .8;
}
@ -283,7 +282,7 @@ span.post-count {
#topic-title {
z-index: 1000;
background: lighten($secondary_background_color, 76%);
background:scale-color($primary, $lightness: 90%);
margin: 0 0 0 0 !important;
padding: 15px 10px 15px 10px;
}
@ -294,20 +293,20 @@ span.post-count {
height: auto;
}
&.moderator {
background-color: $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 40%);
}
}
.quote-button {
display: none;
position: absolute;
background-color: lighten($secondary_background_color, 35%);
color: $primary_text_color;
background-color: scale-color($primary, $lightness: 50%);
color: $primary;
padding: 10px;
width: 90px;
&:hover {
background-color: lighten($secondary_background_color, 50%);
background-color: scale-color($primary, $lightness: 50%);
cursor: pointer;
}
}
@ -392,11 +391,11 @@ iframe {
}
.deleted {
background-color: $warning_background_color;
background-color: $danger;
}
#show-topic-admin {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
right: 0;
border-right: 0;
padding-right: 4px;
@ -416,7 +415,7 @@ iframe {
}
.new-user a {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
}
.topic-meta-data {
@ -442,7 +441,7 @@ blockquote {
.quote-controls {
float: right;
color: $primary_text_color;
color: $primary;
a {
margin: 0;
}
@ -450,7 +449,7 @@ blockquote {
.quote-other-topic:before {
display: inline-block;
margin-left: 8px;
color: $primary_text_color;
color: $primary;
font-family: "FontAwesome";
position: relative;
z-index: 20;
@ -465,8 +464,8 @@ blockquote {
.quote .title {
border-left: 5px solid $primary_border_color;
background-color: lighten($secondary_background_color, 76%);
border-left: 5px solid scale-color($primary, $lightness: 90%);;
background-color: scale-color($primary, $lightness: 90%);
padding: 10px 10px 0 12px;
clear: both;
.avatar { margin-right: 7px; }
@ -478,5 +477,5 @@ blockquote {
}
.topic-body.highlighted {
background-color: $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 40%);
}

View File

@ -35,7 +35,7 @@
.private-message-glyph { display: none; }
}
.private-message-glyph { color: lighten($primary_text_color, 60%); }
.private-message-glyph { color: scale-color($primary, $lightness: 75%); }
.private_message #topic-title .private-message-glyph { display: inline; }
.notification-options {
@ -49,7 +49,7 @@
}
.docked #topic-progress {
box-shadow: 0 0 3px rbga($primary_shadow_color, .5);
box-shadow: 0 0 3px rbga($primary, .5);
}
#topic-progress-wrapper {
@ -64,15 +64,15 @@
#topic-progress {
box-shadow: 0 0 3px rbga($primary_shadow_color, .7);
box-shadow: 0 0 3px rbga($primary, .7);
position: relative;
&.hidden {
display: none;
}
border: none;
background-color: lighten($primary_background_color, 60%);
color: $primary_text_color;
background-color: scale-color($secondary, $lightness: 75%);
color: $primary;
width: 130px;
height: 34px;
.nums {
@ -91,7 +91,7 @@
left: 4px;
border: 0;
background: none;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
width: 60px;
text-align: left;
@ -108,7 +108,7 @@
&:disabled {
cursor: default;
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
}
}
h4 {
@ -121,10 +121,8 @@
top: 0;
bottom: 0;
width: 0;
border-right: 1px solid $primary_border_color;
// background-color: #d4eaf4;
// background-color: #C5E8F7;
background-color: $success_background_color;
border-right: 1px solid scale-color($secondary, $lightness: 90%);
background-color: scale-color($success, $lightness: 50%);
}
}
@ -134,6 +132,6 @@
.post-cloak:last-of-type {padding-bottom: 40px;}
.heatmap-high {color: $heatmap-high !important;}
.heatmap-med {color: $heatmap-med !important;}
.heatmap-low {color: $heatmap-low !important;}
.heatmap-high {color: scale-color($danger, $lightness: -25%) !important;}
.heatmap-med {color: $danger !important;}
.heatmap-low {color: scale-color($danger, $lightness: 25%) !important;}

View File

@ -7,6 +7,6 @@
line-height: 18px;
}
.description {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
}
}

View File

@ -13,13 +13,13 @@
height: 100px;
}
.static {
color: $primary_text_color;
color: $primary;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.instructions {
color: $secondary_text_color;
color: $primary;
margin-top: 5px;
}
.category-controls {
@ -29,13 +29,13 @@
margin-left: 3px;
}
.instructions a[href] {
color: $secondary_text_color;
color: $primary;
}
.warning {
@include border-radius-all(6px);
background-color: $warning_background_color;
background-color: $danger;
padding: 5px 8px;
color: $primary_text_color;
color: $primary;
width: 520px;
}
@ -67,7 +67,7 @@
height: 150px;
background-position: center center;
background-size: cover;
background-color: $secondary_background_color;
background-color: $primary;
}
.bio-composer #wmd-quote-post {
@ -81,15 +81,15 @@
display: block;
width: 220px;
min-height: 200px;
background-color: lighten($secondary_background_color, 76%);
color: $primary_text_color;
background-color: scale-color($primary, $lightness: 90%);
color: $primary;
word-wrap: break-word;
}
.user-navigation {
h3 {
color: lighten($primary_text_color, 35%);
color: scale-color($primary, $lightness: 50%);
padding-left: 5px;
}
.nav-stacked {
@ -104,12 +104,12 @@
margin-bottom: 50px;
.about {
background-color: $secondary_background_color;
background-color: scale-color($primary, $lightness: 90%);
background-position: center center;
background-size: cover;
margin-bottom: 10px;
overflow: hidden;
color: $primary_text_color;
color: $primary;
.details {
text-align: center;
@ -127,32 +127,32 @@
}
a[href] {
color: $primary_text_color;
color: $primary;
}
img.avatar {
border: 3px solid $primary_border_color;
border: 3px solid scale-color($primary, $lightness: 90%);
margin-bottom: 4px;
}
.secondary {
background-color: $secondary_background_color;
background-color: $primary;
text-align: left;
padding: 0 10px;
dd {
color: $tertiary_text_color;
color: $secondary;
margin: 0 0 7px 0;
}
dt {
color: $secondary_text_color;
color: $primary;
margin: 0;
}
}
}
.controls {
background-color: lighten($secondary_background_color, 60%);
background-color: scale-color($primary, $lightness: 75%);
margin-top: 0;
padding: 10px 10px 0 10px;
@ -180,7 +180,7 @@
.avatar {
float: left;
margin-right: 10px;
border: 2px solid $tertiary_border_color;
border: 2px solid $tertiary;
width: 45px;
height: 45px;
}
@ -205,14 +205,14 @@
margin: 5px 0;
font-size: 13px;
word-wrap: break-word;
color: lighten($primary_text_color, 30%);
color: scale-color($primary, $lightness: 50%);
}
.item.moderator-action {
background-color: $emphasis_background_color;
background-color: scale-color($tertiary, $lightness: 40%);
}
.item.deleted {
opacity: 0.8;
background-color: $warning_background_color;
background-color: scale-color($danger, $lightness: 50%);
}
.item.hidden {
display: block;
@ -220,19 +220,19 @@
}
.item {
padding: 10px 8px;
background-color: $primary_background_color;
border-bottom: 1px solid $primary_border_color;
background-color: $secondary;
border-bottom: 1px solid scale-color($primary, $lightness: 90%);
}
.type {
color: lighten($primary_text_color, 40%);
color: scale-color($primary, $lightness: 50%);
}
span.name {
color: lighten($primary_text_color, 40%);
color: scale-color($primary, $lightness: 50%);
}
.time {
display: block;
float: right;
color: $secondary_text_color;
color: $primary;
margin-right: 8px;
font-size: 11px;
}
@ -246,7 +246,7 @@
font-size: 14px;
}
.edit-reason {
background-color: $highlight_background_color;
background-color: scale-color($highlight, $lightness: 50%);
padding: 3px 5px 5px 5px;
}
}