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

Merge pull request #2627 from awesomerobot/master 

bettering support for dark ez-themes
This commit is contained in:
Régis Hanol 2014-08-06 16:08:38 +02:00
parent 562d2e0c86 38696e5a30
commit 8b4ce5df77
24 changed files with 125 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,7 +93,7 @@ td.flaggers td {
width: 460px;
right: 0px;
z-index: 990;
box-shadow: 0 2px 6px scale-color-diff();
box-shadow: 0 2px 6px rgba(0,0,0, .8);
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px;
@ -108,7 +108,7 @@ td.flaggers td {
}
.admin-controls {
background-color: darken($secondary, 5%);
background-color: dark-light-diff($primary, $secondary, 90%, -20%);
padding: 10px 10px 3px 0;
height: 35px;
.nav.nav-pills {
@ -272,7 +272,8 @@ td.flaggers td {
.setting.overridden {
input[type=text] {
background-color: scale-color($highlight, $lightness: 50%);
background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
}
h3 {
@ -681,7 +682,7 @@ table.api-keys {
background-color: scale-color-diff();
margin-bottom: 20px;
margin-top: 10px;
box-shadow: inset 0 0 10px rgba($primary, .1);
box-shadow: inset 0 0 10px rgba(0,0,0, .1);
.look-here {
float: left;
@ -843,7 +844,7 @@ table.api-keys {
.content-list {
h3 {
color: $primary;
color: dark-light-diff($primary, $secondary, 90%, -60%);
font-size: 15px;
padding-left: 5px;
margin-bottom: 10px;

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

@ -17,7 +17,7 @@
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid scale-color-diff();
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
background: rgba($secondary, .8);
> tbody > tr {

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

@ -31,15 +31,15 @@
-webkit-appearance: none;
}
&.alert-success {
background-color: scale-color($success, $lightness: 90%);
color: $success;
background-color: dark-light-diff($success, $secondary, 50%, -60%);
color: $primary;
}
&.alert-error {
background-color: scale-color($danger, $lightness: 75%);
color: $danger;
background-color: rgba(dark-light-diff($danger, $secondary, 50%, -60%), .5);
color: $primary;
}
&.alert-info {
background-color: scale-color($tertiary, $lightness: 90%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
color: $primary;
}
}

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

@ -4,7 +4,7 @@
top: 0;
z-index: 1001;
background-color: $header_background;
box-shadow: 0 2px 4px -2px rgba($header_primary, .25);
box-shadow: 0 2px 4px -2px rgba(0,0,0, .25);
.docked & {
position: fixed;
@ -152,7 +152,7 @@
border: 1px solid scale-color-diff();
padding: 5px;
@include box-shadow(0 2px 2px rgba($primary, .4));
@include box-shadow(0 2px 2px rgba(0,0,0, .4));
// note these topic counts only appear for anons in the category hamburger drop down
b.topics-count {
@ -179,18 +179,18 @@
}
&:hover a:not(.badge-notification) {
background-color: scale-color($highlight, $lightness: 60%);
background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
}
button {margin-left: 5px;}
}
.heading a:hover {
background-color: scale-color($highlight, $lightness: 60%);
background-color: dark-light-diff($highlight, $secondary, 50%, -30%);
}
.selected {
background-color: scale-color($tertiary, $lightness: 90%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
}

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

@ -18,7 +18,7 @@
bottom: 0;
left: 0;
z-index: 1040;
background-color: $primary;
background-color: #111;
&.fade {
opacity: 0;
}
@ -54,7 +54,7 @@
border: 1px solid scale-color-diff();
border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8);
box-shadow: 0 3px 7px rgba(0,0,0, .8);
background-clip: padding-box;
}
@ -87,7 +87,7 @@
.modal {
.nav {
padding: 10px 30px 10px 15px;
background-color: lighten($secondary, 76%);
background-color: dark-light-diff($secondary, $primary, 10%, -15%);
li > a {
font-size: 14px;
}

3
app/assets/stylesheets/common/base/pagedown.scss
View File

@ -124,7 +124,8 @@
}
.wmd-prompt-background {
background-color: $primary;
background-color: #111;
box-shadow: 0 3px 7px rgba(0,0,0, .8);
}
.wmd-prompt-dialog {

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

@ -4,7 +4,7 @@
position: absolute;
left: 20px;
z-index: 990;
box-shadow: 0 1px 5px rgba($primary, .4);
box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-color: scale-color-diff();
padding: 6px 10px 10px 10px;
width: 300px;

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

@ -44,7 +44,7 @@ aside.quote {
}
.cooked .highlight {
background-color: scale-color($highlight, $lightness: 40%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
padding: 2px;
margin: -2px;
}

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

@ -1,8 +1,8 @@
/* Default badge styles. */
.user-badge {
padding: 3px 8px;
color: darken($primary, 40%);;
border: 1px solid lighten($primary, 60%);
color: $primary;
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
font-size: $base-font-size * 0.86;
line-height: 19px;
margin: 0;

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

@ -115,8 +115,8 @@ h1 a.badge-category div {vertical-align: top;}
padding: 3px 5px;
color: $primary;
text-shadow: 0 1px 0 rgba($primary, 0.1);
background-color: #ddd;
border-color: #aaa;
background-color: dark-light-diff($primary, $secondary, 90%, -65%);
border-color: dark-light-diff($primary, $secondary, 90%, -65%);
font-size: 12px;
@include box-shadow(inset 0 1px 0 rgba($primary, 0.22));
@include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.22));
}

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

@ -14,6 +14,8 @@
line-height: 18px;
text-align: center;
cursor: pointer;
transition: all .25s;
&:active {
text-shadow: none;
}
@ -43,13 +45,13 @@
border: none;
color: $primary;
font-weight: normal;
background: scale-color-diff();
background: dark-light-diff($primary, $secondary, 90%, -65%);
&[href] {
color: $primary;
}
&:hover {
background: #aaa;
background: dark-light-diff($primary, $secondary, 65%, -75%);
color: #fff;
}
&:active {
@ -120,7 +122,7 @@
.btn-social {
color: $secondary;
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include box-shadow(inset 0 1px 0 rgba($primary, 0.1));
@include box-shadow(inset 0 1px 0 rgba(0,0,0, 0.1));
&[href] {
color: $secondary;
}

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

@ -29,9 +29,10 @@
color: $primary;
font-size: 16px;
line-height: 20px;
transition: background .15s;
&:hover {
color: $quaternary;
background-color: scale-color($quaternary, $lightness: 70%);
background-color: dark-light-diff($quaternary, $secondary, 70%, -70%);
}
}
&.active > a, > a.active {
@ -50,9 +51,8 @@
padding: 0;
overflow: hidden;
background-color: scale-color-diff();
@include box-shadow(0 1px 0 scale-color-diff());
> li {
border-bottom: 2px solid scale-color($primary, $lightness: 80%);
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -30%);
&:last-of-type {
border-bottom: 0;
}

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

@ -31,6 +31,20 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
@import "plugins_variables";
@function brightness($color) {
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)); //w3c definition of color brightness
}
@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
@if brightness($adjusted-color) < brightness($comparison-color) {
@return scale-color($adjusted-color, $lightness: $lightness)
} @else {
@return scale-color($adjusted-color, $lightness: $darkness)
}
}
//phasing out scale-color-diff for dark-light-diff
@function scale-color-diff() {
@if lightness($primary) < lightness($secondary) {
@return scale-color($primary, $lightness: 90%)

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

@ -6,12 +6,10 @@
display: block;
padding: 5px 10px;
z-index: 101;
@include border-radius-all(2px);
border: solid 1px #955;
&.bad {
background-color: #b66;
background: dark-light-diff($danger, $secondary, 20%, -40%);
color: white;
box-shadow: 1px 1px 5px #777, inset 0 0 9px #b55;
box-shadow: 1px 1px 5px rgba(0,0,0, .7);
}
&.hide, &.good {
display: none;

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

@ -13,11 +13,11 @@
.composer-popup {
@include box-shadow(3px 3px 3px rgba($primary, 0.34));
background: scale-color($highlight, $lightness: 50%);
@include box-shadow(3px 3px 3px rgba(0,0,0, 0.34));
background: dark-light-diff($highlight, $secondary, 50%, -40%);
&.urgent {
background: scale-color($danger, $lightness: 50%);
background: dark-light-diff($danger, $secondary, 50%, -40%);
}
h3 {

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

@ -24,6 +24,7 @@ html {font-size: 14px/19px;}
}
}
@media all
and (max-width : 570px) {
body {
@ -33,7 +34,9 @@ and (max-width : 570px) {
.full-width {
min-width: 0;
}
.d-header .current-username a {display: none;}
}
header {
@ -54,7 +57,7 @@ body {
color: $danger;
}
a.star {
color: scale-color($primary, $lightness: 75%);
color: dark-light-diff($secondary, $primary, 80%, -20%);
&:before {
font-family: "FontAwesome";
content: "\f005";
@ -213,7 +216,7 @@ body {
background-color:$secondary;
border: 1px solid scale-color-diff();
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary, .3);
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
@ -222,7 +225,7 @@ body {
background-color: $secondary;
border: 1px solid scale-color-diff();
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba($primary, .3);
box-shadow: inset 0 1px 1px rgba(0,0,0, .3);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
@ -230,13 +233,13 @@ body {
textarea:focus {
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
}
input {
&[type="text"]:focus, &[type="password"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus {
border-color: $tertiary;
outline: 0;
box-shadow: inset 0 1px 1px rgba($primary, .3), 0 0 8px $tertiary;
box-shadow: inset 0 1px 1px rgba(0,0,0, .3), 0 0 8px $tertiary;
}
}

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

@ -19,7 +19,7 @@
border: 1px solid scale-color-diff();
border: 1px solid scale-color-diff();
box-shadow: 0 3px 7px rgba($primary, .8);
box-shadow: 0 3px 7px rgba(0,0,0, .8);
background-clip: padding-box;
}
@ -63,11 +63,11 @@ animation: modal .25s;
font-size: 20px;
padding: 10px 15px 7px;
}
.close {margin: 10px;}
}
.close {
float: right;
font-size: 20px;
margin: 10px 10px 0;
text-decoration: none;
color: scale-color($primary, $lightness: 35%);
cursor: pointer;

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

@ -5,7 +5,7 @@
width: 460px;
left: 20px;
z-index: 990;
box-shadow: 0 2px 6px scale-color-diff();
box-shadow: 0 2px 6px rgba(0,0,0, .6);
margin-top: -2px;
background-color: $secondary;
padding: 12px 12px 5px 12px;

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

@ -123,7 +123,7 @@
.sortable {
cursor: pointer;
&:hover {
background-color: scale-color-diff();
background-color: dark-light-diff($primary, $secondary, 90%, -75%);
}
@include unselectable;
}

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

@ -99,13 +99,13 @@ nav.post-controls {
}
.show-replies {
background: scale-color-diff();
background: dark-light-diff($primary, $secondary, 90%, -65%);
padding: 8px 15px;
padding-bottom: 20px;
margin-left: 0;
span.badge-posts {color: scale-color($primary, $lightness: 60%);}
&:hover {
background: scale-color-diff();
background: dark-light-diff($primary, $secondary, 90%, -65%);
span.badge-posts {color: $primary;}
}
i {
@ -116,17 +116,17 @@ nav.post-controls {
button.create {
margin-right: 0;
color: $tertiary;
background: scale-color($tertiary, $lightness: 90%);
background: dark-light-diff($tertiary, $secondary, 90%, -65%);
padding: 8px 20px;
margin-left: 10px;
&:hover { color: $secondary;
background: $tertiary;
background: dark-light-diff($tertiary, $secondary, 0%, -20%)
}
&:active {
background: scale-color($tertiary, $lightness: 50%);
@include box-shadow(inset 0 1px 3px rgba($primary, .3));
background: dark-light-diff($tertiary, $secondary, 50%, -35%);
@include box-shadow(inset 0 1px 3px rgba(0,0,0, .3));
}
@ -150,7 +150,7 @@ nav.post-controls {
}
&:active {
@include box-shadow(inset 0 1px 3px rgba($primary, .4));
@include box-shadow(inset 0 1px 3px rgba(0,0,0, .4));
}
&.hidden {
@ -165,8 +165,9 @@ nav.post-controls {
color: $secondary;
}
&.like:hover {color: $love;
background: scale-color($love, $lightness: 75%);
&.like:hover {
color: $love;
background: dark-light-diff($love, $secondary, 85%, -60%)
}
&.has-like {color: $love;}
@ -240,11 +241,13 @@ nav.post-controls {
width: 86%;
padding-left: 1%;
padding-right: 1%;
border: none;
}
.topic-avatar {
width: 45px;
margin: 0 10px 0 15px;
border: none;
}
@ -283,7 +286,7 @@ nav.post-controls {
.fa-arrow-up {margin-left: 5px;}
.row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
.reply:first-of-type .row {border-top: none;}
background: scale-color-diff();
background: dark-light-diff($primary, $secondary, 90%, -65%);
.quote .title, blockquote, .onebox, .onebox-result {
background: darken(scale-color-diff(), 5%);
@ -328,7 +331,7 @@ a.star {
.topic-map {
margin: 20px 0 0 0;
background: scale-color(scale-color-diff(), $lightness: 40%);
background: dark-light-diff($primary, $secondary, 90%, -65%);
.buttons .btn {
&:hover {border: 1px solid $primary !important;}
@ -437,15 +440,15 @@ a.star {
float: right;
.btn {
border: 0;
border-bottom: 1px solid scale-color-diff();
border-bottom: 1px solid dark-light-diff($primary, $secondary, 80%, -75%);
padding: 0 23px;
color: $primary;
background: scale-color-diff();
background: dark-light-diff($primary, $secondary, 80%, -75%);
&:hover {
background: scale-color($primary, $lightness: 75%);
background: dark-light-diff($primary, $secondary, 65%, -85%);
color: $primary;
border: none !important;
border-bottom: 1px solid scale-color($primary, $lightness: 75%) !important;
border-bottom: 1px solid dark-light-diff($primary, $secondary, 65%, -85%) !important;
span.badge-posts {color: $primary;}
}
@ -561,7 +564,10 @@ text-overflow: ellipsis;
margin-right: 7px;
font-size: 20px;
margin-top: 6px;
color: dark-light-diff($secondary, $primary, 80%, -20%) !important;
}
a.star.starred {color: $danger !important;}
.topic-statuses {
margin-top: -2px;
@ -604,13 +610,13 @@ text-overflow: ellipsis;
.moderator {
.topic-body {
background-color: scale-color($highlight, $lightness: 75%);
background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
}
}
.deleted {
.topic-body {
background-color: scale-color($danger, $lightness: 75%);
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
}
}
@ -764,14 +770,15 @@ $topic-avatar-width: 45px;
float: left;
position: relative;
z-index: 2;
border-top: 1px solid scale-color-diff();
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
&.highlighted {
background-color: scale-color($tertiary, $lightness: 85%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
}
}
.topic-avatar {
border-top: 1px solid scale-color-diff();
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding-top: 16px;
width: $topic-avatar-width;
float: left;
@ -830,7 +837,7 @@ $topic-avatar-width: 45px;
list-style: none;
background-color: $secondary;
border: 1px solid scale-color-diff();
box-shadow: 0 1px 5px rgba($primary, .4);
box-shadow: 0 1px 5px rgba(0,0,0, .4);
background-clip: padding-box;
span {font-size: 12px;}
.title {font-weight: bold; display: block; font-size: 14px;}
@ -852,7 +859,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .active > a:hover {
color: $primary;
text-decoration: none;
background-color: scale-color($highlight, $lightness: 60%);
background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
}
@ -860,7 +867,7 @@ $topic-avatar-width: 45px;
.dropdown-menu .disabled > a:hover {
text-decoration: none;
color: $primary;
background-color: scale-color($tertiary, $lightness: 90%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -60%);
cursor: default;
}
@ -893,7 +900,7 @@ $topic-avatar-width: 45px;
position: fixed;
z-index: 1000;
left: 50%;
background-color: scale-color($tertiary, $lightness: 50%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
border: 1px solid $tertiary;
padding: 5px;
margin-bottom: 5px;
@ -945,13 +952,13 @@ $topic-avatar-width: 45px;
}
&:active {
@include linear-gradient(darken($tertiary, 18%), darken($tertiary, 12%));
@include box-shadow(inset 0 1px 3px rgba($primary, 0.2));
@include box-shadow(inset 0 1px 3px rgba(0,0,0, 0.2));
color: $secondary;
}
&[disabled] {
text-shadow: 0 1px 0 rgba($primary, 0.2);
@include linear-gradient($tertiary, darken($tertiary, 20%));
@include box-shadow((inset 0 1px 0 rgba($primary, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
@include box-shadow((inset 0 1px 0 rgba(0,0,0, 0.33), inset 0 -1px 2px rgba($primary, 0.2)));
}
}
}
@ -1007,7 +1014,7 @@ a.attachment:before {
display: block;
position: absolute;
left: 767px;
color: scale-color-diff();
color: rgba(dark-light-diff($primary, $secondary, 90%, -65%) , .8);
font: 90px/1 FontAwesome;
content: "\f05c";
z-index: -5;
@ -1043,7 +1050,7 @@ a.attachment:before {
}
span.highlighted {
background-color: scale-color($highlight, $lightness: 70%);
background-color: dark-light-diff($tertiary, $secondary, 90%, -40%);
}
.username.new-user a {

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

@ -86,7 +86,7 @@ a.reply-new {
a:hover.reply-new {
color: $tertiary;
i {
background: scale-color($tertiary, $lightness: 75%);
background: dark-light-diff($tertiary, $secondary, 90%, -65%);
border: 1px solid $tertiary;
}
}
@ -109,7 +109,7 @@ a:hover.reply-new {
}
#topic-closing-info {
border-top: 1px solid scale-color-diff();
border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
padding-top: 10px;
height: 20px;
}
@ -131,7 +131,7 @@ a:hover.reply-new {
border: 1px solid scale-color-diff();
padding: 5px;
background: $secondary;
@include box-shadow(0 0px 2px rgba($primary, .2));
@include box-shadow(0 0px 2px rgba(0,0,0, .2));
position: relative;
left: 345px;
@ -209,7 +209,7 @@ a:hover.reply-new {
bottom: 0;
width: 0;
border-right: 1px solid scale-color-diff();
background-color: scale-color($success, $lightness: 70%);
background-color: dark-light-diff($success, $secondary, 60%, -35%);
transition: width .75s;
}
}
@ -283,7 +283,7 @@ kbd
background-color: $secondary;
border:1px solid scale-color-diff();
border-radius: 3px;
box-shadow: 0 1px 0 rgba($primary, .9);
box-shadow: 0 1px 0 rgba(0,0,0, .8);
color: $primary;
display: inline-block;
font-size: 12px;

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

@ -151,7 +151,7 @@
}
.about {
background-color: $primary;
background-color: dark-light-diff($primary, $secondary, 0%, -75%);
background-size: cover;
background-position: center center;
@ -182,7 +182,8 @@
}
a[href] {
color: $secondary;
color: dark-light-diff($secondary, $primary, 75%, -10%);
}
img.avatar {
@ -197,19 +198,19 @@
position: relative;
float: left;
width: 71%;
color: $secondary;
color: dark-light-diff($secondary, $primary, 75%, 0%);
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
h1, h2 {font-weight: bold;}
.bio {
color: $secondary;
color: dark-light-diff($secondary, $primary, 75%, 0%);
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
max-height: 300px;
overflow: auto;
a[href] {
color: $secondary;
color: dark-light-diff($secondary, $primary, 75%, 0%);
text-decoration: underline;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
}
@ -223,7 +224,7 @@
.secondary {
float: right;
background-color: rgba(scale-color($primary, $lightness: 20%), .9);
background-color: rgba(dark-light-diff($primary, $secondary, 20%, -85%), .9);
text-align: right;
padding: 0 10px;
max-width: 20%;
@ -232,16 +233,18 @@
margin: 0 0 7px 0;
overflow: hidden;
text-overflow: ellipsis;
color: dark-light-diff($secondary, $primary, 75%, -10%);
}
dt {
color: rgba($secondary, .7);
color: dark-light-diff($secondary, $primary, 50%, -40%);
margin: 0;
}
}
}
.controls {
background-color: scale-color($primary, $lightness: 30%);
background-color: dark-light-diff($primary, $secondary, 30%, -80%);
padding: 12px;
height: 30px;
@ -300,11 +303,11 @@
color: $primary;
}
.item.moderator-action {
background-color: scale-color($highlight, $lightness: 50%);
background-color: dark-light-diff(rgba($highlight,.7), $secondary, 50%, -10%);
}
.item.deleted {
opacity: 0.8;
background-color: scale-color($danger, $lightness: 50%);
background-color: dark-light-diff(rgba($danger,.7), $secondary, 50%, -10%);
}
.item.hidden {
display: block;

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

@ -21,7 +21,7 @@
border: 1px solid rgba(0, 0, 0, 0.3);
@include border-radius-all (6px);
box-shadow: 0 3px 7px rgba($primary, 0.3);
box-shadow: 0 3px 7px rgba(0,0,0, 0.3);
background-clip: padding-box;
}

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

@ -50,7 +50,7 @@
}
.docked #topic-progress {
box-shadow: 0 0 3px rbga($primary, .5);
box-shadow: 0 0 3px rbga(0,0,0, .5);
}
#topic-progress-wrapper {
@ -67,7 +67,7 @@
border: 1px solid scale-color-diff();
padding: 5px;
background: $secondary;
@include box-shadow(0 0px 2px rgba($primary, .2));
@include box-shadow(0 0px 2px rgba(0,0,0, .2));
position: absolute;
bottom: 34px;
@ -104,7 +104,7 @@
}
#topic-progress {
box-shadow: 0 0 3px rbga($primary, .7);
box-shadow: 0 0 3px rbga(0,0,0, .7);
position: relative;
&.hidden {
display: none;