Merge pull request #1924 from awesomerobot/master

simplfying color palette, collecting colors into unified variables
This commit is contained in:
Jeff Atwood 2014-02-09 22:34:25 -08:00
commit c900ee055b
44 changed files with 924 additions and 899 deletions

View File

@ -10,18 +10,18 @@
width: 100%;
tr {text-align: left;}
td, th {padding: 8px;}
th {border-top: 1px solid #ddd;}
td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
th {border-top: 1px solid $primary_lighter;}
td {border-bottom: 1px solid $primary_lighter; border-top: 1px solid $primary_lighter;}
}
.content-list li a span.count {
font-size: 12px;
float: right;
margin-right: 10px;
background-color: #eee;
background-color: $primary_lightest;
padding: 2px 5px;
border-radius: 5px;
color: #555;
color: $primary_medium;
}
.admin-content {
@ -54,11 +54,11 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.bar {
margin-top: 5px;
background-color: $blue;
background-color: $tertiary;
display: inline-block;
text-align: right;
padding-right: 8px;
color: $white;
color: $secondary;
}
}
}
@ -67,13 +67,13 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.admin-loading {
width: 100px;
margin: 0 auto 30px auto;
background-color: $black;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $white;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
@ -88,17 +88,17 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.admin-controls {
@include border-radius-all(5px);
background-color: darken($white, 5%);
border: 1px solid darken($white, 10%);
background-color: darken($secondary, 5%);
border: 1px solid darken($secondary, 10%);
padding: 10px 10px 3px 0px;
height: 35px;
.nav.nav-pills {
li.active {
a {
border-color: darken($dark_gray, 10%);
background-color: $dark_gray;
border-color: darken($primary_medium, 10%);
background-color: $primary_medium;
&:hover {
background-color: $dark_gray;
background-color: $primary_medium;
}
}
}
@ -106,7 +106,7 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
h1 {
font-size: 20px;
line-height: 25px;
color: $darkish_gray;
color: $primary_medium;
}
.controls {
margin-left: 10px;
@ -149,8 +149,8 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
margin-right: 5px;
}
.btn {
background: darken(#e8e8e8, 5%);
&:hover { background: #aaa; }
background: $primary_lighter;
&:hover { background: $primary_lighter; }
}
}
@ -161,7 +161,7 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
border-right: none;
}
li a.active {
color: $white;
color: $secondary;
background-color: $nav-stacked-background-color-active;
}
}
@ -205,7 +205,7 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.desc {
padding-top: 3px;
color: darken($white, 40%);
color: darken($secondary, 40%);
}
h3 {
@ -216,11 +216,11 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.setting.overridden {
input[type=text] {
background-color: lighten($yellow, 40%);
background-color: lighten($highlight, 40%);
}
h3 {
color: darken($yellow, 20%);
color: darken($highlight, 30%);
}
}
}
@ -228,26 +228,26 @@ td {border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
section.details {
h1 {
font-size: 15px;
background-color: $gray;
color: $white;
background-color: $primary_light;
color: $secondary;
padding: 0 10px;
margin: 0px 0 5px 0;
}
}
#selected-controls {
background-color: lighten($blue, 50%);
background-color: lighten($tertiary, 50%);
padding: 8px;
min-height: 27px;
position: fixed;
bottom: 0;
width: 1075px;
border: 1px solid lighten($blue, 45%);
border: 1px solid lighten($tertiary, 45%);
}
table {
tr.selected {
background-color: lighten($blue, 58%);
background-color: lighten($tertiary, 58%);
}
}
@ -258,9 +258,9 @@ table {
border-top: 0;
}
&.highlight-danger {
background-color: #ffe5e5;
background-color: $highlight_danger_light;
}
border-top: 1px solid #dddddd;
border-top: 1px solid $primary_lighter;
&:before, &:after {
display: table;
content: "";
@ -352,7 +352,7 @@ table {
padding: 5px 0 0 0;
margin-left: 10px;
width: 80px;
color: $dark_gray;
color: $primary_medium;
}
}
}
@ -362,10 +362,10 @@ table {
.admin-flags {
tr.hidden-post td.excerpt { opacity: 0.4; }
tr.deleted td.excerpt { opacity: 0.8; background-color: #ffcece; }
tr.deleted td.excerpt { opacity: 0.8; background-color: $highlight_danger_light; }
td.message {
padding: 4px 8px;
background-color: #f8f8e0;
background-color: $highlight_light;
}
td { vertical-align: top; }
th { text-align: left; }
@ -445,13 +445,13 @@ table {
}
.up-to-date {
color: green;
color: $success;
}
.updates-available {
color: #FF9500;
color: $highlight_danger;
}
.critical-updates-available {
color: red;
color: $highlight_danger;
}
}
@ -494,24 +494,24 @@ table.api-keys {
.title {
i.fa {
color: #444;
color: $primary;
}
}
th {
font-weight: normal;
text-align: center;
background-color: #e4e4e4;
background-color: $primary_lightest;
}
th.title {
text-align: left;
}
thead {
tr:hover > td {
background-color: $white;
background-color: $secondary;
}
tr:hover > th {
background-color: #e4e4e4;
background-color: $primary_lighter;
}
}
@ -524,13 +524,13 @@ table.api-keys {
}
&.trending-up {
color: green;
color: $success;
i.up {
display: inline;
}
}
&.trending-down {
color: red;
color: $highlight_danger;
i.down {
display: inline;
}
@ -546,11 +546,11 @@ table.api-keys {
&.detected-problems {
@include border-radius-all(5px);
background-color: #eee;
border: 1px solid #ccc;
background-color: $primary_lightest;
border: 1px solid $primary_lighter;
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px #bbb;
box-shadow: inset 0 0 10px $primary_lighter;
.look-here {
float: left;
@ -559,7 +559,7 @@ table.api-keys {
.fa {
font-size: 32px;
vertical-align: middle;
color: $darkish_gray;
color: $primary_medium;
}
}
@ -573,7 +573,7 @@ table.api-keys {
text-align: right;
}
.btn {
background-color: #ccc;
background-color: $primary_lighter;
}
}
}
@ -611,7 +611,7 @@ table.api-keys {
.commits-widget {
border: solid 1px #ccc;
border: solid 1px $primary_lighter;
width: 500px;
height: 180px;
margin-bottom: 36px;
@ -631,7 +631,7 @@ table.api-keys {
list-style: none;
}
a {
color: #222;
color: $primary;
text-decoration: none;
}
a:hover {
@ -639,11 +639,11 @@ table.api-keys {
}
.header {
color: #222;
color: $primary;
font-weight: bold;
height: 30px;
border-bottom: solid 1px #ccc;
@include linear-gradient(#f1f1f1, #e1e1e1);
border-bottom: solid 1px $primary_lighter;
background: $primary_lightest;
cursor: pointer;
h1 {
@ -666,9 +666,8 @@ table.api-keys {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
border-bottom: solid 1px #ccc;
@include linear-gradient(#f6f6f6, #eee);
border-bottom: solid 1px $primary_lighter;
background: $primary_lightest;
.left {
float: left;
}
@ -678,25 +677,25 @@ table.api-keys {
img {
margin-top: 2px;
border: solid 1px #ccc;
border: solid 1px $primary_lighter;
padding: 2px;
background-color: white;
background-color: $secondary;
}
.commit-message {
color: #222;
color: $primary;
font-size: 12px;
font-weight: bold;
}
.commit-meta {
color: #555;
color: $primary_medium;
font-size: 12px;
}
.committer-name {
font-weight: bold;
color: #333;
color: $primary;
}
}
li:last-child {
@ -709,18 +708,18 @@ table.api-keys {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #d1d1d1;
background-color: $primary_lighter;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px #ddd;
border-left: solid 1px $primary_lighter;
}
}
.content-list {
h3 {
color: $darkish_gray;
color: $primary_medium;
font-size: 15px;
padding-left: 5px;
}
@ -730,22 +729,22 @@ table.api-keys {
margin: 0;
li {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $primary_lighter;
}
li a {
display: block;
padding: 10px;
color: $dark_gray;
color: $primary_medium;
&:hover {
background-color: #eee;
color: $dark_gray;
color: $primary_medium;
}
&.active {
font-weight: bold;
color: $black;
color: $primary;
}
}
}
@ -761,7 +760,7 @@ table.api-keys {
margin-left: 20px;
p.description {
color: $dark_gray;
color: $primary_medium;
}
.controls {
@ -896,11 +895,11 @@ table.api-keys {
margin: 0 0 20px 6px;
a.filter {
display: inline-block;
background-color: #ddd;
background-color: $primary_lighter;
padding: 3px 10px;
border-radius: 3px;
margin-left: 5px;
color: #444;
color: $primary;
&:hover {
color: $link-color-hover;
}
@ -930,11 +929,11 @@ table.api-keys {
.staff-actions, .screened-emails, .screened-urls, .screened-ip-addresses {
margin-left: 5px;
border-bottom: dotted 1px #ddd;
border-bottom: dotted 1px $primary_lighter;
.heading-container {
width: 100%;
background-color: #e4e4e4;
background-color: $primary_lightest;
}
.col.heading {
font-weight: bold;
@ -953,7 +952,7 @@ table.api-keys {
.ember-list-item-view {
width: 100%;
border-top: solid 1px #ddd;
border-top: solid 1px $primary_lighter;
}
}
@ -965,9 +964,9 @@ table.api-keys {
.leader-requirements {
.fa-check {
color: green;
color: $success;
}
.fa-times {
color: red;
color: $highlight_danger;
}
}

View File

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

View File

@ -45,9 +45,9 @@ button {
.btn {
border: none;
color: #534d4b;
color: $primary;
font-weight: normal;
background: #e8e8e8;
background: lighten($primary_lighter, 10%);
&[href] {
color: $btn-default-color;
}
@ -58,12 +58,15 @@ button {
}
&:active {
@include linear-gradient( darken(#aaa, 8%), #aaa);
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
}
&[disabled] {
@include linear-gradient($white, $btn-default-background-color);
@include box-shadow(inset 0 -1px 2px rgba($black, 0.2));
background: $btn-default-background-color;
@include box-shadow(inset 0 -1px 2px rgba($primary, 0.2));
&:hover {color: $primary;}
}
}
// Buttons used in admin panel
@ -77,7 +80,7 @@ button {
.btn-primary {
border: none;
color: $white;
color: $secondary;
font-weight: normal;
color: #fff;
@ -88,7 +91,7 @@ button {
&[href] {
color: $white;
color: $secondary;
}
&:hover
{
@ -97,13 +100,11 @@ button {
}
&:active {
@include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
color: #fff;
}
&[disabled] {
text-shadow: 0 1px 0 rgba($black, 0.2);
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
background: $btn-primary-background-color;
}
}
@ -111,18 +112,18 @@ button {
// --------------------------------------------------
.btn-danger {
color: $white;
color: $secondary;
font-weight: normal;
background: $btn-danger-background-color;
&[href] {
color: $white;
color: $secondary;
}
&:hover{
background: $btn-danger-background-color-dark;
}
&:active {
@include linear-gradient($btn-primary-background-color-dark, $btn-primary-background-color);
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
}
&[disabled] {
@ -133,11 +134,11 @@ button {
// --------------------------------------------------
.btn-social {
color: $white;
text-shadow: 0 1px 0 rgba($black, 0.2);
@include box-shadow(inset 0 1px 0 rgba($white, 0.1));
color: $secondary;
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include box-shadow(inset 0 1px 0 rgba($secondary, 0.1));
&[href] {
color: $white;
color: $secondary;
}
&:before {
margin-right: 7px;

View File

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

View File

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

View File

@ -2,124 +2,20 @@
// Variables used throughout the theme
// --------------------------------------------------
// Base
// Layout dimensions
// --------------------------------------------------
$base-font-size: 14px !default;
$base-line-height: 19px !default;
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$base-background-color: #eee !default;
$small-width: 950px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
// Links
$link-color: #006e97 !default;
$link-color-visited: #4a6b82 !default;
$link-color-hover: #0081b0 !default;
$link-color-active: #005c7d !default;
// Typography
$hr-border-color: #cfcfcf !default;
// Badges
// Primary color variables
// --------------------------------------------------
// Notification badge
$badge-notification-background-color: #999 !default;
// Posts badge
$badge-posts-color: #808080 !default;
// Buttons
// --------------------------------------------------
// Default button
$btn-default-color: #565656 !default;
$btn-default-background-color: #eee !default;
$btn-default-background-color-hover: #fafafa !default;
// Primary button
$btn-primary-border-color: #16617d !default;
$btn-primary-background-color: #00aeef !default;
$btn-primary-background-color-dark: #009dd8 !default;
$btn-primary-background-color-light: #00b0f0 !default;
// Danger button (delete, etc)
$btn-danger-border-color: #7D1D16 !default;
$btn-danger-background-color: #EE1C0B !default;
$btn-danger-background-color-dark: #D81100 !default;
$btn-danger-background-color-light: #EE1C0B !default;
// Navigation menus
// --------------------------------------------------
// Pill nav
$nav-pills-color: #534d4b !default;
$nav-pills-color-hover: #e45735 !default;
$nav-pills-border-color-hover: #f6d5cd !default;
$nav-pills-background-color-hover: #fff0ed !default;
$nav-pills-color-active: #ffeeea !default;
$nav-pills-border-color-active: #ac3d22 !default;
$nav-pills-background-color-active: #e45735 !default;
// Stacked nav
$nav-stacked-color: #534d4b !default;
$nav-stacked-border-color: #ccc !default;
$nav-stacked-background-color: #fafafa !default;
$nav-stacked-divider-color: #e6e6e6 !default;
$nav-stacked-chevron-color: #ccc !default;
$nav-stacked-border-color-active: #f15b22 !default;
$nav-stacked-background-color-active: #e45735 !default;
// Button nav
$nav-button-color: #7b7b7b !default;
$nav-button-color-hover: #616161 !default;
$nav-button-background-color-hover: #f2f2f2 !default;
$nav-button-color-active: #474747 !default;
$nav-button-background-color-active: #e0e0e0 !default;
$nav-like-button-color-hover: #fa6c8d !default;
$nav-like-button-background-color-hover: #fae9ed !default;
$nav-like-button-color-active: #bd6377 !default;
$nav-like-button-background-color-active: #fae9ed !default;
// Modals
// --------------------------------------------------
// Header
$modal-header-color: #e45735 !default;
$modal-header-border-color: #b3b3b3 !default;
$modal-close-button-color: #b4b4b4;
// Topic list
// --------------------------------------------------
$topic-list-border-color: #bebebe !default;
$topic-list-th-color: #534d4b !default;
$topic-list-th-border-color: #b5b5b5 !default;
$topic-list-th-background-color: #f6f6f6 !default;
$topic-list-td-color: #808080 !default;
$topic-list-td-border-color: #ededed !default;
$topic-list-star-color: #eee !default;
$topic-list-starred-color: #e45735 !default;
// Generic
// --------------------------------------------------
// Colors
$black: #000 !default;
$white: #fff !default;
$yellow: lighten(#FFFF00, 20%);
$light_yellow: lighten($yellow, 20%) !default;
$lightest_yellow: lighten($yellow, 30%) !default;
$google: #5b76f7 !default;
$facebook: #3b5998 !default;
$cas: #70BA61 !default;
@ -128,55 +24,173 @@ $yahoo: #810293 !default;
$github: #6d6d6d !default;
$persona: #606060 !default;
// Layout dimensions
$small-width: 950px !default;
$medium-width: 995px !default;
$large-width: 1110px !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;
// Misc.
//--------------------------------------------------- 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, 55%) !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, 30%) !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
// --------------------------------------------------
// Basic colors
$base-font-size: 14px !default;
$base-line-height: 19px !default;
$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$base-background-color: $primary_lighter !default;
$gray: #cccccc;
$light_gray: #eeeeee;
$darkish_gray: #666666;
$dark_gray: #999999;
$highlight: #ffff99;
$highlight_light: #ffffdd;
$red: #770000;
$green: #007700;
$blue: #0088cc;
$bright_blue: #9999ff;
$yellow: yellow;
$eggplant: #5f5b65;
// Links
// --------------------------------------------------
$link_color: darken($blue, 10%);
$muted-link-color: #999;
$muted-important-link-color: #5d5d5d;
$link-color: $tertiary !default;
$link-color-visited: $tertiary_dark !default;
$link-color-hover: $tertiary_dark !default;
$link-color-active: $tertiary_dark !default;
$quote-background: #f1f1f1;
// Badges
// --------------------------------------------------
// Notification badge
$badge-notification-background-color: $primary_medium !default;
// Posts badge
$badge-posts-color: $primary_medium !default;
// Buttons
// --------------------------------------------------
// Default button
$btn-default-color: $primary !default;
$btn-default-background-color: $primary_light !default;
$btn-default-background-color-hover: $primary_lightest !default;
// Primary button
$btn-primary-border-color: $tertiary_dark !default;
$btn-primary-background-color: $tertiary !default;
$btn-primary-background-color-dark: $tertiary !default;
$btn-primary-background-color-light: $tertiary_light !default;
// Danger button (delete, etc)
$btn-danger-border-color: $highlight_danger_dark !default;
$btn-danger-background-color: $highlight_danger !default;
$btn-danger-background-color-dark: $highlight_danger_dark !default;
$btn-danger-background-color-light: $highlight_danger !default;
// Navigation menus
// --------------------------------------------------
// Pill nav
$nav-pills-color: $primary !default;
$nav-pills-color-hover: $highlight_danger !default;
$nav-pills-border-color-hover: $highlight_danger_light !default;
$nav-pills-background-color-hover: $highlight_danger_light !default;
$nav-pills-color-active: $highlight_danger !default;
$nav-pills-border-color-active: $highlight_danger_dark !default;
$nav-pills-background-color-active: $highlight_danger !default;
// Stacked nav
$nav-stacked-color: $primary !default;
$nav-stacked-border-color: $primary_lighter !default;
$nav-stacked-background-color: $primary_lightest !default;
$nav-stacked-divider-color: $primary_lighter !default;
$nav-stacked-chevron-color: $primary_light !default;
$nav-stacked-border-color-active: $highlight_danger !default;
$nav-stacked-background-color-active: $highlight_danger !default;
// Button nav
$nav-button-color: $primary_medium !default;
$nav-button-color-hover: $primary !default;
$nav-button-background-color-hover: $primary_lighter !default;
$nav-button-color-active: $primary !default;
$nav-button-background-color-active: $primary_lighter !default;
// Header
$modal-header-color: $highlight_danger !default;
$modal-header-border-color: $primary_light !default;
$modal-close-button-color: $primary_light;
$nav-like-button-color-hover: $heart !default;
$nav-like-button-background-color-hover: $heart_light !default;
$nav-like-button-color-active: $heart_dark !default;
$nav-like-button-background-color-active: $heart_light !default;
// Topic list
// --------------------------------------------------
$topic-list-border-color: $primary_light !default;
$topic-list-th-color: $primary !default;
$topic-list-th-border-color: $primary_light !default;
$topic-list-th-background-color: $primary_lightest !default;
$topic-list-td-color: $primary_medium !default;
$topic-list-td-border-color: $primary_lighter !default;
$topic-list-star-color: $primary_lighter !default;
$topic-list-starred-color: $highlight_danger !default;
// -- ??
$link_color: $tertiary_dark;
$muted-link-color: $primary_medium;
$muted-important-link-color: $primary_medium;
$quote-background: $primary_lightest;
// Colors based on basics
$topicMenuColor: darken($white, 80%);
$bookmarkColor: #0088CC;
$topicMenuColor: darken($secondary, 80%);
$bookmarkColor: $tertiary;
$tag_color: #e1ecf9;
$tag_color: $tertiary_lightest;
$composer_background: #dcdfe0;
$composer_background: lighten($primary_lighter, 10%);
$post_footer: #fafafa;
$inner_border: #e4e4e4;
$inner_line: #d4d4d4;
$post_footer: $primary_lightest;
$inner_border: $primary_lighter;
$inner_line: $primary_light;
$controls: #808080;
$controls_hover: #2eaee5;
$controls_active: #1d92c5;
$heart: #fa6c8d;
$controls: $primary_medium;
$controls_hover: $tertiary;
$controls_active: $tertiary_dark;
$attention_bg: #e4f2f8;
$attention_fg: #1aaae4;
$attention_bg: $tertiary_lightest;
$attention_fg: $tertiary;
$header-item-highlight: #ecf8f6;
$header-item-highlight: $tertiary_lightest;

View File

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

View File

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

View File

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

View File

@ -1,14 +1,17 @@
@import "../common/foundation/variables";
.category-combobox {
.badge-category {
display: inline-block;
}
.topic-count {
font-size: 11px;
color: #666;
color: $primary_light;
display: inline-block;
}
.highlighted .topic-count {
color: white;
color: $secondary;
}
.category-desc {
margin: 6px 0px 0px 3px;

View File

@ -16,7 +16,8 @@
.composer-popup {
@include box-shadow(3px 3px 3px rgba($black, 0.14));
@include box-shadow(3px 3px 3px rgba($primary, 0.14));
background: $highlight;
h3 {
margin-bottom: 10px;
@ -28,7 +29,7 @@
a.close {
float: right;
color: $black;
color: $primary;
opacity: 0.5;
font-size: 15px;
}
@ -37,8 +38,8 @@
opacity: 1.0;
}
background-color: lighten($yellow, 40%);
border: 1px solid darken($yellow, 10%);
background-color: lighten($highlight, 40%);
border: 1px solid darken($highlight, 10%);
padding: 10px;
width: 600px;
position: absolute;
@ -56,15 +57,15 @@
}
.similar-topics {
background-color: #b5e8fd;
border: 1px solid darken(#b5e8fd, 10%);
background-color: $tertiary_light;
border: 1px solid darken($tertiary, 10%);
a[href] {
color: #000;
}
.posts-count {
color: darken(#b5e8fd, 50%);
color: darken($tertiary, 50%);
font-size: 12px;
}
}
@ -78,28 +79,28 @@
z-index: 999999;
position: absolute;
width: 240px;
background-color: $white;
border: 1px solid $gray;
background-color: $secondary;
border: 1px solid $primary_light;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
border-bottom: 1px solid $light_gray;
border-bottom: 1px solid $primary_lighter;
a[href] {
padding: 5px;
display: block;
span.username {
color: lighten($black, 20);
color: lighten($primary, 20);
}
span.name {
font-size: 11px;
}
&.selected {
background-color: $light_gray;
background-color: $primary_lighter;
}
@include hover {
background-color: $light_gray;
background-color: $primary_lighter;
text-decoration: none;
}
}
@ -120,13 +121,13 @@
#file-uploading {
left: 51%;
font-size: 12px;
color: darken($gray, 40);
color: darken($primary_light, 40);
}
#draft-status {
right: 51%;
color: lighten($black, 60);
color: $primary_medium;
&.flash {
color: lighten($red, 20);
color: lighten($highlight_danger, 20);
}
}
@include transition(height 0.4s ease);
@ -144,7 +145,7 @@
right: 13px;
position: absolute;
font-size: 15px;
color: $darkish_gray;
color: $primary_medium;
text-decoration: none;
&:before {
font-family: "FontAwesome";
@ -180,7 +181,7 @@
&.draft {
height: 40px !important;
cursor: pointer;
border-top: 1px solid $gray;
border-top: 1px solid $primary_light;
.draft-text {
display: block;
}
@ -193,7 +194,7 @@
}
&.saving {
height: 40px !important;
border-top: 1px solid $gray;
border-top: 1px solid $primary_light;
.saving-text {
display: block;
}
@ -215,7 +216,7 @@
height: 70px;
text-indent: -9999em;
background: {
color: $black;
color: $primary;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
size: 35px;
@ -245,8 +246,14 @@
input#reply-title {
padding: 7px 10px;
margin: 6px 10px 3px 0;
color: $primary;
}
input#reply-title {
width: 400px;
color: $primary;
}
input#reply-title { width: 400px; }
.wmd-controls {
@include transition(top 0.3s ease);
top: 100px;
@ -299,17 +306,18 @@
}
}
#reply-title {
color: $primary;
margin-right: 10px;
float: left;
&:disabled {
background-color: $light_gray;
background-color: $primary_lighter;
}
}
#wmd-input:disabled {
background-color: $light_gray;
background-color: $primary_lighter;
}
#wmd-input, #wmd-preview {
color: $black;
color: $primary;
video {
max-width: 100%;
@ -321,7 +329,7 @@
}
}
#wmd-preview {
border: 1px dashed $gray;
border: 1px dashed $primary_light;
overflow: auto;
visibility: visible;
@ -377,8 +385,8 @@ div.ac-wrap.disabled {
}
div.ac-wrap {
background-color: $white;
border: 1px solid #cccccc;
background-color: $secondary;
border: 1px solid $primary_lighter;
padding: 5px 10px;
div.item {
float: left;
@ -399,12 +407,12 @@ div.ac-wrap {
border-radius: 10px;
width: 10px;
display: inline-block;
border: 1px solid rgba(255, 255, 255, 0);
border: 1px solid $secondary;
&:hover {
background-color: lighten($red, 45);
border: 1px solid lighten($red, 20);
background-color: lighten($highlight_danger, 45);
border: 1px solid lighten($highlight_danger, 20);
text-decoration: none;
color: $white;
color: $highlight_danger;
}
}
}
@ -460,7 +468,7 @@ div.ac-wrap {
min-height: 100%;
padding: 7px;
margin: 0;
background-color: $white;
background-color: $secondary;
word-wrap: break-word;
// set up proper header margins in post preview
@ -506,7 +514,7 @@ div.ac-wrap {
top: 0;
position: absolute;
border-bottom: 1px solid $inner_line;
background-color: $white;
background-color: $secondary;
z-index: 100;
}
}
@ -536,7 +544,7 @@ div.ac-wrap {
}
.examples {
margin: 12px 0 0 17px;
color: $dark_gray;
color: $primary_medium;
}
}

View File

@ -61,38 +61,38 @@ header {
body {
button.ok {
@include linear-gradient(lighten($green, 5%), $green);
color: $white;
@include linear-gradient(lighten($success, 5%), $success);
color: $secondary;
@include hover {
@include linear-gradient(lighten($green, 10%), $green);
color: $white;
@include linear-gradient(lighten($success, 10%), $success);
color: $secondary;
}
}
button.cancel {
@include linear-gradient(lighten($red, 5%), $red);
color: $white;
@include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger);
color: $secondary;
@include hover {
@include linear-gradient(lighten($red, 10%), $red);
color: $white;
@include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger);
color: $secondary;
}
}
.coldmap-high {
color: lighten($blue, 20%) !important;
color: lighten($tertiary, 20%) !important;
}
.coldmap-med {
color: lighten($blue, 10%) !important;
color: lighten($tertiary, 10%) !important;
}
.coldmap-low {
color: $blue !important;
color: $tertiary !important;
}
.heatmap-high {
color: lighten($red, 50%) !important;
color: lighten($highlight_danger, 50%) !important;
}
.heatmap-med {
color: lighten($red, 10%) !important;
color: lighten($highlight_danger, 10%) !important;
}
.heatmap-low {
color: $red !important;
color: $highlight_danger !important;
}
#loading-message {
position: absolute;
@ -100,7 +100,7 @@ body {
text-align: center;
top: 120px;
left: 500px;
color: $darkish_gray;
color: $primary_medium;
}
.top-space {
margin-top: 10px;
@ -114,22 +114,22 @@ body {
.contents {
}
&.white {
background-color: $white;
background-color: $secondary;
}
}
#main {
.fa-star.starred {
color: #e45735;
color: $highlight_danger;
}
a.star {
color: #cacaca;
color: $primary_lighter;
&:before {
font-family: "FontAwesome";
content: "\f005";
}
&.starred {
color: #e45735;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
color: $highlight_danger;
text-shadow: 0px 0px 3px $primary_light;
@include hover {
opacity: 1;
&:before {
@ -173,7 +173,7 @@ body {
/**/
.message {
@include border-radius-all(8px);
background-color: $white;
background-color: $secondary;
padding: 14px;
h2 {
margin-bottom: 20px;
@ -183,13 +183,12 @@ body {
}
}
#footer {
background-color: $eggplant;
.container {
height: 50px;
.contents {
padding-top: 10px;
a[href] {
color: $white;
color: $secondary;
}
}
}
@ -199,14 +198,14 @@ body {
}
.grippie {
width: 100%;
border: 1px solid #dddddd;
border: 1px solid $primary_lighter;
border-width: 1px 0px;
cursor: row-resize;
height: 11px;
overflow: hidden;
background-color: #eeeeee;
background-color: $primary_lightest;
display:block {}
background: image-url("grippie.png") #eeeeee no-repeat center 3px;
background: image-url("grippie.png") $primary_lightest no-repeat center 3px;
}
}
@ -214,10 +213,10 @@ form {
.tip {
display: inline-block;
&.good {
color: $green;
color: $success;
}
&.bad {
color: $red;
color: $highlight_danger;
}
}
}
@ -226,7 +225,7 @@ blockquote {
/* 13px left is intentional here to properly align with post quotes */
padding: 10px 4px 4px 13px;
background-color: $quote-background;
border-left: 5px solid darken($quote-background, 20%);
border-left: 5px solid $primary_lighter;
p {
}
}
@ -240,7 +239,7 @@ blockquote {
margin: 0;
i {
font-size: 15px;
color: darken($white, 60%);
color: darken($secondary, 60%);
}
}
}
@ -251,12 +250,12 @@ blockquote {
#pagedown-editor {
width: 540px;
background-color: $white;
background-color: $secondary;
padding: 0 10px 13px 10px;
border: 1px solid $gray;
border: 1px solid $primary_light;
.preview {
margin-top: 8px;
border: 1px dashed $gray;
border: 1px dashed $primary_light;
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
@ -270,13 +269,13 @@ blockquote {
.spinner {
width: 100px;
margin: 0 auto 30px auto;
background-color: $black;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $white;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
@ -290,9 +289,9 @@ blockquote {
}
.avatar-wrapper {
background-color: white;
background-color: $secondary;
display: inline-block;
border: 1px solid #82786b;
border: 1px solid $primary_light;
@include border-radius-all(5px);
img {
@include border-radius-all(4px);
@ -310,7 +309,7 @@ blockquote {
body {
input, textarea, select {
color: #222222;
color: $primary;
}
code, pre {
@ -353,7 +352,7 @@ body {
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
color: $primary;
}
input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
@ -363,7 +362,7 @@ body {
margin-bottom: 9px;
font-size: 13px;
line-height: 18px;
color: #555555;
color: $primary;
}
}
input {
@ -372,33 +371,33 @@ body {
textarea {
width: 210px;
height: auto;
background-color: white;
border: 1px solid #cccccc;
background-color:$secondary;
border: 1px solid $primary_lighter;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px $primary_lightest;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
input {
&[type="text"], &[type="password"], &[type="datetime"], &[type="datetime-local"], &[type="date"], &[type="month"], &[type="time"], &[type="week"], &[type="number"], &[type="email"], &[type="url"], &[type="search"], &[type="tel"], &[type="color"] {
background-color: white;
border: 1px solid #cccccc;
background-color: $secondary;
border: 1px solid $primary_lighter;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px $primary_lightest;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
}
textarea:focus {
border-color: rgba(82, 168, 236, 0.8);
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary;
}
input {
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
border-color: rgba(82, 168, 236, 0.8);
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px $primary_lightest, 0 0 8px $tertiary;
}
}
@ -419,19 +418,19 @@ body {
select {
width: 220px;
border: 1px solid #bbbbbb;
border: 1px solid $primary_lighter;
&[multiple], &[size] {
height: auto;
}
&:focus {
outline: thin dotted #333333;
outline: thin dotted $primary;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
}
input {
&[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus {
outline: thin dotted #333333;
outline: thin dotted $primary;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -480,8 +479,8 @@ body {
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed;
background-color: #eeeeee;
border-color: #dddddd;
background-color: $primary_lightest;
border-color: $primary_light;
}
input {
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@ -491,66 +490,66 @@ body {
.control-group {
&.warning {
> label {
color: #c09853;
color: $highlight_danger;
}
.checkbox, .radio, input, select, textarea {
color: #c09853;
border-color: #c09853;
color: $highlight_danger;
border-color: $highlight_danger;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: #a47e3c;
box-shadow: 0 0 6px #dbc59e;
border-color: $highlight_danger_dark;
box-shadow: 0 0 6px $highlight_danger_light;
}
.input-prepend .add-on, .input-append .add-on {
color: #c09853;
background-color: #fcf8e3;
border-color: #c09853;
color: $highlight_danger;
background-color: $highlight_danger_light;
border-color: $highlight_danger;
}
}
&.error {
> label {
color: #b94a48;
color: $highlight_danger;
}
.checkbox, .radio, input, select, textarea {
color: #b94a48;
border-color: #b94a48;
color: $highlight_danger;
border-color: $highlight_danger;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: #953b39;
box-shadow: 0 0 6px #d59392;
border-color: $highlight_danger_dark;
box-shadow: 0 0 6px $highlight_danger_light;
}
.input-prepend .add-on, .input-append .add-on {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
color: $highlight_danger;
background-color: $highlight_danger_light;
border-color: $highlight_danger_dark;
}
}
&.success {
> label {
color: #468847;
color: $success;
}
.checkbox, .radio, input, select, textarea {
color: #468847;
border-color: #468847;
color: $success;
border-color: $success;
}
.checkbox:focus, .radio:focus, input:focus, select:focus, textarea:focus {
border-color: #356635;
box-shadow: 0 0 6px #7aba7b;
border-color: $success_dark;
box-shadow: 0 0 6px $success_light;
}
.input-prepend .add-on, .input-append .add-on {
color: #468847;
background-color: #dff0d8;
border-color: #468847;
color: $success;
background-color: $success_light;
border-color: $success;
}
}
}
input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
color: $highlight_danger;
border-color: $highlight_danger;
}
input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, select:focus:required:invalid:focus {
border-color: #e9322d;
box-shadow: 0 0 6px #f8b9b7;
border-color: $highlight_danger;
box-shadow: 0 0 6px $highlight_danger_light;
}
.input-prepend, .input-append {
@ -575,18 +574,18 @@ body {
font-weight: normal;
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 white;
text-shadow: 0 1px 0 $secondary;
vertical-align: middle;
background-color: #eeeeee;
border: 1px solid #cccccc;
background-color: $primary_lightest;
border: 1px solid $primary_light;
}
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
margin-left: -1px;
border-radius: 0;
}
.input-prepend .active, .input-append .active {
background-color: #a9dba9;
border-color: #46a546;
background-color: $success_light;
border-color: $success;
}
.input-prepend {
.add-on, .btn {
@ -669,8 +668,8 @@ body {
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
background-color: #fcf8e3;
border: 1px solid #fbeed5;
background-color: $highlight_danger_light;
border: 1px solid $highlight_danger_light;
color: #c09853;
}
.alert .close {
@ -680,19 +679,19 @@ body {
line-height: 18px;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
color: #468847;
background-color: $success_light;
border-color: $success_light;
color: $success_dark;
}
.alert-error {
background-color: #f2dede;
border-color: #eed3d7;
color: #b94a48;
background-color: $highlight_danger_light;
border-color: $highlight_danger_light;
color: $highlight_danger_dark;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #3a87ad;
background-color: $tertiary_lightest;
border-color: $tertiary_lightest;
color: $tertiary_dark;
}
.alert {
.close {
@ -700,12 +699,12 @@ body {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: black;
text-shadow: 0 1px 0 white;
color: $primary;
text-shadow: 0 1px 0 $secondary;
opacity: 0.2;
filter: alpha(opacity = 20);
@include hover {
color: black;
color: $primary;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
@ -723,7 +722,7 @@ body {
.bootbox.modal {
.modal-footer {
a.btn-primary {
color: white;
color: $secondary;
}
}
}

View File

@ -11,8 +11,8 @@
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 1px 5px rgba(70, 70, 70, .4);
background-color: $white;
box-shadow: 0 1px 5px $primary_lighter;
background-color: $secondary;
padding-right: 3px;
padding-top: 3px;
.docked & {
@ -46,7 +46,7 @@
.current-username {
float: left;
a {
color: $black;
color: $primary;
font-size: 14px;
line-height: 40px;
}
@ -66,14 +66,14 @@
&:first-child.active .icon {
}
&:last-child .icon {
border-right: 1px solid #ccc;
border-right: 1px solid $primary_lighter;
}
}
.icon {
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #d6d6d6;
border-top: 1px solid $primary_lighter;
border-bottom: 1px solid $primary_lighter;
border-left: 1px solid $primary_lighter;
padding: 3px;
color: $nav-button-color;
text-decoration: none;
@ -90,9 +90,9 @@
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $white;
background-color: $secondary;
cursor: default;
@include box-shadow((6px 0 6px -6px rgba($black, 0.2), -6px 0 6px -6px rgba($black, 0.2), inset 0 13px 13px -13px rgba($black, 0.1)));
@include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
&:after {
display: block;
position: absolute;
@ -102,7 +102,7 @@
width: 100%;
height: 0;
content: "";
border-top: 1px solid $white;
border-top: 1px solid $secondary;
}
}
[class^="fa fa-"] {
@ -123,15 +123,15 @@
}
.unread-notifications {
right: -4px;
background-color: #0088CC;
background-color: $tertiary;
}
.unread-private-messages {
left: -4px;
background-color: #00953A;
background-color: $success;
}
}
.flagged-posts {
background-color: #E53B2E;
background-color: $highlight_danger;
}
}
@ -155,9 +155,9 @@
right: 0;
z-index: 1100;
margin-top: -1px;
border: 1px solid #ccc;
background-color: $white;
@include box-shadow(0 3px 3px rgba($black, 0.2));
border: 1px solid $primary_lighter;
background-color: $secondary;
@include box-shadow(0 3px 3px $primary_lightest);
// Common
@ -174,15 +174,14 @@
}
}
.heading {
border-top: 1px solid #c5c5c5;
border-bottom: 1px solid #c5c5c5;
color: #2d3234;
border-bottom: 1px solid $primary_lighter;
color: $primary;
font-weight: bold;
font-size: 12px;
line-height: 15px;
text-shadow: 0 1px 0 $white;
background-color: #f5f6f7;
@include box-shadow(inset 0 1px 0 rgba($white, 0.8));
text-shadow: 0 1px 0 $secondary;
background-color: $secondary;
@include box-shadow(inset 0 1px 0 $primary_lighter);
}
.selected {
background-color: $header-item-highlight;
@ -192,13 +191,13 @@
&#notifications-dropdown {
.fa {
color: #777;
color: $primary_light;
}
li {
background-color: $header-item-highlight;
}
.read {
background-color: $white;
background-color: $secondary;
}
.none {
padding: 5px;
@ -213,7 +212,7 @@
margin: 5px;
padding: 5px;
&: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 $primary_lightest, 0 0 4px $primary_lighter));
}
}
.searching {
@ -221,7 +220,7 @@
position: absolute;
top: 13px;
right: 13px;
color: #777;
color: $primary_light;
font-size: 18px;
}
.no-results {

View File

@ -11,14 +11,14 @@
#revision-controls {
float: left;
.btn[disabled]:hover {
color: #534d4b;
color: $primary_medium;
}
}
#display-modes {
text-align: right;
}
#revision-details {
background-color: #eee;
background-color: $primary_lightest;
padding: 5px;
margin-top: 10px;
}
@ -53,63 +53,63 @@
}
ins, .diff-ins {
code, img {
border: 2px solid #405A04;
border: 2px solid $success_dark;
}
img {
opacity: .75;
filter: alpha(opacity=75);
}
a {
color: #2D4003;
color: $success_darker;
text-decoration: none;
}
}
img.diff-ins, code.diff-ins {
border: 2px solid #405A04;
border: 2px solid $success_darker;
}
img.diff-ins {
opacity: .75;
filter: alpha(opacity=75);
}
.diff-ins {
background: #f9ffe1;
background: $success_light;
}
ins {
color: #405A04;
background: #D1E1AD;
color: $success_dark;
background: $success_light;
}
del, .diff-del {
code, img {
border: 2px solid #A82400;
border: 2px solid $highlight_danger_dark;
}
img {
opacity: .5;
filter: alpha(opacity=50);
}
a {
color: #400E00;
color: $highlight_danger_darker;
text-decoration: none;
}
}
img.diff-del, code.diff-del {
border: 2px solid #A82400;
border: 2px solid $highlight_danger_dark;
}
img.diff-del {
opacity: .5;
filter: alpha(opacity=50);
}
.diff-del {
background: #fff4f4;
background: $highlight_danger_light;
}
del {
color: #A82400;
background: #E5BDB2;
color: $highlight_danger_dark;
background: $highlight_danger_light;
}
span.date {
font-weight: bold;
}
span.edit-reason {
background-color: #ffffcc;
background-color: $highlight_light;
padding: 3px 5px 5px 5px;
}
.modal-header {

View File

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

View File

@ -14,7 +14,7 @@
#login-form {
a {
color: $dark_gray;
color: $primary_medium;
cursor: pointer;
}
}
@ -52,7 +52,7 @@
tr.instructions {
label {
color: #888;
color: $primary_light;
}
}

View File

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

View File

@ -16,14 +16,14 @@ a.loading-onebox {
.onebox-result {
margin-top: 15px;
padding: 12px 25px 12px 12px;
border-left: 5px solid #bebebe;
background: #eee;
border-left: 5px solid $primary_light;
background: $primary_lightest;
font-size: 14px;
> .source {
margin-bottom: 12px;
margin-right: 10px;
display: block;
color: $black;
color: $primary;
position: relative;
height: 20px;
.info {
@ -92,13 +92,13 @@ a.loading-onebox {
aside.onebox {
margin-top: 15px;
padding: 12px 25px 12px 12px;
border-left: 5px solid #bebebe;
background: #eee;
border-left: 5px solid $primary_light;
background: $primary_lightest;
font-size: 14px;
header {
a[href] {
color: #333;
color: $primary;
text-decoration: none;
}
}
@ -117,12 +117,12 @@ aside.onebox {
}
a[href] {
color: #006699;
color: $tertiary_dark;
text-decoration: none;
}
a[href]:visited {
color: #4a6b82;
color: $tertiary_dark;
}
img {

View File

@ -1,5 +1,6 @@
// styles that apply to the PageDown editor
// http://code.google.com/p/pagedown/
@import "common/foundation/variables";
@import "common/foundation/mixins";
@ -28,7 +29,7 @@
height: 20px;
margin-right: 8px;
margin-left: 5px;
background-color: silver;
background-color: $primary_light;
display: inline-block;
float: left;
}
@ -65,7 +66,7 @@
}
.wmd-button:hover {
background-color: #99c0fa;
background-color: $primary_lighter;
}
@ -123,12 +124,12 @@
}
.wmd-prompt-background {
background-color: black;
background-color: $primary;
}
.wmd-prompt-dialog {
border: 1px solid #999999;
background-color: whitesmoke;
border: 1px solid $primary_lighter;
background-color: $primary_lightest;
}
.wmd-prompt-dialog > div {
@ -137,12 +138,12 @@
}
.wmd-prompt-dialog > form > input[type="text"] {
border: 1px solid #999999;
color: black;
border: 1px solid $primary_light;
color: $primary;
}
.wmd-prompt-dialog > form > input[type="button"] {
border: 1px solid #888888;
border: 1px solid $primary_light;
font-family: trebuchet MS, helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;

View File

@ -7,9 +7,9 @@
position: absolute;
left: 20px;
z-index: 990;
box-shadow: 0 2px 6px rgba(70, 70, 70, 0.4);
box-shadow: 0 2px 6px $primary_lightest;
margin-top: -2px;
background-color: $white;
background-color: $secondary;
padding: 12px 12px 5px 12px;
max-width: 350px;
@ -19,7 +19,7 @@
margin-bottom: 8px;
a {
color: #333;
color: $primary;
}
}
@ -30,7 +30,7 @@
margin-bottom: 5px;
a {
color: #333;
color: $primary;
}
}
@ -38,7 +38,7 @@
font-size: 13px;
font-weight: normal;
margin-top: 0px;
color: #666;
color: $primary_medium;
}
.bottom {
@ -57,7 +57,7 @@
p.loading {
margin-top: 30px;
color: #666;
color: $primary_medium;
}
.btn {
@ -65,6 +65,6 @@
}
.new-user a {
color: $dark_gray;
color: $primary_medium;
}
}

View File

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

View File

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

View File

@ -58,16 +58,16 @@
// --------------------------------------------------
#topic-list {
border: 1px solid #ddd;
border: 1px solid $primary_lighter;
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 0 0 10px;
a.title:visited:not(.badge-notification) {color: #888;}
a.title:visited:not(.badge-notification) {color: $primary_medium;}
> tbody > tr {
&:nth-child(even) {
background-color: #f8f8f8;
background-color: lighten($primary_lightest, 1%);
}
&.archived a {
opacity: 0.6;
@ -82,7 +82,7 @@
}
}
&.highlighted {
background-color: $highlight;
background-color: $highlight_light;
}
}
th,
@ -102,7 +102,7 @@
color: $topic-list-th-color;
font-weight: bold;
font-size: 13px;
background: #eee;
background: lighten($primary_lighter, 12%);
}
@ -116,7 +116,7 @@
padding: 0;
background: transparent;
&:hover {
color: #999;
color: $primary_light;
}
}
@ -135,7 +135,7 @@
font-size: 16px;
i.score {
color: green;
color: $success;
cursor: pointer;
}
}
@ -143,7 +143,7 @@
.topic-excerpt {
font-size: 14px;
margin-top: 8px;
color: $dark_gray;
color: $primary_medium;
word-break: break-word;
}
@ -202,7 +202,7 @@
.sortable {
cursor: pointer;
&:hover {
background-color: #e6e6e6;
background-color: lighten($primary_lighter, 7%);
}
@include unselectable;
}
@ -313,7 +313,7 @@
.featured-topic {
margin: 6px 0;
a.last-posted-at, a.last-posted-at:visited {
color: #888;
color: $primary_light;
}
}
@ -355,7 +355,7 @@
.category-list-item {
margin-bottom: 10px;
#topic-list tbody tr:nth-child(even) {
background-color: $white;
background-color: $secondary;
}
th .badge-category {
float: left;
@ -365,7 +365,7 @@
float: left;
}
> footer {
border: 1px solid #ddd;
border: 1px solid $primary_lighter;
border-top: 0;
padding: 7px 10px;
background-color: lighten($topic-list-th-background-color, 2%);
@ -375,7 +375,7 @@
color: lighten($topic-list-th-color, 5%);
font-weight: bold;
font-size: 12px;
text-shadow: 0 1px 0 $white;
text-shadow: 0 1px 0 $secondary;
}
figcaption {
display: inline;
@ -411,11 +411,11 @@
width: 200px;
margin: 0 auto;
padding: 10px 0 10px 43px;
color: $white;
color: $secondary;
font-size: 18px;
line-height: 25px;
background: {
color: $black;
color: $primary;
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
position: 10px 50%;
@ -429,8 +429,8 @@
.list-controls {
.home {
background-color: #eee;
color: #333;
background-color: $primary_lightest;
color: $primary;
}
.badge-category {
@ -440,7 +440,7 @@
float: left;
}
.category-dropdown-button {
border-left: 1px solid rgba(0, 0, 0, 0.15);
border-left: 1px solid rgba(0,0,0,0.15);
font-size: 16px;
width: 10px;
text-align: center;
@ -467,7 +467,7 @@
background-color: transparent;
padding: 0;
border: 0;
color: lighten($red, 10%);
color: lighten($highlight_danger, 10%);
font-size: 13px;
cursor: default;
}
@ -508,8 +508,8 @@ ol.category-breadcrumb {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
border: 1px solid #ccc;
background-color: white;
border: 1px solid $primary_lighter;
background-color: $secondary;
max-height: 350px;
padding: 8px 7px 0 7px;
z-index: 100;
@ -541,7 +541,7 @@ ol.category-breadcrumb {
position: fixed;
right: 20px;
padding: 5px;
background-color: white;
background-color: $secondary;
button {
padding: 3px 0 3px 6px;
}

View File

@ -3,16 +3,16 @@
@import "common/foundation/helpers";
.gap {
background-color: #f9f9f9;
background-color: $primary_lightest;
padding: 5px 10px;
margin-bottom: 10px;
color: #999;
color: $primary_medium;
cursor: pointer;
text-align: center;
width: 820px;
&:hover {
background-color: #eee;
background-color: $primary_lightest;
}
@include medium-width {
@ -42,9 +42,6 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
border-top: none;
}
&:last-of-type {
border-bottom: 1px solid #ddd;
}
.reply-to-tab {
display: block;
@ -52,10 +49,10 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
left: 120px;
z-index: 400;
padding: 5px 12px;
border: 1px solid #ddd;
border: 1px solid lighten($primary_light, 20%);
font-size: 12px;
margin-left: -8px;
background: #fff;
background: $secondary;
}
.avoid-tab {
@ -67,8 +64,8 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
.reply-new {
.discourse-no-touch & {
opacity:0;
transition: linear 0.15s;
-webkit-transition: linear 0.15s;
transition: linear 0.4s;
-webkit-transition: linear 0.4s;
}
.discourse-touch & {opacity: 1;}
}
@ -77,8 +74,8 @@ h1 .topic-statuses .topic-status i {margin-right: 5px;}
section.post-menu-area, .post-actions {
.discourse-no-touch & {
opacity: 0.2;
transition: linear 0.15s;
-webkit-transition: linear 0.15s;
transition: linear 0.4s;
-webkit-transition: linear 0.4s;
}
.discourse-touch & {opacity: 1;}
}
@ -98,13 +95,13 @@ section.post-menu-area, .post-actions {
nav.post-controls {
padding: 0;
button {color: #aaa;
button {color: $primary_light;
margin-right: 2px;
}
span.badge-posts {
margin-right: 5px;
color: #aaa;
color: $primary_light;
}
.show-replies {
@ -121,18 +118,18 @@ nav.post-controls {
button.create {
margin-right: 0;
color: darken(#e4f2f8, 35%);
background: #e4f2f8;
color: $tertiary;
background: $tertiary_lightest;
padding: 8px 20px;
margin-left: 10px;
&:hover { color: darken(#e4f2f8, 45%);
background: darken(#e4f2f8, 10%);
&:hover { color: $secondary;
background: $tertiary;
}
&:active {
@include linear-gradient(darken(#e4f2f8, 15%), darken(#e4f2f8, 10%));
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
background: $tertiary_lightest;
@include box-shadow(inset 0 1px 3px $primary_light);
}
@ -152,12 +149,12 @@ nav.post-controls {
transition: all linear 0.15s;
outline: none;
&:hover {
background: #eee;
color: #888;
background: lighten($primary_light, 20%);
color: $primary_medium;
}
&:active {
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
@include box-shadow(inset 0 1px 3px $primary_lightest);
}
&.hidden {
@ -168,12 +165,12 @@ nav.post-controls {
}
&.delete:hover {
background: #E53B2E;
color: #fff;
background: $highlight_danger;
color: $secondary;
}
&.like:hover {color: #fa6c8d;
background: #fae9ed;
&.like:hover {color: $heart;
background: $heart_light;
}
&.bookmark {padding: 8px 11px; }
@ -189,11 +186,11 @@ nav.post-controls {
}
}
&.last-read {
color: #e45735;
color: $highlight_danger;
}
&.bookmarked {
&:before {
color: $bookmarkColor;
color: $tertiary;
}
}
}
@ -201,14 +198,14 @@ nav.post-controls {
}
.embedded-posts {
background: #eee;
.quote .title {background: #ddd;}
blockquote {background: #ddd;}
background: $primary_lightest;
.quote .title {background: $primary_lighter;}
blockquote {background: $primary_lighter;}
&.bottom { margin-top: -11px;}
.topic-meta-data h5 {margin: 5px;}
.topic-meta-data-inside {
margin: -3px 0 0 0;
color: #aaa;
color: $primary_light;
}
.topic-meta-data {padding-top: 20px;}
}
@ -231,9 +228,11 @@ a.star {
.topic-map {
margin: 20px 0 0 0;
border: 1px solid #ddd;
border: 1px solid lighten($primary_lighter, 10%);
button {border-radius: 0;}
.buttons .btn {border: 1px solid $primary_lightest !important;
&:hover {border: 1px solid $primary_lighter !important;}
}
.topic-links li {
word-wrap: break-word;
@ -241,13 +240,13 @@ a.star {
h3 {
margin-bottom: 4px;
color: #323232;
color: $primary;
line-height: 23px;
}
h4 {
margin: 0 0 3px 0;
color: #6c7376;
color: $primary_medium;
font-weight: normal;
font-size: 12px;
line-height: 15px;
@ -298,7 +297,7 @@ a.star {
line-height: 20px;
}
.number {
color: #445a62;
color: $tertiary_dark;
}
.avatar + a {
float: left;
@ -308,10 +307,10 @@ a.star {
.links,
.information {
padding: 7px 14px;
color: #000;
color: $primary;
}
.information {
border-top: 1px solid #d1d1d2;
border-top: 1px solid $primary_light;
}
@ -331,20 +330,20 @@ a.star {
float: right;
.btn {
border: 0;
border-bottom: 1px solid #ddd;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid $primary_lighter;
border-left: 1px solid $primary_lighter;
padding: 0 23px;
color: #444;
background: #eee;
color: $primary;
background: $primary_lightest;
&:hover {
background: #ccc;
background: $primary_lighter;
color: #444;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid $primary_lighter;
}
&:active {
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
@include box-shadow(inset 0 1px 3px $primary_lightest);
}
&.collapsed {
@ -364,7 +363,7 @@ a.star {
padding: 10px 10px 0 10px;
p {
line-height: 32px;
color: #888;
color: $primary_light;
}
}
@ -373,12 +372,12 @@ a.star {
clear: left;
padding: 20px 10px 15px 10px;
.topics table tbody tr {background: #fff;}
.topics table tbody tr {background: $secondary;}
table {
box-shadow: none;
border-radius: 0;
border-color: #ddd;
border-color: $primary_lighter;
margin-top: 10px;
}
@ -388,8 +387,8 @@ a.star {
}
span.post-count {
background: #000;
color: #fff;
background: $primary;
color: $secondary;
opacity: .8;
}
@ -405,13 +404,13 @@ span.post-count {
.quote-button {
display: none;
position: absolute;
background-color: #666;
color: #fff;
background-color: $primary_medium;
color: $secondary;
padding: 10px;
z-index: 401;
&:hover {
background-color: #999;
background-color: $primary_light;
cursor: pointer;
}
}
@ -454,7 +453,7 @@ iframe {
.topic-meta-data {
margin-bottom: 10px;
width: 92px;
border-top: 1px solid #ddd;
border-top: 1px solid lighten($primary_lighter, 10%);
padding-top: 30px;
img {
@ -520,8 +519,8 @@ iframe {
a.mention {
padding: 2px 4px;
color: #666;
background: #eee;
color: $primary;
background: $primary_lightest;
}
@ -533,7 +532,7 @@ iframe {
.deleted {
.topic-body {
background-color: lighten(red, 45%);
background-color: $highlight_danger_light;
}
}
@ -543,7 +542,7 @@ iframe {
.moderator {
.topic-body {
background-color: lighten(yellow, 45%);
background-color: $highlight_light;
}
}
@ -594,13 +593,13 @@ iframe {
}
.new-user a {
color: $dark_gray;
color: $primary_medium;
}
.staff a {
padding: 2px;
margin: -2px 0 0 0;
background-color: lighten(yellow, 35%);
background-color: $highlight_light;
}
.topic-meta-data {
@ -617,7 +616,7 @@ position: relative;
.user-title {
margin-top: 8px;
color: #aaa;
color: $primary_light;
overflow: hidden;
font-size: 80%;
line-height: 13px;
@ -625,7 +624,7 @@ position: relative;
.info-line {
margin: 10px 0;
color: #666;
color: $primary_medium;
}
@ -633,7 +632,7 @@ blockquote { /* solo quotes */
margin: 14px 0;
padding: 12px;
a.mention {background: #ddd;}
a.mention {background: $primary_lighter;}
p:first-of-type {margin-top: 0;}
p:last-of-type {margin-bottom: 0;}
}
@ -641,14 +640,14 @@ blockquote { /* solo quotes */
.quote { /* quotes with attribution */
margin-top: 14px;
blockquote {margin-top: 0; padding-top: 0;
.onebox-result {background-color: #ddd;}
.onebox-result {background-color: $primary_lighter;}
}
.title {
border-left: 5px solid #bebebe;
background-color: #f1f1f1;
border-left: 5px solid $primary_lighter;
background-color: $primary_lightest;
padding: 12px;
.avatar { margin-right: 7px; }
img {margin-top: -4px;}
@ -661,7 +660,7 @@ blockquote { /* solo quotes */
.quote-controls {
float: right;
color: #aaa;
color: $primary_light;
a {
margin: 0;
}
@ -669,7 +668,7 @@ blockquote { /* solo quotes */
.quote-other-topic:before {
display: inline-block;
margin-left: 8px;
color: #aaa;
color: $primary_light;
font-family: "FontAwesome";
position: relative;
z-index: 20;
@ -707,19 +706,19 @@ blockquote { /* solo quotes */
margin-bottom: 20px;
margin-top: 2px;
}
a {color: #aaa;}
a {color: $primary_light;}
li {margin-bottom: 10px;}
}
}
.topic-body {
border-top: 1px solid #ddd;
border-top: 1px solid lighten($primary_lighter, 10%);
float: left;
position: relative;
width: 720px;
padding: 10px 10px 15px 20px;
.highlighted {
background-color: lighten(yellow, 45%) !important;
background-color: $highlight_light !important;
}
img, svg {
max-width: 100%;
@ -763,27 +762,27 @@ blockquote { /* solo quotes */
&.bottom .arrow {float: right; margin: 0 0 0 0;}
&.top {margin-left: 112px;}
.topic-body, .topic-meta-data {border: none;}
.row {border-top: 1px solid #ddd; padding-top: 7px;}
.row {border-top: 1px solid $primary_lighter; padding-top: 7px;}
.reply:first-of-type .row {border-top: none;}
}
.contents.regular {
button.show-replies {
background: #eee;
background: $primary_lightest;
padding-bottom: 20px;
&:hover {background: #ddd;
.badge-posts {color: #888;}
&:hover {background: $primary_lighter;
.badge-posts {color: $primary_medium;}
}
}
&.bottom-round button.show-replies {
background: #eee;
background: $primary_lightest;
margin-bottom: 0;
padding-bottom: 8px;
&:hover {background: #ddd;
.badge-posts {color: #888;}
&:hover {background: $primary_lighter;
.badge-posts {color: $primary_medium;}
}
}
@ -809,7 +808,7 @@ button.show-replies {
width: 0;
height: 0;
vertical-align: middle;
border-top: 4px solid #000000;
border-top: 4px solid $primary;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content: "";
@ -826,9 +825,9 @@ button.show-replies {
padding: 4px 0;
margin: 1px 0 0;
list-style: none;
background-color: #ffffff;
border: 1px solid #ddd;
box-shadow: 0 1px 5px rgba(70, 70, 70, .4);
background-color: $secondary;
border: 1px solid $primary_light;
box-shadow: 0 1px 5px $primary_lightest;
background-clip: padding-box;
span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;}
@ -839,14 +838,14 @@ button.show-replies {
clear: both;
font-weight: normal;
line-height: 18px;
color: #333333;
color: $primary;
}
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
color: $secondary;
text-decoration: none;
background-color: #0088cc;
background-color: $tertiary;
}
.open {
*z-index: 1000;
@ -871,8 +870,8 @@ clear: both;
position: fixed;
z-index: 1000;
left: 50%;
background-color: lighten($blue, 52%);
border: 1px solid lighten($blue, 40%);
background-color: $tertiary_lightest;
border: 1px solid $tertiary_light;
padding: 5px;
margin-bottom: 5px;
@ -900,7 +899,7 @@ clear: both;
}
h3 {
font-size: 25px;
color: $black;
color: $primary;
margin-bottom: 5px;
i {
margin-right: 7px;
@ -908,29 +907,29 @@ clear: both;
}
.btn {
border: none;
color: $white;
color: $secondary;
font-weight: normal;
color: #fff;
color: $secondary;
background: $btn-primary-background-color;
&[href] {
color: $white;
color: $secondary;
}
&:hover
{
color: #fff;
color: $secondary;
background: darken($btn-primary-background-color, 12%);
}
&:active {
@include linear-gradient(darken($btn-primary-background-color, 18%), darken($btn-primary-background-color, 12%));
@include box-shadow(inset 0 1px 3px rgba($black, 0.2));
color: #fff;
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
color: $secondary;
}
&[disabled] {
text-shadow: 0 1px 0 rgba($black, 0.2);
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($btn-primary-background-color, $btn-primary-background-color-dark);
@include box-shadow((inset 0 1px 0 rgba($white, 0.33), inset 0 -1px 2px rgba($black, 0.2)));
@include box-shadow((inset 0 1px 0 rgba($secondary, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
}
}
}
@ -939,8 +938,8 @@ clear: both;
article.boxed {
.select-posts {
button.select-post {
background-color: $blue;
color: $white;
background-color: $tertiary;
color: $secondary;
}
}
.topic-body {
@ -963,12 +962,12 @@ clear: both;
top: 4px;
button {
background-color: #ddd;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
color: #999;
background-color: $primary_lighter;
border-top: 1px solid $secondary;
border-left: 1px solid $secondary;
border-bottom: 1px solid $primary_light;
border-right: 1px solid $primary_light;
color: $primary_light;
}
}
@ -992,7 +991,7 @@ a.attachment:before {
position: absolute;
top: 0;
left: 10px;
color: rgba(0,0,0,0.05);
color: $primary_lightest;
font: 90px/1 FontAwesome;
content: "\f05c";
z-index: -5;

View File

@ -1,7 +1,7 @@
@import "common/foundation/variables";
@import "common/foundation/mixins";
.post-info a {color: #aaa;}
.post-info a {color: $primary_light;}
.topic-meta-data-inside {
float: right;
@ -67,6 +67,7 @@
}
#topic-closing-info {
border-top: 1px solid $primary_lighter;
margin-left: 10px;
margin-top: 10px;
height: 20px;
@ -85,8 +86,8 @@
i {
font-size: 12px;
margin-right: 5px;
background: #fff;
border: 1px solid #ddd;
background: $secondary;
border: 1px solid $primary_lighter;
padding: 2px 4px;
border-radius: 20px;
transition: linear 0.15s;
@ -96,12 +97,12 @@
a.reply-new {
position: absolute;
color: #aaa;
color: $primary_medium;
margin-top: -2px;}
a:hover.reply-new {
color: #56aed3;
i {background: #e4f2f8;
border: 1px solid #56aed3;
color: $tertiary;
i {background: $tertiary_lightest;
border: 1px solid $tertiary;
padding: 2px 4px;
}
}
@ -113,8 +114,8 @@ a:hover.reply-new {
display: none;
}
border: none;
background-color: #ddd;
color: #666;
background-color: lighten($primary_lighter, 9%);
color: $primary_medium;
width: 130px;
height: 34px;
@ -134,7 +135,7 @@ a:hover.reply-new {
left: 4px;
border: 0;
background: none;
color: #666;
color: $primary_medium;
width: 50%;
text-align: left;
height: 30px;
@ -149,7 +150,7 @@ a:hover.reply-new {
}
&:disabled {
cursor: default;
color: #666;
color: $primary_medium;
}
}
h4 {
@ -162,10 +163,10 @@ a:hover.reply-new {
top: 0px;
bottom: 0px;
width: 0px;
border-right: 1px solid #ccc;
border-right: 1px solid lighten($primary_lighter, 7%);
// background-color: #d4eaf4;
// background-color: #C5E8F7;
background-color: #C6F3B6;
background-color: $success_light;
transition: width .75s;
}
}
@ -199,7 +200,7 @@ a:hover.reply-new {
#topic-filter {
background-color: #ffe;
background-color: $highlight_light;
padding: 8px;
bottom: 0;
position: fixed;
@ -226,7 +227,7 @@ sup{top:-0.5em; }
sub{bottom:-0.25em; }
figure{margin:0; }
fieldset{
border:1px solid #c0c0c0;
border:1px solid $primary_light;
margin:0 2px;
padding:0.35em 0.625em 0.75em;
}
@ -237,11 +238,11 @@ legend{
kbd
{
background-color: #fff;
border:1px solid #ddd;
background-color: $secondary;
border:1px solid $primary_lighter;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
color: #333;
box-shadow: 0 1px 0 $primary_lightest;
color: $primary;
display: inline-block;
font-size: 12px;
line-height: 1.4;

View File

@ -6,7 +6,8 @@
position: relative;
left: -5px;
bottom: -5px;
text-shadow: -1px -1px 0 $btn-primary-background-color,
text-shadow:
-1px -1px 0 $btn-primary-background-color,
1px 1px 0 $btn-primary-background-color,
1px -1px 0 $btn-primary-background-color,
-1px 1px 0 $btn-primary-background-color;

View File

@ -36,13 +36,13 @@
}
.static {
color: $black;
color: $primary;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.instructions {
color: $dark_gray;
color: $primary_medium;
margin-left: 160px;
margin-top: 5px;
margin-bottom: 10px;
@ -51,12 +51,12 @@
margin-left: 3px;
}
.instructions a[href] {
color: $darkish_gray;
color: $primary_medium;
}
.warning {
background-color: lighten($red, 10%);
background-color: lighten($highlight_danger, 10%);
padding: 5px 8px;
color: $white;
color: $secondary;
width: 520px;
}
@ -74,7 +74,7 @@
float: left;
h3 {
color: #666;
color: $primary_light;
margin: 20px 0 10px 0;
}
@ -97,7 +97,7 @@
h2 {
a {
font-size: 14px;
color: #999999;
color: $primary_light;
cursor: pointer;
}
}
@ -130,15 +130,15 @@
}
span.last-seen-at {
float: right;
color: #999;
color: $primary_light;
}
}
}
.user-content {
padding: 10px 8px;
background-color: white;
border: 1px solid #ddd;
background-color: $secondary;
border: 1px solid $primary_lighter;
margin-bottom: 10px;
.btn.right {
@ -155,22 +155,22 @@
th {
text-align: left;
border-bottom: 1px solid #aaa;
border-bottom: 1px solid $primary_light;
padding: 5px;
}
td {
padding: 5px;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $primary_lighter;
}
}
}
.about {
background-color: #444;
background-color: $primary;
margin-bottom: 10px;
overflow: hidden;
color: #fff;
color: $secondary;
.details {
@ -190,17 +190,17 @@
}
a[href] {
color: #fff;
color: $secondary;
}
img.avatar {
border: 3px solid #eee;
border: 3px solid $primary_lightest;
margin-bottom: 4px;
background-color: white;
background-color: $secondary;
}
.suspended {
color: #f77;
color: $highlight_danger_light;
}
.primary {
@ -211,13 +211,13 @@
h1, h2 {margin-top: 10px;}
.group-link {
color: #aae;
color: $tertiary_lightest;
}
.bio {
color: #ddd;
color: $primary_lighter;
a[href] {
color: #aae;
color: $tertiary_light;
}
}
@ -225,26 +225,26 @@
.secondary {
float: right;
background-color: #222;
background-color: lighten($primary, 10%);
text-align: right;
padding: 0 10px;
width: 20%;
dd {
color: white;
color: $secondary;
margin: 0 0 7px 0;
overflow: hidden;
text-overflow: ellipsis;
}
dt {
color: #aaa;
color: $primary_lighter;
margin: 0;
}
}
}
.controls {
background-color: #ddd;
background-color: $primary_lighter;
padding: 12px;
height: 30px;
@ -272,7 +272,7 @@
.avatar {
float: left;
margin-right: 10px;
border: 2px solid white;
border: 2px solid $secondary;
width: 45px;
height: 45px;
}
@ -296,14 +296,14 @@
margin: 5px 0px;
font-size: 13px;
word-wrap: break-word;
color: lighten($black, 30%);
color: lighten($primary, 30%);
}
.item.moderator-action {
background-color: #eef0ff;
background-color: $tertiary_lightest;
}
.item.deleted {
opacity: 0.8;
background-color: #ffcece;
background-color: $highlight_danger_light;
}
.item.hidden {
display: block;
@ -311,20 +311,20 @@
}
.item {
padding: 10px 8px;
background-color: white;
border: 1px solid #ddd;
background-color: $secondary;
border-bottom: 1px solid lighten($primary_lighter, 10%);
margin-bottom: 10px;
}
.type {
color: lighten($black, 40%);
color: lighten($primary, 40%);
}
span.name {
color: lighten($black, 40%);
color: lighten($primary, 40%);
}
.time {
display: block;
float: right;
color: silver;
color: $primary_light;
margin-right: 8px;
font-size: 11px;
}
@ -338,7 +338,7 @@
font-size: 14px;
}
.edit-reason {
background-color: #ffffcc;
background-color: $highlight_light;
padding: 3px 5px 5px 5px;
}
}
@ -353,7 +353,7 @@
.fa {
width: 15px;
display: inline-block;
color: #777;
color: $primary_medium;
}
.avatar-wrapper {
border: none;

View File

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

View File

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

View File

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

View File

@ -7,7 +7,7 @@
@import "../common/foundation/helpers";
body {
background-color: #fff;
background-color: $secondary;
}
.container {
@ -32,38 +32,38 @@ header {
body {
button.ok {
@include linear-gradient(lighten($green, 5%), $green);
color: $white;
@include linear-gradient(lighten($success, 5%), $success);
color: $secondary;
@include hover {
@include linear-gradient(lighten($green, 10%), $green);
color: $white;
@include linear-gradient(lighten($success, 10%), $success);
color: $secondary;
}
}
button.cancel {
@include linear-gradient(lighten($red, 5%), $red);
color: $white;
@include linear-gradient(lighten($highlight_danger, 5%), $highlight_danger);
color: $secondary;
@include hover {
@include linear-gradient(lighten($red, 10%), $red);
color: $white;
@include linear-gradient(lighten($highlight_danger, 10%), $highlight_danger);
color: $secondary;
}
}
.coldmap-high {
color: lighten($blue, 20%) !important;
color: lighten($tertiary, 20%) !important;
}
.coldmap-med {
color: lighten($blue, 10%) !important;
color: lighten($tertiary, 10%) !important;
}
.coldmap-low {
color: $blue !important;
color: $tertiary !important;
}
.heatmap-high {
color: lighten($red, 50%) !important;
color: lighten($highlight_danger, 50%) !important;
}
.heatmap-med {
color: lighten($red, 10%) !important;
color: lighten($highlight_danger, 10%) !important;
}
.heatmap-low {
color: $red !important;
color: $highlight_danger !important;
}
#loading-message {
position: absolute;
@ -71,7 +71,7 @@ body {
text-align: center;
top: 120px;
left: 500px;
color: $darkish_gray;
color: $primary_medium;
}
.top-space {
margin-top: 10px;
@ -86,18 +86,18 @@ body {
padding: 10px 10px 10px 10px;
}
&.white {
background-color: $white;
background-color: $secondary;
}
}
#main {
.fa-star.starred {
color: #fe1;
color: $highlight;
}
a.star {
display: inline-block;
font-size: 15px;
line-height: 1;
color: #cacaca;
color: $primary_light;
&:before {
font-family: "FontAwesome";
content: "\f005";
@ -146,7 +146,7 @@ body {
}
.message {
@include border-radius-all(8px);
background-color: $white;
background-color: $secondary;
padding: 14px;
h2 {
margin-bottom: 20px;
@ -156,13 +156,12 @@ body {
}
}
#footer {
background-color: $eggplant;
.container {
height: 50px;
.contents {
padding-top: 10px;
a[href] {
color: $white;
color: $secondary;
}
}
}
@ -172,14 +171,14 @@ body {
}
.grippie {
width: 100%;
border: 1px solid #dddddd;
border: 1px solid $primary_lighter;
border-width: 1px 0px;
cursor: row-resize;
height: 11px;
overflow: hidden;
background-color: #eeeeee;
background-color: $primary_lightest;
display:block {}
background: image-url("grippie.png") #eeeeee no-repeat center 3px;
background: image-url("grippie.png") $primary_lightest no-repeat center 3px;
}
}
@ -187,10 +186,10 @@ form {
.tip {
display: inline-block;
&.good {
color: $green;
color: $success;
}
&.bad {
color: $red;
color: $highlight_danger;
}
}
}
@ -215,7 +214,7 @@ blockquote {
display: inline-block;
i {
font-size: 15px;
color: darken($white, 60%);
color: darken($secondary, 60%);
}
}
}
@ -226,12 +225,12 @@ blockquote {
#pagedown-editor {
width: 540px;
background-color: $white;
background-color: $secondary;
padding: 0 10px 13px 10px;
border: 1px solid $gray;
border: 1px solid $primary_light;
.preview {
margin-top: 8px;
border: 1px dashed $gray;
border: 1px dashed $primary_light;
padding: 8px 8px 0 8px;
p {
margin: 0 0 10px 0;
@ -245,13 +244,13 @@ blockquote {
.spinner {
width: 100px;
margin: 0 auto 30px auto;
background-color: $black;
background-color: $primary;
@include border-radius-all(10px);
padding: 10px 10px 10px 30px;
font-size: 15px;
line-height: 23px;
text-align: center;
color: $white;
color: $secondary;
background: {
image: image-url("spinner_96_w.gif");
repeat: no-repeat;
@ -265,9 +264,9 @@ blockquote {
}
.avatar-wrapper {
background-color: white;
background-color: $secondary;
display: inline-block;
border: 1px solid #82786b;
border: 1px solid $primary_light;
@include border-radius-all(5px);
img {
@include border-radius-all(4px);

View File

@ -12,8 +12,8 @@
position: absolute;
top: 0;
z-index: 1001;
background-color: #fff;
box-shadow: 0 0 3px #aaa;
background-color: $secondary;
box-shadow: 0 0 3px $primary_lighter;
.docked & {
position: fixed;
@ -49,7 +49,7 @@
float: left;
display: none;
a {
color: $black;
color: $primary;
font-size: 14px;
line-height: 40px;
}
@ -69,14 +69,14 @@
&:first-child.active .icon {
}
&:last-child .icon {
border-right: 1px solid #ccc;
border-right: 1px solid $primary_lighter;
}
}
.icon {
display: block;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #d6d6d6;
border-top: 1px solid $primary_lighter;
border-bottom: 1px solid $primary_lighter;
border-left: 1px solid $primary_light;
padding: 3px;
color: $nav-button-color;
text-decoration: none;
@ -92,10 +92,10 @@
}
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $white;
color: $primary_light;
background-color: $secondary;
cursor: default;
@include box-shadow((6px 0 6px -6px rgba($black, 0.2), -6px 0 6px -6px rgba($black, 0.2), inset 0 13px 13px -13px rgba($black, 0.1)));
@include box-shadow((6px 0 6px -6px rgba($primary, 0.2), -6px 0 6px -6px rgba($primary, 0.2), inset 0 13px 13px -13px rgba($primary, 0.1)));
&:after {
display: block;
position: absolute;
@ -105,7 +105,7 @@
width: 100%;
height: 0;
content: "";
border-top: 1px solid $white;
border-top: 1px solid $secondary;
}
}
[class^="fa fa-"] {
@ -126,15 +126,15 @@
}
.unread-notifications {
right: -4px;
background-color: #0088CC;
background-color: $tertiary;
}
.unread-private-messages {
left: -4px;
background-color: #00953A;
background-color: $success_dark;
}
}
.flagged-posts {
background-color: #E53B2E;
background-color: $highlight_danger;
}
}
@ -158,9 +158,9 @@
right: 0;
z-index: 1100;
margin-top: -1px;
border: 1px solid #ccc;
background-color: $white;
@include box-shadow(0 1px 1px rgba($black, 0.2));
border: 1px solid $primary_lighter;
background-color: $secondary;
@include box-shadow(0 1px 1px rgba($primary, 0.2));
// Common
@ -177,7 +177,7 @@
}
}
.heading {
color: #2d3234;
color: $tertiary_dark;
font-weight: bold;
font-size: 12px;
line-height: 15px;
@ -198,7 +198,7 @@
background-color: $header-item-highlight;
}
.read {
background-color: $white;
background-color: $secondary;
}
.none {
padding: 5px;

View File

@ -11,7 +11,7 @@
#revision-controls {
float: left;
.btn[disabled]:hover {
color: #534d4b;
color: $primary;
}
}
#display-modes {
@ -21,7 +21,7 @@
}
}
#revision-details {
background-color: #eee;
background-color: $primary_lightest;
padding: 5px;
margin-top: 10px;
}
@ -56,63 +56,63 @@
}
ins, .diff-ins {
code, img {
border: 2px solid #405A04;
border: 2px solid $success_dark;
}
img {
opacity: .75;
filter: alpha(opacity=75);
}
a {
color: #2D4003;
color: $success_dark;
text-decoration: none;
}
}
img.diff-ins, code.diff-ins {
border: 2px solid #405A04;
border: 2px solid $success_dark;
}
img.diff-ins {
opacity: .75;
filter: alpha(opacity=75);
}
.diff-ins {
background: #f9ffe1;
background: $success_light;
}
ins {
color: #405A04;
background: #D1E1AD;
color: $success_dark;
background: $success_light;
}
del, .diff-del {
code, img {
border: 2px solid #A82400;
border: 2px solid $highlight_danger_dark;
}
img {
opacity: .5;
filter: alpha(opacity=50);
}
a {
color: #400E00;
color: $highlight_danger_dark;
text-decoration: none;
}
}
img.diff-del, code.diff-del {
border: 2px solid #A82400;
border: 2px solid $highlight_danger;
}
img.diff-del {
opacity: .5;
filter: alpha(opacity=50);
}
.diff-del {
background: #fff4f4;
background: $highlight_danger_light;
}
del {
color: #A82400;
background: #E5BDB2;
color: $highlight_danger_dark;
background: $highlight_danger_light;
}
span.date {
font-weight: bold;
}
span.edit-reason {
background-color: #ffffcc;
background-color: $highlight;
padding: 3px 5px 5px 5px;
}
.modal-header {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,15 +1,15 @@
@import "common/foundation/variables";
.gap {
background-color: #f9f9f9;
background-color: $primary_lightest;
padding: 5px 15px;
color: #999;
color: $primary_lighter;
text-align: center;
margin: 0 10px;
}
.topic-post {
border-top: 1px solid #ddd;
border-top: 1px solid $primary_lighter;
padding: 6px 0 3px 0;
&:first-of-type {
border-top: none;
@ -17,11 +17,11 @@
}
nav.post-controls {
background-color: #fff;
background-color: $secondary;
padding: 0px;
border-right: 1px solid #ddd;
border-right: 1px solid $primary_lighter;
margin-top: 10px;
button {color: #aaa;
button {color: $primary_lighter;
border-radius: 4px;
margin-right: 2px;
@ -43,13 +43,13 @@ span.badge-posts {
button.create {
float: right !important;
border: 1px solid #888;
border: 1px solid $primary_light;
margin-right: 0;
color: #888;
color: $primary_light;
padding-right: 7px;
}
.like {
border-right: 1px solid #ddd;
border-right: 1px solid $primary_lighter;
}
.create i {
@ -63,10 +63,10 @@ button {
padding: 8px 10px;
vertical-align: top;
background: transparent;
border: 1px solid #ddd;
border: 1px solid $primary_lighter;
float: left !important;
&:last-of-type {
border-right: 1px solid #ddd;
border-right: 1px solid $primary_lighter;
}
&:hover {
}
@ -89,7 +89,7 @@ button {
}
}
&.last-read {
color: $red;
color: $highlight_danger;
}
&.bookmarked {
&:before {
@ -146,17 +146,17 @@ a.star {
border-radius: 5px;
margin: 15px 10px 20px 10px;
border: 1px solid #ddd;
border: 1px solid $primary_lighter;
h3 {
margin-bottom: 4px;
color: #323232;
color: $primary;
line-height: 23px;
}
h4 {
margin: 0 0 3px 0;
color: #6c7376;
color: $primary_medium;
font-weight: normal;
font-size: 12px;
line-height: 15px;
@ -213,7 +213,7 @@ a.star {
line-height: 20px;
}
.number {
color: #445a62;
color: $tertiary_dark;
}
.avatar + a {
float: left;
@ -223,11 +223,11 @@ a.star {
.links,
.information {
padding: 7px 14px;
color: #000;
color: $primary;
}
.information {
border-top: 1px solid #d1d1d2;
border-top: 1px solid $primary_lighter;
}
.topic-links {
.badge-notification {
@ -238,15 +238,15 @@ a.star {
float: right;
.btn {
border: 0;
border-bottom: 1px solid #ddd;
border-left: 1px solid #e6e6e6;
border-bottom: 1px solid $primary_lighter;
border-left: 1px solid $primary_lightest;
padding: 0 23px;
color: #444;
background: #ddd;
color: $primary;
background: $primary_lighter;
&:hover {
background: #ccc;
color: #444;
border-bottom: 1px solid #ccc;
background: $primary_lighter;
color: $primary;
border-bottom: 1px solid $primary_lighter;
}
&.collapsed {
@ -261,7 +261,7 @@ a.star {
}
#topic-footer-buttons {
border-top: 1px solid #ddd;
border-top: 1px solid $primary_lighter;
padding: 20px 10px 0 10px;
}
@ -285,8 +285,8 @@ a.star {
span.post-count {
background: #000;
color: #fff;
background: $primary;
color: $secondary;
opacity: .8;
}
@ -301,7 +301,7 @@ span.post-count {
#topic-title {
z-index: 1000;
background: #eee;
background: $primary_lightest;
margin: 0 0 0 0 !important;
padding: 15px 10px 15px 10px;
}
@ -312,20 +312,20 @@ span.post-count {
height: auto;
}
&.moderator {
background-color: #eef0ff;
background-color: $tertiary_lightest;
}
}
.quote-button {
display: none;
position: absolute;
background-color: #666;
color: #fff;
background-color: $primary_medium;
color: $secondary;
padding: 10px;
width: 90px;
&:hover {
background-color: #999;
background-color: $primary_light;
cursor: pointer;
}
}
@ -410,11 +410,11 @@ iframe {
}
.deleted {
background-color: lighten(red, 45%);
background-color: $highlight_danger_light;
}
#show-topic-admin {
color: #7b7b7b;
color: $primary_medium;
right: 0px;
border-right: 0;
padding-right: 4px;
@ -434,7 +434,7 @@ iframe {
}
.new-user a {
color: $dark_gray;
color: $primary_medium;
}
.topic-meta-data {
@ -459,7 +459,7 @@ blockquote {
.quote-controls {
float: right;
color: #323232;
color: $primary;
a {
margin: 0;
}
@ -467,7 +467,7 @@ blockquote {
.quote-other-topic:before {
display: inline-block;
margin-left: 8px;
color: #323232;
color: $primary;
font-family: "FontAwesome";
position: relative;
z-index: 20;
@ -482,8 +482,8 @@ blockquote {
.quote .title {
border-left: 5px solid #bebebe;
background-color: #f1f1f1;
border-left: 5px solid $primary_light;
background-color: $primary_lightest;
padding: 10px 10px 0 12px;
clear: both;
.avatar { margin-right: 7px; }

View File

@ -1,3 +1,4 @@
@import "common/foundation/variables";
.topic-meta-data {
width: 100%;
@ -44,7 +45,7 @@ a.edit-topic {font-size: 15px;}
}
.docked #topic-progress {
box-shadow: 0 0 3px #aaa;
box-shadow: 0 0 3px $primary_light;
}
#topic-progress-wrapper {
@ -64,15 +65,15 @@ a.edit-topic {font-size: 15px;}
#topic-progress {
box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px $primary;
position: relative;
&.hidden {
display: none;
}
border: none;
background-color: #ddd;
color: #666;
background-color: $primary_lighter;
color: $primary_medium;
width: 130px;
height: 34px;
.nums {
@ -91,7 +92,7 @@ a.edit-topic {font-size: 15px;}
left: 4px;
border: 0;
background: none;
color: #666;
color: $primary_medium;
width: 60px;
text-align: left;
@ -108,7 +109,7 @@ a.edit-topic {font-size: 15px;}
&:disabled {
cursor: default;
color: #666;
color: $primary_medium;
}
}
h4 {
@ -121,10 +122,10 @@ a.edit-topic {font-size: 15px;}
top: 0px;
bottom: 0px;
width: 0px;
border-right: 1px solid #ccc;
border-right: 1px solid $primary_lighter;
// background-color: #d4eaf4;
// background-color: #C5E8F7;
background-color: #C6F3B6;
background-color: $success_light;
}
}

View File

@ -21,6 +21,6 @@
line-height: 18px;
}
.description {
color: #9a9ea0;
color: $primary_medium;
}
}

View File

@ -8,13 +8,13 @@
height: 100px;
}
.static {
color: $black;
color: $primary;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.instructions {
color: $dark_gray;
color: $primary_medium;
margin-left: 165px;
margin-top: 5px;
}
@ -22,13 +22,13 @@
margin-left: 3px;
}
.instructions a[href] {
color: $darkish_gray;
color: $primary_medium;
}
.warning {
@include border-radius-all(6px);
background-color: lighten($red, 10%);
background-color: lighten($highlight_danger, 10%);
padding: 5px 8px;
color: $white;
color: $secondary;
width: 520px;
}
@ -46,15 +46,15 @@
display: block;
width: 220px;
min-height: 200px;
background-color: #f8f8f8;
color: #444;
background-color: $primary_lightest;
color: $primary;
word-wrap: break-word;
}
.user-navigation {
h3 {
color: #666;
color: $primary_medium;
padding-left: 5px;
}
.nav-stacked {
@ -67,7 +67,7 @@
.avatar {
float: left;
width: 45px;
background-color: white;
background-color: $secondary;
}
nav.buttons {
@ -82,7 +82,7 @@
h2 {
a {
font-size: 14px;
color: #999999;
color: $primary_light;
cursor: pointer;
}
}
@ -93,10 +93,10 @@
margin-bottom: 50px;
.about {
background-color: #444;
background-color: $primary;
margin-bottom: 10px;
overflow: hidden;
color: #fff;
color: $secondary;
.details {
text-align: center;
@ -114,32 +114,32 @@
}
a[href] {
color: #fff;
color: $secondary;
}
img.avatar {
border: 3px solid #eee;
border: 3px solid $primary_lightest;
margin-bottom: 4px;
}
.secondary {
background-color: #222;
background-color: $primary;
text-align: left;
padding: 0 10px;
dd {
color: white;
color: $secondary;
margin: 0 0 7px 0;
}
dt {
color: #aaa;
color: $primary_light;
margin: 0;
}
}
}
.controls {
background-color: #ddd;
background-color: $primary_lighter;
margin-top: 0px;
padding: 10px 10px 0 10px;
@ -167,7 +167,7 @@
.avatar {
float: left;
margin-right: 10px;
border: 2px solid white;
border: 2px solid $secondary;
width: 45px;
height: 45px;
}
@ -192,14 +192,14 @@
margin: 5px 0px;
font-size: 13px;
word-wrap: break-word;
color: lighten($black, 30%);
color: lighten($primary, 30%);
}
.item.moderator-action {
background-color: #eef0ff;
background-color: $tertiary_lightest;
}
.item.deleted {
opacity: 0.8;
background-color: #ffcece;
background-color: $highlight_danger_light;
}
.item.hidden {
display: block;
@ -207,19 +207,19 @@
}
.item {
padding: 10px 8px;
background-color: white;
border-bottom: 1px solid #b9b9b9;
background-color: $secondary;
border-bottom: 1px solid $primary_light;
}
.type {
color: lighten($black, 40%);
color: lighten($primary, 40%);
}
span.name {
color: lighten($black, 40%);
color: lighten($primary, 40%);
}
.time {
display: block;
float: right;
color: silver;
color: $primary_light;
margin-right: 8px;
font-size: 11px;
}
@ -233,7 +233,7 @@
font-size: 14px;
}
.edit-reason {
background-color: #ffffcc;
background-color: $highlight;
padding: 3px 5px 5px 5px;
}
}
@ -248,7 +248,7 @@
.fa {
width: 15px;
display: inline-block;
color: #777;
color: $primary_medium;
}
.avatar-wrapper {
border: none;