Browse Source

all themes now have contrasting text colors based on slide bg

master
Hakim El Hattab 2 years ago
parent
commit
166af89353
  1. 2
      css/theme/source/beige.scss
  2. 7
      css/theme/source/black.scss
  3. 9
      css/theme/source/blood.scss
  4. 2
      css/theme/source/league.scss
  5. 3
      css/theme/source/moon.scss
  6. 3
      css/theme/source/night.scss
  7. 3
      css/theme/source/serif.scss
  8. 7
      css/theme/source/simple.scss
  9. 3
      css/theme/source/sky.scss
  10. 7
      css/theme/source/white.scss
  11. 16
      css/theme/template/mixins.scss
  12. 3
      dist/theme/beige.css
  13. 6
      dist/theme/blood.css
  14. 3
      dist/theme/league.css
  15. 3
      dist/theme/moon.css
  16. 3
      dist/theme/night.css
  17. 3
      dist/theme/serif.css
  18. 3
      dist/theme/sky.css

2
css/theme/source/beige.scss

@ -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) );
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

7
css/theme/source/black.scss

@ -37,11 +37,8 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------

9
css/theme/source/blood.scss

@ -46,6 +46,9 @@ $linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $blood;
$selectionColor: #fff;
// Change text colors against dark slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";
@ -58,6 +61,12 @@ $selectionColor: #fff;
text-shadow: 1px 1px $coal;
}
section.has-light-background {
p, h1, h2, h3, h4 {
text-shadow: none;
}
}
.reveal h1,
.reveal h2,
.reveal h3,

2
css/theme/source/league.scss

@ -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) );
}
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------

3
css/theme/source/moon.scss

@ -50,7 +50,8 @@ $linkColor: $blue;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $magenta;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";

3
css/theme/source/night.scss

@ -28,6 +28,9 @@ $headingLetterSpacing: -0.03em;
$headingTextTransform: none;
$selectionBackgroundColor: #e7ad52;
// Change text colors against light slide backgrounds
@include light-bg-text-color(#222);
// Theme template ------------------------------
@import "../template/theme";

3
css/theme/source/serif.scss

@ -29,6 +29,9 @@ $selectionBackgroundColor: #26351C;
line-height: 1.3em;
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------
@import "../template/theme";

7
css/theme/source/simple.scss

@ -31,11 +31,8 @@ $linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

3
css/theme/source/sky.scss

@ -39,6 +39,9 @@ $selectionBackgroundColor: #134674;
@include radial-gradient( #add9e4, #f7fbfc );
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

7
css/theme/source/white.scss

@ -37,11 +37,8 @@ $heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);
// Theme template ------------------------------

16
css/theme/template/mixins.scss

@ -26,4 +26,20 @@
background: -o-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% );
}
@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

@ -5,6 +5,9 @@
*/
@import url(fonts/league-gothic/league-gothic.css);
@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
*********************************************/

6
dist/theme/blood.css

@ -10,6 +10,9 @@
*
*/
@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
*********************************************/
@ -291,6 +294,9 @@
font-weight: 300;
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 h2,
.reveal h3,

3
dist/theme/league.css

@ -7,6 +7,9 @@
*/
@import url(fonts/league-gothic/league-gothic.css);
@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
*********************************************/

3
dist/theme/moon.css

@ -11,6 +11,9 @@ html * {
color-profile: sRGB;
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
*********************************************/

3
dist/theme/night.css

@ -5,6 +5,9 @@
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@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
*********************************************/

3
dist/theme/serif.css

@ -7,6 +7,9 @@
.reveal a {
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
*********************************************/

3
dist/theme/sky.css

@ -8,6 +8,9 @@
.reveal a {
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
*********************************************/

Loading…
Cancel
Save