all themes now have contrasting text colors based on slide bg
This commit is contained in:
parent
ac79c7cd8b
commit
166af89353
18 changed files with 70 additions and 16 deletions
|
@ -32,6 +32,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
|
||||||
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Change text colors against dark slide backgrounds
|
||||||
|
@include dark-bg-text-color(#fff);
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -37,11 +37,8 @@ $heading2Size: 1.6em;
|
||||||
$heading3Size: 1.3em;
|
$heading3Size: 1.3em;
|
||||||
$heading4Size: 1.0em;
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
section.has-light-background {
|
// Change text colors against light slide backgrounds
|
||||||
&, h1, h2, h3, h4, h5, h6 {
|
@include light-bg-text-color(#222);
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -46,6 +46,9 @@ $linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: $blood;
|
$selectionBackgroundColor: $blood;
|
||||||
$selectionColor: #fff;
|
$selectionColor: #fff;
|
||||||
|
|
||||||
|
// Change text colors against dark slide backgrounds
|
||||||
|
@include light-bg-text-color(#222);
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
@import "../template/theme";
|
@import "../template/theme";
|
||||||
|
@ -58,6 +61,12 @@ $selectionColor: #fff;
|
||||||
text-shadow: 1px 1px $coal;
|
text-shadow: 1px 1px $coal;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
section.has-light-background {
|
||||||
|
p, h1, h2, h3, h4 {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
.reveal h2,
|
.reveal h2,
|
||||||
.reveal h3,
|
.reveal h3,
|
||||||
|
|
|
@ -27,6 +27,8 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
|
||||||
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Change text colors against light slide backgrounds
|
||||||
|
@include light-bg-text-color(#222);
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -50,7 +50,8 @@ $linkColor: $blue;
|
||||||
$linkColorHover: lighten( $linkColor, 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: $magenta;
|
$selectionBackgroundColor: $magenta;
|
||||||
|
|
||||||
|
// Change text colors against light slide backgrounds
|
||||||
|
@include light-bg-text-color(#222);
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
@import "../template/theme";
|
@import "../template/theme";
|
||||||
|
|
|
@ -28,6 +28,9 @@ $headingLetterSpacing: -0.03em;
|
||||||
$headingTextTransform: none;
|
$headingTextTransform: none;
|
||||||
$selectionBackgroundColor: #e7ad52;
|
$selectionBackgroundColor: #e7ad52;
|
||||||
|
|
||||||
|
// Change text colors against light slide backgrounds
|
||||||
|
@include light-bg-text-color(#222);
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
@import "../template/theme";
|
@import "../template/theme";
|
||||||
|
|
|
@ -29,6 +29,9 @@ $selectionBackgroundColor: #26351C;
|
||||||
line-height: 1.3em;
|
line-height: 1.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Change text colors against dark slide backgrounds
|
||||||
|
@include dark-bg-text-color(#fff);
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
@import "../template/theme";
|
@import "../template/theme";
|
||||||
|
|
|
@ -31,11 +31,8 @@ $linkColor: #00008B;
|
||||||
$linkColorHover: lighten( $linkColor, 20% );
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||||
|
|
||||||
section.has-dark-background {
|
// Change text colors against dark slide backgrounds
|
||||||
&, h1, h2, h3, h4, h5, h6 {
|
@include dark-bg-text-color(#fff);
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
|
||||||
@include radial-gradient( #add9e4, #f7fbfc );
|
@include radial-gradient( #add9e4, #f7fbfc );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Change text colors against dark slide backgrounds
|
||||||
|
@include dark-bg-text-color(#fff);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -37,11 +37,8 @@ $heading2Size: 1.6em;
|
||||||
$heading3Size: 1.3em;
|
$heading3Size: 1.3em;
|
||||||
$heading4Size: 1.0em;
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
section.has-dark-background {
|
// Change text colors against dark slide backgrounds
|
||||||
&, h1, h2, h3, h4, h5, h6 {
|
@include dark-bg-text-color(#fff);
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Theme template ------------------------------
|
// Theme template ------------------------------
|
||||||
|
|
|
@ -27,3 +27,19 @@
|
||||||
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin light-bg-text-color( $color ) {
|
||||||
|
section.has-light-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin dark-bg-text-color( $color ) {
|
||||||
|
section.has-dark-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
3
dist/theme/beige.css
vendored
3
dist/theme/beige.css
vendored
|
@ -5,6 +5,9 @@
|
||||||
*/
|
*/
|
||||||
@import url(fonts/league-gothic/league-gothic.css);
|
@import url(fonts/league-gothic/league-gothic.css);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
6
dist/theme/blood.css
vendored
6
dist/theme/blood.css
vendored
|
@ -10,6 +10,9 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
|
||||||
|
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
@ -291,6 +294,9 @@
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
text-shadow: 1px 1px #222; }
|
text-shadow: 1px 1px #222; }
|
||||||
|
|
||||||
|
section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
.reveal h1,
|
.reveal h1,
|
||||||
.reveal h2,
|
.reveal h2,
|
||||||
.reveal h3,
|
.reveal h3,
|
||||||
|
|
3
dist/theme/league.css
vendored
3
dist/theme/league.css
vendored
|
@ -7,6 +7,9 @@
|
||||||
*/
|
*/
|
||||||
@import url(fonts/league-gothic/league-gothic.css);
|
@import url(fonts/league-gothic/league-gothic.css);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
3
dist/theme/moon.css
vendored
3
dist/theme/moon.css
vendored
|
@ -11,6 +11,9 @@ html * {
|
||||||
color-profile: sRGB;
|
color-profile: sRGB;
|
||||||
rendering-intent: auto; }
|
rendering-intent: auto; }
|
||||||
|
|
||||||
|
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
3
dist/theme/night.css
vendored
3
dist/theme/night.css
vendored
|
@ -5,6 +5,9 @@
|
||||||
*/
|
*/
|
||||||
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
||||||
|
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
|
||||||
|
color: #222; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
3
dist/theme/serif.css
vendored
3
dist/theme/serif.css
vendored
|
@ -7,6 +7,9 @@
|
||||||
.reveal a {
|
.reveal a {
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
|
|
||||||
|
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
3
dist/theme/sky.css
vendored
3
dist/theme/sky.css
vendored
|
@ -8,6 +8,9 @@
|
||||||
.reveal a {
|
.reveal a {
|
||||||
line-height: 1.3em; }
|
line-height: 1.3em; }
|
||||||
|
|
||||||
|
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
/*********************************************
|
/*********************************************
|
||||||
* GLOBAL STYLES
|
* GLOBAL STYLES
|
||||||
*********************************************/
|
*********************************************/
|
||||||
|
|
Loading…
Reference in a new issue