mirror/reveal.js
1
0
Fork 0
mirror of https://github.com/hakimel/reveal.js.git synced 2025-08-08 23:57:13 +02:00
Code Issues Releases Wiki Activity

reader progress theming, automatically invert based on slide bg

Browse Source
This commit is contained in:
Hakim El Hattab
2023-10-11 09:51:03 +02:00
parent 09f36adc70
commit 122642fdea
33 changed files with 125 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
css/reveal.scss
View File

@@ -2012,6 +2012,15 @@ $notesWidthPercent: 25%;
display: none;
}
.has-dark-background {
--r-overlay-element-bg-color: 240, 240, 240;
--r-overlay-element-fg-color: 0, 0, 0;
}
.has-light-background {
--r-overlay-element-bg-color: 0, 0, 0;
--r-overlay-element-fg-color: 240, 240, 240;
}
.reveal-viewport.reveal-reader .reader-progress {
position: sticky;
top: 50%;
@@ -2034,7 +2043,6 @@ $notesWidthPercent: 25%;
transform: translateY(-50%);
border-radius: var(--r-reader-progress-width);
z-index: 10;
}
// Hit area
@@ -2056,30 +2064,32 @@ $notesWidthPercent: 25%;
top: 0;
left: 0;
border-radius: var(--r-reader-progress-width);
background-color: #fff;
z-index: 2;
background-color: rgba(var(--r-overlay-element-bg-color), 1);
z-index: 10;
transition: background-color 0.2s ease;
}
.reader-progress-slide {
position: absolute;
width: 100%;
background-color: rgba( 255, 255, 255, 0.2 );
background-color: rgba(var(--r-overlay-element-bg-color), 0.2);
box-shadow: 0 0 0px 1px rgba(var(--r-overlay-element-fg-color), 0.1);
border-radius: var(--r-reader-progress-width);
transition: all 0.2s ease;
transition: background-color 0.2s ease;
}
.reader-progress-slide.active {
background-color: #fff;
background-color: rgba(var(--r-overlay-element-bg-color), 1);
}
.reader-progress-trigger {
position: absolute;
width: 100%;
transition: all 0.2s ease;
transition: background-color 0.2s ease;
}
.reader-progress-slide.active.has-triggers {
background-color: rgba( 255, 255, 255, 0.4 );
background-color: rgba(var(--r-overlay-element-bg-color), 0.4);
z-index: 10;
}
@@ -2092,7 +2102,7 @@ $notesWidthPercent: 25%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #000;
background-color: rgba(var(--r-overlay-element-fg-color), 0.8);
}
}

3
css/theme/source/beige.scss
View File

@@ -27,6 +27,9 @@ $linkColorHover: lighten( $linkColor, 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) );

3
css/theme/source/serif.scss
View File

@@ -25,6 +25,9 @@ $linkColor: #51483D;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #26351C;
$overlayElementBgColor: 0, 0, 0;
$overlayElementFgColor: 240, 240, 240;
.reveal a {
line-height: 1.3em;
}

3
css/theme/source/simple.scss
View File

@@ -31,6 +31,9 @@ $linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 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);

3
css/theme/source/sky.scss
View File

@@ -29,6 +29,9 @@ $linkColor: #3b759e;
$linkColorHover: lighten( $linkColor, 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;

3
css/theme/source/solarized.scss
View File

@@ -51,6 +51,9 @@ $linkColor: $blue;
$linkColorHover: lighten( $linkColor, 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) );

3
css/theme/source/white-contrast.scss
View File

@@ -40,6 +40,9 @@ $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);

3
css/theme/source/white.scss
View File

@@ -37,6 +37,9 @@ $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);

2
css/theme/template/exposer.scss
View File

@@ -25,4 +25,6 @@
--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};
}

5
css/theme/template/settings.scss
View File

@@ -38,6 +38,11 @@ $linkColorHover: lighten( $linkColor, 20% );
$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() {