update reveal.js

2025-07-07 20:42:39 +02:00
parent 91d4509dac
commit e5beded4a5
119 changed files with 11231 additions and 13895 deletions
--- a/scripts/reveal.js/css/theme/source/beige.scss
+++ b/scripts/reveal.js/css/theme/source/beige.scss
@@ -6,6 +6,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -23,10 +24,13 @@ $headingColor: #333;
 $headingTextShadow: none;
 $backgroundColor: #f7f3de;
 $linkColor: #8b743d;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: rgba(79, 64, 28, 0.99);
 $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
@mixin bodyBackground() {
 	@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
--- a/scripts/reveal.js/css/theme/source/black-contrast.scss
+++ b/scripts/reveal.js/css/theme/source/black-contrast.scss
@@ -0,0 +1,50 @@
+/**
+ * Black compact & high contrast reveal.js theme, with headers not in capitals.
+ *
+ * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
+ *
+ * - Keep the source similar to black.css - for easy comparison.
+ * - $mainFontSize controls code blocks, too (although under some ratio).
+ */
+
+
+// Default mixins and settings -----------------
+@use "sass:color";
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+// Include theme-specific fonts
+@import url(./fonts/source-sans-pro/source-sans-pro.css);
+
+
+// Override theme settings (see ../template/settings.scss)
+$backgroundColor: #000000;
+
+$mainColor: #fff;
+$headingColor: #fff;
+
+$mainFontSize: 42px;
+$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
+$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
+$headingTextShadow: none;
+$headingLetterSpacing: normal;
+$headingTextTransform: uppercase;
+$headingFontWeight: 600;
+$linkColor: #42affa;
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
+
+$heading1Size: 2.5em;
+$heading2Size: 1.6em;
+$heading3Size: 1.3em;
+$heading4Size: 1.0em;
+
+// Change text colors against light slide backgrounds
+@include light-bg-text-color(#000);
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
--- a/scripts/reveal.js/css/theme/source/black.scss
+++ b/scripts/reveal.js/css/theme/source/black.scss
@@ -6,6 +6,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -29,8 +30,8 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #42affa;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: rgba( $linkColor, 0.75 );

 $heading1Size: 2.5em;
 $heading2Size: 1.6em;
--- a/scripts/reveal.js/css/theme/source/blood.scss
+++ b/scripts/reveal.js/css/theme/source/blood.scss
@@ -10,7 +10,8 @@
 *
 */

- // Default mixins and settings -----------------
+// Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -40,7 +41,7 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b

 // Links
 $linkColor: $blood;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );

 // Text selection
 $selectionBackgroundColor: $blood;
--- a/scripts/reveal.js/css/theme/source/dracula.scss
+++ b/scripts/reveal.js/css/theme/source/dracula.scss
@@ -0,0 +1,106 @@
+/**
+ * Dracula Dark theme for reveal.js.
+ * Based on https://draculatheme.com
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+$systemFontsSansSerif: -apple-system,
+					   BlinkMacSystemFont,
+					   avenir next,
+					   avenir,
+					   segoe ui,
+					   helvetica neue,
+					   helvetica,
+					   Cantarell,
+					   Ubuntu,
+					   roboto,
+					   noto,
+					   arial,
+					   sans-serif;
+$systemFontsMono: Menlo,
+				  Consolas,
+				  Monaco,
+				  Liberation Mono,
+				  Lucida Console,
+				  monospace;
+
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+$background: #282A36;
+$foreground: #F8F8F2;
+$selection: #44475A;
+$comment: #6272A4;
+$red: #FF5555;
+$orange: #FFB86C;
+$yellow: #F1FA8C;
+$green: #50FA7B;
+$purple: #BD93F9;
+$cyan: #8BE9FD;
+$pink: #FF79C6;
+
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $foreground;
+$headingColor: $purple;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: $background;
+$linkColor: $pink;
+$linkColorHover: $cyan;
+$selectionBackgroundColor: $selection;
+$inlineCodeColor: $green;
+$listBulletColor: $cyan;
+
+$mainFont: $systemFontsSansSerif;
+$codeFont: "Fira Code", $systemFontsMono;
+
+// Change text colors against light slide backgrounds
+@include light-bg-text-color($background);
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
+
+// Define additional color effects based on Dracula spec
+// https://spec.draculatheme.com/
+:root {
+	--r-bold-color: #{$orange};
+	--r-italic-color: #{$yellow};
+	--r-inline-code-color: #{$inlineCodeColor};
+	--r-list-bullet-color: #{$listBulletColor};
+}
+
+.reveal {
+	strong, b {
+		color: var(--r-bold-color);
+	}
+	em, i, blockquote {
+		color: var(--r-italic-color);
+	}
+	code {
+		color: var(--r-inline-code-color);
+	}
+	// Dracula colored list bullets and numbers
+	ul, ol {
+		li::marker {
+			color: var(--r-list-bullet-color);
+		}
+	}
+}
+
--- a/scripts/reveal.js/css/theme/source/moon.scss
+++ b/scripts/reveal.js/css/theme/source/moon.scss
@@ -5,6 +5,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -18,10 +19,6 @@
 /**
 * Solarized colors by Ethan Schoonover
 */
-html * {
-	color-profile: sRGB;
-	rendering-intent: auto;
-}

 // Solarized colors
 $base03:    #002b36;
@@ -47,7 +44,7 @@ $headingColor: $base2;
 $headingTextShadow: none;
 $backgroundColor: $base03;
 $linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: $magenta;

 // Change text colors against light slide backgrounds
--- a/scripts/reveal.js/css/theme/source/night.scss
+++ b/scripts/reveal.js/css/theme/source/night.scss
@@ -6,6 +6,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -21,7 +22,7 @@ $backgroundColor: #111;

 $mainFont: 'Open Sans', sans-serif;
 $linkColor: #e7ad52;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $headingFont: 'Montserrat', Impact, sans-serif;
 $headingTextShadow: none;
 $headingLetterSpacing: -0.03em;
--- a/scripts/reveal.js/css/theme/source/serif.scss
+++ b/scripts/reveal.js/css/theme/source/serif.scss
@@ -7,6 +7,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -22,9 +23,12 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #F0F1EB;
 $linkColor: #51483D;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: #26351C;

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 .reveal a {
  line-height: 1.3em;
 }
--- a/scripts/reveal.js/css/theme/source/simple.scss
+++ b/scripts/reveal.js/css/theme/source/simple.scss
@@ -8,6 +8,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -28,9 +29,12 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #fff;
 $linkColor: #00008B;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

--- a/scripts/reveal.js/css/theme/source/sky.scss
+++ b/scripts/reveal.js/css/theme/source/sky.scss
@@ -6,6 +6,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -26,9 +27,12 @@ $headingLetterSpacing: -0.08em;
 $headingTextShadow: none;
 $backgroundColor: #f7fbfc;
 $linkColor: #3b759e;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: #134674;

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Fix links so they are not cut off
 .reveal a {
 	line-height: 1.3em;
--- a/scripts/reveal.js/css/theme/source/solarized.scss
+++ b/scripts/reveal.js/css/theme/source/solarized.scss
@@ -5,6 +5,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -48,9 +49,12 @@ $headingColor: $base01;
 $headingTextShadow: none;
 $backgroundColor: $base3;
 $linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: $magenta;

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Background generator
 // @mixin bodyBackground() {
 // 	@include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
--- a/scripts/reveal.js/css/theme/source/white-contrast.scss
+++ b/scripts/reveal.js/css/theme/source/white-contrast.scss
@@ -0,0 +1,53 @@
+/**
+ * White compact & high contrast reveal.js theme, with headers not in capitals.
+ *
+ * By Peter Kehl. Based on white.(s)css by Hakim El Hattab, http://hakim.se
+ *
+ * - Keep the source similar to black.css - for easy comparison.
+ * - $mainFontSize controls code blocks, too (although under some ratio).
+ */
+
+
+// Default mixins and settings -----------------
+@use "sass:color";
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+// Include theme-specific fonts
+@import url(./fonts/source-sans-pro/source-sans-pro.css);
+
+
+// Override theme settings (see ../template/settings.scss)
+$backgroundColor: #fff;
+
+$mainColor: #000;
+$headingColor: #000;
+
+$mainFontSize: 42px;
+$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
+$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
+$headingTextShadow: none;
+$headingLetterSpacing: normal;
+$headingTextTransform: uppercase;
+$headingFontWeight: 600;
+$linkColor: #2a76dd;
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
+
+$heading1Size: 2.5em;
+$heading2Size: 1.6em;
+$heading3Size: 1.3em;
+$heading4Size: 1.0em;
+
+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
+// Change text colors against dark slide backgrounds
+@include dark-bg-text-color(#fff);
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
--- a/scripts/reveal.js/css/theme/source/white.scss
+++ b/scripts/reveal.js/css/theme/source/white.scss
@@ -6,6 +6,7 @@


 // Default mixins and settings -----------------
+@use "sass:color";
@import "../template/mixins";
@import "../template/settings";
 // ---------------------------------------------
@@ -29,14 +30,17 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #2a76dd;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );

 $heading1Size: 2.5em;
 $heading2Size: 1.6em;
 $heading3Size: 1.3em;
 $heading4Size: 1.0em;

+$overlayElementBgColor: 0, 0, 0;
+$overlayElementFgColor: 240, 240, 240;
+
 // Change text colors against dark slide backgrounds
@include dark-bg-text-color(#fff);

--- a/scripts/reveal.js/css/theme/template/exposer.scss
+++ b/scripts/reveal.js/css/theme/template/exposer.scss
@@ -1,4 +1,6 @@
-// Exposes theme's variables for easy re-use in CSS for plugin authors
+// Exposes theme's variables for easy reuse in CSS for plugin authors
+
+@use "sass:color";

 :root {
  --r-background-color: #{$backgroundColor};
@@ -21,8 +23,10 @@
  --r-heading4-size: #{$heading4Size};
  --r-code-font: #{$codeFont};
  --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{darken($linkColor , 15% )};
+  --r-link-color-dark: #{color.scale( $linkColor, $lightness: -15% )};
  --r-link-color-hover: #{$linkColorHover};
  --r-selection-background-color: #{$selectionBackgroundColor};
  --r-selection-color: #{$selectionColor};
+  --r-overlay-element-bg-color: #{$overlayElementBgColor};
+  --r-overlay-element-fg-color: #{$overlayElementFgColor};
 }
--- a/scripts/reveal.js/css/theme/template/settings.scss
+++ b/scripts/reveal.js/css/theme/template/settings.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Base settings for all themes that can optionally be
 // overridden by the super-theme

@@ -32,12 +34,17 @@ $codeFont: monospace;

 // Links and actions
 $linkColor: #13DAEC;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );

 // Text selection
 $selectionBackgroundColor: #FF5E99;
 $selectionColor: #fff;

+// Colors used for UI elements that are overlaid on top of
+// the presentation
+$overlayElementBgColor: 240, 240, 240;
+$overlayElementFgColor: 0, 0, 0;
+
 // Generates the presentation background, can be overridden
 // to return a background image or gradient
@mixin bodyBackground() {
--- a/scripts/reveal.js/css/theme/template/theme.scss
+++ b/scripts/reveal.js/css/theme/template/theme.scss
@@ -278,8 +278,7 @@

 .reveal .roll span:after {
 	color: #fff;
-	// background: darken( var(--r-link-color), 15% );
-	 background: var(--r-link-color-dark);
+	background: var(--r-link-color-dark);

 }