ids theme: backfill notes overlay and transcript styling into the scss
The speaker notes overlay and the transcript view were styled by editing
the built dist/theme/ids.css directly; neither section ever reached
css/theme/source/ids.scss, so recompiling the theme from its source would
have dropped both -- the buttons, the overlay, the print rules and the
whole read-aloud view.
Copy both sections over, minus what the scss already had. Two things do
not transfer verbatim: the .reveal .controls and div.slide-number rules
sit inside the notes section in the css but belong to FULLSCREEN TOGGLE
in the scss, where they already exist identically; and the css carries
two @media (hover: none) and (pointer: coarse) blocks with the same
prelude but different bodies, of which only the #ids-fullscreen one was
already present, so the #ids-notes/#ids-transcript-btn one is added.
Verified with dart-sass: the scss now compiles to the same 185 rules as
the committed ids.css. The only remaining difference is three
color.scale() values that render as percentages rather than numbers
(rgb(12.07%, ...) vs rgb(30.77, ...) -- the same colours), because the
committed css was built with an older sass.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Change-Id: Ie8371d327978ed3b1e80066879ddc5aed2159477
diff --git a/inst/reveal.js-5.2.1/css/theme/source/ids.scss b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
index 7daee42..d121a90 100644
--- a/inst/reveal.js-5.2.1/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.2.1/css/theme/source/ids.scss
@@ -1003,6 +1003,125 @@
/*********************************************
+ * SPEAKER NOTES OVERLAY (touch devices)
+ *********************************************/
+#ids-notes {
+ display: none;
+ position: fixed;
+ left: 70px;
+ bottom: 6%;
+ z-index: 30;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ opacity: 0.55;
+ background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+
+#ids-notes:active, #ids-notes:focus-visible {
+ opacity: 0.9;
+}
+
+#ids-notes.is-open {
+ opacity: 0.9;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+}
+
+#ids-transcript-btn {
+ display: none;
+ position: fixed;
+ left: 110px;
+ bottom: 6%;
+ z-index: 30;
+ width: 28px;
+ height: 28px;
+ border: 0;
+ padding: 0;
+ cursor: pointer;
+ opacity: 0.55;
+ background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+
+#ids-transcript-btn:active, #ids-transcript-btn:focus-visible, #ids-transcript-btn.is-open {
+ opacity: 0.9;
+}
+
+#ids-transcript-btn.is-open {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6a800' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
+}
+
+@media (hover: none) and (pointer: coarse) {
+ #ids-notes, #ids-transcript-btn {
+ display: block;
+ }
+}
+
+html.reveal-print #ids-notes, html.reveal-print #ids-transcript-btn {
+ display: none !important;
+}
+
+#ids-notes-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 100;
+ background: #fff;
+ color: #444444;
+ font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
+ max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
+}
+
+#ids-notes-overlay[hidden] {
+ display: none;
+}
+
+#ids-notes-header {
+ display: flex;
+ align-items: baseline;
+ gap: 12px;
+ border-bottom: 1px solid #e0e0e0;
+ margin-bottom: 16px;
+ padding-bottom: 8px;
+}
+
+#ids-notes-timing {
+ flex-shrink: 0;
+ color: #f6a800;
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+#ids-notes-title {
+ flex-grow: 1;
+ margin: 0;
+ font-size: 1.1em;
+}
+
+#ids-notes-close {
+ flex-shrink: 0;
+ border: 0;
+ background: none;
+ color: #888888;
+ font-size: 1.2em;
+ cursor: pointer;
+ padding: 8px;
+ margin: -8px;
+}
+
+#ids-notes-content {
+ font-size: 20px;
+ line-height: 1.5;
+}
+
+#ids-notes-content em {
+ color: #888888;
+}
+
+/*********************************************
* OVERVIEW / TOC SLIDES
*********************************************/
/* Entries stay at the normal slide body size and keep the theme's link
@@ -1035,3 +1154,59 @@
.reveal .ids-overview-toc ul li {
margin: 0.18em 0;
}
+
+/*********************************************
+ * TRANSCRIPT / READ-ALOUD VIEW ('r')
+ *********************************************/
+#ids-transcript {
+ position: fixed;
+ inset: 0;
+ z-index: 90;
+ background: #fff;
+ color: #444444;
+ font-family: "Fira Sans", "Fira Sans Condensed", sans-serif;
+ font-size: 18px;
+ line-height: 1.5;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding: max(32px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right))
+ max(32px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
+}
+
+#ids-transcript[hidden] {
+ display: none;
+}
+
+#ids-transcript .ids-transcript-slide {
+ max-width: 900px;
+ margin: 0 auto 2.5em auto;
+}
+
+#ids-transcript h1, #ids-transcript h2 {
+ color: var(--r-heading-color);
+ margin: 0 0 0.4em 0;
+}
+
+#ids-transcript h1 { font-size: 1.4em; }
+
+#ids-transcript h2 { font-size: 1.2em; }
+
+#ids-transcript .fragment {
+ opacity: 1;
+ visibility: visible;
+}
+
+#ids-transcript .ids-transcript-notes {
+ border-left: 3px solid #f6a800;
+ padding: 0.2em 0 0.2em 0.8em;
+ margin-top: 0.8em;
+ color: #666;
+}
+
+#ids-transcript .ids-transcript-notes:empty {
+ display: none;
+}
+
+#ids-transcript img, #ids-transcript video, #ids-transcript iframe {
+ max-width: 100%;
+}