ids theme: speaker notes overlay button for touch devices
The reveal.js speaker view ('s') opens a separate window, which is
awkward on mobile browsers. Add a button next to the fullscreen toggle
(shown on coarse-pointer devices only, like the fullscreen button) that
covers the slide with a full-screen overlay showing the current slide's
speaker notes, its title and planned time (from data-timing). The
overlay follows slide changes while open, closes with the X button or
Escape, is hidden in print output, and the button only appears when the
deck contains notes at all.
Change-Id: I50c6cd701115a973e8c6ba35448b13d5c722ab5a
diff --git a/inst/reveal.js-5.2.1/dist/theme/ids.css b/inst/reveal.js-5.2.1/dist/theme/ids.css
index ee3b816..8f95547 100644
--- a/inst/reveal.js-5.2.1/dist/theme/ids.css
+++ b/inst/reveal.js-5.2.1/dist/theme/ids.css
@@ -926,6 +926,92 @@
display: none !important;
}
+/*********************************************
+ * 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");
+}
+
+@media (hover: none) and (pointer: coarse) {
+ #ids-notes {
+ display: block;
+ }
+}
+html.reveal-print #ids-notes {
+ 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;
+}
+
.reveal .controls .controls-arrow:after, .reveal .controls .controls-arrow:before {
width: 13px !important; /* size */
height: 4px; /* line width */