Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

initial pass at color simplification

This commit is contained in:
awesomerobot 2017-06-11 22:20:14 -04:00
parent 2ffddfb32c
commit c29b7aa65d
53 changed files with 296 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,8 +36,8 @@ $mobile-breakpoint: 700px;
tr {text-align: left;}
td, th {padding: 8px;}
td {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
border-top: 1px solid $primary-low;
}
th {
text-align: left;
@ -94,11 +94,11 @@ td.flaggers td {
.site-text {
cursor: pointer;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
margin-bottom: 0.5em;
&.overridden {
background-color: dark-light-diff($highlight, $secondary, 50%, -60%);
background-color: $highlight-medium;
}
h3 {
@ -112,7 +112,7 @@ td.flaggers td {
.site-text-value {
margin: 0.5em 5em 0.5em 0;
max-height: 100px;
color: dark-light-diff($primary, $secondary, 40%, -10%);
color: $primary-medium;
}
}
@ -136,7 +136,7 @@ td.flaggers td {
font-size: 0.857em;
float: right;
margin-right: 10px;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
padding: 2px 5px;
border-radius: 5px;
color: $primary;
@ -222,16 +222,16 @@ td.flaggers td {
}
.admin-controls {
background-color: dark-light-diff($primary, $secondary, 90%, -65%);
background-color: $primary-low;
padding: 10px 10px 3px 0;
@include clearfix;
.nav.nav-pills {
li.active {
a {
border-color: dark-light-diff($primary, $secondary, 90%, -90%);
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
border-color: $primary-low;
background-color: $primary-medium;
&:hover {
background-color: dark-light-diff($primary, $secondary, 40%, -10%);
background-color: $primary-medium;
}
}
}
@ -385,7 +385,7 @@ td.flaggers td {
// Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
margin-left: 0;
border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
border-left: solid 1px $primary-low;
padding: 30px 0 30px 30px;
@media (max-width: $mobile-breakpoint) {
padding: 30px 0;
@ -464,7 +464,7 @@ td.flaggers td {
}
padding: 1px;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(51, 51, 51, 0.3);
transition: border linear 0.2s, box-shadow linear 0.2s;
@ -521,7 +521,7 @@ td.flaggers td {
.setting.overridden.string {
input[type=text] {
background-color: dark-light-diff($highlight, $secondary, 50%, -60%);
background-color: $highlight-medium;
}
}
}
@ -532,7 +532,7 @@ section.details {
color: $primary;
padding: 5px 10px;
margin: 30px 0 5px 0;
border-bottom: 5px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 5px solid $primary-low;
}
}
@ -575,7 +575,7 @@ section.details {
&.highlight-danger {
background-color: scale-color($danger, $lightness: 50%);
}
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
&:before, &:after {
display: table;
content: "";
@ -695,14 +695,14 @@ section.details {
font-size: 1em;
line-height: 16px;
padding: 4px;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
.badge-query-plan {
font-size: 0.857em;
line-height: 13px;
padding: 4px;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
.count-warning {
@ -765,8 +765,8 @@ section.details {
background-color: scale-color($danger, $lightness: 70%);
}
.message { background-color: dark-light-diff($highlight, $secondary, 50%, -70%); }
.message:hover { background-color: dark-light-diff($highlight, $secondary, 60%, -60%); }
.message { background-color: $highlight-medium; }
.message:hover { background-color: $highlight-low; }
.flagged-post-avatar {
margin-right: 10px;
@ -901,7 +901,7 @@ table.api-keys {
th {
font-weight: normal;
text-align: center;
background: dark-light-diff($primary, $secondary, 80%, -65%);
background: $primary-low;
}
th.title {
text-align: left;
@ -951,7 +951,7 @@ table.api-keys {
}
&.detected-problems {
background: dark-light-diff($primary, $secondary, 90%, -75%);
background: $primary-low;
margin-bottom: 20px;
.look-here {
@ -976,7 +976,7 @@ table.api-keys {
text-align: right;
}
.btn {
background: dark-light-diff($primary, $secondary, 80%, -85%);
background: $primary-low;
}
ul {
margin-left: 0;
@ -1026,7 +1026,7 @@ table.api-keys {
}
.commits-widget {
border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
border: solid 1px $primary-low;
height: 180px;
margin-bottom: 36px;
@ -1049,7 +1049,7 @@ table.api-keys {
color: $primary;
font-weight: bold;
height: 30px;
background: dark-light-diff($primary, $secondary, 80%, -75%);
background: $primary-low;
cursor: pointer;
h1 {
@ -1072,7 +1072,7 @@ table.api-keys {
@extend .clearfix;
line-height: 1.0em;
padding: 6px 8px;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
.left {
float: left;
}
@ -1082,7 +1082,7 @@ table.api-keys {
img {
margin-top: 2px;
border: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
border: solid 1px $primary-low;
padding: 2px;
background-color: $secondary;
}
@ -1113,11 +1113,11 @@ table.api-keys {
width: 6px;
}
::-webkit-scrollbar-thumb {
background: dark-light-diff($primary, $secondary, 90%, -75%);
background: $primary-low;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-track {
border-left: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
border-left: solid 1px $primary-low;
}
}
@ -1292,7 +1292,7 @@ table.api-keys {
color: $primary;
&:hover {
color: $primary;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
@ -1322,7 +1322,7 @@ table.api-keys {
.heading-container {
width: 100%;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
.col.heading {
font-weight: bold;
@ -1338,7 +1338,7 @@ table.api-keys {
.ember-list-item-view {
width: 100%;
border-top: solid 1px dark-light-diff($primary, $secondary, 90%, -60%);
border-top: solid 1px $primary-low;
}
}
@ -1528,7 +1528,7 @@ tr.not-activated {
.user-field {
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
.form-display {
width: 25%;
@ -1918,11 +1918,11 @@ table#user-badges {
.dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); }
.dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); }
.dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); }
.dbox50 { background: dark-light-diff($primary, $secondary, 50%, -50%); }
.dbox50 { background: blend-primary-secondary(50%); }
.dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); }
.dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); }
.dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); }
.dbox90 { background: dark-light-diff($primary, $secondary, 90%, -90%); }
.dbox90 { background: $primary-low; }
.dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); }
.dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); }
.dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); }

3
app/assets/stylesheets/common/admin/customize.scss
View File

@ -10,7 +10,7 @@
.field-error {
margin-top: 10px;
margin-bottom: 10px;
background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
background-color: $quaternary-low;
padding: 5px;
}
@ -210,4 +210,3 @@
margin-top: 20px;
}
}

14
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -16,8 +16,8 @@
}
}
html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
.topic-list a.title.visited:not(.badge-notification) {color: dark-light-diff($primary, $secondary, 45%, -30%);}
html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
.topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
.topic-list {
width: 100%;
@ -28,7 +28,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
vertical-align: top;
margin-top: 2px;
}
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-bottom: 1px solid $primary-low;
&.last-visit {
border-bottom: none;
@ -58,7 +58,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
}
> tbody > tr:first-of-type {
border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 3px solid $primary-low;
}
th,
@ -238,7 +238,7 @@ ol.category-breadcrumb {
overflow-x: hidden;
overflow-y: auto;
position: absolute;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
background-color: $secondary;
z-index: 100;
@ -300,7 +300,7 @@ ol.category-breadcrumb {
@include unselectable;
font-size: 1.2em;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 5px;
background: $secondary;
position: absolute;
@ -326,7 +326,7 @@ ol.category-breadcrumb {
font-size: 0.8em;
}
&:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
background-color: $highlight-medium;
}
}
}

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

@ -30,15 +30,15 @@
-webkit-appearance: none;
}
&.alert-success {
background-color: dark-light-diff($success, $secondary, 50%, -60%);
background-color: $success-low;
color: $primary;
}
&.alert-error {
background-color: rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
background-color: rgba($danger-low, .5);
color: $primary;
}
&.alert-info {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
color: $primary;
&.clickable {
color: $tertiary;

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

@ -18,7 +18,7 @@
max-width: 300px;
.colorpicker {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
margin-right: 2px;
width: 16px;
height: 16px;

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

@ -1,5 +1,5 @@
.select2-results .select2-highlighted {
background: dark-light-diff($highlight, $secondary, 50%, -80%);
background: $highlight-medium;
color: $primary;
}
@ -36,7 +36,7 @@
.select2-container {
border-radius: 3px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
min-width: 200px;
&.select2-dropdown-open {
@ -71,7 +71,7 @@
border-color: $tertiary;
}
.select2-drop {
color: dark-light-diff($primary, $secondary, -50%, 50%);
color: $primary;
}
.select2-drop-active {
border: 1px solid $tertiary;

18
app/assets/stylesheets/common/base/compose.scss
View File

@ -3,7 +3,7 @@
position: absolute;
width: 240px;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
ul {
list-style: none;
padding: 0;
@ -15,7 +15,7 @@
padding: 0 2px;
}
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
a {
padding: 5px;
@ -32,10 +32,10 @@
vertical-align: middle;
}
&.selected {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
}
@include hover {
background-color: dark-light-diff($highlight, $secondary, 90%, -80%);
background-color: $highlight-low;
text-decoration: none;
}
}
@ -52,11 +52,13 @@
.d-editor-button-bar {
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0px;
padding: 5px;
border-bottom: 2px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 2px solid $primary-low;
height: 33px;
.btn:hover {
color: $primary-low;
}
}
textarea {
@ -88,7 +90,7 @@ div.ac-wrap div.item a.remove, .remove-link {
border-radius: 12px;
width: 10px;
display: inline-block;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
&:hover {
background-color: scale-color($danger, $lightness: 75%);
border: 1px solid scale-color($danger, $lightness: 30%);
@ -101,7 +103,7 @@ div.ac-wrap {
overflow: auto;
max-height: 150px;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 5px 4px 1px 4px;
div.item {
float: left;

10
app/assets/stylesheets/common/base/directory.scss
View File

@ -12,7 +12,7 @@
float: right;
}
.total-rows {
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
text-align: right;
}
.spinner {
@ -26,17 +26,17 @@
td, th {
padding: 0.5em;
text-align: left;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
.number, .time-read {
font-size: 1.4em;
color: dark-light-diff($primary, $secondary, 50%, -20%);
color: $primary-medium;
}
}
tr.me {
td {
background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
background-color: $highlight-low;
.username a, .name, .title, .number, .time-read {
color: dark-light-choose(scale-color($highlight, $lightness: -50%), scale-color($highlight, $lightness: 50%));
@ -58,7 +58,7 @@
}
&:hover {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
}
}

12
app/assets/stylesheets/common/base/discourse.scss
View File

@ -314,7 +314,7 @@ body {
animation: rotate-forever 1s infinite linear;
height: 30px;
width: 30px;
border: 4px solid dark-light-diff($primary, $secondary, 50%, -50%);
border: 4px solid blend-primary-secondary(50%);
border-right-color: transparent;
border-radius: 50%;
@ -329,7 +329,7 @@ body {
.content-list {
h3 {
color: dark-light-diff($primary, $secondary, 50%, -20%);
color: $primary-medium;
font-size: 1.071em;
padding-left: 5px;
margin-bottom: 10px;
@ -340,10 +340,10 @@ body {
margin: 0;
li:first-of-type {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
}
li {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
li a {
@ -352,7 +352,7 @@ body {
color: $primary;
&:hover {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
color: $primary;
}
@ -380,7 +380,7 @@ span.relative-date {
@keyframes background-fade-highlight {
0% {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
}
100% {
background-color: transparent;

12
app/assets/stylesheets/common/base/group.scss
View File

@ -51,7 +51,7 @@ table.group-logs {
width: 100%;
th, tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
th {
@ -67,7 +67,7 @@ table.group-logs {
cursor: pointer;
i {
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
}
}
}
@ -77,7 +77,7 @@ table.group-members {
table-layout: fixed;
tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
th:first-child {
@ -90,7 +90,7 @@ table.group-members {
}
th {
border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 3px solid $primary-low;
text-align: center;
padding: 5px 0px 5px 5px;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
@ -104,7 +104,7 @@ table.group-members {
&:hover {
cursor: pointer;
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
background-color: $primary-low;
}
}
@ -119,7 +119,7 @@ table.group-members {
td {
text-align: center;
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
padding: 0.8em 0;
}
}

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

@ -8,16 +8,16 @@
width: 100%;
th {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
padding: 5px 0px;
text-align: left;
}
tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
td {
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
padding: 0.8em 0;
}

12
app/assets/stylesheets/common/base/header.scss
View File

@ -69,14 +69,14 @@
&:hover {
color: $primary;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
&:active {
color: $primary;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
}
.drop-down-visible & {
@ -85,9 +85,9 @@
color: #7b7b7b;
background-color: $secondary;
cursor: default;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
border-left: 1px solid $primary-low;
border-right: 1px solid $primary-low;
.badge-notification {
top: -10px;
@ -147,7 +147,7 @@
.highlight-strong {
background-color: dark-light-diff($highlight, $secondary, 40%, -45%);
background-color: $highlight-medium;
}
.search-highlight {

2
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -42,7 +42,7 @@
.informations {
margin: 6px;
padding-right: 20px;
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
font-size: 1em;
}

14
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -18,7 +18,7 @@
}
.menu-panel {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
box-shadow: 0 2px 2px rgba(0,0,0, .25);
background-color: $secondary;
z-index: 1100;
@ -60,7 +60,7 @@
padding: 0.25em 0.5em;
display: block;
&:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
background-color: $highlight-medium;
}
}
@ -191,7 +191,7 @@
}
&:hover a:not(.badge-notification) {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
background-color: $highlight-medium;
}
button {margin-left: 5px;}
@ -210,7 +210,7 @@
.fa { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
.icon { color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)); }
li {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
padding: 0.25em 0.5em;
i {
float: left;
@ -218,7 +218,7 @@
padding-top: 2px;
}
span { color: $primary; }
&:hover { background-color: dark-light-diff($highlight, $secondary, 50%, -55%); }
&:hover { background-color: $highlight-medium; }
a { padding: 0; }
p {
margin: 0;
@ -256,7 +256,7 @@
.notifications .logout {
padding: 0.25em;
&:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
background-color: $highlight-medium;
}
}
@ -269,7 +269,7 @@ div.menu-links-header {
display: table-row;
}
a:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
background-color: $highlight-medium;
}
a {
padding: 0.5em;

16
app/assets/stylesheets/common/base/modal.scss
View File

@ -13,11 +13,11 @@
.input-hint-text {
margin-left: 0.5em;
color: dark-light-diff($secondary, $primary, 30%, -35%);
color: $secondary-medium;
}
.modal-header {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
.modal-backdrop {
@ -96,7 +96,7 @@
}
.modal-footer {
padding: 14px 15px 15px;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
}
.modal-footer:before,
.modal-footer:after {
@ -118,11 +118,11 @@
.modal {
.nav {
padding: 10px 30px 10px 15px;
background-color: dark-light-diff($secondary, $primary, 10%, -15%);
background-color: $secondary;
li > a {
font-size: 1em;
}
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
@ -230,7 +230,7 @@
font-weight: normal;
}
&.btn-reply-here {
background: dark-light-diff($primary, $secondary, 90%, -60%);
background: $primary-low;
text-shadow: none;
color: $primary;
}
@ -351,7 +351,7 @@
font-weight: bold;
}
&:focus {
outline: 2px solid dark-light-diff($primary, $secondary, 90%, -60%);
outline: 2px solid $primary-low;
}
}
.incoming-email-tabs {
@ -362,7 +362,7 @@
textarea, .incoming-email-html-part {
height: 95%;
border: none;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
padding-top: 10px;
}
textarea {

2
app/assets/stylesheets/common/base/onebox.scss
View File

@ -89,7 +89,7 @@ a.loading-onebox {
}
aside.onebox {
border: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
border: 5px solid $primary-low;
padding: 12px 25px 12px 12px;
font-size: 1em;

4
app/assets/stylesheets/common/base/search.scss
View File

@ -108,7 +108,7 @@
}
.search-advanced-options {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border: 1px solid $primary-low;
padding: 10px;
.control-group.pull-left {
@ -147,7 +147,7 @@
}
margin: 10px 0 15px;
max-width: 780px;
border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-bottom: 3px solid $primary-low;
width: 100%;
.sort-by {
.desc {

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

@ -12,7 +12,7 @@
background-color: $secondary;
width: 205px;
padding: 10px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
z-index: 999;
ul {

18
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1,6 +1,6 @@
.placeholder-avatar {
display: inline-block;
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
background-color: $primary-low;
width: 45px;
height: 45px;
border-radius: 50%;
@ -8,7 +8,7 @@
.placeholder-text {
display: inline-block;
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
background-color: $primary-low;
width: 100%;
height: 1.5em;
margin-bottom: 0.6em;
@ -92,7 +92,7 @@ aside.quote {
}
.cooked .highlight {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
padding: 2px;
margin: -2px;
}
@ -137,7 +137,7 @@ aside.quote {
.quote-button {
display: none;
position: absolute;
background-color: dark-light-diff($primary, $secondary, 50%, -50%);
background-color: blend-primary-secondary(50%);
color: dark-light-choose($secondary, $primary);
padding: 10px;
z-index: 401;
@ -149,7 +149,7 @@ aside.quote {
}
&:hover {
background-color: dark-light-diff($primary, $secondary, 40%, -40%);
background-color: $primary-medium;
cursor: pointer;
}
}
@ -273,7 +273,7 @@ pre {
kbd
{
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0,0,0, .8);
color: $primary;
@ -395,15 +395,15 @@ table.md-table {
.topic-body {
.cooked {
font-style: italic;
color: dark-light-diff($primary, $secondary, 55%, -40%);
color: $primary-medium;
}
}
}
a.mention, a.mention-group {
padding: 2px 4px;
color: dark-light-diff($primary, $secondary, 30%, -20%);
background: dark-light-diff($primary, $secondary, 95%, -60%);
color: $primary-medium;
background: $primary-low;
border-radius: 8px;
font-weight: bold;
font-size: 0.93em;

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

@ -66,7 +66,7 @@
.has-pending-posts {
padding: 0.5em;
background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
background-color: $highlight-medium;
a[href] {
float: right;
}
@ -118,7 +118,7 @@
.post-links {
margin-top: 1em;
padding-top: 1em;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid $primary-low;
}
.expand-links {
@ -160,7 +160,7 @@
&:hover {
color: $tertiary;
i {
background: dark-light-diff($tertiary, $secondary, 85%, -65%);
background: $tertiary-low;
}
}
}

8
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -2,7 +2,7 @@
.user-badge {
padding: 3px 8px;
color: $primary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border: 1px solid $primary-low;
line-height: 19px;
display: inline-block;
background-color: $secondary;
@ -126,7 +126,7 @@
.badge-card {
position: relative;
display: inline-block;
background-color: dark-light-diff($primary, $secondary, 95%, -65%);
background-color: $primary-low;
margin-right: 5px;
margin-bottom: 10px;
box-shadow: 1px 1px 3px rgba(0.0, 0.0, 0.0, 0.2);
@ -142,7 +142,7 @@
right: 5px;
top: 5px;
font-weight: bold;
color: dark-light-diff($primary, $secondary, 50%, -15%);
color: $primary-medium;
font-size: 1.2em;
}
@ -156,7 +156,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: dark-light-diff($primary, $secondary, 92%, -60%);
background-color: $primary-low;
font-size: 3em;
img {

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

@ -236,7 +236,7 @@
}
.label {
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
}
}
@ -248,7 +248,7 @@
}
li {
border-left: dark-light-diff($primary, $secondary, 90%, -65%) solid 2px;
border-left: $primary-low solid 2px;
padding: 5px 8px;
margin: 10px 0;
}
@ -288,7 +288,7 @@ and (max-width : 600px) {
}
.user-preferences .tags .select2-container-multi {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
width: 540px;
border-radius: 0;
.select2-choices {

12
app/assets/stylesheets/common/components/badges.scss
View File

@ -169,12 +169,12 @@
}
li.bar>.badge-category {
background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
background: $primary-low !important;
color: $primary !important;
}
li.bullet>.badge-category {
background: dark-light-diff($primary, $secondary, 90%, -65%) !important;
background: $primary-low !important;
color: $primary !important;
.badge-category-bg {
@ -279,9 +279,9 @@
&.clicks {
font-weight: normal;
background-color: dark-light-diff($primary, $secondary, 88%, -60%);
background-color: $primary-low;
top: -1px;
color: dark-light-diff($primary, $secondary, 40%, -20%);
color: $primary-medium;
position: relative;
margin-left: 2px;
border: none;
@ -308,8 +308,8 @@
padding: 4px 5px 2px 5px;
color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: dark-light-diff($primary, $secondary, 90%, -65%);
border-color: dark-light-diff($primary, $secondary, 90%, -65%);
background-color: $primary-low;
border-color: $primary-low;
font-size: 0.857em;
box-shadow: inset 0 1px 0 rgba(0,0,0, 0.22);
}

6
app/assets/stylesheets/common/components/buttons.scss
View File

@ -46,17 +46,17 @@
border: none;
color: $primary;
font-weight: normal;
background: dark-light-diff($primary, $secondary, 90%, -65%);
background: $primary-low;
&[href] {
color: $primary;
}
&:hover {
background: dark-light-diff($primary, $secondary, 65%, -75%);
background: $primary-medium;
color: $secondary;
}
&[disabled], &.disabled {
background: dark-light-diff($primary, $secondary, 90%, -60%);
background: $primary-low;
&:hover { color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 30%)); }
cursor: not-allowed;
}

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

@ -32,7 +32,7 @@
transition: background .15s;
&:hover {
color: $quaternary;
background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
background-color: $quaternary-low;
}
}
&.active > a, > a.active {
@ -49,9 +49,9 @@
@extend %nav;
padding: 0;
overflow: hidden;
background: dark-light-diff($primary, $secondary, 90%, -75%);
background: $primary-low;
li {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -60%);
border-bottom: 1px solid $primary-low;
position: relative;
&:last-of-type {
border-bottom: 0;

12
app/assets/stylesheets/common/d-editor.scss
View File

@ -1,5 +1,5 @@
.d-editor {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
}
.d-editor-container {
@ -22,7 +22,7 @@
min-width: 400px;
position: absolute;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 1em;
top: 25px;
@ -71,7 +71,7 @@
height: 20px;
margin-right: 8px;
margin-left: 5px;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
display: inline-block;
float: left;
}
@ -82,13 +82,13 @@
height: 200px;
&:disabled {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
}
.d-editor-preview {
color: $primary;
border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px dashed $primary-low;
overflow: auto;
cursor: default;
margin-top: 8px;
@ -110,7 +110,7 @@
.composing-whisper {
.d-editor-preview {
font-style: italic;
color: dark-light-diff($primary, $secondary, 55%, -40%) !important;
color: $primary-medium !important;
}
}

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

@ -41,7 +41,7 @@ hr {
height: 1px;
margin: 1em 0;
border: 0;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
padding: 0;
}

2
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -97,7 +97,7 @@
// Stuff we repeat
@mixin post-aside {
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
border-left: 5px solid $primary-low;
background-color: blend-primary-secondary(5%);
}

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

@ -78,3 +78,33 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
@return $dark-theme-result;
}
}
// standard color transformations, use these if possible, and add any new dark-light-diffs here
//primary
$primary-low: dark-light-diff($primary, $secondary, 90%, -65%);
$primary-medium: dark-light-diff($primary, $secondary, 50%, -20%);
//secondary
$secondary-low: dark-light-diff($secondary, $primary, 50%, -50%);
$secondary-medium: dark-light-diff($secondary, $primary, 30%, -35%);
//tertiary
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);
//quaternary
$quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%);
//highlight
$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
//danger
$danger-low: dark-light-diff($danger, $secondary, 50%, -40%);
$danger-medium: dark-light-diff($danger, $secondary, 30%, -60%);
//success
$success-low: dark-light-diff($success, $secondary, 50%, -60%);
//love
$love-low: dark-light-diff($love, $secondary, 85%, -60%);

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

@ -7,7 +7,7 @@
padding: 5px 10px;
z-index: 101;
&.bad {
background: dark-light-diff($danger, $secondary, 20%, -40%);
background: $danger-medium;
color: white;
box-shadow: 1px 1px 5px rgba(0,0,0, .7);
}

2
app/assets/stylesheets/common/topic-entrance.scss
View File

@ -1,6 +1,6 @@
#topic-entrance {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 5px;
background: $secondary;
box-shadow: 0 0px 2px rgba(0,0,0, .2);

4
app/assets/stylesheets/desktop/category-list.scss
View File

@ -90,9 +90,9 @@
tbody {
tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-bottom: 1px solid $primary-low;
&:first-of-type {
border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 3px solid $primary-low;
}
}

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

@ -36,14 +36,14 @@
padding: 10px;
box-shadow: 3px 3px 3px rgba(0,0,0, 0.34);
background: dark-light-diff($highlight, $secondary, 50%, -80%);
background: $highlight-medium;
&.urgent {
background: dark-light-diff($danger, $secondary, 50%, -40%);
background: $danger-low;
}
&.education-message {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
}
h3 {
@ -79,17 +79,17 @@
}
.custom-body {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
p {
max-width: 98%;
}
}
.similar-topics {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
a[href] {
color: dark-light-diff($primary, $secondary, -10%, 10%);
color: $primary-medium;
}
.posts-count {
@ -140,7 +140,7 @@
width: 100%;
z-index: 999;
height: 0;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
bottom: 0;
font-size: 1em;
position: fixed;
@ -184,7 +184,7 @@
&.draft {
height: 40px !important;
cursor: pointer;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
.draft-text {
display: block;
@ -201,7 +201,7 @@
}
&.saving {
height: 40px !important;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
.saving-text {
display: block;
}
@ -299,7 +299,7 @@
margin-right: 10px;
float: left;
&:disabled {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
}
#topic-featured-link {
@ -308,14 +308,14 @@
width: 400px;
}
.d-editor-input:disabled {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
.d-editor-input, .d-editor-preview {
color: $primary;
}
.d-editor-preview {
border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px dashed $primary-low;
overflow: auto;
visibility: visible;
cursor: default;
@ -353,7 +353,7 @@
.show-admin-options {
vertical-align: top;
margin-top: 8px;
background: dark-light-diff($primary, $secondary, 90%, -60%);
background: $primary-low;
&:hover {
color: $secondary;
background: $primary;

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

@ -31,7 +31,7 @@ body {
}
#main {
a.star {
color: dark-light-diff($secondary, $primary, 80%, -20%);
color: $secondary-medium;
&:before {
font-family: "FontAwesome";
content: "\f005";
@ -213,14 +213,14 @@ body {
width: 210px;
height: auto;
background-color:$secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
}
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: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
}
@ -244,7 +244,7 @@ body {
select {
width: 220px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
&[multiple], &[size] {
height: auto;
}
@ -272,8 +272,8 @@ body {
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
cursor: not-allowed;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
border-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
border-color: $primary-low;
}
input {
&[type="radio"][disabled], &[type="checkbox"][disabled], &[type="radio"][readonly], &[type="checkbox"][readonly] {
@ -372,7 +372,7 @@ body {
text-align: center;
vertical-align: middle;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
}
.input-prepend .add-on, .input-append .add-on, .input-prepend .btn, .input-append .btn {
margin-left: -1px;

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

@ -48,7 +48,7 @@
}
.group-edit {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 10px;
.form-horizontal {

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

@ -12,10 +12,10 @@
.btn[disabled] {
cursor: not-allowed;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
}
.btn-danger[disabled] {
background-color: dark-light-diff($danger, $secondary, 30%, -60%);
background-color: $danger-medium;
}
}
#display-modes {
@ -25,7 +25,7 @@
.btn {
background-color:inherit;
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
}
.btn-primary {
color: $primary;
@ -35,7 +35,7 @@
#revision-details {
padding: 5px;
margin-top: 10px;
border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 3px solid $primary-low;
}
#revisions {
word-wrap: break-word;

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

@ -16,7 +16,7 @@
height: auto;
margin: -250px 0 0 -305px;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
box-shadow: 0 3px 7px rgba(0,0,0, .8);
background-clip: padding-box;

3
app/assets/stylesheets/desktop/queued-posts.scss
View File

@ -31,7 +31,7 @@
}
}
.post-title {
color: dark-light-diff($primary, $secondary, 20%, -60%);
color: $primary-medium;
font-weight: bold;
.badge-wrapper {
@ -41,4 +41,3 @@
}
}

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

@ -63,7 +63,7 @@
padding: 0;
background: transparent;
&:hover {
color: dark-light-diff($primary, $secondary, 90%, -60%);
color: $primary-low;
}
}
@ -115,7 +115,7 @@
.sortable {
cursor: pointer;
&:hover {
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
background-color: $primary-low;
}
@include unselectable;
}

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

@ -94,7 +94,7 @@ nav.post-controls {
font-size: inherit;
span.badge-posts {color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); }
&:hover {
background: dark-light-diff($primary, $secondary, 90%, -65%);
background: $primary-low;
span.badge-posts {color: $primary;}
}
i {
@ -122,7 +122,7 @@ nav.post-controls {
margin-left: 3px;
&.d-hover {
background: dark-light-diff($primary, $secondary, 90%, -60%);
background: $primary-low;
color: $primary;
}
@ -144,7 +144,7 @@ nav.post-controls {
&.like.d-hover {
color: $love;
background: dark-light-diff($love, $secondary, 85%, -60%)
background: $love-low;
}
&.has-like {color: $love;}
@ -179,7 +179,7 @@ nav.post-controls {
background-color: $secondary;
width: 205px;
padding: 10px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
position: absolute;
text-align: left;
bottom: -2px;
@ -288,11 +288,11 @@ a.star {
.topic-map {
margin: 20px 0 0 0;
background: blend-primary-secondary(5%);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border: 1px solid $primary-low;
border-top: none; // would cause double top border
section {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid $primary-low;
}
h3 {
@ -402,11 +402,11 @@ a.star {
padding: 0 23px;
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
background: blend-primary-secondary(5%);
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-left: 1px solid $primary-low;
border-top: 1px solid $primary-low;
&:hover {
color: $primary;
background: dark-light-diff($primary, $secondary, 90%, -80%);
background: $primary-low;
}
&.collapsed {
@ -567,7 +567,7 @@ video {
.moderator {
.topic-body {
background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
background-color: $highlight-low;
}
}
@ -617,7 +617,7 @@ blockquote {
aside {
.quote, .title, blockquote, .onebox, .onebox-result {
background: blend-primary-secondary(5%);
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-left: 5px solid $primary-low;
}
aside.quote>blockquote, aside.quote>.title {
@ -637,12 +637,12 @@ $topic-avatar-width: 45px;
float: left;
position: relative;
z-index: 2;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 1px solid $primary-low;
padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
}
.topic-avatar {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 1px solid $primary-low;
padding-top: 15px;
width: $topic-avatar-width;
float: left;
@ -655,7 +655,7 @@ $topic-avatar-width: 45px;
.small-action {
max-width: 755px;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 1px solid $primary-low;
}
.small-action.deleted {
@ -698,7 +698,7 @@ $topic-avatar-width: 45px;
margin: 1px 0 0;
list-style: none;
background-color: $secondary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-clip: padding-box;
span {
@ -730,7 +730,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .active > a:hover {
color: $primary;
text-decoration: none;
background-color: dark-light-diff($highlight, $secondary, 50%, -70%);
background-color: $highlight-medium;
}
@ -738,7 +738,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .disabled > a:hover {
text-decoration: none;
color: $primary;
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
cursor: default;
}
@ -757,7 +757,7 @@ $topic-avatar-width: 45px;
width: 200px;
position: fixed;
z-index: 1000;
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
border: 1px solid $tertiary;
padding: 5px;
margin-bottom: 5px;
@ -876,7 +876,7 @@ a.attachment:before {
display: block;
position: absolute;
left: 767px;
color: rgba(dark-light-diff($primary, $secondary, 90%, -65%) , .8);
color: rgba($primary-low, .8);
font: 6.429em/1 FontAwesome;
content: "\f014";
z-index: -5;
@ -911,7 +911,7 @@ a.attachment:before {
}
span.highlighted {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
}
.username.new-user a {

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

@ -80,7 +80,7 @@
}
.topic-status-info {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 1px solid $primary-low;
padding-top: 10px;
height: 20px;
max-width: 757px;
@ -99,7 +99,7 @@
}
#topic-progress-expanded {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 5px;
background: $secondary;
@ -149,7 +149,7 @@
}
background-color: $secondary;
color: $tertiary;
border: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
border: 1px solid $tertiary-low;
border-bottom: none;
width: 145px;
height: 34px;
@ -183,8 +183,8 @@
top: 0;
bottom: 0;
width: 0;
border-right: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
border-right: 1px solid $tertiary-low;
background-color: $tertiary-low;
transition: width .75s;
}
}

2
app/assets/stylesheets/desktop/user-card.scss
View File

@ -226,7 +226,7 @@ $user_card_background: $secondary;
.user-badge {
background: scale-color($user_card_background, $lightness: -5%);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
color: $user_card_primary;
}

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

@ -160,7 +160,7 @@
th {
text-align: left;
border-bottom: 3px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 3px solid $primary-low;
padding: 0 0 10px 0;
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
font-weight: normal;
@ -168,7 +168,7 @@
td {
padding: 10px 0 10px 0;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
}
@ -180,7 +180,7 @@
}
.user-invite-controls {
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
background-color: $primary-low;
padding: 5px 10px 0px 0;
height: 35px;
}
@ -212,8 +212,8 @@
.secondary {
background: scale-color($secondary, $lightness: -5%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
border-bottom: 1px solid $primary-low;
font-size: 0.929em;
.btn { padding: 3px 12px; }
@ -250,7 +250,7 @@
}
dt {
color: dark-light-diff($secondary, $primary, 50%, -40%);
color: $secondary-medium;
margin: 0;
}
}
@ -262,8 +262,8 @@
transition: margin .15s linear;
blockquote {
background-color: dark-light-diff($secondary, $primary, 30%, -70%);
border-left-color: dark-light-diff($secondary, $primary, 50%, -50%);
background-color: $secondary-low;
border-left-color: $secondary-low;
}
h1 {
@ -390,7 +390,7 @@
padding: 0 0 2px 0;
margin-top: 0;
background: rgba($secondary, .85);
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
.bio { display: none; }
.primary {
@ -434,7 +434,7 @@
color: $primary;
}
.item.moderator-action {
background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
background-color: $highlight-medium;
}
.item.deleted {
opacity: 0.8;
@ -447,7 +447,7 @@
.item {
padding: 20px 8px 15px 8px;
background-color: $secondary;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
.type {
color: $primary;
@ -491,7 +491,7 @@
}
.notification {
&.unread {
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: $tertiary-low;
}
li { display: inline-block; }

8
app/assets/stylesheets/embed.scss
View File

@ -16,8 +16,8 @@ article.post {
}
.quote .title {
border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid darken($primary-low, 10%);
background-color: $primary-low;
padding: 10px 10px 0 12px;
.avatar { margin-right: 7px; }
}
@ -29,8 +29,8 @@ article.post {
blockquote {
padding: 10px 8px 10px 13px;
margin: 0 0 10px 0;
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
border-left: 5px solid darken(dark-light-diff($primary, $secondary, 97%, -45%), 10%);
background-color: $primary-low;
border-left: 5px solid darken($primary-low, 97%, -45%), 10%);
p {
margin: 0 0 10px 0;
}

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

@ -19,7 +19,7 @@ input {
padding: 4px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
}
input[type=radio], input[type=checkbox] {
box-shadow: none;
@ -38,7 +38,7 @@ input[type=radio], input[type=checkbox] {
width: 100%;
z-index: 1039;
height: 0;
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
bottom: 0;
font-size: 1em;
position: fixed;
@ -97,7 +97,7 @@ input[type=radio], input[type=checkbox] {
&.draft {
height: 35px !important;
cursor: pointer;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
.draft-text {
display: block;
position: absolute;
@ -120,7 +120,7 @@ input[type=radio], input[type=checkbox] {
}
&.saving {
height: 40px !important;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
.saving-text {
display: block;
}

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

@ -18,12 +18,12 @@
}
.directory .user {
border-top: 1px solid dark-light-diff($primary, $secondary, 80%, -20%);
border-top: 1px solid $primary-low;
padding: 1em;
&.me {
background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
background-color: $highlight-low;
.username a, .name, .title, .number, .time-read, .user-stat .label {
color: scale-color($highlight, $lightness: -50%);
@ -38,7 +38,7 @@
}
.label {
margin-left: 0.2em;
color: dark-light-diff($primary, $secondary, 50%, -50%);
color: blend-primary-secondary(50%);
}
i.fa-heart {
color: $love;

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

@ -73,7 +73,7 @@ blockquote {
display: inline-block;
.topic-status {
i {
color: dark-light-diff($secondary, $primary, 40%, -20%);
color: $secondary-medium;
}
}
}
@ -123,7 +123,7 @@ h2#site-text-logo
}
margin: 0;
padding: 0;
background: dark-light-diff($primary, $secondary, 90%, -65%);
background: $primary-low;
list-style: none;
overflow: visible;
position: relative;

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

@ -9,7 +9,7 @@
line-height: 2em;
}
#revision-details {
background-color: dark-light-diff($primary, $secondary, 90%, -60%);
background-color: $primary-low;
padding: 5px;
margin-top: 10px;
}

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

@ -26,7 +26,7 @@
position: relative;
}
.nav-pills .drop {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border: 1px solid $primary-low;
position: absolute;
z-index: 1000;
background-color: $secondary;
@ -47,7 +47,7 @@
}
.nav-pills > li {
background: dark-light-diff($primary, $secondary, 90%, -65%);
background: $primary-low;
i.fa-caret-down {
margin-left: 8px;
}
@ -146,9 +146,9 @@
tbody {
tr {
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-bottom: 1px solid $primary-low;
&:first-of-type {
border-top: 3px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 3px solid $primary-low;
}
}
.category {

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

@ -3,7 +3,7 @@
}
.small-action {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
color: lighten($primary, 50%);
padding-bottom: 3px;
text-transform: uppercase;
@ -28,7 +28,7 @@
}
.topic-post article {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-top: 1px solid $primary-low;
padding: 8px 0;
}
@ -109,7 +109,7 @@ nav.post-controls {
background-color: $secondary;
width: 205px;
padding: 10px;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
position: absolute;
text-align: left;
bottom: 0;
@ -181,11 +181,11 @@ a.star {
margin: 10px 0;
background: blend-primary-secondary(5%);
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border: 1px solid $primary-low;
border-top: none; // would cause double top border
section {
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid $primary-low;
}
h3 {
@ -300,8 +300,8 @@ a.star {
padding: 0 15px;
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
background: blend-primary-secondary(5%);
border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
border-left: 1px solid $primary-low;
border-top: 1px solid $primary-low;
.fa {
margin: 0;
font-size: 1.286em;
@ -386,7 +386,7 @@ span.post-count {
}
.moderator .topic-body {
background-color: dark-light-diff($highlight, $secondary, 70%, -80%);
background-color: $highlight-low;
}
.quote-button.visible {

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

@ -45,7 +45,7 @@
.topic-status-info {
padding-left: 10px;
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
border-top: 1px solid $primary-low;
padding-top: 10px;
h3 {
margin: 0;
@ -66,7 +66,7 @@
}
#topic-progress-expanded {
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border: 1px solid $primary-low;
padding: 5px;
background: $secondary;
@ -113,7 +113,7 @@
}
background-color: $secondary;
color: $tertiary;
border: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
border: 1px solid $tertiary-low;
border-bottom: none;
width: 145px;
height: 34px;
@ -144,8 +144,8 @@
top: 0;
bottom: 0;
width: 0;
border-right: 1px solid dark-light-diff($tertiary, $secondary, 85%, -65%);
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
border-right: 1px solid $tertiary-low;
background-color: $tertiary-low;
transition: width .75s;
}
}

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

@ -159,11 +159,11 @@
th {
padding: 0.5em;
text-align: right;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
td {
padding: 0.5em;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
img {
margin-right: 10px;
}
@ -196,13 +196,13 @@
th {
text-align: left;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
padding: 5px;
}
td {
padding: 5px;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
}
}
@ -215,7 +215,7 @@
color: $secondary;
.secondary {
background: dark-light-diff($primary, $secondary, 90%, -65%);
background: $primary-low;
font-size: 0.929em;
.btn { padding: 3px 12px; }
@ -241,7 +241,7 @@
}
dt {
color: dark-light-diff($secondary, $primary, 50%, -40%);
color: $secondary-medium;
margin: 0;
}
}
@ -251,8 +251,8 @@
background: rgba($secondary, .85);
blockquote {
background-color: dark-light-diff($secondary, $primary, 30%, -70%);
border-left-color: dark-light-diff($secondary, $primary, 50%, -50%);
background-color: $secondary-low;
border-left-color: $secondary-low;
}
h1 {
@ -399,7 +399,7 @@
color: $primary;
}
.item.moderator-action {
background-color: dark-light-diff($highlight, $secondary, 50%, -10%);
background-color: $highlight-medium;
}
.item.deleted {
opacity: 0.8;
@ -412,7 +412,7 @@
.item {
padding: 20px 0 15px 0;
background-color: $secondary;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
border-bottom: 1px solid $primary-low;
}
.type {
color: $primary;

20
app/assets/stylesheets/vendor/pikaday.scss vendored
View File

@ -14,20 +14,20 @@ $pd-text-color: $primary !default;
$pd-title-color: $primary !default;
$pd-title-bg: $secondary !default;
$pd-picker-bg: $secondary !default;
$pd-picker-border: dark-light-diff($secondary, $primary, -20%, 20%) !default;
$pd-picker-border-bottom: dark-light-diff($secondary, $primary, -30%, 30%) !default;
$pd-picker-border: $primary-low !default;
$pd-picker-border-bottom: $primary-low !default;
$pd-picker-shadow: rgba(0,0,0,.5) !default;
$pd-th-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
$pd-day-color: dark-light-diff($primary, $secondary, -30%, 30%) !default;
$pd-day-bg: dark-light-diff($primary, $secondary, 90%, -90%) !default;
$pd-day-hover-color: $secondary !default;
$pd-day-hover-bg: dark-light-diff($tertiary, $secondary, 30%, -30%) !default;
$pd-th-color: $primary !default;
$pd-day-color: $primary !default;
$pd-day-bg: $secondary !default;
$pd-day-hover-color: $primary !default;
$pd-day-hover-bg: $tertiary-low !default;
$pd-day-today-color: $tertiary !default;
$pd-day-selected-color: $secondary !default;
$pd-day-selected-bg: $tertiary !default;
$pd-day-selected-shadow: dark-light-diff($tertiary, $secondary, 50%, -50%) !default;
$pd-day-disabled-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
$pd-week-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
$pd-day-selected-shadow: $tertiary-low !default;
$pd-day-disabled-color: $primary !default;
$pd-week-color: $primary !default;
// Font
$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;