IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2002 from awesomerobot/master

Browse Source 
color variable adjustments, topic not found page adjustments
This commit is contained in:
Sam 2014-02-24 12:58:12 +11:00
commit 2a0df24caf
45 changed files with 914 additions and 890 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,10 +8,11 @@
width: 100%; width: 100%;
tr {text-align: left;} tr {text-align: left;}
td, th {padding: 8px;} td, th {padding: 8px;}
th {border-top: 1px solid $primary_lighter;} th {border-top: 1px solid $primary_border_color;}
td {border-bottom: 1px solid $primary_lighter; border-top: 1px solid $primary_lighter;} td {border-bottom: 1px solid $primary_border_color; border-top: 1px solid $primary_border_color;}
tr:hover { background-color: darken($secondary, 2.5%); } td:last-of-type {border-bottom: none;}
tr.selected { background-color: lighten($tertiary, 58%); } tr:hover { background-color: darken($primary_background_color, 2.5%); }
tr.selected { background-color: lighten($tertiary_background_color, 58%); }
.filters input { margin-bottom: 0px; } .filters input { margin-bottom: 0px; }
} }
@ -19,10 +20,10 @@
font-size: 12px; font-size: 12px;
float: right; float: right;
margin-right: 10px; margin-right: 10px;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 2px 5px; padding: 2px 5px;
border-radius: 5px; border-radius: 5px;
color: $primary_medium; color: $secondary_text_color;
} }
.admin-content { .admin-content {
@ -31,7 +32,6 @@
padding: 8px; padding: 8px;
p { p {
margin-left: 6px;
} }
.ace-wrapper { .ace-wrapper {
@ -55,11 +55,11 @@
.bar { .bar {
margin-top: 5px; margin-top: 5px;
background-color: $tertiary; background-color: $emphasis_background_color;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
padding-right: 8px; padding-right: 8px;
color: $secondary; color: $tertiary_text_color;
} }
} }
} }
@ -68,13 +68,13 @@
.admin-loading { .admin-loading {
width: 100px; width: 100px;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background-color: $primary; background-color: $secondary_background_color;
@include border-radius-all(10px); @include border-radius-all(10px);
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
font-size: 15px; font-size: 15px;
line-height: 23px; line-height: 23px;
text-align: center; text-align: center;
color: $secondary; color: $tertiary_text_color;
background: { background: {
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
@ -88,18 +88,16 @@
} }
.admin-controls { .admin-controls {
@include border-radius-all(5px); background-color: darken($primary_background_color, 5%);
background-color: darken($secondary, 5%);
border: 1px solid darken($secondary, 10%);
padding: 10px 10px 3px 0px; padding: 10px 10px 3px 0px;
height: 35px; height: 35px;
.nav.nav-pills { .nav.nav-pills {
li.active { li.active {
a { a {
border-color: darken($primary_medium, 10%); border-color: darken($primary_border_color, 10%);
background-color: $primary_medium; background-color: $tertiary_background_color;
&:hover { &:hover {
background-color: $primary_medium; background-color: $tertiary_background_color;
} }
} }
} }
@ -107,14 +105,14 @@
h1 { h1 {
font-size: 20px; font-size: 20px;
line-height: 25px; line-height: 25px;
color: $primary_medium; color: $secondary_text_color;
} }
.controls { .controls {
margin-left: 10px; margin-left: 10px;
} }
button { button {
margin-right: 5px; margin-right: 5px;
margin-left: 5px;
} }
input[type=text] { input[type=text] {
display: inline-block; display: inline-block;
@ -153,12 +151,12 @@
.site-settings-nav { .site-settings-nav {
width: 200px; width: 200px;
margin-top: 40px; margin-top: 30px;
.nav-stacked { .nav-stacked {
border-right: none; border-right: none;
} }
li a.active { li a.active {
color: $secondary; color: $tertiary_text_color;
background-color: $nav-stacked-background-color-active; background-color: $nav-stacked-background-color-active;
} }
} }
@ -202,7 +200,7 @@
.desc { .desc {
padding-top: 3px; padding-top: 3px;
color: darken($secondary, 40%); color: darken($secondary_text_color, 40%);
} }
h3 { h3 {
@ -213,11 +211,11 @@
.setting.overridden { .setting.overridden {
input[type=text] { input[type=text] {
background-color: lighten($highlight, 40%); background-color: lighten($highlight_background_color, 40%);
} }
h3 { h3 {
color: darken($highlight, 30%); color: darken($highlight_text_color, 30%);
} }
} }
} }
@ -225,21 +223,21 @@
section.details { section.details {
h1 { h1 {
font-size: 15px; font-size: 15px;
background-color: $primary_light; background-color: lighten($secondary_background_color, 50%);
color: $secondary; color: $tertiary_text_color;
padding: 0 10px; padding: 0 10px;
margin: 0px 0 5px 0; margin: 0px 0 5px 0;
} }
} }
#selected-controls { #selected-controls {
background-color: lighten($tertiary, 50%); background-color: lighten($emphasis_background_color, 50%);
padding: 8px; padding: 8px;
min-height: 27px; min-height: 27px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 1075px; width: 1075px;
border: 1px solid lighten($tertiary, 45%); border: 1px solid lighten($emphasis_border_color, 45%);
} }
.display-row { .display-row {
@ -249,9 +247,9 @@ section.details {
border-top: 0; border-top: 0;
} }
&.highlight-danger { &.highlight-danger {
background-color: $highlight_danger_light; background-color: $warning_background_color;
} }
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
&:before, &:after { &:before, &:after {
display: table; display: table;
content: ""; content: "";
@ -308,7 +306,7 @@ section.details {
margin-top: 5px; margin-top: 5px;
} }
.preview-link { .preview-link {
margin-left: 30px; margin-left: 15px;
} }
padding-left: 10px; padding-left: 10px;
width: 65%; width: 65%;
@ -333,7 +331,7 @@ section.details {
float: right; float: right;
margin-top: 7px; margin-top: 7px;
span { span {
margin-right: 20px; margin-right: 10px;
} }
} }
.buttons { .buttons {
@ -343,7 +341,7 @@ section.details {
padding: 5px 0 0 0; padding: 5px 0 0 0;
margin-left: 10px; margin-left: 10px;
width: 80px; width: 80px;
color: $primary_medium; color: $secondary_text_color;
} }
} }
} }
@ -353,10 +351,10 @@ section.details {
.admin-flags { .admin-flags {
tr.hidden-post td.excerpt { opacity: 0.4; } tr.hidden-post td.excerpt { opacity: 0.4; }
tr.deleted td.excerpt { opacity: 0.8; background-color: $highlight_danger_light; } tr.deleted td.excerpt { opacity: 0.8; background-color: $warning_background_color; }
td.message { td.message {
padding: 4px 8px; padding: 4px 8px;
background-color: $highlight_light; background-color: $highlight_background_color;
} }
td { vertical-align: top; } td { vertical-align: top; }
th { text-align: left; } th { text-align: left; }
@ -436,13 +434,13 @@ section.details {
} }
.up-to-date { .up-to-date {
color: $success; color: $success_text_color;
} }
.updates-available { .updates-available {
color: $highlight_danger; color: $warning_text_color;
} }
.critical-updates-available { .critical-updates-available {
color: $highlight_danger; color: $warning_text_color;
} }
} }
@ -485,24 +483,24 @@ table.api-keys {
.title { .title {
i.fa { i.fa {
color: $primary; color: $primary_text_color;
} }
} }
th { th {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
} }
th.title { th.title {
text-align: left; text-align: left;
} }
thead { thead {
tr:hover > td { tr:hover > td {
background-color: $secondary; background-color: $primary_background_color;
} }
tr:hover > th { tr:hover > th {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
} }
@ -515,13 +513,13 @@ table.api-keys {
} }
&.trending-up { &.trending-up {
color: $success; color: $success_text_color;
i.up { i.up {
display: inline; display: inline;
} }
} }
&.trending-down { &.trending-down {
color: $highlight_danger; color: $warning_text_color;
i.down { i.down {
display: inline; display: inline;
} }
@ -537,11 +535,11 @@ table.api-keys {
&.detected-problems { &.detected-problems {
@include border-radius-all(5px); @include border-radius-all(5px);
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 10px; margin-top: 10px;
box-shadow: inset 0 0 10px $primary_lighter; box-shadow: inset 0 0 10px rgba($primary_border_color, .4);
.look-here { .look-here {
float: left; float: left;
@ -550,7 +548,7 @@ table.api-keys {
.fa { .fa {
font-size: 32px; font-size: 32px;
vertical-align: middle; vertical-align: middle;
color: $primary_medium; color: $secondary_text_color
} }
} }
@ -564,10 +562,10 @@ table.api-keys {
text-align: right; text-align: right;
} }
.btn { .btn {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
}
} }
} }
}
&.totals { &.totals {
table { table {
@ -602,7 +600,7 @@ table.api-keys {
.commits-widget { .commits-widget {
border: solid 1px $primary_lighter; border: solid 1px $primary_border_color;
width: 500px; width: 500px;
height: 180px; height: 180px;
margin-bottom: 36px; margin-bottom: 36px;
@ -622,7 +620,7 @@ table.api-keys {
list-style: none; list-style: none;
} }
a { a {
color: $primary; color: $primary_text_color;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
@ -630,11 +628,11 @@ table.api-keys {
} }
.header { .header {
color: $primary; color: $primary_text_color;
font-weight: bold; font-weight: bold;
height: 30px; height: 30px;
border-bottom: solid 1px $primary_lighter; border-bottom: solid 1px $primary_border_color;
background: $primary_lightest; background-color: lighten($secondary_background_color, 60%);
cursor: pointer; cursor: pointer;
h1 { h1 {
@ -657,8 +655,8 @@ table.api-keys {
@extend .clearfix; @extend .clearfix;
line-height: 1.0em; line-height: 1.0em;
padding: 6px 8px; padding: 6px 8px;
border-bottom: solid 1px $primary_lighter; border-bottom: solid 1px $primary_border_color;
background: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
.left { .left {
float: left; float: left;
} }
@ -668,25 +666,25 @@ table.api-keys {
img { img {
margin-top: 2px; margin-top: 2px;
border: solid 1px $primary_lighter; border: solid 1px $primary_border_color;
padding: 2px; padding: 2px;
background-color: $secondary; background-color: $primary_background_color;
} }
.commit-message { .commit-message {
color: $primary; color: $primary_text_color;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
} }
.commit-meta { .commit-meta {
color: $primary_medium; color: $secondary_text_color;
font-size: 12px; font-size: 12px;
} }
.committer-name { .committer-name {
font-weight: bold; font-weight: bold;
color: $primary; color: $primary_text_color;
} }
} }
li:last-child { li:last-child {
@ -699,18 +697,18 @@ table.api-keys {
width: 6px; width: 6px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-left: solid 1px $primary_lighter; border-left: solid 1px $primary_border_color;
} }
} }
.content-list { .content-list {
h3 { h3 {
color: $primary_medium; color: $primary_text_color;
font-size: 15px; font-size: 15px;
padding-left: 5px; padding-left: 5px;
} }
@ -720,22 +718,22 @@ table.api-keys {
margin: 0; margin: 0;
li { li {
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
} }
li a { li a {
display: block; display: block;
padding: 10px; padding: 10px;
color: $primary_medium; color: $primary_text_color;
&:hover { &:hover {
background-color: #eee; background-color: #eee;
color: $primary_medium; color: $primary_text_color;
} }
&.active { &.active {
font-weight: bold; font-weight: bold;
color: $primary; color: $primary_text_color;
} }
} }
} }
@ -751,7 +749,7 @@ table.api-keys {
margin-left: 20px; margin-left: 20px;
p.description { p.description {
color: $primary_medium; color: $secondary_text_color;
} }
.controls { .controls {
@ -886,13 +884,16 @@ table.api-keys {
margin: 0 0 20px 6px; margin: 0 0 20px 6px;
a.filter { a.filter {
display: inline-block; display: inline-block;
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
padding: 3px 10px; padding: 3px 10px;
border-radius: 3px; border-radius: 3px;
margin-left: 5px;
color: $primary; color: $primary_text_color;
&:hover { &:hover {
color: $link-color-hover; color: $primary_text_color;
background-color: lighten($secondary_background_color, 76%);
} }
.label { .label {
font-weight: bold; font-weight: bold;
@ -919,12 +920,12 @@ table.api-keys {
} }
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses { .staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
margin-left: 5px;
border-bottom: dotted 1px $primary_lighter; border-bottom: dotted 1px $primary_border_color;
.heading-container { .heading-container {
width: 100%; width: 100%;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
} }
.col.heading { .col.heading {
font-weight: bold; font-weight: bold;
@ -938,12 +939,12 @@ table.api-keys {
overflow-x: hidden; overflow-x: hidden;
} }
.col.first { .col.first {
margin-left: 5px;
} }
.ember-list-item-view { .ember-list-item-view {
width: 100%; width: 100%;
border-top: solid 1px $primary_lighter; border-top: solid 1px $primary_border_color;
} }
} }
@ -955,10 +956,10 @@ table.api-keys {
.leader-requirements { .leader-requirements {
.fa-check { .fa-check {
color: $success; color: $success_text_color;
} }
.fa-times { .fa-times {
color: $highlight_danger; color: $warning_text_color;
} }
} }
@ -970,7 +971,7 @@ $rollback-dark: darken($rollback, 10%) !default;
$rollback-darker: darken($rollback, 20%) !default; $rollback-darker: darken($rollback, 20%) !default;
.btn-rollback { .btn-rollback {
color: $secondary; color: $tertiary_text_color;
background: $rollback; background: $rollback;
&:hover { &:hover {
background: $rollback-dark; background: $rollback-dark;

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

@ -21,12 +21,12 @@
.badge-category { .badge-category {
padding: 4px 6px; padding: 4px 6px;
color: $secondary; color: $tertiary_text_color;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
&.restricted { &.restricted {
div { div {
@ -55,19 +55,19 @@ h1 a.badge-category div {vertical-align: top;}
@extend %badge; @extend %badge;
padding: 4px; padding: 4px;
padding-top: 3px; padding-top: 3px;
color: $secondary; color: $tertiary_text_color;
font-size: 11px; font-size: 11px;
min-width: 10px; min-width: 10px;
text-align: center; text-align: center;
background-color: $badge-notification-background-color; background-color: $badge-notification-background-color;
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
// New posts // New posts
&.new-posts, &.unread-posts { &.new-posts, &.unread-posts {
background-color: $tertiary; background-color: $emphasis_text_color;
} }
// Click count // Click count
@ -101,10 +101,10 @@ h1 a.badge-category div {vertical-align: top;}
.badge-group { .badge-group {
@extend %badge; @extend %badge;
padding: 3px 5px; padding: 3px 5px;
color: $primary; color: $primary_text_color;
text-shadow: 0 1px 0 rgba($secondary, 0.2); text-shadow: 0 1px 0 rgba($secondary_shadow_color, 0.2);
background-color: #ddd; background-color: #ddd;
border-color: #aaa; border-color: #aaa;
font-size: 12px; font-size: 12px;
@include box-shadow(inset 0 1px 0 rgba($secondary, 0.52)); @include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.52));
} }

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

@ -40,9 +40,9 @@
.btn { .btn {
border: none; border: none;
color: $primary; color: $primary_text_color;
font-weight: normal; font-weight: normal;
background: lighten($primary_lighter, 10%); background: lighten($secondary_background_color, 73%);
&[href] { &[href] {
color: $btn-default-color; color: $btn-default-color;
@ -56,7 +56,7 @@
} }
&[disabled] { &[disabled] {
background: $btn-default-background-color; background: $btn-default-background-color;
&:hover { color: $primary; } &:hover { color: $primary_text_color; }
cursor: not-allowed; cursor: not-allowed;
} }
} }
@ -72,13 +72,13 @@
.btn-primary { .btn-primary {
border: none; border: none;
color: $secondary; color: $tertiary_text_color;
font-weight: normal; font-weight: normal;
color: #fff; color: #fff;
background: $btn-primary-background-color; background: $btn-primary-background-color;
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
&:hover { &:hover {
color: #fff; color: #fff;
@ -97,11 +97,11 @@
// -------------------------------------------------- // --------------------------------------------------
.btn-danger { .btn-danger {
color: $secondary; color: $tertiary_text_color;
font-weight: normal; font-weight: normal;
background: $btn-danger-background-color; background: $btn-danger-background-color;
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
&:hover{ &:hover{
background: $btn-danger-background-color-dark; background: $btn-danger-background-color-dark;
@ -118,11 +118,11 @@
// -------------------------------------------------- // --------------------------------------------------
.btn-social { .btn-social {
color: $secondary; color: $tertiary_text_color;
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
@include box-shadow(inset 0 1px 0 rgba($secondary, 0.1)); @include box-shadow(inset 0 1px 0 rgba($secondary_shadow_color, 0.1));
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
&:before { &:before {
margin-right: 7px; margin-right: 7px;

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

@ -40,7 +40,7 @@
} }
&.active > a, > a.active { &.active > a, > a.active {
border-color: darken($nav-pills-background-color-active, 10%); border-color: darken($nav-pills-background-color-active, 10%);
color: #fff; color: $tertiary_text_color;
background-color: $nav-pills-background-color-active; background-color: $nav-pills-background-color-active;
} }
} }
@ -56,7 +56,7 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background-color: $nav-stacked-background-color; background-color: $nav-stacked-background-color;
@include box-shadow(0 1px 0 $secondary); @include box-shadow(0 1px 0 $secondary_shadow_color);
> li { > li {
border-bottom: 1px solid $nav-stacked-divider-color; border-bottom: 1px solid $nav-stacked-divider-color;
&:last-of-type { &:last-of-type {
@ -73,7 +73,7 @@
} }
.active > a, .active > a,
.active .fa-chevron-right { .active .fa-chevron-right {
color: $secondary; color: $tertiary_text_color;
background-color: $nav-stacked-background-color-active; background-color: $nav-stacked-background-color-active;
} }
.count { .count {

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

@ -6,9 +6,9 @@
// -------------------------------------------------- // --------------------------------------------------
html { html {
color: $primary; color: $primary_text_color;
font: #{$base-font-size}/#{$base-line-height} $base-font-family; font: #{$base-font-size}/#{$base-line-height} $base-font-family;
background-color: $secondary; background-color: $primary_background_color;
overflow-y: scroll; overflow-y: scroll;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
@ -39,7 +39,7 @@ hr {
height: 1px; height: 1px;
margin: 1em 0; margin: 1em 0;
border: 0; border: 0;
border-top: 1px solid $primary_lightest; border-top: 1px solid $primary_border_color;
padding: 0; padding: 0;
} }

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

@ -13,9 +13,19 @@ $large-width: 1110px !default;
// Primary color variables // Primary color variables
// -------------------------------------------------- // --------------------------------------------------
$yellow: lighten(#FFFF00, 20%); $black: #333 !default;
$white: #fff !default;
$blue: #0099e6 !default;
$yellow: lighten(#FFFF00, 15%) !default;
$light_yellow: lighten($yellow, 20%) !default; $light_yellow: lighten($yellow, 20%) !default;
$lightest_yellow: lighten($yellow, 30%) !default; $lightest_yellow: lighten($yellow, 30%) !default;
$red: #e45735 !default;
$pink: #fa6c8d !default;
$green: #009900 !default;
$google: #5b76f7 !default; $google: #5b76f7 !default;
$facebook: #3b5998 !default; $facebook: #3b5998 !default;
$cas: #70BA61 !default; $cas: #70BA61 !default;
@ -23,173 +33,180 @@ $twitter: #00bced !default;
$yahoo: #810293 !default; $yahoo: #810293 !default;
$github: #6d6d6d !default; $github: #6d6d6d !default;
$primary: #333 !default;
$secondary: #fff !default;
$tertiary: #0088cc !default;
$highlight: lighten(#FFFF00, 12%) !default;
$highlight_danger: #e45735 !default;
$heart: #fa6c8d !default;
$success: green !default;
//--------------------------------------------------- Main Variable Controllers
$primary_medium: lighten($primary, 35%) !default; //dark grey
$primary_light: lighten($primary, 50%) !default; // grey
$primary_lighter: lighten($primary, 60%) !default; //light grey
$primary_lightest: lighten($primary, 76%) !default; //lighter grey
$tertiary_lightest: lighten($tertiary, 50%) !default; //lighte blue
$tertiary_light: lighten($tertiary, 30%) !default; // light blue
$tertiary_dark: darken($tertiary, 10%) !default; // dark blue
$highlight_danger_light: lighten($highlight_danger, 35%) !default; //lightest red
$highlight_danger_dark: darken($highlight_danger, 10%) !default; //dark red
$highlight_danger_darker: darken($highlight_danger, 60%) !default; //dark red
$heart_light: lighten($heart, 22%) !default; //light pink
$heart_dark: darken($heart, 10%) !default; // dark pink
$highlight_light: lighten($highlight, 30%) !default;
$success_light: lighten($success, 60%);
$success_dark: darken($success, 30%);
$success_darker: darken($success, 60%);
// Base // Base
// -------------------------------------------------- // --------------------------------------------------
$base-font-size: 14px !default; $base-font-size: 14px !default;
$base-line-height: 19px !default; $base-line-height: 19px !default;
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$base-background-color: $primary_lighter !default; $base-background-color: lighten($black, 60%) !default;
// Links // Links
// -------------------------------------------------- // --------------------------------------------------
$link-color: $tertiary !default; $link-color: $blue !default;
$link-color-visited: $tertiary_dark !default; $link-color-visited: darken($blue, 10%) !default;
$link-color-hover: $tertiary_dark !default; $link-color-hover: darken($blue, 10%) !default;
$link-color-active: $tertiary_dark !default; $link-color-active: darken($blue, 10%) !default;
// Badges // Badges
// -------------------------------------------------- // --------------------------------------------------
// Notification badge // Notification badge
$badge-notification-background-color: $primary_medium !default; $badge-notification-background-color: lighten($black, 35%) !default;
// Posts badge // Posts badge
$badge-posts-color: $primary_medium !default; $badge-posts-color: lighten($black, 35%) !default;
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
// Default button // Default button
$btn-default-color: $primary !default; $btn-default-color: $black !default;
$btn-default-background-color: $primary_light !default; $btn-default-background-color: lighten($black, 50%) !default;
$btn-default-background-color-hover: $primary_lightest !default; $btn-default-background-color-hover: lighten($black, 76%) !default;
// Primary button // Primary button
$btn-primary-border-color: $tertiary_dark !default; $btn-primary-border-color: darken($blue, 10%) !default;
$btn-primary-background-color: $tertiary !default; $btn-primary-background-color: $blue !default;
$btn-primary-background-color-dark: $tertiary !default; $btn-primary-background-color-dark: $blue !default;
$btn-primary-background-color-light: $tertiary_light !default; $btn-primary-background-color-light: lighten($blue, 30%) !default;
// Danger button (delete, etc) // Danger button (delete, etc)
$btn-danger-border-color: $highlight_danger_dark !default; $btn-danger-border-color: darken($red, 10%) !default;
$btn-danger-background-color: $highlight_danger !default; $btn-danger-background-color: $red !default;
$btn-danger-background-color-dark: $highlight_danger_dark !default; $btn-danger-background-color-dark: darken($red, 10%) !default;
$btn-danger-background-color-light: $highlight_danger !default; $btn-danger-background-color-light: $red !default;
$btn-success-background: lighten($green, 5%);
// Navigation menus // Navigation menus
// -------------------------------------------------- // --------------------------------------------------
// Pill nav // Pill nav
$nav-pills-color: $primary !default; $nav-pills-color: $black !default;
$nav-pills-color-hover: $highlight_danger !default; $nav-pills-color-hover: $red !default;
$nav-pills-border-color-hover: $highlight_danger_light !default; $nav-pills-border-color-hover: lighten($red, 35%) !default;
$nav-pills-background-color-hover: $highlight_danger_light !default; $nav-pills-background-color-hover: lighten($red, 35%) !default;
$nav-pills-color-active: $highlight_danger !default; $nav-pills-color-active: $red !default;
$nav-pills-border-color-active: $highlight_danger_dark !default; $nav-pills-border-color-active: darken($red, 10%) !default;
$nav-pills-background-color-active: $highlight_danger !default; $nav-pills-background-color-active: $red !default;
// Stacked nav // Stacked nav
$nav-stacked-color: $primary !default; $nav-stacked-color: $black !default;
$nav-stacked-border-color: $primary_lighter !default; $nav-stacked-border-color: lighten($black, 60%) !default;
$nav-stacked-background-color: $primary_lightest !default; $nav-stacked-background-color: lighten($black, 76%) !default;
$nav-stacked-divider-color: $primary_lighter !default; $nav-stacked-divider-color: lighten($black, 60%) !default;
$nav-stacked-chevron-color: $primary_light !default; $nav-stacked-chevron-color: lighten($black, 50%) !default;
$nav-stacked-border-color-active: $highlight_danger !default; $nav-stacked-border-color-active: $red !default;
$nav-stacked-background-color-active: $highlight_danger !default; $nav-stacked-background-color-active: $red !default;
// Button nav // Button nav
$nav-button-color: $primary_medium !default; $nav-button-color: lighten($black, 35%) !default;
$nav-button-color-hover: $primary !default; $nav-button-color-hover: $black !default;
$nav-button-background-color-hover: $primary_lighter !default; $nav-button-background-color-hover: lighten($black, 60%) !default;
$nav-button-color-active: $primary !default; $nav-button-color-active: $black !default;
$nav-button-background-color-active: $primary_lighter !default; $nav-button-background-color-active: lighten($black, 60%) !default;
// Header // Header
$modal-header-color: $highlight_danger !default; $modal-header-color: $red !default;
$modal-header-border-color: $primary_light !default; $modal-header-border-color: lighten($black, 50%) !default;
$modal-close-button-color: $primary_light; $modal-close-button-color: lighten($black, 50%);
$nav-like-button-color-hover: $heart !default; $nav-like-button-color-hover: $pink !default;
$nav-like-button-background-color-hover: $heart_light !default; $nav-like-button-background-color-hover: lighten($pink, 22%) !default;
$nav-like-button-color-active: $heart_dark !default; $nav-like-button-color-active: darken($pink, 10%) !default;
$nav-like-button-background-color-active: $heart_light !default; $nav-like-button-background-color-active: lighten($pink, 22%) !default;
// Topic list // Topic list
// -------------------------------------------------- // --------------------------------------------------
$topic-list-border-color: $primary_light !default; $topic-list-border-color: lighten($black, 50%) !default;
$topic-list-th-color: $primary !default; $topic-list-th-color: $black !default;
$topic-list-th-border-color: $primary_light !default; $topic-list-th-border-color: lighten($black, 50%) !default;
$topic-list-th-background-color: $primary_lightest !default; $topic-list-th-background-color: lighten($black, 76%) !default;
$topic-list-td-color: $primary_medium !default; $topic-list-td-color: lighten($black, 35%) !default;
$topic-list-td-border-color: $primary_lighter !default; $topic-list-td-border-color: lighten($black, 60%) !default;
$topic-list-star-color: $primary_lighter !default; $topic-list-star-color: lighten($black, 60%) !default;
$topic-list-starred-color: $highlight_danger !default; $topic-list-starred-color: $red !default;
$quote-background: lighten($black, 76%);
$topicMenuColor: darken($white, 80%);
$bookmarkColor: $blue;
$tag_color: lighten($blue, 50%);
$post_footer: lighten($black, 76%);
$controls: lighten($black, 35%);
$controls_hover: $blue;
$controls_active: darken($blue, 10%);
// Basics
// --------------------------------------------------
// -- ?? $primary_border_color: lighten($black, 60%);
$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;
$link_color: $tertiary_dark; $primary_text_color: $black;
$muted-link-color: $primary_medium; $secondary_text_color: lighten($black, 50%);
$muted-important-link-color: $primary_medium; $tertiary_text_color: $white;
$warning_text_color: $red;
$success_text_color: $green;
$emphasis_text_color: $blue;
$highlight_text_color: $yellow;
$like_color: $pink;
$quote-background: $primary_lightest; $primary_shadow_color: $black;
$secondary_shadow_color: $white;
$warning_shadow_color: lighten($red, 20%);
$success_shadow_color: $green;
// Colors based on basics $highlight: $yellow;
$topicMenuColor: darken($secondary, 80%); $link_color: darken($blue, 10%);
$bookmarkColor: $tertiary; $secondary_link_color: $white;
$muted-link-color: lighten($black, 35%);
$muted-important-link-color: lighten($black, 35%);
$tag_color: $tertiary_lightest; $attention_bg: lighten($blue, 50%);
$attention_fg: $blue;
$composer_background: lighten($primary_lighter, 10%); $header-item-highlight: lighten($blue, 45%);
$post_footer: $primary_lightest; $primary_background_color: $white;
$inner_border: $primary_lighter; $secondary_background_color: $black;
$inner_line: $primary_light; $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, 25%);
$like_background_color: lighten($pink, 25%);
$controls: $primary_medium; $heatmap-high: lighten($red, 10%);
$controls_hover: $tertiary; $heatmap-med: $red;
$controls_active: $tertiary_dark; $heatmap-low: darken($red, 10%);
$attention_bg: $tertiary_lightest; $coldmap-high: lighten($blue, 10%);
$attention_fg: $tertiary; $coldmap-med: $blue;
$coldmap-low: darken($blue, 10%);
$header-item-highlight: $tertiary_lightest; //Composer
$composer_background: lighten($black, 70%);

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

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

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

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

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

@ -21,7 +21,7 @@
max-width: 300px; max-width: 300px;
.colorpicker { .colorpicker {
border: 1px solid $primary_medium; border: 1px solid $primary_border_color;
margin-right: 2px; margin-right: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;

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

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

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

@ -16,8 +16,8 @@
.composer-popup { .composer-popup {
@include box-shadow(3px 3px 3px rgba($primary, 0.14)); @include box-shadow(3px 3px 3px rgba($primary_shadow_color, 0.14));
background: lighten($highlight, 8%); background: lighten($highlight, 15%);
h3 { h3 {
margin-bottom: 10px; margin-bottom: 10px;
@ -29,7 +29,7 @@
a.close { a.close {
float: right; float: right;
color: $primary; color: $primary_text_color;
opacity: 0.5; opacity: 0.5;
font-size: 15px; font-size: 15px;
} }
@ -38,7 +38,7 @@
opacity: 1.0; opacity: 1.0;
} }
border: 1px solid darken($highlight, 10%); border: 1px solid $highlight_border_color;
padding: 10px; padding: 10px;
width: 600px; width: 600px;
position: absolute; position: absolute;
@ -56,15 +56,15 @@
} }
.similar-topics { .similar-topics {
background-color: $tertiary_light; background-color: $emphasis_background_color;
border: 1px solid darken($tertiary, 10%); border: 1px solid $emphasis_background_color;
a[href] { a[href] {
color: #000; color: #000;
} }
.posts-count { .posts-count {
color: darken($tertiary, 50%); color: darken($link_color, 40%);
font-size: 12px; font-size: 12px;
} }
} }
@ -78,28 +78,28 @@
z-index: 999999; z-index: 999999;
position: absolute; position: absolute;
width: 240px; width: 240px;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
li { li {
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
a[href] { a[href] {
padding: 5px; padding: 5px;
display: block; display: block;
span.username { span.username {
color: lighten($primary, 20); color: $primary_text_color;
} }
span.name { span.name {
font-size: 11px; font-size: 11px;
} }
&.selected { &.selected {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
@include hover { @include hover {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
text-decoration: none; text-decoration: none;
} }
} }
@ -120,13 +120,13 @@
#file-uploading { #file-uploading {
left: 51%; left: 51%;
font-size: 12px; font-size: 12px;
color: darken($primary_light, 40); color: $secondary_text_color;
} }
#draft-status { #draft-status {
right: 51%; right: 51%;
color: $primary_medium; color: $primary_text_color;
&.flash { &.flash {
color: lighten($highlight_danger, 20); color: $warning_text_color;
} }
} }
@include transition(height 0.4s ease); @include transition(height 0.4s ease);
@ -144,7 +144,7 @@
right: 13px; right: 13px;
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
color: $primary_medium; color: $primary_text_color;
text-decoration: none; text-decoration: none;
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
@ -180,7 +180,7 @@
&.draft { &.draft {
height: 40px !important; height: 40px !important;
cursor: pointer; cursor: pointer;
border-top: 1px solid $primary_light; border-top: 1px solid $primary_border_color;
.draft-text { .draft-text {
display: block; display: block;
} }
@ -193,7 +193,7 @@
} }
&.saving { &.saving {
height: 40px !important; height: 40px !important;
border-top: 1px solid $primary_light; border-top: 1px solid $primary_border_color;
.saving-text { .saving-text {
display: block; display: block;
} }
@ -215,7 +215,7 @@
height: 70px; height: 70px;
text-indent: -9999em; text-indent: -9999em;
background: { background: {
color: $primary; color: $primary_text_color;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
size: 35px; size: 35px;
@ -245,12 +245,12 @@
input#reply-title { input#reply-title {
padding: 7px 10px; padding: 7px 10px;
margin: 6px 10px 3px 0; margin: 6px 10px 3px 0;
color: $primary; color: $primary_text_color;
} }
input#reply-title { input#reply-title {
width: 400px; width: 400px;
color: $primary; color: $primary_text_color;
} }
.wmd-controls { .wmd-controls {
@ -305,18 +305,18 @@
} }
} }
#reply-title { #reply-title {
color: $primary; color: $primary_text_color;
margin-right: 10px; margin-right: 10px;
float: left; float: left;
&:disabled { &:disabled {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
} }
#wmd-input:disabled { #wmd-input:disabled {
background-color: $primary_lighter; background-color: lighten($primary_background_color, 60%);
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
color: $primary; color: $primary_text_color;
video { video {
max-width: 100%; max-width: 100%;
@ -328,7 +328,7 @@
} }
} }
#wmd-preview { #wmd-preview {
border: 1px dashed $primary_light; border: 1px dashed $primary_border_color;
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
@ -357,6 +357,11 @@
.show-admin-options { .show-admin-options {
vertical-align: top; vertical-align: top;
margin-top: 8px; margin-top: 8px;
background: lighten($secondary_background_color, 60%);
&:hover {
color: $tertiary_text_color;
background: lighten($secondary_background_color, 35%);
}
} }
.title-input .popup-tip { .title-input .popup-tip {
width: 300px; width: 300px;
@ -384,8 +389,8 @@ div.ac-wrap.disabled {
} }
div.ac-wrap { div.ac-wrap {
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
padding: 5px 10px; padding: 5px 10px;
div.item { div.item {
float: left; float: left;
@ -406,12 +411,12 @@ div.ac-wrap {
border-radius: 10px; border-radius: 10px;
width: 10px; width: 10px;
display: inline-block; display: inline-block;
border: 1px solid $secondary; border: 1px solid $primary_border_color;
&:hover { &:hover {
background-color: lighten($highlight_danger, 45); background-color: $warning_background_color;
border: 1px solid lighten($highlight_danger, 20); border: 1px solid $warning_border_color;
text-decoration: none; text-decoration: none;
color: $highlight_danger; color: $warning_text_color;
} }
} }
} }
@ -467,7 +472,7 @@ div.ac-wrap {
min-height: 100%; min-height: 100%;
padding: 7px; padding: 7px;
margin: 0; margin: 0;
background-color: $secondary; background-color: $primary_background_color;
word-wrap: break-word; word-wrap: break-word;
// set up proper header margins in post preview // set up proper header margins in post preview
@ -483,7 +488,8 @@ div.ac-wrap {
min-height: 100%; min-height: 100%;
@include box-sizing(border-box); @include box-sizing(border-box);
border: 0; border: 0;
border-top: 36px solid transparent; border-top: 30px solid transparent;
box-shadow: none;
@include border-radius-all(0); @include border-radius-all(0);
transition: none; transition: none;
} }
@ -512,8 +518,8 @@ div.ac-wrap {
#wmd-button-bar { #wmd-button-bar {
top: 0; top: 0;
position: absolute; position: absolute;
border-bottom: 1px solid $inner_line; border-bottom: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
z-index: 100; z-index: 100;
} }
} }
@ -535,6 +541,7 @@ div.ac-wrap {
.admin-options-form { .admin-options-form {
display: none; display: none;
margin-top: -15px;
} }
.auto-close-fields { .auto-close-fields {
@ -542,8 +549,8 @@ div.ac-wrap {
width: 150px; width: 150px;
} }
.examples { .examples {
margin: 12px 0 0 17px; margin: 10px 0 0 0;
color: $primary_medium; color: $primary_text_color;
} }
} }

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

@ -61,38 +61,38 @@ header {
body { body {
button.ok { button.ok {
@include linear-gradient(lighten($success, 5%), $success); background: $btn-success-background;
color: $secondary; color: $tertiary_text_color;
@include hover { @include hover {
@include linear-gradient(lighten($success, 10%), $success); background: lighten($btn-success-background, 10%);
color: $secondary; color: $tertiary_text_color;
} }
} }
button.cancel { button.cancel {
@include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger); background: $btn-danger-background-color;
color: $secondary; color: $tertiary_text_color;
@include hover { @include hover {
@include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger); background: lighten($btn-danger-background-color, 10%);
color: $secondary; color: $tertiary_text_color;
} }
} }
.coldmap-high { .coldmap-high {
color: lighten($tertiary, 20%) !important; color: $coldmap-high !important;
} }
.coldmap-med { .coldmap-med {
color: lighten($tertiary, 10%) !important; color: $coldmap-med !important;
} }
.coldmap-low { .coldmap-low {
color: $tertiary !important; color: $coldmap-low !important;
} }
.heatmap-high { .heatmap-high {
color: lighten($highlight_danger, 10%) !important; color: $heatmap-high !important;
} }
.heatmap-med { .heatmap-med {
color: $highlight_danger !important; color: $heatmap-med !important;
} }
.heatmap-low { .heatmap-low {
color: darken($highlight_danger, 10%) !important; color: $heatmap-low !important;
} }
#loading-message { #loading-message {
position: absolute; position: absolute;
@ -100,7 +100,7 @@ body {
text-align: center; text-align: center;
top: 120px; top: 120px;
left: 500px; left: 500px;
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
.top-space { .top-space {
margin-top: 10px; margin-top: 10px;
@ -114,22 +114,21 @@ body {
.contents { .contents {
} }
&.white { &.white {
background-color: $secondary; background-color: $primary_background_color;
} }
} }
#main { #main {
.fa-star.starred { .fa-star.starred {
color: $highlight_danger; color: $warning_text_color;
} }
a.star { a.star {
color: $primary_lighter; color: lighten($primary_text_color, 60%);
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f005"; content: "\f005";
} }
&.starred { &.starred {
color: $highlight_danger; color: $warning_text_color;
text-shadow: 0px 0px 3px $primary_light;
@include hover { @include hover {
opacity: 1; opacity: 1;
&:before { &:before {
@ -173,7 +172,7 @@ body {
/**/ /**/
.message { .message {
@include border-radius-all(8px); @include border-radius-all(8px);
background-color: $secondary; background-color: $primary_background_color;
padding: 14px; padding: 14px;
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
@ -188,7 +187,7 @@ body {
.contents { .contents {
padding-top: 10px; padding-top: 10px;
a[href] { a[href] {
color: $secondary; color: $tertiary_text_color;
} }
} }
} }
@ -198,14 +197,14 @@ body {
} }
.grippie { .grippie {
width: 100%; width: 100%;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
border-width: 1px 0px; border-width: 1px 0px;
cursor: row-resize; cursor: row-resize;
height: 11px; height: 11px;
overflow: hidden; overflow: hidden;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 60%);
display:block {} display:block;
background: image-url("grippie.png") $primary_lightest no-repeat center 3px; background: image-url("grippie.png") lighten($secondary_background_color, 76%) no-repeat center 3px;
} }
} }
@ -213,10 +212,10 @@ form {
.tip { .tip {
display: inline-block; display: inline-block;
&.good { &.good {
color: $success; color: $success_text_color;
} }
&.bad { &.bad {
color: $highlight_danger; color: $warning_text_color;
} }
} }
} }
@ -225,7 +224,7 @@ blockquote {
/* 13px left is intentional here to properly align with post quotes */ /* 13px left is intentional here to properly align with post quotes */
padding: 10px 4px 4px 13px; padding: 10px 4px 4px 13px;
background-color: $quote-background; background-color: $quote-background;
border-left: 5px solid $primary_lighter; border-left: 5px solid $primary_border_color;
p { p {
} }
} }
@ -239,7 +238,7 @@ blockquote {
margin: 0; margin: 0;
i { i {
font-size: 15px; font-size: 15px;
color: darken($secondary, 60%); color: darken($tertiary_text_color, 60%);
} }
} }
} }
@ -250,12 +249,12 @@ blockquote {
#pagedown-editor { #pagedown-editor {
width: 540px; width: 540px;
background-color: $secondary; background-color: $primary_background_color;
padding: 0 10px 13px 10px; padding: 0 10px 13px 10px;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
.preview { .preview {
margin-top: 8px; margin-top: 8px;
border: 1px dashed $primary_light; border: 1px dashed $primary_border_color;
padding: 8px 8px 0 8px; padding: 8px 8px 0 8px;
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -275,7 +274,7 @@ blockquote {
font-size: 15px; font-size: 15px;
line-height: 23px; line-height: 23px;
text-align: center; text-align: center;
color: $secondary; color: $primary_background_color;
background: { background: {
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
@ -289,9 +288,9 @@ blockquote {
} }
.avatar-wrapper { .avatar-wrapper {
background-color: $secondary; background-color: $primary_background_color;
display: inline-block; display: inline-block;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
@include border-radius-all(5px); @include border-radius-all(5px);
img { img {
@include border-radius-all(4px); @include border-radius-all(4px);
@ -309,7 +308,7 @@ blockquote {
body { body {
input, textarea, select { input, textarea, select {
color: $primary; color: $primary_text_color;
} }
code, pre { code, pre {
@ -324,6 +323,16 @@ body {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
} }
.page-not-found {
margin: 20px 0 40px 0;
}
.page-not-found-search {
margin-top: 20px;
}
.popular-topics-title, .recent-topics-title {margin-bottom: 10px;}
// this removes the unwanted top margin on a paragraph under a heading // this removes the unwanted top margin on a paragraph under a heading
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
@ -352,7 +361,7 @@ body {
margin-bottom: 9px; margin-bottom: 9px;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary_text_color;
} }
input { input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] { &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
@ -362,7 +371,7 @@ body {
margin-bottom: 9px; margin-bottom: 9px;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary_text_color;
} }
} }
input { input {
@ -371,33 +380,33 @@ body {
textarea { textarea {
width: 210px; width: 210px;
height: auto; height: auto;
background-color:$secondary; background-color:$primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px $primary_lightest; box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
} }
input { input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] { &[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
border-radius: 3px; border-radius: 3px;
box-shadow: inset 0 1px 1px $primary_lightest; box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
} }
} }
textarea:focus { textarea:focus {
border-color: $tertiary; border-color: $emphasis_border_color;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary; box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
} }
input { input {
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus { &[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
border-color: $tertiary; border-color: $emphasis_border_color;
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary; box-shadow: inset 0 1px 1px rgba($primary_shadow_color, .3), 0 0 8px $emphasis_border_color;
} }
} }
@ -418,7 +427,7 @@ body {
select { select {
width: 220px; width: 220px;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
&[multiple], &[size] { &[multiple], &[size] {
height: auto; height: auto;
} }
@ -470,8 +479,8 @@ body {
} }
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] { input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed; cursor: not-allowed;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
border-color: $primary_light; border-color: $primary_border_color;
} }
input { input {
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] { &[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@ -481,66 +490,66 @@ body {
.control-group { .control-group {
&.warning { &.warning {
> label { > label {
color: $highlight_danger; color: $warning_text_color;
} }
.checkbox, .radio, input, select, textarea { .checkbox, .radio, input, select, textarea {
color: $highlight_danger; color: $warning_text_color;
border-color: $highlight_danger; border-color: $warning_border_color;
} }
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus { .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: $highlight_danger_dark; border-color: darken($warning_border_color, 25%);
box-shadow: 0 0 6px $highlight_danger_light; box-shadow: 0 0 6px $warning_shadow_color;
} }
.input-prepend .add-on, .input-append .add-on { .input-prepend .add-on, .input-append .add-on {
color: $highlight_danger; color: $warning_text_color;
background-color: $highlight_danger_light; background-color: $warning_background_color;
border-color: $highlight_danger; border-color: $warning_border_color;
} }
} }
&.error { &.error {
> label { > label {
color: $highlight_danger; color: $warning_text_color;
} }
.checkbox, .radio, input, select, textarea { .checkbox, .radio, input, select, textarea {
color: $highlight_danger; color: $warning_text_color;
border-color: $highlight_danger; border-color: $warning_border_color;
} }
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus { .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: $highlight_danger_dark; border-color: darken($warning_border_color, 20%);
box-shadow: 0 0 6px $highlight_danger_light; box-shadow: 0 0 6px $warning_shadow_color;
} }
.input-prepend .add-on, .input-append .add-on { .input-prepend .add-on, .input-append .add-on {
color: $highlight_danger; color: $warning_text_color;
background-color: $highlight_danger_light; background-color: $warning_background_color;
border-color: $highlight_danger_dark; border-color: darken($warning_border_color, 10%);
} }
} }
&.success { &.success {
> label { > label {
color: $success; color: $success_text_color;
} }
.checkbox, .radio, input, select, textarea { .checkbox, .radio, input, select, textarea {
color: $success; color: $success_text_color;
border-color: $success; border-color: $success_border_color;
} }
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus { .checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: $success_dark; border-color: $success_border_color;
box-shadow: 0 0 6px $success_light; box-shadow: 0 0 6px $success_shadow_color;
} }
.input-prepend .add-on, .input-append .add-on { .input-prepend .add-on, .input-append .add-on {
color: $success; color: $success_text_color;
background-color: $success_light; background-color: $success_background_color;
border-color: $success; border-color: $success_border_color;
} }
} }
} }
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid { input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
color: $highlight_danger; color: $warning_text_color;
border-color: $highlight_danger; border-color: $warning_border_color;
} }
input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus { input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
border-color: $highlight_danger; border-color: $warning_border_color;
box-shadow: 0 0 6px $highlight_danger_light; box-shadow: 0 0 6px $warning_shadow_color;
} }
.input-prepend, .input-append { .input-prepend, .input-append {
@ -565,18 +574,17 @@ body {
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
text-shadow: 0 1px 0 $secondary;
vertical-align: middle; vertical-align: middle;
background-color: $primary_lightest; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
} }
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn { .input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
margin-left: -1px; margin-left: -1px;
border-radius: 0; border-radius: 0;
} }
.input-prepend .active, .input-append .active { .input-prepend .active, .input-append .active {
background-color: $success_light; background-color: $warning_background_color;
border-color: $success; border-color: $warning_border_color;
} }
.input-prepend { .input-prepend {
.add-on, .btn { .add-on, .btn {
@ -659,8 +667,8 @@ body {
.alert { .alert {
padding: 8px 35px 8px 14px; padding: 8px 35px 8px 14px;
margin-bottom: 18px; margin-bottom: 18px;
background-color: $highlight_danger_light; background-color: $warning_background_color;
border: 1px solid $highlight_danger_light; border: 1px solid $warning_border_color;
color: #c09853; color: #c09853;
} }
.alert .close { .alert .close {
@ -670,19 +678,19 @@ body {
line-height: 18px; line-height: 18px;
} }
.alert-success { .alert-success {
background-color: $success_light; background-color: $success_background_color;
border-color: $success_light; border-color: $success_border_color;
color: $success_dark; color: $success_text_color;
} }
.alert-error { .alert-error {
background-color: $highlight_danger_light; background-color: $warning_background_color;
border-color: $highlight_danger_light; border-color: $warning_border_color;
color: $highlight_danger_dark; color: $warning_text_color;
} }
.alert-info { .alert-info {
background-color: $tertiary_lightest; background-color: $emphasis_background_color;
border-color: $tertiary_lightest; border-color: $emphasis_background_color;
color: $tertiary_dark; color: $primary_text_color;
} }
.alert { .alert {
.close { .close {
@ -690,12 +698,11 @@ body {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary_text_color;
text-shadow: 0 1px 0 $secondary;
opacity: 0.2; opacity: 0.2;
filter: alpha(opacity = 20); filter: alpha(opacity = 20);
@include hover { @include hover {
color: $primary; color: $primary_text_color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
opacity: 0.4; opacity: 0.4;
@ -713,7 +720,7 @@ body {
.bootbox.modal { .bootbox.modal {
.modal-footer { .modal-footer {
a.btn-primary { a.btn-primary {
color: $secondary; color: $tertiary_text_color;
} }
} }
} }

48
app/assets/stylesheets/desktop/header.scss
View File

@ -11,8 +11,8 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: 1000; z-index: 1000;
box-shadow: 0 1px 5px $primary_lighter; box-shadow: 0 1px 3px rgba($primary_shadow_color, .2);
background-color: $secondary; background-color: $primary_background_color;
padding-right: 3px; padding-right: 3px;
padding-top: 3px; padding-top: 3px;
.docked & { .docked & {
@ -46,7 +46,7 @@
.current-username { .current-username {
float: left; float: left;
a { a {
color: $primary; color: $primary_text_color;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
} }
@ -66,14 +66,14 @@
&:first-child.active .icon { &:first-child.active .icon {
} }
&:last-child .icon { &:last-child .icon {
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color;
} }
} }
.icon { .icon {
display: block; display: block;
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
border-left: 1px solid $primary_lighter; border-left: 1px solid $primary_border_color;
padding: 3px; padding: 3px;
color: $nav-button-color; color: $nav-button-color;
text-decoration: none; text-decoration: none;
@ -90,9 +90,9 @@
.active .icon { .active .icon {
position: relative; position: relative;
color: #7b7b7b; color: #7b7b7b;
background-color: $secondary; background-color: $primary_background_color;
cursor: default; cursor: default;
@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))); @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)));
&:after { &:after {
display: block; display: block;
position: absolute; position: absolute;
@ -102,7 +102,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
content: ""; content: "";
border-top: 1px solid $secondary; border-top: 1px solid $tertiary_border_color;
} }
} }
[class^="fa fa-"] { [class^="fa fa-"] {
@ -123,15 +123,15 @@
} }
.unread-notifications { .unread-notifications {
right: -4px; right: -4px;
background-color: $tertiary; background-color: $emphasis_text_color;
} }
.unread-private-messages { .unread-private-messages {
left: -4px; left: -4px;
background-color: $success; background-color: $success_text_color;
} }
} }
.flagged-posts { .flagged-posts {
background-color: $highlight_danger; background-color: $warning_text_color;
} }
} }
@ -155,9 +155,9 @@
right: 0; right: 0;
z-index: 1100; z-index: 1100;
margin-top: -1px; margin-top: -1px;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
@include box-shadow(0 3px 3px $primary_lightest); @include box-shadow(0 3px 3px rgba($primary_shadow_color, .4));
// Common // Common
@ -174,14 +174,13 @@
} }
} }
.heading { .heading {
border-bottom: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
color: $primary;
border-bottom: 1px solid $primary_border_color;
color: $primary_text_color;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
text-shadow: 0 1px 0 $secondary;
background-color: $secondary;
@include box-shadow(inset 0 1px 0 $primary_lighter);
} }
.selected { .selected {
background-color: $header-item-highlight; background-color: $header-item-highlight;
@ -191,13 +190,13 @@
&#notifications-dropdown { &#notifications-dropdown {
.fa { .fa {
color: $primary_light; color: lighten($primary_text_color, 50%);
} }
li { li {
background-color: $header-item-highlight; background-color: $header-item-highlight;
} }
.read { .read {
background-color: $secondary; background-color: $primary_background_color;
} }
.none { .none {
padding: 5px; padding: 5px;
@ -212,7 +211,6 @@
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
&:focus { &:focus {
@include box-shadow((inset 0 1px 1px $primary_lightest, 0 0 4px $primary_lighter));
} }
} }
.searching { .searching {
@ -220,7 +218,7 @@
position: absolute; position: absolute;
top: 13px; top: 13px;
right: 13px; right: 13px;
color: $primary_light; color: lighten($primary_text_color, 50%);
font-size: 18px; font-size: 18px;
} }
.no-results { .no-results {

30
app/assets/stylesheets/desktop/history.scss
View File

@ -11,14 +11,14 @@
#revision-controls { #revision-controls {
float: left; float: left;
.btn[disabled]:hover { .btn[disabled]:hover {
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
} }
#display-modes { #display-modes {
text-align: right; text-align: right;
} }
#revision-details { #revision-details {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 5px; padding: 5px;
margin-top: 10px; margin-top: 10px;
} }
@ -53,63 +53,63 @@
} }
ins, .diff-ins { ins, .diff-ins {
code, img { code, img {
border: 2px solid $success_dark; border: 2px solid $success_border_color;
} }
img { img {
opacity: .75; opacity: .75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
a { a {
color: $success_darker; color: $success_text_color;
text-decoration: none; text-decoration: none;
} }
} }
img.diff-ins, code.diff-ins { img.diff-ins, code.diff-ins {
border: 2px solid $success_darker; border: 2px solid $success_border_color;
} }
img.diff-ins { img.diff-ins {
opacity: .75; opacity: .75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
.diff-ins { .diff-ins {
background: $success_light; background: $success_background_color;
} }
ins { ins {
color: $success_dark; color: $success_text_color;
background: $success_light; background: $success_background_color;
} }
del, .diff-del { del, .diff-del {
code, img { code, img {
border: 2px solid $highlight_danger_dark; border: 2px solid $warning_border_color;
} }
img { img {
opacity: .5; opacity: .5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
a { a {
color: $highlight_danger_darker; color: $warning_text_color;
text-decoration: none; text-decoration: none;
} }
} }
img.diff-del, code.diff-del { img.diff-del, code.diff-del {
border: 2px solid $highlight_danger_dark; border: 2px solid $warning_border_color;
} }
img.diff-del { img.diff-del {
opacity: .5; opacity: .5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
.diff-del { .diff-del {
background: $highlight_danger_light; background: $warning_background_color;
} }
del { del {
color: $highlight_danger_dark; color: $warning_text_color;
background: $highlight_danger_light; background: $warning_background_color;
} }
span.date { span.date {
font-weight: bold; font-weight: bold;
} }
span.edit-reason { span.edit-reason {
background-color: $highlight_light; background-color: $highlight_background_color;
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
.modal-header { .modal-header {

8
app/assets/stylesheets/desktop/lightbox.scss
View File

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

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

@ -14,7 +14,7 @@
#login-form { #login-form {
a { a {
color: $primary_medium; color: lighten($primary_text_color, 35%);
cursor: pointer; cursor: pointer;
} }
} }
@ -52,7 +52,7 @@
tr.instructions { tr.instructions {
label { label {
color: $primary_light; color: lighten($primary_text_color, 60%);
} }
} }

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

@ -26,7 +26,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1040;
background-color: $primary; background-color: $secondary_background_color;
&.fade { &.fade {
opacity: 0; opacity: 0;
} }
@ -50,13 +50,13 @@
.modal-inner-container { .modal-inner-container {
max-width: 710px; max-width: 710px;
margin: 0 auto; margin: 0 auto;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
border: 1px solid $primary_lightest; border: 1px solid lighten($primary_border_color, 10%);
*border: 1px solid $primary_light; *border: 1px solid $primary_border_color;
/* IE6-7 */ /* IE6-7 */
box-shadow: 0 3px 7px $primary; box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
background-clip: padding-box; background-clip: padding-box;
} }
.modal { .modal {
@ -78,13 +78,13 @@
width: 610px; width: 610px;
height: auto; height: auto;
margin: -250px 0 0 -305px; margin: -250px 0 0 -305px;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
border: 1px solid $primary_lightest; border: 1px solid lighten($primary_border_color, 10%);
*border: 1px solid $primary_light; *border: 1px solid $primary_border_color;
/* IE6-7 */ /* IE6-7 */
box-shadow: 0 3px 7px $primary; box-shadow: 0 3px 7px rgba($primary_shadow_color, .8);
background-clip: padding-box; background-clip: padding-box;
} }
@ -107,7 +107,7 @@
.modal-footer { .modal-footer {
margin: 0 15px; margin: 0 15px;
padding: 14px 0 15px; padding: 14px 0 15px;
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
*zoom: 1; *zoom: 1;
} }
.modal-footer:before, .modal-footer:before,
@ -130,7 +130,7 @@
margin-left: -1px; margin-left: -1px;
} }
.modal-header { .modal-header {
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
h3 { h3 {
color: $nav-pills-background-color-active; color: $nav-pills-background-color-active;
font-size: 20px; font-size: 20px;
@ -152,11 +152,11 @@
.modal { .modal {
.nav { .nav {
padding: 10px 30px; padding: 10px 30px;
background-color: $primary_lightest; background-color: lighten($primary_background_color, 76%);
li > a { li > a {
font-size: 14px; font-size: 14px;
} }
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
} }
@ -185,17 +185,17 @@
height: 80px; height: 80px;
} }
label { label {
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
p { p {
color: $primary; color: $primary_text_color;
font-size: 13px; font-size: 13px;
} }
.archetype-option { .archetype-option {
margin-bottom: 20px; margin-bottom: 20px;
} }
.warning { .warning {
color: lighten($highlight_danger, 10%) !important; color: $warning_text_color !important;
} }
} }
.password-confirmation { .password-confirmation {
@ -236,11 +236,11 @@
li { li {
margin: 0 4px 8px 0; margin: 0 4px 8px 0;
a { a {
color: $primary_light; color: lighten($primary_text_color, 50%);
cursor: pointer; cursor: pointer;
} }
a:hover { a:hover {
color: $primary; color: $primary_text_color;
} }
} }
} }
@ -322,9 +322,9 @@
font-weight: normal; font-weight: normal;
} }
&.btn-reply-here { &.btn-reply-here {
@include linear-gradient($primary_lighter, $primary_lighter); background: lighten($secondary_background_color, 60%);
text-shadow: none; text-shadow: none;
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
} }
.cancel { .cancel {

16
app/assets/stylesheets/desktop/onebox.scss
View File

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

18
app/assets/stylesheets/desktop/pagedown.scss
View File

@ -19,7 +19,7 @@
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 10px; margin-top: 5px;
padding: 0px; padding: 0px;
height: 20px; height: 20px;
} }
@ -29,7 +29,7 @@
height: 20px; height: 20px;
margin-right: 8px; margin-right: 8px;
margin-left: 5px; margin-left: 5px;
background-color: $primary_light; background-color: lighten($primary_background_color, 50%);
display: inline-block; display: inline-block;
float: left; float: left;
} }
@ -66,7 +66,7 @@
} }
.wmd-button:hover { .wmd-button:hover {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
@ -124,12 +124,12 @@
} }
.wmd-prompt-background { .wmd-prompt-background {
background-color: $primary; background-color: $secondary_background_color;
} }
.wmd-prompt-dialog { .wmd-prompt-dialog {
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 60%);
} }
.wmd-prompt-dialog > div { .wmd-prompt-dialog > div {
@ -138,12 +138,12 @@
} }
.wmd-prompt-dialog > form > input[type="text"] { .wmd-prompt-dialog > form > input[type="text"] {
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
color: $primary; color: $primary_text_color;
} }
.wmd-prompt-dialog > form > input[type="button"] { .wmd-prompt-dialog > form > input[type="button"] {
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
font-family: trebuchet MS, helvetica, sans-serif; font-family: trebuchet MS, helvetica, sans-serif;
font-size: 0.8em; font-size: 0.8em;
font-weight: bold; font-weight: bold;

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

@ -7,9 +7,9 @@
position: absolute; position: absolute;
left: 20px; left: 20px;
z-index: 990; z-index: 990;
box-shadow: 0 2px 6px $primary_light; box-shadow: 0 2px 6px $primary_border_color;
margin-top: -2px; margin-top: -2px;
background-color: $secondary; background-color: $primary_background_color;
padding: 12px 12px 5px 12px; padding: 12px 12px 5px 12px;
max-width: 350px; max-width: 350px;
@ -19,7 +19,7 @@
margin-bottom: 8px; margin-bottom: 8px;
a { a {
color: $primary; color: $primary_text_color;
} }
} }
@ -30,7 +30,7 @@
margin-bottom: 5px; margin-bottom: 5px;
a { a {
color: $primary; color: $primary_text_color;
} }
} }
@ -38,16 +38,16 @@
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
margin-top: 0px; margin-top: 0px;
color: $primary_medium; color: $secondary_text_color;
} }
.groups { .groups {
font-size: 13px; font-size: 13px;
font-weight: normal; font-weight: normal;
margin-top: 0px; margin-top: 0px;
color: $primary_medium; color: $secondary_text_color;
.group-link { .group-link {
color: $primary; color: $primary_text_color;
} }
} }
@ -67,7 +67,7 @@
p.loading { p.loading {
margin-top: 30px; margin-top: 30px;
color: $primary_medium; color: $secondary_text_color;
} }
.btn { .btn {
@ -75,6 +75,6 @@
} }
.new-user a { .new-user a {
color: $primary_medium; color: $secondary_text_color;
} }
} }

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

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

4
app/assets/stylesheets/desktop/topic-admin-menu.scss
View File

@ -11,10 +11,10 @@
} }
.topic-admin-menu { .topic-admin-menu {
background-color: $secondary; background-color: $primary_background_color;
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
position: fixed; position: fixed;
top: 70px; top: 70px;
right: 10px; right: 10px;

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

@ -58,16 +58,16 @@
// -------------------------------------------------- // --------------------------------------------------
#topic-list { #topic-list {
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
margin: 0 0 10px; margin: 0 0 10px;
a.title:visited:not(.badge-notification) {color: $primary_medium;} a.title:visited:not(.badge-notification) {color: lighten($primary_text_color, 35%);}
> tbody > tr { > tbody > tr {
&:nth-child(even) { &:nth-child(even) {
background-color: lighten($primary_lightest, 1%); background-color: lighten($secondary_background_color, 77%);
} }
&.archived a { &.archived a {
opacity: 0.6; opacity: 0.6;
@ -82,7 +82,7 @@
} }
} }
&.highlighted { &.highlighted {
background-color: $highlight_light; background-color: $highlight_background_color;
} }
} }
th, th,
@ -102,7 +102,7 @@
color: $topic-list-th-color; color: $topic-list-th-color;
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
background: lighten($primary_lighter, 12%); background: lighten($secondary_background_color, 70%);
} }
@ -116,7 +116,7 @@
padding: 0; padding: 0;
background: transparent; background: transparent;
&:hover { &:hover {
color: $primary_light; color: lighten($primary_text_color, 35%);
} }
} }
@ -135,7 +135,7 @@
font-size: 16px; font-size: 16px;
i.score { i.score {
color: $success; color: $success_text_color;
cursor: pointer; cursor: pointer;
} }
} }
@ -143,8 +143,9 @@
.topic-excerpt { .topic-excerpt {
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 8px;
color: $primary_medium; color: lighten($primary_text_color, 35%);
word-break: break-word; word-break: break-word;
padding-right: 20px;
} }
@include medium-width { @include medium-width {
@ -202,7 +203,7 @@
.sortable { .sortable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: lighten($primary_lighter, 7%); background-color: lighten($secondary_background_color, 60%);
} }
@include unselectable; @include unselectable;
} }
@ -313,7 +314,7 @@
.featured-topic { .featured-topic {
margin: 6px 0; margin: 6px 0;
a.last-posted-at, a.last-posted-at:visited { a.last-posted-at, a.last-posted-at:visited {
color: $primary_light; color: lighten($primary_text_color, 50%);
} }
} }
@ -355,7 +356,7 @@
.category-list-item { .category-list-item {
margin-bottom: 10px; margin-bottom: 10px;
#topic-list tbody tr:nth-child(even) { #topic-list tbody tr:nth-child(even) {
background-color: $secondary; background-color: $primary_background_color;
} }
th .badge-category { th .badge-category {
float: left; float: left;
@ -365,7 +366,7 @@
float: left; float: left;
} }
> footer { > footer {
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
border-top: 0; border-top: 0;
padding: 7px 10px; padding: 7px 10px;
background-color: lighten($topic-list-th-background-color, 2%); background-color: lighten($topic-list-th-background-color, 2%);
@ -375,7 +376,6 @@
color: lighten($topic-list-th-color, 5%); color: lighten($topic-list-th-color, 5%);
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
text-shadow: 0 1px 0 $secondary;
} }
figcaption { figcaption {
display: inline; display: inline;
@ -411,11 +411,11 @@
width: 200px; width: 200px;
margin: 0 auto; margin: 0 auto;
padding: 10px 0 10px 43px; padding: 10px 0 10px 43px;
color: $secondary; color: $primary_background_color;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
background: { background: {
color: $primary; color: $primary_text_color;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
position: 10px 50%; position: 10px 50%;
@ -429,8 +429,8 @@
.list-controls { .list-controls {
.home { .home {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
color: $primary; color: $primary_text_color;
} }
.badge-category { .badge-category {
@ -467,7 +467,7 @@
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
border: 0; border: 0;
color: lighten($highlight_danger, 10%); color: lighten($warning_text_color, 10%);
font-size: 13px; font-size: 13px;
cursor: default; cursor: default;
} }
@ -508,8 +508,8 @@ ol.category-breadcrumb {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
max-height: 350px; max-height: 350px;
padding: 8px 7px 0 7px; padding: 8px 7px 0 7px;
z-index: 100; z-index: 100;
@ -541,7 +541,7 @@ ol.category-breadcrumb {
position: fixed; position: fixed;
right: 20px; right: 20px;
padding: 5px; padding: 5px;
background-color: $secondary; background-color: $primary_background_color;
button { button {
padding: 3px 0 3px 6px; padding: 3px 0 3px 6px;
} }

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

@ -3,16 +3,15 @@
@import "common/foundation/helpers"; @import "common/foundation/helpers";
.gap { .gap {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 5px 10px; padding: 5px 10px;
margin-bottom: 10px; color: lighten($primary_text_color, 35%);
color: $primary_medium;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
width: 820px; width: 822px;
&:hover { &:hover {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
} }
@include medium-width { @include medium-width {
@ -49,10 +48,10 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
left: 120px; left: 120px;
z-index: 400; z-index: 400;
padding: 5px 12px; padding: 5px 12px;
border: 1px solid lighten($primary_light, 20%); border: 1px solid lighten($primary_border_color, 10%);
font-size: 12px; font-size: 12px;
margin-left: -8px; margin-left: -8px;
background: $secondary; background: $primary_background_color;
} }
.avoid-tab { .avoid-tab {
@ -95,13 +94,13 @@ section.post-menu-area, .post-actions {
nav.post-controls { nav.post-controls {
padding: 0; padding: 0;
button {color: $primary_light; button {color: lighten($primary_text_color, 50%);
margin-right: 2px; margin-right: 2px;
} }
span.badge-posts { span.badge-posts {
margin-right: 5px; margin-right: 5px;
color: $primary_light; color: lighten($primary_text_color, 50%);
} }
.show-replies { .show-replies {
@ -118,18 +117,18 @@ nav.post-controls {
button.create { button.create {
margin-right: 0; margin-right: 0;
color: $tertiary; color: $link-color;
background: $tertiary_lightest; background: $emphasis_background_color;
padding: 8px 20px; padding: 8px 20px;
margin-left: 10px; margin-left: 10px;
&:hover { color: $secondary; &:hover { color: $tertiary_text_color;
background: $tertiary; background: $emphasis_text_color;
} }
&:active { &:active {
background: $tertiary_lightest; background: $emphasis_background_color;
@include box-shadow(inset 0 1px 3px $primary_light); @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .3));
} }
@ -148,12 +147,12 @@ nav.post-controls {
margin-left: 3px; margin-left: 3px;
transition: all linear 0.15s; transition: all linear 0.15s;
&:hover { &:hover {
background: lighten($primary_light, 20%); background: lighten($secondary_background_color, 76%);
color: $primary_medium; color: $primary_text_color;
} }
&:active { &:active {
@include box-shadow(inset 0 1px 3px $primary_lightest); @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, .4));
} }
&.hidden { &.hidden {
@ -164,12 +163,12 @@ nav.post-controls {
} }
&.delete:hover { &.delete:hover {
background: $highlight_danger; background: $warning_text_color;
color: $secondary; color: $tertiary_text_color;
} }
&.like:hover {color: $heart; &.like:hover {color: $like_color;
background: $heart_light; background: $like_background_color;
} }
&.bookmark {padding: 8px 11px; } &.bookmark {padding: 8px 11px; }
@ -185,11 +184,11 @@ nav.post-controls {
} }
} }
&.last-read { &.last-read {
color: $highlight_danger; color: $warning_text_color;
} }
&.bookmarked { &.bookmarked {
&:before { &:before {
color: $tertiary; color: $link-color;
} }
} }
} }
@ -197,14 +196,14 @@ nav.post-controls {
} }
.embedded-posts { .embedded-posts {
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
.quote .title {background: $primary_lighter;} .quote .title {background: lighten($secondary_background_color, 60%);}
blockquote {background: $primary_lighter;} blockquote {background: lighten($secondary_background_color, 60%);}
&.bottom { margin-top: -11px;} &.bottom { margin-top: -11px;}
.topic-meta-data h5 {margin: 5px;} .topic-meta-data h5 {margin: 5px;}
.topic-meta-data-inside { .topic-meta-data-inside {
margin: -3px 0 0 0; margin: -3px 0 0 0;
color: $primary_light; color: $secondary_text_color;
} }
.topic-meta-data {padding-top: 20px;} .topic-meta-data {padding-top: 20px;}
} }
@ -227,10 +226,10 @@ a.star {
.topic-map { .topic-map {
margin: 20px 0 0 0; margin: 20px 0 0 0;
border: 1px solid lighten($primary_lighter, 10%); border: 1px solid lighten($primary_border_color, 10%);
.buttons .btn {border: 1px solid $primary_lightest !important; .buttons .btn {
&:hover {border: 1px solid $primary_lighter !important;} &:hover {border: 1px solid $primary_border_color !important;}
} }
.topic-links li { .topic-links li {
@ -239,13 +238,13 @@ a.star {
h3 { h3 {
margin-bottom: 4px; margin-bottom: 4px;
color: $primary; color: $primary_text_color;
line-height: 23px; line-height: 23px;
} }
h4 { h4 {
margin: 0 0 3px 0; margin: 0 0 3px 0;
color: $primary_medium; color: $secondary_text_color;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
@ -296,7 +295,7 @@ a.star {
line-height: 20px; line-height: 20px;
} }
.number { .number {
color: $tertiary_dark; color: $link-color;
} }
.avatar + a { .avatar + a {
float: left; float: left;
@ -306,10 +305,10 @@ a.star {
.links, .links,
.information { .information {
padding: 7px 14px; padding: 7px 14px;
color: $primary; color: $primary_text_color;
} }
.information { .information {
border-top: 1px solid $primary_light; border-top: 1px solid $primary_border_color;
} }
@ -329,20 +328,19 @@ a.star {
float: right; float: right;
.btn { .btn {
border: 0; border: 0;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid lighten($secondary_background_color, 76%);
border-left: 1px solid $primary_lighter;
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary_text_color;
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
&:hover { &:hover {
background: $primary_lighter; background: lighten($secondary_background_color, 60%);
color: #444; color: $primary_text_color;
border-bottom: 1px solid $primary_lighter; border: none !important;
border-bottom: 1px solid lighten($secondary_background_color, 60%) !important;
} }
&:active { &:active {
@include box-shadow(inset 0 1px 3px $primary_lightest);
} }
&.collapsed { &.collapsed {
@ -362,7 +360,7 @@ a.star {
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
p { p {
line-height: 32px; line-height: 32px;
color: $primary_light; color: $secondary_text_color;
} }
} }
@ -371,12 +369,12 @@ a.star {
clear: left; clear: left;
padding: 20px 10px 15px 10px; padding: 20px 10px 15px 10px;
.topics table tbody tr {background: $secondary;} .topics table tbody tr {background: $primary_background_color;}
table { table {
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
border-color: $primary_lighter; border-color: $primary_border_color;
margin-top: 10px; margin-top: 10px;
} }
@ -386,8 +384,8 @@ a.star {
} }
span.post-count { span.post-count {
background: $primary; background: $secondary_background_color;
color: $secondary; color: $tertiary_text_color;
opacity: .8; opacity: .8;
} }
@ -403,13 +401,13 @@ span.post-count {
.quote-button { .quote-button {
display: none; display: none;
position: absolute; position: absolute;
background-color: $primary_medium; background-color: lighten($secondary_background_color, 50%);
color: $secondary; color: $tertiary_text_color;
padding: 10px; padding: 10px;
z-index: 401; z-index: 401;
&:hover { &:hover {
background-color: $primary_light; background-color: lighten($secondary_background_color, 50%);
cursor: pointer; cursor: pointer;
} }
} }
@ -452,7 +450,7 @@ iframe {
.topic-meta-data { .topic-meta-data {
margin-bottom: 10px; margin-bottom: 10px;
width: 92px; width: 92px;
border-top: 1px solid lighten($primary_lighter, 10%); border-top: 1px solid lighten($primary_border_color, 10%);
padding-top: 30px; padding-top: 30px;
img { img {
@ -469,10 +467,11 @@ iframe {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 45px; width: 45px;
display: inline;
} }
a.user-group { a.user-group {
color: $primary_light; color: lighten($primary_text_color, 50%);
width: 100%; width: 100%;
} }
@ -487,7 +486,7 @@ iframe {
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
margin-top: 2px; margin-top: 2px;
a {color: $primary;} a {color: $primary_text_color;}
} }
} }
@ -530,8 +529,8 @@ iframe {
a.mention { a.mention {
padding: 2px 4px; padding: 2px 4px;
color: $primary; color: $primary_text_color;
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
} }
@ -543,7 +542,7 @@ iframe {
.deleted { .deleted {
.topic-body { .topic-body {
background-color: $highlight_danger_light; background-color: $warning_background_color;
} }
} }
@ -553,7 +552,7 @@ iframe {
.moderator { .moderator {
.topic-body { .topic-body {
background-color: $highlight_light; background-color: $highlight_background_color;
} }
} }
@ -604,13 +603,13 @@ iframe {
} }
.new-user a { .new-user a {
color: $primary_medium; color: $secondary_text_color;
} }
.staff a { .staff a {
padding: 2px; padding: 2px;
margin: -2px 0 0 0; margin: -2px 0 0 0;
background-color: $highlight_light; background-color: $highlight_background_color;
} }
.topic-meta-data { .topic-meta-data {
@ -628,7 +627,7 @@ position: relative;
.user-title { .user-title {
margin-top: 8px; margin-top: 8px;
color: $primary_light; color: $secondary_text_color;
overflow: hidden; overflow: hidden;
font-size: 80%; font-size: 80%;
line-height: 13px; line-height: 13px;
@ -636,7 +635,7 @@ position: relative;
.info-line { .info-line {
margin: 10px 0; margin: 10px 0;
color: $primary_medium; color: $secondary_text_color;
} }
@ -644,7 +643,7 @@ blockquote { /* solo quotes */
margin: 14px 0; margin: 14px 0;
padding: 12px; padding: 12px;
a.mention {background: $primary_lighter;} a.mention {background: $secondary_text_color;}
p:first-of-type {margin-top: 0;} p:first-of-type {margin-top: 0;}
p:last-of-type {margin-bottom: 0;} p:last-of-type {margin-bottom: 0;}
} }
@ -652,14 +651,14 @@ blockquote { /* solo quotes */
.quote { /* quotes with attribution */ .quote { /* quotes with attribution */
margin-top: 14px; margin-top: 14px;
blockquote {margin-top: 0; padding-top: 0; blockquote {margin-top: 0; padding-top: 0;
.onebox-result {background-color: $primary_lighter;} .onebox-result {background-color: $secondary_text_color;}
} }
.title { .title {
border-left: 5px solid $primary_lighter; border-left: 5px solid $primary_border_color;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 12px; padding: 12px;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }
img {margin-top: -4px;} img {margin-top: -4px;}
@ -672,7 +671,7 @@ blockquote { /* solo quotes */
.quote-controls { .quote-controls {
float: right; float: right;
color: $primary_light; color: $secondary_text_color;
a { a {
margin: 0; margin: 0;
} }
@ -680,7 +679,7 @@ blockquote { /* solo quotes */
.quote-other-topic:before { .quote-other-topic:before {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
color: $primary_light; color: $secondary_text_color;
font-family: "FontAwesome"; font-family: "FontAwesome";
position: relative; position: relative;
z-index: 20; z-index: 20;
@ -718,19 +717,19 @@ blockquote { /* solo quotes */
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 2px; margin-top: 2px;
} }
a {color: $primary_light;} a {color: $secondary_text_color;}
li {margin-bottom: 10px;} li {margin-bottom: 10px;}
} }
} }
.topic-body { .topic-body {
border-top: 1px solid lighten($primary_lighter, 10%); border-top: 1px solid lighten($primary_border_color, 10%);
float: left; float: left;
position: relative; position: relative;
width: 720px; width: 720px;
padding: 10px 10px 15px 20px; padding: 10px 10px 15px 20px;
.highlighted { .highlighted {
background-color: $highlight_light !important; background-color: $highlight_background_color !important;
} }
img, svg { img, svg {
max-width: 100%; max-width: 100%;
@ -774,27 +773,27 @@ blockquote { /* solo quotes */
&.bottom .arrow {float: right; margin: 0 0 0 0;} &.bottom .arrow {float: right; margin: 0 0 0 0;}
&.top {margin-left: 112px;} &.top {margin-left: 112px;}
.topic-body, .topic-meta-data {border: none;} .topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid $primary_lighter; padding-top: 7px;} .row {border-top: 1px solid $primary_border_color; padding-top: 7px;}
.reply:first-of-type .row {border-top: none;} .reply:first-of-type .row {border-top: none;}
} }
.contents.regular { .contents.regular {
button.show-replies { button.show-replies {
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
padding-bottom: 20px; padding-bottom: 20px;
&:hover {background: $primary_lighter; &:hover {background: lighten($secondary_background_color, 76%);
.badge-posts {color: $primary_medium;} .badge-posts {color: $secondary_text_color;}
} }
} }
&.bottom-round button.show-replies { &.bottom-round button.show-replies {
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
margin-bottom: 0; margin-bottom: 0;
padding-bottom: 8px; padding-bottom: 8px;
&:hover {background: $primary_lighter; &:hover {background: lighten($secondary_background_color, 76%);
.badge-posts {color: $primary_medium;} .badge-posts {color: $secondary_text_color;}
} }
} }
@ -818,7 +817,7 @@ button.show-replies {
width: 0; width: 0;
height: 0; height: 0;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid $primary; border-top: 4px solid $primary_text_color;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
@ -835,9 +834,9 @@ button.show-replies {
padding: 4px 0; padding: 4px 0;
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
box-shadow: 0 1px 5px $primary_lightest; box-shadow: 0 1px 5px rgba($primary_shadow_color, .4);
background-clip: padding-box; background-clip: padding-box;
span {font-size: 12px;} span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;} .title {font-weight: bold; display: block; font-size: 14px;}
@ -848,14 +847,14 @@ button.show-replies {
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary_text_color;
} }
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: $secondary; color: $tertiary_text_color;
text-decoration: none; text-decoration: none;
background-color: $tertiary; background-color: $emphasis_text_color;
} }
.open { .open {
*z-index: 1000; *z-index: 1000;
@ -880,8 +879,8 @@ clear: both;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
left: 50%; left: 50%;
background-color: $tertiary_lightest; background-color: $emphasis_background_color;
border: 1px solid $tertiary_light; border: 1px solid $emphasis_border_color;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
@ -909,7 +908,7 @@ clear: both;
} }
h3 { h3 {
font-size: 25px; font-size: 25px;
color: $primary; color: $primary_text_color;
margin-bottom: 5px; margin-bottom: 5px;
i { i {
margin-right: 7px; margin-right: 7px;
@ -917,29 +916,29 @@ clear: both;
} }
.btn { .btn {
border: none; border: none;
color: $secondary; color: $tertiary_text_color;
font-weight: normal; font-weight: normal;
color: $secondary; color: $tertiary_text_color;
background: $btn-primary-background-color; background: $btn-primary-background-color;
&[href] { &[href] {
color: $secondary; color: $tertiary_text_color;
} }
&:hover &:hover
{ {
color: $secondary; color: $tertiary_text_color;
background: darken($btn-primary-background-color, 12%); background: darken($btn-primary-background-color, 12%);
} }
&:active { &:active {
@include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%)); @include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2)); @include box-shadow(inset 0 1px 3px rgba($primary_shadow_color, 0.2));
color: $secondary; color: $tertiary_text_color;
} }
&[disabled] { &[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2); text-shadow: 0 1px 0 rgba($primary_shadow_color, 0.2);
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark); @include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($secondary, 0.33), inset 0 -1px 2px rgba($primary, 0.2))); @include box-shadow((inset 0 1px 0 rgba($primary_shadow_color, 0.33), inset 0 -1px 2px rgba($primary_shadow_color, 0.2)));
} }
} }
} }
@ -948,8 +947,8 @@ clear: both;
article.boxed { article.boxed {
.select-posts { .select-posts {
button.select-post { button.select-post {
background-color: $tertiary; background-color: $emphasis_background_color;
color: $secondary; color: $tertiary_text_color;
} }
} }
.topic-body { .topic-body {
@ -972,12 +971,12 @@ clear: both;
top: 4px; top: 4px;
button { button {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
border-top: 1px solid $secondary; border-top: 1px solid $tertiary_border_color;
border-left: 1px solid $secondary; border-left: 1px solid $tertiary_border_color;
border-bottom: 1px solid $primary_light; border-bottom: 1px solid $primary_border_color;
border-right: 1px solid $primary_light; border-right: 1px solid $primary_border_color;
color: $primary_light; color: $secondary_text_color;
} }
} }
@ -1001,7 +1000,7 @@ a.attachment:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 10px; left: 10px;
color: $primary_lightest; color: lighten($primary_text_color, 76%);
font: 90px/1 FontAwesome; font: 90px/1 FontAwesome;
content: "\f05c"; content: "\f05c";
z-index: -5; z-index: -5;

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

@ -1,7 +1,7 @@
@import "common/foundation/variables"; @import "common/foundation/variables";
@import "common/foundation/mixins"; @import "common/foundation/mixins";
.post-info a {color: $primary_light;} .post-info a {color: lighten($primary_text_color, 50%);}
.topic-meta-data-inside { .topic-meta-data-inside {
float: right; float: right;
@ -67,9 +67,8 @@
} }
#topic-closing-info { #topic-closing-info {
border-top: 1px solid $primary_lighter; border-top: 1px solid lighten($primary_border_color, 10%) ;
margin-left: 10px; padding-top: 10px;
margin-top: 10px;
height: 20px; height: 20px;
} }
@ -86,8 +85,8 @@
i { i {
font-size: 12px; font-size: 12px;
margin-right: 5px; margin-right: 5px;
background: $secondary; background: $primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
padding: 2px 4px; padding: 2px 4px;
border-radius: 20px; border-radius: 20px;
transition: linear 0.15s; transition: linear 0.15s;
@ -97,12 +96,12 @@
a.reply-new { a.reply-new {
position: absolute; position: absolute;
color: $primary_medium; color: lighten($primary_text_color, 35%);
margin-top: -2px;} margin-top: -2px;}
a:hover.reply-new { a:hover.reply-new {
color: $tertiary; color: $link-color;
i {background: $tertiary_lightest; i {background: $emphasis_background_color;
border: 1px solid $tertiary; border: 1px solid $emphasis_border_color;
padding: 2px 4px; padding: 2px 4px;
} }
} }
@ -114,8 +113,8 @@ a:hover.reply-new {
display: none; display: none;
} }
border: none; border: none;
background-color: lighten($primary_lighter, 9%); background-color: lighten($primary_text_color, 70%);
color: $primary_medium; color: lighten($primary_text_color, 35%);
width: 130px; width: 130px;
height: 34px; height: 34px;
@ -135,7 +134,7 @@ a:hover.reply-new {
left: 4px; left: 4px;
border: 0; border: 0;
background: none; background: none;
color: $primary_medium; color: lighten($primary_text_color, 35%);
width: 50%; width: 50%;
text-align: left; text-align: left;
height: 30px; height: 30px;
@ -150,7 +149,7 @@ a:hover.reply-new {
} }
&:disabled { &:disabled {
cursor: default; cursor: default;
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
} }
h4 { h4 {
@ -163,10 +162,10 @@ a:hover.reply-new {
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
width: 0px; width: 0px;
border-right: 1px solid lighten($primary_lighter, 7%); border-right: 1px solid $primary_border_color;
// background-color: #d4eaf4; // background-color: #d4eaf4;
// background-color: #C5E8F7; // background-color: #C5E8F7;
background-color: $success_light; background-color: $success_background_color;
transition: width .75s; transition: width .75s;
} }
} }
@ -193,14 +192,14 @@ a:hover.reply-new {
} }
} }
.heatmap-high {color: #f77 !important;} .heatmap-high {color: $heatmap-high !important;}
.heatmap-med {color: #a00 !important;} .heatmap-med {color: $heatmap-med !important;}
.heatmap-low {color: #700 !important;} .heatmap-low {color: $heatmap-low !important;}
#topic-filter { #topic-filter {
background-color: $highlight_light; background-color: $highlight_background_color;
padding: 8px; padding: 8px;
bottom: 0; bottom: 0;
position: fixed; position: fixed;
@ -227,7 +226,7 @@ sup{top:-0.5em; }
sub{bottom:-0.25em; } sub{bottom:-0.25em; }
figure{margin:0; } figure{margin:0; }
fieldset{ fieldset{
border:1px solid $primary_light; border:1px solid $primary_border_color;
margin:0 2px; margin:0 2px;
padding:0.35em 0.625em 0.75em; padding:0.35em 0.625em 0.75em;
} }
@ -238,11 +237,11 @@ legend{
kbd kbd
{ {
background-color: $secondary; background-color: $primary_background_color;
border:1px solid $primary_lighter; border:1px solid $primary_border_color;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 0 $primary_lightest; box-shadow: 0 1px 0 rgba($primary_shadow_color, .9);
color: $primary; color: $primary_text_color;
display: inline-block; display: inline-block;
font-size: 12px; font-size: 12px;
line-height: 1.4; line-height: 1.4;

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

@ -32,7 +32,7 @@
line-height: 18px; line-height: 18px;
} }
.description, .hint { .description, .hint {
color: #9a9ea0; color: $secondary_text_color;
} }
.hint { .hint {
font-style: italic; font-style: italic;

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

@ -4,7 +4,7 @@
.groups { .groups {
.group-link { .group-link {
color: $tertiary_lightest; color: $link_color;
} }
} }
@ -42,13 +42,13 @@
} }
.static { .static {
color: $primary; color: $primary_text_color;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
display: inline-block; display: inline-block;
} }
.instructions { .instructions {
color: $primary_medium; color: $primary_text_color;
margin-left: 160px; margin-left: 160px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
@ -57,12 +57,12 @@
margin-left: 3px; margin-left: 3px;
} }
.instructions a[href] { .instructions a[href] {
color: $primary_medium; color: $link_color;
} }
.warning { .warning {
background-color: lighten($highlight_danger, 10%); background-color: $warning_background_color;
padding: 5px 8px; padding: 5px 8px;
color: $secondary; color: $primary_background_color;
width: 520px; width: 520px;
} }
@ -72,10 +72,6 @@
width: 280px; width: 280px;
} }
} }
#save-button-top {
float: right;
}
} }
.user-navigation { .user-navigation {
@ -84,7 +80,7 @@
float: left; float: left;
h3 { h3 {
color: $primary_light; color: $primary_text_color;
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
@ -107,7 +103,7 @@
h2 { h2 {
a { a {
font-size: 14px; font-size: 14px;
color: $primary_light; color: $link_color;
cursor: pointer; cursor: pointer;
} }
} }
@ -140,15 +136,15 @@
} }
span.last-seen-at { span.last-seen-at {
float: right; float: right;
color: $primary_light; color: $secondary_text_color;
} }
} }
} }
.user-content { .user-content {
padding: 10px 8px; padding: 10px 8px;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
margin-bottom: 10px; margin-bottom: 10px;
.btn.right { .btn.right {
@ -165,22 +161,22 @@
th { th {
text-align: left; text-align: left;
border-bottom: 1px solid $primary_light; border-bottom: 1px solid $primary_border_color;
padding: 5px; padding: 5px;
} }
td { td {
padding: 5px; padding: 5px;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
} }
} }
} }
.about { .about {
background-color: $primary; background-color: $secondary_background_color;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
color: $secondary; color: $secondary_text_color;
.details { .details {
@ -197,20 +193,21 @@
font-size: 20px; font-size: 20px;
margin-bottom: 6px; margin-bottom: 6px;
font-weight: normal; font-weight: normal;
margin-top: 5px;
} }
a[href] { a[href] {
color: $secondary; color: $secondary_link_color;
} }
img.avatar { img.avatar {
border: 3px solid $primary_lightest; border: 3px solid $primary_border_color;
margin-bottom: 4px; margin-bottom: 10px;
background-color: $secondary; background-color: $secondary_background_color;
} }
.suspended { .suspended {
color: $highlight_danger_light; color: $warning_text_color;
} }
.primary { .primary {
@ -218,13 +215,13 @@
float: left; float: left;
width: 75%; width: 75%;
h1, h2 {margin-top: 10px;} h1, h2 {}
.bio { .bio {
color: $primary_lighter; color: $secondary_text_color;
a[href] { a[href] {
color: $tertiary_light; color: $link_color;
} }
} }
@ -232,26 +229,26 @@
.secondary { .secondary {
float: right; float: right;
background-color: lighten($primary, 10%); background-color: $tertiary_background_color;
text-align: right; text-align: right;
padding: 0 10px; padding: 0 10px;
width: 20%; width: 20%;
dd { dd {
color: $secondary; color: $secondary_text_color;
margin: 0 0 7px 0; margin: 0 0 7px 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
dt { dt {
color: $primary_lighter; color: $secondary_text_color;
margin: 0; margin: 0;
} }
} }
} }
.controls { .controls {
background-color: $primary_lighter; background-color: $tertiary_background_color;
padding: 12px; padding: 12px;
height: 30px; height: 30px;
@ -279,7 +276,7 @@
.avatar { .avatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
border: 2px solid $secondary; border: 2px solid $secondary_border_color;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
@ -303,35 +300,34 @@
margin: 5px 0px; margin: 5px 0px;
font-size: 13px; font-size: 13px;
word-wrap: break-word; word-wrap: break-word;
color: lighten($primary, 30%); color: $primary_text_color;
} }
.item.moderator-action { .item.moderator-action {
background-color: $tertiary_lightest; background-color: $moderator_background_color;
} }
.item.deleted { .item.deleted {
opacity: 0.8; opacity: 0.8;
background-color: $highlight_danger_light; background-color: $warning_background_color;
} }
.item.hidden { .item.hidden {
display: block; display: block;
opacity: 0.4; opacity: 0.4;
} }
.item { .item {
padding: 10px 8px; padding: 20px 8px 15px 8px;
background-color: $secondary; background-color: $primary_background_color;
border-bottom: 1px solid lighten($primary_lighter, 10%); border-bottom: 1px solid lighten($primary_border_color, 10%);
margin-bottom: 10px;
} }
.type { .type {
color: lighten($primary, 40%); color: $primary_text_color;
} }
span.name { span.name {
color: lighten($primary, 40%); color: $secondary_text_color;
} }
.time { .time {
display: block; display: block;
float: right; float: right;
color: $primary_light; color: $secondary_text_color;
margin-right: 8px; margin-right: 8px;
font-size: 11px; font-size: 11px;
} }
@ -345,7 +341,7 @@
font-size: 14px; font-size: 14px;
} }
.edit-reason { .edit-reason {
background-color: $highlight_light; background-color: $moderator_background_color;
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
} }
@ -360,7 +356,7 @@
.fa { .fa {
width: 15px; width: 15px;
display: inline-block; display: inline-block;
color: $primary_medium; color: $secondary_text_color;
} }
.avatar-wrapper { .avatar-wrapper {
border: none; border: none;

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

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

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

@ -21,7 +21,7 @@
max-width: 300px; max-width: 300px;
.colorpicker { .colorpicker {
border: 1px solid $primary_medium; border: 1px solid $primary_border_color;
margin-right: 2px; margin-right: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;

50
app/assets/stylesheets/mobile/compose.scss
View File

@ -23,28 +23,28 @@ display: none;
z-index: 999999; z-index: 999999;
position: absolute; position: absolute;
width: 240px; width: 240px;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
li { li {
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
a[href] { a[href] {
padding: 5px; padding: 5px;
display: block; display: block;
span.username { span.username {
color: lighten($primary, 20); color: lighten($primary_text_color, 20%);
} }
span.name { span.name {
font-size: 11px; font-size: 11px;
} }
&.selected { &.selected {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
@include hover { @include hover {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
text-decoration: none; text-decoration: none;
} }
} }
@ -65,13 +65,13 @@ display: none;
#file-uploading { #file-uploading {
left: 51%; left: 51%;
font-size: 12px; font-size: 12px;
color: darken($primary_light, 40); color: darken($tertiary_text_color, 40%);
} }
#draft-status { #draft-status {
right: 0; right: 0;
color: lighten($primary, 60); color: lighten($primary_text_color, 60%);
&.flash { &.flash {
color: lighten($highlight_danger, 20); color: $warning_text_color;
} }
} }
@include transition(height 0.4s ease); @include transition(height 0.4s ease);
@ -89,7 +89,7 @@ display: none;
right: 13px; right: 13px;
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
color: $primary_medium; color: lighten($primary_text_color, 35%);
text-decoration: none; text-decoration: none;
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
@ -127,7 +127,7 @@ display: none;
&.draft { &.draft {
height: 60px !important; height: 60px !important;
cursor: pointer; cursor: pointer;
border-top: 1px solid $primary_light; border-top: 1px solid $primary_border_color;
.draft-text { .draft-text {
display: block; display: block;
position: absolute; position: absolute;
@ -142,7 +142,7 @@ display: none;
} }
&.saving { &.saving {
height: 40px !important; height: 40px !important;
border-top: 1px solid $primary_light; border-top: 1px solid $primary_border_color;
.saving-text { .saving-text {
display: block; display: block;
} }
@ -164,7 +164,7 @@ display: none;
height: 70px; height: 70px;
text-indent: -9999em; text-indent: -9999em;
background: { background: {
color: $primary; color: $primary_text_color;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
size: 35px; size: 35px;
@ -236,14 +236,14 @@ display: none;
#reply-title { #reply-title {
margin-right: 10px; margin-right: 10px;
&:disabled { &:disabled {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
} }
#wmd-input:disabled { #wmd-input:disabled {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
} }
#wmd-input, #wmd-preview { #wmd-input, #wmd-preview {
color: $primary; color: $primary_text_color;
video { video {
max-width: 100%; max-width: 100%;
@ -255,7 +255,7 @@ display: none;
} }
} }
#wmd-preview { #wmd-preview {
border: 1px dashed $primary_light; border: 1px dashed $primary_border_color;
overflow: auto; overflow: auto;
visibility: visible; visibility: visible;
p { p {
@ -307,8 +307,8 @@ div.ac-wrap.disabled {
} }
div.ac-wrap { div.ac-wrap {
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
padding: 5px 10px; padding: 5px 10px;
@include border-radius-all(3px); @include border-radius-all(3px);
div.item { div.item {
@ -332,10 +332,10 @@ div.ac-wrap {
display: inline-block; display: inline-block;
border: 1px solid rgba(255, 255, 255, 0); border: 1px solid rgba(255, 255, 255, 0);
&:hover { &:hover {
background-color: lighten($highlight_danger, 45); background-color: $warning_background_color;
border: 1px solid lighten($highlight_danger, 20); border: 1px solid $warning_border_color;
text-decoration: none; text-decoration: none;
color: $secondary; color: $emphasis_text_color;
} }
} }
} }
@ -395,7 +395,7 @@ div.ac-wrap {
min-height: 100%; min-height: 100%;
padding: 7px; padding: 7px;
margin: 0; margin: 0;
background-color: $secondary; background-color: $primary_background_color;
word-wrap: break-word; word-wrap: break-word;
// set up proper header margins in post preview // set up proper header margins in post preview
@ -440,8 +440,8 @@ div.ac-wrap {
#wmd-button-bar { #wmd-button-bar {
top: 0; top: 0;
position: absolute; position: absolute;
border-bottom: 1px solid $inner_line; border-bottom: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
z-index: 100; z-index: 100;
} }
} }

70
app/assets/stylesheets/mobile/discourse.scss
View File

@ -7,7 +7,7 @@
@import "../common/foundation/helpers"; @import "../common/foundation/helpers";
body { body {
background-color: $secondary; background-color: $primary_background_color;
} }
.container { .container {
@ -32,38 +32,38 @@ header {
body { body {
button.ok { button.ok {
@include linear-gradient(lighten($success, 5%), $success); background: $success_background_color;
color: $secondary; color: $emphasis_text_color;
@include hover { @include hover {
@include linear-gradient(lighten($success, 10%), $success); background: darken($success_background_color, 10%);
color: $secondary; color: $emphasis_text_color;
} }
} }
button.cancel { button.cancel {
@include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger); background: $warning_background_color;
color: $secondary; color: $emphasis_text_color;
@include hover { @include hover {
@include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger); background: $warning_background_color;
color: $secondary; color: $emphasis_text_color;
} }
} }
.coldmap-high { .coldmap-high {
color: lighten($tertiary, 20%) !important; color: $coldmap-high !important;
} }
.coldmap-med { .coldmap-med {
color: lighten($tertiary, 10%) !important; color: $coldmap-med !important;
} }
.coldmap-low { .coldmap-low {
color: $tertiary !important; color: $coldmap-low !important;
} }
.heatmap-high { .heatmap-high {
color: lighten($highlight_danger, 50%) !important; color: $heatmap-high !important;
} }
.heatmap-med { .heatmap-med {
color: lighten($highlight_danger, 10%) !important; color: $heatmap-med !important;
} }
.heatmap-low { .heatmap-low {
color: $highlight_danger !important; color: $heatmap-low !important;
} }
#loading-message { #loading-message {
position: absolute; position: absolute;
@ -71,7 +71,7 @@ body {
text-align: center; text-align: center;
top: 120px; top: 120px;
left: 500px; left: 500px;
color: $primary_medium; color: $secondary_text_color;
} }
.top-space { .top-space {
margin-top: 10px; margin-top: 10px;
@ -86,25 +86,25 @@ body {
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
} }
&.white { &.white {
background-color: $secondary; background-color: $primary_background_color;
} }
} }
#main { #main {
.fa-star.starred { .fa-star.starred {
color: $highlight; color: $highlight_text_color;
} }
a.star { a.star {
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
line-height: 1; line-height: 1;
color: $primary_light; color: $secondary_text_color;
&:before { &:before {
font-family: "FontAwesome"; font-family: "FontAwesome";
content: "\f005"; content: "\f005";
} }
&.starred { &.starred {
color: #fe1; color: #fe1;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); text-shadow: 0px 0px 3px rgba($primary_shadow_color, 0.5);
@include hover { @include hover {
opacity: 1; opacity: 1;
&:before { &:before {
@ -146,7 +146,7 @@ body {
} }
.message { .message {
@include border-radius-all(8px); @include border-radius-all(8px);
background-color: $secondary; background-color: $primary_background_color;
padding: 14px; padding: 14px;
h2 { h2 {
margin-bottom: 20px; margin-bottom: 20px;
@ -161,7 +161,7 @@ body {
.contents { .contents {
padding-top: 10px; padding-top: 10px;
a[href] { a[href] {
color: $secondary; color: $primary_background_color;
} }
} }
} }
@ -171,14 +171,14 @@ body {
} }
.grippie { .grippie {
width: 100%; width: 100%;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
border-width: 1px 0px; border-width: 1px 0px;
cursor: row-resize; cursor: row-resize;
height: 11px; height: 11px;
overflow: hidden; overflow: hidden;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
display:block {} display:block {}
background: image-url("grippie.png") $primary_lightest no-repeat center 3px; background: image-url("grippie.png") lighten($secondary_background_color, 76%) no-repeat center 3px;
} }
} }
@ -186,10 +186,10 @@ form {
.tip { .tip {
display: inline-block; display: inline-block;
&.good { &.good {
color: $success; color: $success_text_color;
} }
&.bad { &.bad {
color: $highlight_danger; color: $warning_text_color;
} }
} }
} }
@ -214,7 +214,7 @@ blockquote {
display: inline-block; display: inline-block;
i { i {
font-size: 15px; font-size: 15px;
color: darken($secondary, 60%); color: darken($tertiary_text_color, 60%);
} }
} }
} }
@ -225,12 +225,12 @@ blockquote {
#pagedown-editor { #pagedown-editor {
width: 540px; width: 540px;
background-color: $secondary; background-color: $primary_background_color;
padding: 0 10px 13px 10px; padding: 0 10px 13px 10px;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
.preview { .preview {
margin-top: 8px; margin-top: 8px;
border: 1px dashed $primary_light; border: 1px dashed $primary_border_color;
padding: 8px 8px 0 8px; padding: 8px 8px 0 8px;
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -244,13 +244,13 @@ blockquote {
.spinner { .spinner {
width: 100px; width: 100px;
margin: 0 auto 30px auto; margin: 0 auto 30px auto;
background-color: $primary; background-color: $secondary_background_color;
@include border-radius-all(10px); @include border-radius-all(10px);
padding: 10px 10px 10px 30px; padding: 10px 10px 10px 30px;
font-size: 15px; font-size: 15px;
line-height: 23px; line-height: 23px;
text-align: center; text-align: center;
color: $secondary; color: $tertiary_text_color;
background: { background: {
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
@ -264,9 +264,9 @@ blockquote {
} }
.avatar-wrapper { .avatar-wrapper {
background-color: $secondary; background-color: $primary_background_color;
display: inline-block; display: inline-block;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
@include border-radius-all(5px); @include border-radius-all(5px);
img { img {
@include border-radius-all(4px); @include border-radius-all(4px);

40
app/assets/stylesheets/mobile/header.scss
View File

@ -12,8 +12,8 @@
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 1001; z-index: 1001;
background-color: $secondary; background-color: $primary_background_color;
box-shadow: 0 0 3px $primary_lighter; box-shadow: 0 0 3px rgba($primary_shadow_color, .6);
.docked & { .docked & {
position: fixed; position: fixed;
@ -49,7 +49,7 @@
float: left; float: left;
display: none; display: none;
a { a {
color: $primary; color: $primary_text_color;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
} }
@ -69,14 +69,14 @@
&:first-child.active .icon { &:first-child.active .icon {
} }
&:last-child .icon { &:last-child .icon {
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color;
} }
} }
.icon { .icon {
display: block; display: block;
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
border-left: 1px solid $primary_light; border-left: 1px solid $primary_border_color;
padding: 3px; padding: 3px;
color: $nav-button-color; color: $nav-button-color;
text-decoration: none; text-decoration: none;
@ -92,10 +92,10 @@
} }
.active .icon { .active .icon {
position: relative; position: relative;
color: $primary_light; color: lighten($primary_text_color, 60%);
background-color: $secondary; background-color: $primary_background_color;
cursor: default; cursor: default;
@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))); @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)));
&:after { &:after {
display: block; display: block;
position: absolute; position: absolute;
@ -105,7 +105,7 @@
width: 100%; width: 100%;
height: 0; height: 0;
content: ""; content: "";
border-top: 1px solid $secondary; border-top: 1px solid $primary_border_color;
} }
} }
[class^="fa fa-"] { [class^="fa fa-"] {
@ -126,15 +126,15 @@
} }
.unread-notifications { .unread-notifications {
right: -4px; right: -4px;
background-color: $tertiary; background-color: $tertiary_text_color;
} }
.unread-private-messages { .unread-private-messages {
left: -4px; left: -4px;
background-color: $success_dark; background-color: $success_text_color;
} }
} }
.flagged-posts { .flagged-posts {
background-color: $highlight_danger; background-color: $warning_text_color;
} }
} }
@ -158,9 +158,9 @@
right: 0; right: 0;
z-index: 1100; z-index: 1100;
margin-top: -1px; margin-top: -1px;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
@include box-shadow(0 1px 1px rgba($primary, 0.2)); @include box-shadow(0 1px 1px rgba($primary_shadow_color, 0.2));
// Common // Common
@ -177,7 +177,7 @@
} }
} }
.heading { .heading {
color: $tertiary_dark; color: $primary_text_color;
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
@ -198,7 +198,7 @@
background-color: $header-item-highlight; background-color: $header-item-highlight;
} }
.read { .read {
background-color: $secondary; background-color: $primary_background_color;
} }
.none { .none {
padding: 5px; padding: 5px;
@ -214,7 +214,7 @@
padding: 5px; padding: 5px;
font-size: 16px; font-size: 16px;
&:focus { &:focus {
@include box-shadow((inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6))); @include box-shadow((inset 0 1px 1px rgba($primary_shadow_color, 0.075), 0 0 4px rgba(82, 168, 236, 0.6)));
} }
} }
.searching { .searching {

30
app/assets/stylesheets/mobile/history.scss
View File

@ -11,7 +11,7 @@
#revision-controls { #revision-controls {
float: left; float: left;
.btn[disabled]:hover { .btn[disabled]:hover {
color: $primary; color: $primary_text_color;
} }
} }
#display-modes { #display-modes {
@ -21,7 +21,7 @@
} }
} }
#revision-details { #revision-details {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 5px; padding: 5px;
margin-top: 10px; margin-top: 10px;
} }
@ -56,63 +56,63 @@
} }
ins, .diff-ins { ins, .diff-ins {
code, img { code, img {
border: 2px solid $success_dark; border: 2px solid $success_border_color;
} }
img { img {
opacity: .75; opacity: .75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
a { a {
color: $success_dark; color: $success_text_color;
text-decoration: none; text-decoration: none;
} }
} }
img.diff-ins, code.diff-ins { img.diff-ins, code.diff-ins {
border: 2px solid $success_dark; border: 2px solid $success_text_color;
} }
img.diff-ins { img.diff-ins {
opacity: .75; opacity: .75;
filter: alpha(opacity=75); filter: alpha(opacity=75);
} }
.diff-ins { .diff-ins {
background: $success_light; background: $success_background_color;
} }
ins { ins {
color: $success_dark; color: $success_text_color;
background: $success_light; background: $success_background_color;
} }
del, .diff-del { del, .diff-del {
code, img { code, img {
border: 2px solid $highlight_danger_dark; border: 2px solid $warning_border_color;
} }
img { img {
opacity: .5; opacity: .5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
a { a {
color: $highlight_danger_dark; color: $warning_text_color;
text-decoration: none; text-decoration: none;
} }
} }
img.diff-del, code.diff-del { img.diff-del, code.diff-del {
border: 2px solid $highlight_danger; border: 2px solid $warning_border_color;
} }
img.diff-del { img.diff-del {
opacity: .5; opacity: .5;
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
.diff-del { .diff-del {
background: $highlight_danger_light; background: $warning_background_color;
} }
del { del {
color: $highlight_danger_dark; color: $warning_text_color;
background: $highlight_danger_light; background: $warning_background_color;
} }
span.date { span.date {
font-weight: bold; font-weight: bold;
} }
span.edit-reason { span.edit-reason {
background-color: $highlight; background-color: $highlight_background_color;
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
.modal-header { .modal-header {

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

@ -20,8 +20,8 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
color: $secondary; color: $tertiary_text_color;
background: $primary; background: $secondary_background_color;
opacity: 0; opacity: 0;
@include transition(opacity .2s); @include transition(opacity .2s);
@ -41,7 +41,7 @@
.informations { .informations {
margin: 6px; margin: 6px;
padding-right: 20px; padding-right: 20px;
color: $primary_medium; color: $secondary_text_color;
font-size: 14px; font-size: 14px;
} }

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

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

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

@ -26,7 +26,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1040; z-index: 1040;
background-color: $primary; background-color: $secondary_background_color;
&.fade { &.fade {
opacity: 0; opacity: 0;
} }
@ -51,10 +51,10 @@
.modal-inner-container { .modal-inner-container {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid $primary_light; *border: 1px solid $primary_border_color;
/* IE6-7 */ /* IE6-7 */
@include border-radius-all (6px); @include border-radius-all (6px);
@ -81,14 +81,14 @@
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: auto; height: auto;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
border: 1px solid rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid $primary_light; *border: 1px solid $primary_border_color;
/* IE6-7 */ /* IE6-7 */
@include border-radius-all (6px); @include border-radius-all (6px);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); box-shadow: 0 3px 7px rgba($primary_shadow_color, 0.3);
background-clip: padding-box; background-clip: padding-box;
} }
@ -113,7 +113,7 @@
padding: 14px 0 15px; padding: 14px 0 15px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
@include border-radius-all(0 0 6px 6px); @include border-radius-all(0 0 6px 6px);
@include box-shadow (inset 0 1px 0 $secondary); @include box-shadow (inset 0 1px 0 rgba($primary_shadow_color, .8));
*zoom: 1; *zoom: 1;
} }
.modal-footer:before, .modal-footer:before,
@ -153,11 +153,11 @@
.modal { .modal {
.nav { .nav {
padding: 10px 30px; padding: 10px 30px;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
li > a { li > a {
font-size: 14px; font-size: 14px;
} }
border-bottom: 1px solid $primary_light; border-bottom: 1px solid $primary_border_color;
} }
&.hidden { &.hidden {
@ -169,17 +169,17 @@
height: 80px; height: 80px;
} }
label { label {
color: $primary_medium; color: $secondary_text_color;
} }
p { p {
color: $primary; color: $primary_text_color;
font-size: 13px; font-size: 13px;
} }
.archetype-option { .archetype-option {
margin-bottom: 20px; margin-bottom: 20px;
} }
.warning { .warning {
color: lighten($highlight_danger, 10%) !important; color: $warning_text_color !important;
} }
} }
.password-confirmation { .password-confirmation {
@ -287,9 +287,9 @@
font-weight: normal; font-weight: normal;
} }
&.btn-reply-here { &.btn-reply-here {
@include linear-gradient($primary_lighter, $primary_lighter); background: lighten($secondary_background_color, 60%);
text-shadow: none; text-shadow: none;
color: $primary_medium; color: $secondary_text_color;
} }
} }
.cancel { .cancel {

8
app/assets/stylesheets/mobile/onebox.scss
View File

@ -19,15 +19,15 @@ a.loading-onebox {
margin-right: 10px; margin-right: 10px;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
color: $primary; color: $primary_text_color;
position: relative; position: relative;
border-bottom: 1px solid $inner_border; border-bottom: 1px solid $primary_border_color;
.info { .info {
a { a {
color: $primary; color: $primary_text_color;
text-decoration: none; text-decoration: none;
} }
background-color: $secondary; background-color: $primary_background_color;
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
img.favicon { img.favicon {

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

@ -8,8 +8,8 @@
left: 20px; left: 20px;
z-index: 990; z-index: 990;
@include border-radius-all(3px); @include border-radius-all(3px);
@include box-shadow(1px 1px 5px $primary_medium); @include box-shadow(1px 1px 5px rgba($primary_shadow_color, .6));
background-color: $primary_lighter; background-color: lighten($primary_background_color, 60%);
padding: 3px 7px 6px 7px; padding: 3px 7px 6px 7px;
width: 300px; width: 300px;
display: none; display: none;
@ -33,7 +33,7 @@
float: right; float: right;
font-size: 20px; font-size: 20px;
a { a {
color: $primary; color: $primary_text_color;
} }
} }
} }

4
app/assets/stylesheets/mobile/topic-admin-menu.scss
View File

@ -11,10 +11,10 @@
} }
.topic-admin-menu { .topic-admin-menu {
background-color: $secondary; background-color: $primary_background_color;
width: 205px; width: 205px;
padding: 10px; padding: 10px;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
position: fixed; position: fixed;
top: 70px; top: 70px;
right: 10px; right: 10px;

48
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -47,13 +47,13 @@
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
> tbody > tr { > tbody > tr {
background-color: $secondary; background-color: $primary_background_color;
&:nth-child(even) { &:nth-child(even) {
background-color: darken($secondary, 4%); background-color: darken($primary_background_color, 4%);
} }
&.archived a { &.archived a {
opacity: 0.6; opacity: 0.6;
@ -64,7 +64,7 @@
} }
} }
&.highlighted { &.highlighted {
background-color: $highlight; background-color: $highlight_background_color;
} }
} }
th, th,
@ -99,7 +99,7 @@
font-size: 16px; font-size: 16px;
i.score { i.score {
color: $success; color: $success_text_color;
cursor: pointer; cursor: pointer;
} }
} }
@ -107,7 +107,7 @@
.topic-excerpt { .topic-excerpt {
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 8px;
color: $primary_medium; color: lighten($primary_text_color, 35%);
word-break: break-word; word-break: break-word;
} }
@ -188,7 +188,7 @@
.featured-topic { .featured-topic {
margin: 8px 0; margin: 8px 0;
a.last-posted-at, a.last-posted-at:visited { a.last-posted-at, a.last-posted-at:visited {
color: $primary_light; color: lighten($primary_text_color, 50%);
} }
} }
} }
@ -215,7 +215,7 @@
.category-list-item { .category-list-item {
margin-bottom: 10px; margin-bottom: 10px;
#topic-list tbody tr:nth-child(even) { #topic-list tbody tr:nth-child(even) {
background-color: $secondary; background-color: $primary_background_color;
} }
.badge-category { .badge-category {
float: left; float: left;
@ -230,14 +230,14 @@
border-top: 0; border-top: 0;
padding: 7px 10px; padding: 7px 10px;
background-color: lighten($topic-list-th-background-color, 2%); background-color: lighten($topic-list-th-background-color, 2%);
@include box-shadow(0 1px 3px rgba($primary, 0.22)); @include box-shadow(0 1px 3px rgba($primary_shadow_color, 0.22));
figure { figure {
float: left; float: left;
margin: 3px 7px 0 0; margin: 3px 7px 0 0;
color: lighten($topic-list-th-color, 5%); color: lighten($topic-list-th-color, 5%);
font-weight: bold; font-weight: bold;
font-size: 12px; font-size: 12px;
text-shadow: 0 1px 0 $secondary; text-shadow: 0 1px 0 $secondary_shadow_color;
} }
figcaption { figcaption {
display: inline; display: inline;
@ -273,11 +273,11 @@
width: 200px; width: 200px;
margin: 0 auto; margin: 0 auto;
padding: 10px 0 10px 43px; padding: 10px 0 10px 43px;
color: $secondary; color: $tertiary_text_color;
font-size: 18px; font-size: 18px;
line-height: 25px; line-height: 25px;
background: { background: {
color: $primary; color: $primary_text_color;
image: image-url("spinner_96_w.gif"); image: image-url("spinner_96_w.gif");
repeat: no-repeat; repeat: no-repeat;
position: 10px 50%; position: 10px 50%;
@ -291,8 +291,8 @@
.list-controls { .list-controls {
.home { .home {
color: $primary; color: $primary_text_color;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
} }
.badge-category { .badge-category {
@ -325,7 +325,7 @@
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
border: 0; border: 0;
color: lighten($highlight_danger, 10%); color: lighten($warning_text_color, 10%);
font-size: 13px; font-size: 13px;
cursor: default; cursor: default;
} }
@ -370,7 +370,7 @@ span.posted {
width: 0; width: 0;
height: 0; height: 0;
vertical-align: middle; vertical-align: middle;
border-top: 4px solid $primary; border-top: 4px solid $primary_text_color;
border-right: 4px solid transparent; border-right: 4px solid transparent;
border-left: 4px solid transparent; border-left: 4px solid transparent;
content: ""; content: "";
@ -387,8 +387,8 @@ span.posted {
padding: 4px 0; padding: 4px 0;
margin: 1px 0 0; margin: 1px 0 0;
list-style: none; list-style: none;
background-color: $secondary; background-color: $primary_background_color;
border: 1px solid $primary_medium; border: 1px solid $primary_border_color;
border: 1px solid rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px; *border-right-width: 2px;
*border-bottom-width: 2px; *border-bottom-width: 2px;
@ -405,14 +405,14 @@ span.posted {
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
color: $primary; color: $primary_text_color;
} }
.dropdown-menu li > a:hover, .dropdown-menu li > a:hover,
.dropdown-menu .active > a, .dropdown-menu .active > a,
.dropdown-menu .active > a:hover { .dropdown-menu .active > a:hover {
color: $secondary; color: $tertiary_text_color;
text-decoration: none; text-decoration: none;
background-color: $tertiary; background-color: $emphasis_text_color;
} }
.open { .open {
*z-index: 1000; *z-index: 1000;
@ -447,8 +447,8 @@ ol.category-breadcrumb {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
position: absolute; position: absolute;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
background-color: $secondary; background-color: $primary_background_color;
width: 200px; width: 200px;
height: 200px; height: 200px;
padding: 8px 5px 0 7px; padding: 8px 5px 0 7px;

80
app/assets/stylesheets/mobile/topic-post.scss
View File

@ -1,15 +1,15 @@
@import "common/foundation/variables"; @import "common/foundation/variables";
.gap { .gap {
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 5px 15px; padding: 5px 15px;
color: $primary_lighter; color: $secondary_text_color;
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
} }
.topic-post { .topic-post {
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
padding: 6px 0 3px 0; padding: 6px 0 3px 0;
&:first-of-type { &:first-of-type {
border-top: none; border-top: none;
@ -17,11 +17,11 @@
} }
nav.post-controls { nav.post-controls {
background-color: $secondary; background-color: $primary_background_color;
padding: 0px; padding: 0px;
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color;
margin-top: 10px; margin-top: 10px;
button {color: $primary_lighter; button {color: lighten($primary_text_color, 35%);
border-radius: 4px; border-radius: 4px;
margin-right: 2px; margin-right: 2px;
@ -43,13 +43,13 @@ span.badge-posts {
button.create { button.create {
float: right !important; float: right !important;
border: 1px solid $primary_light; border: 1px solid $primary_border_color;
margin-right: 0; margin-right: 0;
color: $primary_light; color: lighten($primary_text_color, 35%);
padding-right: 7px; padding-right: 7px;
} }
.like { .like {
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color;
} }
.create i { .create i {
@ -63,10 +63,10 @@ button {
padding: 8px 10px; padding: 8px 10px;
vertical-align: top; vertical-align: top;
background: transparent; background: transparent;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
float: left !important; float: left !important;
&:last-of-type { &:last-of-type {
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color
} }
&:hover { &:hover {
} }
@ -89,7 +89,7 @@ button {
} }
} }
&.last-read { &.last-read {
color: $highlight_danger; color: $warning_text_color;
} }
&.bookmarked { &.bookmarked {
&:before { &:before {
@ -146,17 +146,17 @@ a.star {
border-radius: 5px; border-radius: 5px;
margin: 15px 10px 20px 10px; margin: 15px 10px 20px 10px;
border: 1px solid $primary_lighter; border: 1px solid $primary_border_color;
h3 { h3 {
margin-bottom: 4px; margin-bottom: 4px;
color: $primary; color: $primary_text_color;
line-height: 23px; line-height: 23px;
} }
h4 { h4 {
margin: 0 0 3px 0; margin: 0 0 3px 0;
color: $primary_medium; color: $secondary_text_color;
font-weight: normal; font-weight: normal;
font-size: 12px; font-size: 12px;
line-height: 15px; line-height: 15px;
@ -213,7 +213,7 @@ a.star {
line-height: 20px; line-height: 20px;
} }
.number { .number {
color: $tertiary_dark; color: $emphasis_text_color;
} }
.avatar + a { .avatar + a {
float: left; float: left;
@ -223,11 +223,11 @@ a.star {
.links, .links,
.information { .information {
padding: 7px 14px; padding: 7px 14px;
color: $primary; color: $primary_text_color;
} }
.information { .information {
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
} }
.topic-links { .topic-links {
.badge-notification { .badge-notification {
@ -238,15 +238,15 @@ a.star {
float: right; float: right;
.btn { .btn {
border: 0; border: 0;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
border-left: 1px solid $primary_lightest; border-left: 1px solid $primary_border_color;
padding: 0 23px; padding: 0 23px;
color: $primary; color: $primary_text_color;
background: $primary_lighter; background: lighten($secondary_background_color, 60%);
&:hover { &:hover {
background: $primary_lighter; background: lighten($secondary_background_color, 60%);
color: $primary; color: $primary_text_color;
border-bottom: 1px solid $primary_lighter; border-bottom: 1px solid $primary_border_color;
} }
&.collapsed { &.collapsed {
@ -261,7 +261,7 @@ a.star {
} }
#topic-footer-buttons { #topic-footer-buttons {
border-top: 1px solid $primary_lighter; border-top: 1px solid $primary_border_color;
padding: 20px 10px 0 10px; padding: 20px 10px 0 10px;
} }
@ -285,8 +285,8 @@ a.star {
span.post-count { span.post-count {
background: $primary; background: $secondary_background_color;
color: $secondary; color: $tertiary_text_color;
opacity: .8; opacity: .8;
} }
@ -301,7 +301,7 @@ span.post-count {
#topic-title { #topic-title {
z-index: 1000; z-index: 1000;
background: $primary_lightest; background: lighten($secondary_background_color, 76%);
margin: 0 0 0 0 !important; margin: 0 0 0 0 !important;
padding: 15px 10px 15px 10px; padding: 15px 10px 15px 10px;
} }
@ -312,20 +312,20 @@ span.post-count {
height: auto; height: auto;
} }
&.moderator { &.moderator {
background-color: $tertiary_lightest; background-color: $emphasis_background_color;
} }
} }
.quote-button { .quote-button {
display: none; display: none;
position: absolute; position: absolute;
background-color: $primary_medium; background-color: lighten($secondary_background_color, 35%);
color: $secondary; color: $primary_text_color;
padding: 10px; padding: 10px;
width: 90px; width: 90px;
&:hover { &:hover {
background-color: $primary_light; background-color: lighten($secondary_background_color, 50%);
cursor: pointer; cursor: pointer;
} }
} }
@ -410,11 +410,11 @@ iframe {
} }
.deleted { .deleted {
background-color: $highlight_danger_light; background-color: $warning_background_color;
} }
#show-topic-admin { #show-topic-admin {
color: $primary_medium; color: lighten($primary_text_color, 35%);
right: 0px; right: 0px;
border-right: 0; border-right: 0;
padding-right: 4px; padding-right: 4px;
@ -434,7 +434,7 @@ iframe {
} }
.new-user a { .new-user a {
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
.topic-meta-data { .topic-meta-data {
@ -460,7 +460,7 @@ blockquote {
.quote-controls { .quote-controls {
float: right; float: right;
color: $primary; color: $primary_text_color;
a { a {
margin: 0; margin: 0;
} }
@ -468,7 +468,7 @@ blockquote {
.quote-other-topic:before { .quote-other-topic:before {
display: inline-block; display: inline-block;
margin-left: 8px; margin-left: 8px;
color: $primary; color: $primary_text_color;
font-family: "FontAwesome"; font-family: "FontAwesome";
position: relative; position: relative;
z-index: 20; z-index: 20;
@ -483,8 +483,8 @@ blockquote {
.quote .title { .quote .title {
border-left: 5px solid $primary_light; border-left: 5px solid $primary_border_color;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
padding: 10px 10px 0 12px; padding: 10px 10px 0 12px;
clear: both; clear: both;
.avatar { margin-right: 7px; } .avatar { margin-right: 7px; }

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

@ -45,7 +45,7 @@ a.edit-topic {font-size: 15px;}
} }
.docked #topic-progress { .docked #topic-progress {
box-shadow: 0 0 3px $primary_light; box-shadow: 0 0 3px rbga($primary_shadow_color, .5);
} }
#topic-progress-wrapper { #topic-progress-wrapper {
@ -65,15 +65,15 @@ a.edit-topic {font-size: 15px;}
#topic-progress { #topic-progress {
box-shadow: 0 0 3px $primary; box-shadow: 0 0 3px rbga($primary_shadow_color, .7);
position: relative; position: relative;
&.hidden { &.hidden {
display: none; display: none;
} }
border: none; border: none;
background-color: $primary_lighter; background-color: lighten($primary_background_color, 60%);
color: $primary_medium; color: $primary_text_color;
width: 130px; width: 130px;
height: 34px; height: 34px;
.nums { .nums {
@ -92,7 +92,7 @@ a.edit-topic {font-size: 15px;}
left: 4px; left: 4px;
border: 0; border: 0;
background: none; background: none;
color: $primary_medium; color: lighten($primary_text_color, 35%);
width: 60px; width: 60px;
text-align: left; text-align: left;
@ -109,7 +109,7 @@ a.edit-topic {font-size: 15px;}
&:disabled { &:disabled {
cursor: default; cursor: default;
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
} }
h4 { h4 {
@ -122,10 +122,10 @@ a.edit-topic {font-size: 15px;}
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
width: 0px; width: 0px;
border-right: 1px solid $primary_lighter; border-right: 1px solid $primary_border_color;
// background-color: #d4eaf4; // background-color: #d4eaf4;
// background-color: #C5E8F7; // background-color: #C5E8F7;
background-color: $success_light; background-color: $success_background_color;
} }
} }
@ -137,6 +137,6 @@ a.edit-topic {font-size: 15px;}
.post-cloak:last-of-type {padding-bottom: 40px;} .post-cloak:last-of-type {padding-bottom: 40px;}
.heatmap-high {color: #f77 !important;} .heatmap-high {color: $heatmap-high !important;}
.heatmap-med {color: #a00 !important;} .heatmap-med {color: $heatmap-med !important;}
.heatmap-low {color: #700 !important;} .heatmap-low {color: $heatmap-low !important;}

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

@ -21,6 +21,6 @@
line-height: 18px; line-height: 18px;
} }
.description { .description {
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
} }

60
app/assets/stylesheets/mobile/user.scss
View File

@ -15,13 +15,13 @@
height: 100px; height: 100px;
} }
.static { .static {
color: $primary; color: $primary_text_color;
margin-top: 5px; margin-top: 5px;
margin-left: 5px; margin-left: 5px;
display: inline-block; display: inline-block;
} }
.instructions { .instructions {
color: $primary_medium; color: $secondary_text_color;
margin-top: 5px; margin-top: 5px;
} }
.category-controls { .category-controls {
@ -31,13 +31,13 @@
margin-left: 3px; margin-left: 3px;
} }
.instructions a[href] { .instructions a[href] {
color: $primary_medium; color: $secondary_text_color;
} }
.warning { .warning {
@include border-radius-all(6px); @include border-radius-all(6px);
background-color: lighten($highlight_danger, 10%); background-color: $warning_background_color;
padding: 5px 8px; padding: 5px 8px;
color: $secondary; color: $primary_text_color;
width: 520px; width: 520px;
} }
@ -72,15 +72,15 @@
display: block; display: block;
width: 220px; width: 220px;
min-height: 200px; min-height: 200px;
background-color: $primary_lightest; background-color: lighten($secondary_background_color, 76%);
color: $primary; color: $primary_text_color;
word-wrap: break-word; word-wrap: break-word;
} }
.user-navigation { .user-navigation {
h3 { h3 {
color: $primary_medium; color: lighten($primary_text_color, 35%);
padding-left: 5px; padding-left: 5px;
} }
.nav-stacked { .nav-stacked {
@ -93,7 +93,7 @@
.avatar { .avatar {
float: left; float: left;
width: 45px; width: 45px;
background-color: $secondary; background-color: $primary_background_color;
} }
nav.buttons { nav.buttons {
@ -108,7 +108,7 @@
h2 { h2 {
a { a {
font-size: 14px; font-size: 14px;
color: $primary_light; color: $secondary_text_color;
cursor: pointer; cursor: pointer;
} }
} }
@ -119,10 +119,10 @@
margin-bottom: 50px; margin-bottom: 50px;
.about { .about {
background-color: $primary; background-color: $secondary_background_color;
margin-bottom: 10px; margin-bottom: 10px;
overflow: hidden; overflow: hidden;
color: $secondary; color: $primary_text_color;
.details { .details {
text-align: center; text-align: center;
@ -140,32 +140,32 @@
} }
a[href] { a[href] {
color: $secondary; color: $primary_text_color;
} }
img.avatar { img.avatar {
border: 3px solid $primary_lightest; border: 3px solid $primary_border_color;
margin-bottom: 4px; margin-bottom: 4px;
} }
.secondary { .secondary {
background-color: $primary; background-color: $secondary_background_color;
text-align: left; text-align: left;
padding: 0 10px; padding: 0 10px;
dd { dd {
color: $secondary; color: $tertiary_text_color;
margin: 0 0 7px 0; margin: 0 0 7px 0;
} }
dt { dt {
color: $primary_light; color: $secondary_text_color;
margin: 0; margin: 0;
} }
} }
} }
.controls { .controls {
background-color: $primary_lighter; background-color: lighten($secondary_background_color, 60%);
margin-top: 0px; margin-top: 0px;
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
@ -193,7 +193,7 @@
.avatar { .avatar {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
border: 2px solid $secondary; border: 2px solid $tertiary_border_color;
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
@ -218,14 +218,14 @@
margin: 5px 0px; margin: 5px 0px;
font-size: 13px; font-size: 13px;
word-wrap: break-word; word-wrap: break-word;
color: lighten($primary, 30%); color: lighten($primary_text_color, 30%);
} }
.item.moderator-action { .item.moderator-action {
background-color: $tertiary_lightest; background-color: $emphasis_background_color;
} }
.item.deleted { .item.deleted {
opacity: 0.8; opacity: 0.8;
background-color: $highlight_danger_light; background-color: $warning_background_color;
} }
.item.hidden { .item.hidden {
display: block; display: block;
@ -233,19 +233,19 @@
} }
.item { .item {
padding: 10px 8px; padding: 10px 8px;
background-color: $secondary; background-color: $primary_background_color;
border-bottom: 1px solid $primary_light; border-bottom: 1px solid $primary_border_color;
} }
.type { .type {
color: lighten($primary, 40%); color: lighten($primary_text_color, 40%);
} }
span.name { span.name {
color: lighten($primary, 40%); color: lighten($primary_text_color, 40%);
} }
.time { .time {
display: block; display: block;
float: right; float: right;
color: $primary_light; color: $secondary_text_color;
margin-right: 8px; margin-right: 8px;
font-size: 11px; font-size: 11px;
} }
@ -259,7 +259,7 @@
font-size: 14px; font-size: 14px;
} }
.edit-reason { .edit-reason {
background-color: $highlight; background-color: $highlight_background_color;
padding: 3px 5px 5px 5px; padding: 3px 5px 5px 5px;
} }
} }
@ -274,7 +274,7 @@
.fa { .fa {
width: 15px; width: 15px;
display: inline-block; display: inline-block;
color: $primary_medium; color: lighten($primary_text_color, 35%);
} }
.avatar-wrapper { .avatar-wrapper {
border: none; border: none;
@ -298,4 +298,4 @@
.avatar { .avatar {
margin: 5px 10px 5px 0; margin: 5px 10px 5px 0;
} }
} }

8
app/views/exceptions/not_found.html.erb
View File

@ -1,10 +1,10 @@
<% local_domain = "#{request.protocol}#{request.host_with_port}" %> <% local_domain = "#{request.protocol}#{request.host_with_port}" %>
<p><%= t 'page_not_found.title' %></p> <h1 class="page-not-found"><%= t 'page_not_found.title' %></h1>
<div class="row"> <div class="row">
<div class="span8"> <div class="span8">
<h2><%= t 'page_not_found.popular_topics' %></h2> <h2 class="popular-topics-title"><%= t 'page_not_found.popular_topics' %></h2>
<% @top_viewed.each do |t| %> <% @top_viewed.each do |t| %>
<%= link_to t.title, t.relative_url %><br/> <%= link_to t.title, t.relative_url %><br/>
<% end %> <% end %>
@ -12,7 +12,7 @@
<a href="/latest" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a> <a href="/latest" class="btn"><%= t 'page_not_found.see_more' %>&hellip;</a>
</div> </div>
<div class="span8"> <div class="span8">
<h2><%= t 'page_not_found.recent_topics' %></h2> <h2 class="recent-topics-title"><%= t 'page_not_found.recent_topics' %></h2>
<% @recent.each do |t| %> <% @recent.each do |t| %>
<%= link_to t.title, t.relative_url %><br/> <%= link_to t.title, t.relative_url %><br/>
<% end %> <% end %>
@ -23,7 +23,7 @@
<div class="row"> <div class="row">
<div class="span10" style='padding-top: 20px'> <div class="span10" style='padding-top: 20px'>
<h2><%= t 'page_not_found.search_title' %></h2> <h2 class="page-not-found-search"><%= t 'page_not_found.search_title' %></h2>
<p> <p>
<form action='//google.com' id='google-search' onsubmit="return google_button_clicked()"> <form action='//google.com' id='google-search' onsubmit="return google_button_clicked()">
<input type="text" id='user-query' value="<%= @slug %>"> <input type="text" id='user-query' value="<%= @slug %>">