Merge pull request #3682 from riking/dark-theme-fix
Dark theme fix, part 5
This commit is contained in:
Sam
commit
851c04478a
|
|
@ -40,6 +40,93 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="greyexplain">
|
||||
Various greys used throught the UI.
|
||||
<div><div class="cboxcontainer primary">
|
||||
<div class="cbox0"></div>
|
||||
<div class="cbox5"></div>
|
||||
<div class="cbox10"></div>
|
||||
<div class="cbox15"></div>
|
||||
<div class="cbox20"></div>
|
||||
<div class="cbox25"></div>
|
||||
<div class="cbox30"></div>
|
||||
<div class="cbox40"></div>
|
||||
<div class="cbox50"></div>
|
||||
<div class="cbox60"></div>
|
||||
<div class="cbox70"></div>
|
||||
<div class="cbox75"></div>
|
||||
<div class="cbox80"></div>
|
||||
<div class="cbox85"></div>
|
||||
<div class="cbox90"></div>
|
||||
<div class="cbox95"></div>
|
||||
<div class="cbox100"></div>
|
||||
blend-primary-secondary()
|
||||
</div></div>
|
||||
|
||||
<div><div class="cboxcontainer secondary">
|
||||
<div class="cbox0"></div>
|
||||
<div class="cbox5"></div>
|
||||
<div class="cbox10"></div>
|
||||
<div class="cbox15"></div>
|
||||
<div class="cbox20"></div>
|
||||
<div class="cbox25"></div>
|
||||
<div class="cbox30"></div>
|
||||
<div class="cbox40"></div>
|
||||
<div class="cbox50"></div>
|
||||
<div class="cbox60"></div>
|
||||
<div class="cbox70"></div>
|
||||
<div class="cbox75"></div>
|
||||
<div class="cbox80"></div>
|
||||
<div class="cbox85"></div>
|
||||
<div class="cbox90"></div>
|
||||
<div class="cbox95"></div>
|
||||
<div class="cbox100"></div>
|
||||
blend-primary-secondary()
|
||||
</div></div>
|
||||
|
||||
<div><div class="cboxcontainer primary">
|
||||
<div class="dbox100"></div>
|
||||
<div class="dbox95"></div>
|
||||
<div class="dbox90"></div>
|
||||
<div class="dbox85"></div>
|
||||
<div class="dbox80"></div>
|
||||
<div class="dbox75"></div>
|
||||
<div class="dbox70"></div>
|
||||
<div class="dbox60"></div>
|
||||
<div class="dbox50"></div>
|
||||
<div class="dbox40"></div>
|
||||
<div class="dbox30"></div>
|
||||
<div class="dbox25"></div>
|
||||
<div class="dbox20"></div>
|
||||
<div class="dbox15"></div>
|
||||
<div class="dbox10"></div>
|
||||
<div class="dbox5"></div>
|
||||
<div class="dbox0"></div>
|
||||
dark-light-diff()
|
||||
</div></div>
|
||||
|
||||
<div><div class="cboxcontainer secondary">
|
||||
<div class="dbox100"></div>
|
||||
<div class="dbox95"></div>
|
||||
<div class="dbox90"></div>
|
||||
<div class="dbox85"></div>
|
||||
<div class="dbox80"></div>
|
||||
<div class="dbox75"></div>
|
||||
<div class="dbox70"></div>
|
||||
<div class="dbox60"></div>
|
||||
<div class="dbox50"></div>
|
||||
<div class="dbox40"></div>
|
||||
<div class="dbox30"></div>
|
||||
<div class="dbox25"></div>
|
||||
<div class="dbox20"></div>
|
||||
<div class="dbox15"></div>
|
||||
<div class="dbox10"></div>
|
||||
<div class="dbox5"></div>
|
||||
<div class="dbox0"></div>
|
||||
dark-light-diff()
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
{{#if colors.length}}
|
||||
<table class="table colors">
|
||||
<thead>
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@ function setupNotifications() {
|
|||
if (document) {
|
||||
document.addEventListener("scroll", resetIdle);
|
||||
}
|
||||
window.addEventListener("mouseover", resetIdle);
|
||||
PageTracker.on("change", resetIdle);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1693,3 +1693,59 @@ table#user-badges {
|
|||
.mobile-view .full-width {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.cboxcontainer {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
padding-bottom: 4px;
|
||||
|
||||
* {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
border: 1px solid $tertiary;
|
||||
}
|
||||
&.primary {
|
||||
background: $primary;
|
||||
}
|
||||
&.secondary {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
.cbox0 { background: blend-primary-secondary(0%); }
|
||||
.cbox10 { background: blend-primary-secondary(10%); }
|
||||
.cbox20 { background: blend-primary-secondary(20%); }
|
||||
.cbox30 { background: blend-primary-secondary(30%); }
|
||||
.cbox40 { background: blend-primary-secondary(40%); }
|
||||
.cbox50 { background: blend-primary-secondary(50%); }
|
||||
.cbox60 { background: blend-primary-secondary(60%); }
|
||||
.cbox70 { background: blend-primary-secondary(70%); }
|
||||
.cbox80 { background: blend-primary-secondary(80%); }
|
||||
.cbox90 { background: blend-primary-secondary(90%); }
|
||||
.cbox100 { background: blend-primary-secondary(100%); }
|
||||
.cbox5 { background: blend-primary-secondary(5%); }
|
||||
.cbox7 { background: blend-primary-secondary(7%); }
|
||||
.cbox15 { background: blend-primary-secondary(15%); }
|
||||
.cbox17 { background: blend-primary-secondary(17%); }
|
||||
.cbox25 { background: blend-primary-secondary(25%); }
|
||||
.cbox95 { background: blend-primary-secondary(95%); }
|
||||
.cbox85 { background: blend-primary-secondary(85%); }
|
||||
.cbox75 { background: blend-primary-secondary(75%); }
|
||||
|
||||
.dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); }
|
||||
.dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); }
|
||||
.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%); }
|
||||
.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%); }
|
||||
.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%); }
|
||||
.dbox25 { background: dark-light-diff($primary, $secondary, 25%, -25%); }
|
||||
.dbox95 { background: dark-light-diff($primary, $secondary, 95%, -95%); }
|
||||
.dbox85 { background: dark-light-diff($primary, $secondary, 85%, -85%); }
|
||||
.dbox75 { background: dark-light-diff($primary, $secondary, 75%, -75%); }
|
||||
|
|
|
|||
|
|
@ -120,12 +120,12 @@ aside.onebox {
|
|||
}
|
||||
|
||||
a[href] {
|
||||
color: scale-color($tertiary, $lightness: -20%);
|
||||
color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a[href]:visited {
|
||||
color: scale-color($tertiary, $lightness: -20%);
|
||||
color: dark-light-choose(scale-color($tertiary, $lightness: -20%), $tertiary);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
h1, h2, h3, h4, h5, h6 { margin: 30px 0 10px; }
|
||||
h1 { line-height: 1em; } /* normalize.css sets h1 font size but not line height */
|
||||
a { word-wrap: break-word; }
|
||||
ins { background-color: dark-light-choose(scale-color($success, $lightness: 90%), scale-color($success, $lightness: -60%)); }
|
||||
del { background-color: dark-light-choose(scale-color($danger, $lightness: 90%), scale-color($danger, $lightness: -60%)); }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -169,7 +171,7 @@ pre {
|
|||
display: block;
|
||||
padding: 5px 10px;
|
||||
color: $primary;
|
||||
background: dark-light-diff($primary, $secondary, 97%, -65%);
|
||||
background: blend-primary-secondary(5%);
|
||||
max-height: 500px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -265,9 +265,9 @@
|
|||
|
||||
&.clicks {
|
||||
font-weight: normal;
|
||||
background-color: dark-light-diff($primary, $secondary, 85%, -65%);
|
||||
background-color: dark-light-diff($primary, $secondary, 85%, -60%);
|
||||
top: -1px;
|
||||
color: dark-light-diff($primary, $secondary, 50%, -45%);
|
||||
color: dark-light-diff($primary, $secondary, 50%, -20%);
|
||||
position: relative;
|
||||
margin-left: 2px;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
// This file:
|
||||
// Copyright (c) 2013 Takeru Suzuki
|
||||
// Licensed under the MIT license.
|
||||
// https://github.com/terkel/mathsass
|
||||
|
||||
// Constants
|
||||
$E: 2.718281828459045;
|
||||
$PI: 3.141592653589793;
|
||||
$LN2: 0.6931471805599453;
|
||||
$SQRT2: 1.4142135623730951;
|
||||
|
||||
@function error($message) {
|
||||
@warn "#{_error("The direction used does not exist")}";
|
||||
@return null;
|
||||
}
|
||||
|
||||
// Returns the factorial of a non-negative integer.
|
||||
// @param {Number} $x A non-negative integer.
|
||||
// @return {Number}
|
||||
// @example
|
||||
// fact(0) // 1
|
||||
// fact(8) // 40320
|
||||
@function fact ($x) {
|
||||
@if $x < 0 or $x != floor($x) {
|
||||
@warn "Argument for `fact()` must be a positive integer.";
|
||||
@return null;
|
||||
}
|
||||
$ret: 1;
|
||||
@while $x > 0 {
|
||||
$ret: $ret * $x;
|
||||
$x: $x - 1;
|
||||
}
|
||||
@return $ret;
|
||||
}
|
||||
|
||||
|
||||
// Returns a two-element list containing the normalized fraction and exponent of number.
|
||||
// @param {Number} $x
|
||||
// @return {List} fraction, exponent
|
||||
@function frexp ($x) {
|
||||
$exp: 0;
|
||||
@if $x < 0 {
|
||||
$x: $x * -1;
|
||||
}
|
||||
@if $x < 0.5 {
|
||||
@while $x < 0.5 {
|
||||
$x: $x * 2;
|
||||
$exp: $exp - 1;
|
||||
}
|
||||
} @else if $x >= 1 {
|
||||
@while $x >= 1 {
|
||||
$x: $x / 2;
|
||||
$exp: $exp + 1;
|
||||
}
|
||||
}
|
||||
@return $x, $exp;
|
||||
}
|
||||
|
||||
// Returns $x * 2^$exp
|
||||
// @param {Number} $x
|
||||
// @param {Number} $exp
|
||||
@function ldexp ($x, $exp) {
|
||||
$b: if($exp >= 0, 2, 1 / 2);
|
||||
@if $exp < 0 {
|
||||
$exp: $exp * -1;
|
||||
}
|
||||
@while $exp > 0 {
|
||||
@if $exp % 2 == 1 {
|
||||
$x: $x * $b;
|
||||
}
|
||||
$b: $b * $b;
|
||||
$exp: floor($exp * 0.5);
|
||||
}
|
||||
@return $x;
|
||||
}
|
||||
|
||||
// Returns the natural logarithm of a number.
|
||||
// @param {Number} $x
|
||||
// @example
|
||||
// log(2) // 0.69315
|
||||
// log(10) // 2.30259
|
||||
@function log ($x) {
|
||||
@if $x <= 0 {
|
||||
@return 0 / 0;
|
||||
}
|
||||
$k: nth(frexp($x / $SQRT2), 2);
|
||||
$x: $x / ldexp(1, $k);
|
||||
$x: ($x - 1) / ($x + 1);
|
||||
$x2: $x * $x;
|
||||
$i: 1;
|
||||
$s: $x;
|
||||
$sp: null;
|
||||
@while $sp != $s {
|
||||
$x: $x * $x2;
|
||||
$i: $i + 2;
|
||||
$sp: $s;
|
||||
$s: $s + $x / $i;
|
||||
}
|
||||
@return $LN2 * $k + 2 * $s;
|
||||
}
|
||||
|
||||
@function ipow($base, $exp) {
|
||||
@if $exp != floor($exp) {
|
||||
@return error("Exponent for `ipow()` must be an integer.");
|
||||
}
|
||||
$r: 1;
|
||||
$s: 0;
|
||||
@if $exp < 0 {
|
||||
$exp: $exp * -1;
|
||||
$s: 1;
|
||||
}
|
||||
@while $exp > 0 {
|
||||
@if $exp % 2 == 1 {
|
||||
$r: $r * $base;
|
||||
}
|
||||
$exp: floor($exp * 0.5);
|
||||
$base: $base * $base;
|
||||
}
|
||||
@return if($s != 0, 1 / $r, $r);
|
||||
}
|
||||
|
||||
// Returns E^x, where x is the argument, and E is Euler's constant, the base of the natural logarithms.
|
||||
// @param {Number} $x
|
||||
// @example
|
||||
// exp(1) // 2.71828
|
||||
// exp(-1) // 0.36788
|
||||
@function exp ($x) {
|
||||
$ret: 0;
|
||||
@for $n from 0 to 24 {
|
||||
$ret: $ret + ipow($x, $n) / fact($n);
|
||||
}
|
||||
@return $ret;
|
||||
}
|
||||
|
||||
// Returns base to the exponent power.
|
||||
// @param {Number} $base The base number
|
||||
// @param {Number} $exp The exponent to which to raise base
|
||||
// @return {Number}
|
||||
// @example
|
||||
// pow(4, 2) // 16
|
||||
// pow(4, -2) // 0.0625
|
||||
// pow(4, 0.2) // 1.31951
|
||||
@function pow ($base, $exp) {
|
||||
@if $exp == floor($exp) {
|
||||
@return ipow($base, $exp);
|
||||
} @else {
|
||||
@return exp(log($base) * $exp);
|
||||
}
|
||||
}
|
||||
|
||||
// Returns the square root of a number.
|
||||
// @param {Number} $x
|
||||
// @example
|
||||
// sqrt(2) // 1.41421
|
||||
// sqrt(5) // 2.23607
|
||||
@function sqrt ($x) {
|
||||
@if $x < 0 {
|
||||
@return error("Argument for `sqrt()` must be a positive number.");
|
||||
}
|
||||
$ret: 1;
|
||||
@for $i from 1 through 24 {
|
||||
$ret: $ret - (pow($ret, 2) - $x) / (2 * $ret);
|
||||
}
|
||||
@return $ret;
|
||||
}
|
||||
|
|
@ -98,5 +98,5 @@
|
|||
// Stuff we repeat
|
||||
@mixin post-aside {
|
||||
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -85%);
|
||||
background-color: dark-light-diff($primary, $secondary, 97%, -75%);
|
||||
background-color: blend-primary-secondary(5%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,56 +30,37 @@ $base-font-family: Helvetica, Arial, sans-serif !default;
|
|||
/* These files don't actually exist. They're injected by DiscourseSassImporter. */
|
||||
@import "theme_variables";
|
||||
@import "plugins_variables";
|
||||
@import "common/foundation/math";
|
||||
|
||||
// Color Utilities
|
||||
|
||||
// Square Root function
|
||||
// http://codepen.io/Designer023/pen/DkEtw
|
||||
@function approximateSq($num, $approx) {
|
||||
$root : (( $num / $approx ) + $approx) / 2;
|
||||
@return $root;
|
||||
}
|
||||
|
||||
@function sqrt($num) {
|
||||
$root:0;
|
||||
$testRoot : 0.001;
|
||||
$upperBounds : round($num / 2) + 1; //never need over half the main number. Add one just to be sure!
|
||||
$loops : $upperBounds;
|
||||
@for $test from 2 through $upperBounds {
|
||||
$sq : $test * $test;
|
||||
@if $sq <= $num {
|
||||
$testRoot : $test;
|
||||
}
|
||||
}
|
||||
|
||||
$root : (approximateSq($num, $testRoot));
|
||||
|
||||
@return $root;
|
||||
}
|
||||
|
||||
// w3c definition of color brightness
|
||||
@function brightness($color) {
|
||||
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114));
|
||||
}
|
||||
|
||||
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
|
||||
// Uses an approximation of sRGB blending, GAMMA=2 instead of GAMMA=2.2
|
||||
@function choose-grey($percent) {
|
||||
@function srgb-scale($foreground, $background, $percent) {
|
||||
$ratio: ($percent / 100%);
|
||||
$iratio: 1 - $ratio;
|
||||
$pr2: red($primary) * red($primary);
|
||||
$pg2: green($primary) * green($primary);
|
||||
$pb2: blue($primary) * blue($primary);
|
||||
$sr2: red($secondary) * red($secondary);
|
||||
$sg2: green($secondary) * green($secondary);
|
||||
$sb2: blue($secondary) * blue($secondary);
|
||||
$rr2: $pr2 * $ratio + $sr2 * $iratio;
|
||||
$rg2: $pg2 * $ratio + $sg2 * $iratio;
|
||||
$rb2: $pb2 * $ratio + $sb2 * $iratio;
|
||||
$rr: sqrt($rr2);
|
||||
$rg: sqrt($rg2);
|
||||
$rb: sqrt($rb2);
|
||||
@return rgb($rr, $rg, $rb);
|
||||
$f_r2: red($foreground) * red($foreground);
|
||||
$f_g2: green($foreground) * green($foreground);
|
||||
$f_b2: blue($foreground) * blue($foreground);
|
||||
$b_r2: red($background) * red($background);
|
||||
$b_g2: green($background) * green($background);
|
||||
$b_b2: blue($background) * blue($background);
|
||||
$r_r2: $f_r2 * $ratio + $b_r2 * $iratio;
|
||||
$r_g2: $f_g2 * $ratio + $b_g2 * $iratio;
|
||||
$r_b2: $f_b2 * $ratio + $b_b2 * $iratio;
|
||||
$r_r: sqrt($r_r2);
|
||||
$r_g: sqrt($r_g2);
|
||||
$r_b: sqrt($r_b2);
|
||||
@return rgb($r_r, $r_g, $r_b);
|
||||
}
|
||||
|
||||
// Replaces dark-light-diff($primary, $secondary, 50%, -50%)
|
||||
@function blend-primary-secondary($percent) {
|
||||
@return srgb-scale($primary, $secondary, $percent);
|
||||
}
|
||||
|
||||
@function dark-light-diff($adjusted-color, $comparison-color, $lightness, $darkness) {
|
||||
|
|
|
|||
|
|
@ -308,7 +308,7 @@ a.star {
|
|||
|
||||
.topic-map {
|
||||
margin: 20px 0 0 0;
|
||||
background: dark-light-diff($primary, $secondary, 97%, -75%);
|
||||
background: blend-primary-secondary(5%);
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
border-top: none; // would cause double top border
|
||||
|
||||
|
|
@ -414,7 +414,7 @@ a.star {
|
|||
border: 0;
|
||||
padding: 0 23px;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
|
||||
background: dark-light-diff($primary, $secondary, 97%, -75%);
|
||||
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%);
|
||||
&:hover {
|
||||
|
|
@ -626,13 +626,13 @@ blockquote {
|
|||
.quote {
|
||||
&>blockquote {
|
||||
.onebox-result {
|
||||
background-color: dark-light-diff($primary, $secondary, 97%, -45%);
|
||||
background-color: blend-primary-secondary(5%);
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
.quote, .title, blockquote, .onebox, .onebox-result {
|
||||
background: dark-light-diff($primary, $secondary, 97%, -45%);
|
||||
background: blend-primary-secondary(5%);
|
||||
border-left: 5px solid dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,12 @@ display: none !important; // can be removed if inline JS CSS is removed from com
|
|||
display: none !important; // can be removed if inline JS CSS is removed from composer-popup
|
||||
}
|
||||
|
||||
input {
|
||||
background: $secondary;
|
||||
color: $primary;
|
||||
border-color: blend-primary-secondary(15%);
|
||||
}
|
||||
|
||||
#reply-control {
|
||||
// used for upload link
|
||||
.composer-bottom-right {
|
||||
|
|
@ -172,7 +178,7 @@ display: none !important; // can be removed if inline JS CSS is removed from com
|
|||
background-color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
|
||||
}
|
||||
.wmd-input {
|
||||
color: darken($primary, 40%);
|
||||
color: dark-light-choose(darken($primary, 40%), blend-primary-secondary(90%));
|
||||
}
|
||||
.wmd-input {
|
||||
bottom: 35px;
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ a.star {
|
|||
.topic-map {
|
||||
|
||||
margin: 10px 0;
|
||||
background: dark-light-diff($primary, $secondary, 97%, -45%);
|
||||
background: blend-primary-secondary(5%);
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -65%);
|
||||
border-top: none; // would cause double top border
|
||||
|
||||
|
|
@ -287,7 +287,7 @@ a.star {
|
|||
border: 0;
|
||||
padding: 0 15px;
|
||||
color: $primary;
|
||||
background: dark-light-diff($primary, $secondary, 97%, -75%);
|
||||
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%);
|
||||
.fa {
|
||||
|
|
@ -399,11 +399,11 @@ iframe {
|
|||
float: left;
|
||||
width: 97%;
|
||||
padding-left: 3%;
|
||||
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
|
||||
background-color: srgb-scale($tertiary, $secondary, 15%);
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
color: $secondary;
|
||||
background: scale-color($tertiary, $lightness: 50%);
|
||||
background: $tertiary;
|
||||
clear: both;
|
||||
}
|
||||
p {
|
||||
|
|
@ -420,7 +420,7 @@ button.select-post {
|
|||
position: absolute;
|
||||
z-index: 401; // 400 is the reply-to tab
|
||||
left: 200px;
|
||||
background-color: scale-color($tertiary, $lightness: 50%);
|
||||
background-color: srgb-scale($tertiary, $secondary, 60%);
|
||||
color: $secondary;
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@
|
|||
|
||||
.details {
|
||||
padding: 15px 15px 4px 15px;
|
||||
background-color: rgba($primary, .9);
|
||||
background-color: dark-light-choose(rgba($primary, .9), rgba($secondary, .9));
|
||||
|
||||
h1 {
|
||||
font-size: 2.143em;
|
||||
|
|
@ -306,7 +306,7 @@
|
|||
width: 100%;
|
||||
position: relative;
|
||||
float: left;
|
||||
color: dark-light-diff($secondary, $primary, 75%, 0%);
|
||||
color: dark-light-choose(scale-color($secondary, $lightness: 75%), blend-primary-secondary(90%));
|
||||
|
||||
h1 {font-weight: bold;}
|
||||
|
||||
|
|
@ -362,14 +362,14 @@
|
|||
}
|
||||
.secondary { display: none; }
|
||||
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
.profile-image {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 12px 15px 2px 15px;
|
||||
margin-top: 0;
|
||||
background: rgba($primary, 1);
|
||||
background: dark-light-choose(rgba($primary, 1), blend-primary-secondary(5%));
|
||||
.bio { display: none; }
|
||||
|
||||
.primary {
|
||||
|
|
@ -468,7 +468,7 @@
|
|||
}
|
||||
.notification {
|
||||
&.unread {
|
||||
background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
|
||||
background-color: dark-light-choose(scale-color($tertiary, $lightness: 85%), srgb-scale($tertiary, $secondary, 15%));
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
require_dependency 'sass/discourse_sass_importer'
|
||||
require 'pathname'
|
||||
|
||||
module Sass::Script::Functions
|
||||
def _error(message)
|
||||
raise Sass::SyntaxError, mesage
|
||||
end
|
||||
end
|
||||
|
||||
class DiscourseSassCompiler
|
||||
|
||||
def self.compile(scss, target, opts={})
|
||||
|
|
|
|||
Loading…
Reference in New Issue