diff --git a/.github/workflows/js.yml b/.github/workflows/js.yml index d28e02df46e..071e030f787 100644 --- a/.github/workflows/js.yml +++ b/.github/workflows/js.yml @@ -1,24 +1,31 @@ name: tests -on: [push] +on: + - push + +permissions: + contents: read jobs: build: - runs-on: ubuntu-latest strategy: matrix: - node-version: [10.x, 14.x, 16.x] + node-version: + - 18 + - 20 steps: - - uses: actions/checkout@v2 - - name: Use Node.js ${{ matrix.node-version }} - uses: actions/setup-node@v1 - with: - node-version: ${{ matrix.node-version }} - - run: npm install - - run: npm run build --if-present - - run: npm test - env: - CI: true + - uses: actions/checkout@v4 + + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + + - run: npm install + - run: npm run build --if-present + - run: npm test + env: + CI: true diff --git a/.npmignore b/.npmignore index 50c12b9debd..362d61274ac 100644 --- a/.npmignore +++ b/.npmignore @@ -1,7 +1,5 @@ /test /examples .github -.gulpfile .sass-cache gulpfile.js -CONTRIBUTING.md \ No newline at end of file diff --git a/LICENSE b/LICENSE index f11bb2e8a8b..38ff0eb4258 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (C) 2011-2022 Hakim El Hattab, http://hakim.se, and reveal.js contributors +Copyright (C) 2011-2024 Hakim El Hattab, http://hakim.se, and reveal.js contributors Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 1f47cc847e9..19956851ce7 100644 --- a/README.md +++ b/README.md @@ -32,17 +32,6 @@ Hakim's open source work is supported by - - - - - All your environment variables, in one place - - Stop struggling with scattered API keys, hacking together home-brewed tools, and avoiding access controls. Keep your team and servers in sync with Doppler. - - - @@ -57,5 +46,5 @@ Hakim's open source work is supported by - MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se + MIT licensed | Copyright © 2011-2024 Hakim El Hattab, https://hakim.se diff --git a/css/print/paper.scss b/css/print/paper.scss index 6bb1b6ab481..32fab8a464b 100644 --- a/css/print/paper.scss +++ b/css/print/paper.scss @@ -1,42 +1,30 @@ -/* Default Print Stylesheet Template - by Rob Glazebrook of CSSnewbie.com - Last Updated: June 4, 2008 - - Feel free (nay, compelled) to edit, append, and - manipulate this file as you see fit. */ @media print { html:not(.print-pdf) { - - background: #fff; + overflow: visible; width: auto; height: auto; - overflow: visible; body { - background: #fff; - font-size: 20pt; - width: auto; - height: auto; - border: 0; - margin: 0 5%; + margin: 0; padding: 0; overflow: visible; - float: none !important; } + } + + html:not(.print-pdf) .reveal { + background: #fff; + font-size: 20pt; - .nestedarrow, .controls, - .fork-reveal, - .share-reveal, .state-background, - .reveal .progress, - .reveal .backgrounds, - .reveal .slide-number { + .progress, + .backgrounds, + .slide-number { display: none !important; } - body, p, td, li { + p, td, li { font-size: 20pt!important; color: #000; } @@ -49,7 +37,6 @@ letter-spacing: normal; } - /* Need to reduce the size of the fonts for printing */ h1 { font-size: 28pt !important; } h2 { font-size: 24pt !important; } h3 { font-size: 22pt !important; } @@ -74,18 +61,19 @@ margin: 0; text-align: left !important; } - .reveal pre, - .reveal table { + pre, + table { margin-left: 0; margin-right: 0; } - .reveal pre code { + pre code { padding: 20px; } - .reveal blockquote { + blockquote { margin: 20px 0; } - .reveal .slides { + + .slides { position: static !important; width: auto !important; height: auto !important; @@ -106,7 +94,7 @@ perspective-origin: 50% 50%; } - .reveal .slides section { + .slides section { visibility: visible !important; position: static !important; width: auto !important; @@ -129,24 +117,24 @@ transform: none !important; transition: none !important; } - .reveal .slides section.stack { + .slides section.stack { padding: 0 !important; } - .reveal section:last-of-type { + .slides section:last-of-type { page-break-after: avoid !important; } - .reveal section .fragment { + .slides section .fragment { opacity: 1 !important; visibility: visible !important; transform: none !important; } - .reveal .r-fit-text { + .r-fit-text { white-space: normal !important; } - .reveal section img { + section img { display: block; margin: 15px 0px; background: rgba(255,255,255,1); @@ -154,11 +142,11 @@ box-shadow: none; } - .reveal section small { + section small { font-size: 0.8em; } - .reveal .hljs { + .hljs { max-height: 100%; white-space: pre-wrap; word-wrap: break-word; @@ -166,11 +154,11 @@ font-size: 15pt; } - .reveal .hljs .hljs-ln-numbers { + .hljs .hljs-ln-numbers { white-space: nowrap; } - .reveal .hljs td { + .hljs td { font-size: inherit !important; color: inherit !important; } diff --git a/css/print/pdf.scss b/css/print/pdf.scss index 6113810894b..0a1c2bf646a 100644 --- a/css/print/pdf.scss +++ b/css/print/pdf.scss @@ -5,7 +5,7 @@ * https://revealjs.com/pdf-export/ */ -html.print-pdf { +html.reveal-print { * { -webkit-print-color-adjust: exact; } @@ -36,7 +36,6 @@ html.print-pdf { .reveal pre code { overflow: hidden !important; - font-family: Courier, 'Courier New', monospace !important; } .reveal { @@ -71,6 +70,10 @@ html.print-pdf { page-break-after: always; } + .reveal .slides .pdf-page:last-of-type { + page-break-after: avoid; + } + .reveal .slides section { visibility: visible !important; display: block !important; @@ -146,6 +149,7 @@ html.print-pdf { display: block; position: absolute; font-size: 14px; + visibility: visible; } /* This accessibility tool is not useful in PDF and breaks it visually */ diff --git a/css/reveal.scss b/css/reveal.scss index a196fa7b78a..0a3ade7ba60 100644 --- a/css/reveal.scss +++ b/css/reveal.scss @@ -19,6 +19,7 @@ html.reveal-full-page { height: 100%; height: 100vh; height: calc( var(--vh, 1vh) * 100 ); + height: 100svh; overflow: hidden; } @@ -31,6 +32,8 @@ html.reveal-full-page { background-color: #fff; color: #000; + + --r-controls-spacing: 12px; } // Force the presentation to cover the full viewport when we @@ -48,11 +51,14 @@ html.reveal-full-page { * VIEW FRAGMENTS *********************************************/ -.reveal .slides section .fragment { - opacity: 0; - visibility: hidden; +.reveal .fragment { transition: all .2s ease; - will-change: opacity; + + &:not(.custom) { + opacity: 0; + visibility: hidden; + will-change: opacity; + } &.visible { opacity: 1; @@ -64,7 +70,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.grow { +.reveal .fragment.grow { opacity: 1; visibility: inherit; @@ -73,7 +79,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.shrink { +.reveal .fragment.shrink { opacity: 1; visibility: inherit; @@ -82,7 +88,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.zoom-in { +.reveal .fragment.zoom-in { transform: scale( 0.1 ); &.visible { @@ -90,7 +96,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-out { +.reveal .fragment.fade-out { opacity: 1; visibility: inherit; @@ -100,7 +106,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.semi-fade-out { +.reveal .fragment.semi-fade-out { opacity: 1; visibility: inherit; @@ -110,7 +116,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.strike { +.reveal .fragment.strike { opacity: 1; visibility: inherit; @@ -119,7 +125,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-up { +.reveal .fragment.fade-up { transform: translate(0, 40px); &.visible { @@ -127,7 +133,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-down { +.reveal .fragment.fade-down { transform: translate(0, -40px); &.visible { @@ -135,7 +141,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-right { +.reveal .fragment.fade-right { transform: translate(-40px, 0); &.visible { @@ -143,7 +149,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-left { +.reveal .fragment.fade-left { transform: translate(40px, 0); &.visible { @@ -151,8 +157,8 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-in-then-out, -.reveal .slides section .fragment.current-visible { +.reveal .fragment.fade-in-then-out, +.reveal .fragment.current-visible { opacity: 0; visibility: hidden; @@ -162,7 +168,7 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.fade-in-then-semi-out { +.reveal .fragment.fade-in-then-semi-out { opacity: 0; visibility: hidden; @@ -177,32 +183,32 @@ html.reveal-full-page { } } -.reveal .slides section .fragment.highlight-red, -.reveal .slides section .fragment.highlight-current-red, -.reveal .slides section .fragment.highlight-green, -.reveal .slides section .fragment.highlight-current-green, -.reveal .slides section .fragment.highlight-blue, -.reveal .slides section .fragment.highlight-current-blue { +.reveal .fragment.highlight-red, +.reveal .fragment.highlight-current-red, +.reveal .fragment.highlight-green, +.reveal .fragment.highlight-current-green, +.reveal .fragment.highlight-blue, +.reveal .fragment.highlight-current-blue { opacity: 1; visibility: inherit; } - .reveal .slides section .fragment.highlight-red.visible { + .reveal .fragment.highlight-red.visible { color: #ff2c2d } - .reveal .slides section .fragment.highlight-green.visible { + .reveal .fragment.highlight-green.visible { color: #17ff2e; } - .reveal .slides section .fragment.highlight-blue.visible { + .reveal .fragment.highlight-blue.visible { color: #1b91ff; } -.reveal .slides section .fragment.highlight-current-red.current-fragment { +.reveal .fragment.highlight-current-red.current-fragment { color: #ff2c2d } -.reveal .slides section .fragment.highlight-current-green.current-fragment { +.reveal .fragment.highlight-current-green.current-fragment { color: #17ff2e; } -.reveal .slides section .fragment.highlight-current-blue.current-fragment { +.reveal .fragment.highlight-current-blue.current-fragment { color: #1b91ff; } @@ -268,13 +274,11 @@ $controlsArrowAngleActive: 36deg; } .reveal .controls { - $spacing: 12px; - display: none; position: absolute; top: auto; - bottom: $spacing; - right: $spacing; + bottom: var(--r-controls-spacing); + right: var(--r-controls-spacing); left: auto; z-index: 11; color: #000; @@ -506,7 +510,9 @@ $controlsArrowAngleActive: 36deg; // Edge aligned controls layout @media screen and (min-width: 500px) { - $spacing: 0.8em; + .reveal-viewport { + --r-controls-spacing: 0.8em; + } .reveal .controls[data-controls-layout="edges"] { & { @@ -526,24 +532,24 @@ $controlsArrowAngleActive: 36deg; .navigate-left { top: 50%; - left: $spacing; + left: var(--r-controls-spacing); margin-top: -$controlArrowSize*0.5; } .navigate-right { top: 50%; - right: $spacing; + right: var(--r-controls-spacing); margin-top: -$controlArrowSize*0.5; } .navigate-up { - top: $spacing; + top: var(--r-controls-spacing); left: 50%; margin-left: -$controlArrowSize*0.5; } .navigate-down { - bottom: $spacing - $controlArrowSpacing + 0.3em; + bottom: calc(var(--r-controls-spacing) - #{$controlArrowSpacing} + 0.3em); left: 50%; margin-left: -$controlArrowSize*0.5; } @@ -1439,7 +1445,8 @@ $overlayHeaderPadding: 5px; width: 100%; height: 100%; z-index: 1000; - background: rgba( 0, 0, 0, 0.9 ); + background: rgba( 0, 0, 0, 0.95 ); + backdrop-filter: blur( 6px ); transition: all 0.3s ease; } @@ -1583,7 +1590,6 @@ $overlayHeaderPadding: 5px; padding-bottom: 20px; } - /********************************************* * PLAYBACK COMPONENT *********************************************/ @@ -1633,6 +1639,10 @@ $overlayHeaderPadding: 5px; opacity: 0.4; } +.reveal .hljs.has-highlights.fragment { + transition: all .2s ease; +} + .reveal .hljs:not(:first-child).fragment { position: absolute; top: 0; @@ -1796,6 +1806,43 @@ $notesWidthPercent: 25%; } +/********************************************* + * JUMP-TO-SLIDE COMPONENT + *********************************************/ + + .reveal .jump-to-slide { + position: absolute; + top: 15px; + left: 15px; + z-index: 30; + font-size: 32px; + -webkit-tap-highlight-color: rgba( 0, 0, 0, 0 ); +} + +.reveal .jump-to-slide-input { + background: transparent; + padding: 8px; + font-size: inherit; + color: currentColor; + border: 0; +} +.reveal .jump-to-slide-input::placeholder { + color: currentColor; + opacity: 0.5; +} + +.reveal.has-dark-background .jump-to-slide-input { + color: #fff; +} +.reveal.has-light-background .jump-to-slide-input { + color: #222; +} + +.reveal .jump-to-slide-input:focus { + outline: none; +} + + /********************************************* * ZOOM PLUGIN *********************************************/ @@ -1820,6 +1867,239 @@ $notesWidthPercent: 25%; } +/********************************************* + * SCROLL VIEW + *********************************************/ +.reveal-viewport.loading-scroll-mode { + visibility: hidden; +} + +.reveal-viewport.reveal-scroll { + & { + margin: 0 auto; + overflow: auto; + overflow-x: hidden; + overflow-y: auto; + z-index: 1; + + --r-scrollbar-width: 7px; + --r-scrollbar-trigger-size: 5px; + --r-controls-spacing: 8px; + } + + @media screen and (max-width: 500px) { + --r-scrollbar-width: 3px; + --r-scrollbar-trigger-size: 3px; + } + + .controls, + .progress, + .playback, + .backgrounds, + .slide-number, + .speaker-notes { + display: none !important; + } + + .overlay, + .pause-overlay { + position: fixed; + } + + .reveal { + overflow: visible; + touch-action: manipulation; + } + + .slides { + position: static; + pointer-events: initial; + + left: auto; + top: auto; + width: 100% !important; + margin: 0; + padding: 0; + + overflow: visible; + display: block; + + perspective: none; + perspective-origin: 50% 50%; + } + + .scroll-page { + position: relative; + width: 100%; + height: calc(var(--page-height) + var(--page-scroll-padding)); + z-index: 1; + overflow: visible; + } + + .scroll-page-sticky { + position: sticky; + height: var(--page-height); + top: 0px; + } + + .scroll-page-content { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + } + + .scroll-page section { + visibility: visible !important; + display: block !important; + position: absolute !important; + width: var(--slide-width) !important; + height: var(--slide-height) !important; + top: 50% !important; + left: 50% !important; + opacity: 1 !important; + transform: scale(var(--slide-scale)) translate(-50%, -50%) !important; + transform-style: flat !important; + transform-origin: 0 0 !important; + } + + .slide-background { + display: block !important; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: auto !important; + visibility: visible; + opacity: 1; + touch-action: manipulation; + } +} + +// Chromium +.reveal-viewport.reveal-scroll[data-scrollbar="true"]::-webkit-scrollbar, +.reveal-viewport.reveal-scroll[data-scrollbar="auto"]::-webkit-scrollbar { + display: none; +} + +// Firefox +.reveal-viewport.reveal-scroll[data-scrollbar="true"], +.reveal-viewport.reveal-scroll[data-scrollbar="auto"] { + scrollbar-width: none; +} + +.reveal.has-dark-background, +.reveal-viewport.has-dark-background { + --r-overlay-element-bg-color: 240, 240, 240; + --r-overlay-element-fg-color: 0, 0, 0; +} +.reveal.has-light-background, +.reveal-viewport.has-light-background { + --r-overlay-element-bg-color: 0, 0, 0; + --r-overlay-element-fg-color: 240, 240, 240; +} + +.reveal-viewport.reveal-scroll .scrollbar { + position: sticky; + top: 50%; + z-index: 20; + opacity: 0; + transition: all 0.3s ease; + + &.visible, + &:hover { + opacity: 1; + } + + .scrollbar-inner { + position: absolute; + width: var(--r-scrollbar-width); + height: calc(var(--viewport-height) - var(--r-controls-spacing) * 2); + right: var(--r-controls-spacing); + top: 0; + transform: translateY(-50%); + border-radius: var(--r-scrollbar-width); + z-index: 10; + } + + .scrollbar-playhead { + position: absolute; + width: var(--r-scrollbar-width); + height: var(--r-scrollbar-width); + top: 0; + left: 0; + border-radius: var(--r-scrollbar-width); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + z-index: 11; + transition: background-color 0.2s ease; + } + + .scrollbar-slide { + position: absolute; + width: 100%; + 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-scrollbar-width); + transition: background-color 0.2s ease; + } + + // Hit area + .scrollbar-slide:after { + content: ''; + position: absolute; + width: 200%; + height: 100%; + top: 0; + left: -50%; + background: rgba( 0, 0, 0, 0 ); + z-index: -1; + } + + .scrollbar-slide:hover, + .scrollbar-slide.active { + background-color: rgba(var(--r-overlay-element-bg-color), 0.4); + } + + .scrollbar-trigger { + position: absolute; + width: 100%; + transition: background-color 0.2s ease; + } + + .scrollbar-slide.active.has-triggers { + background-color: rgba(var(--r-overlay-element-bg-color), 0.4); + z-index: 10; + } + + .scrollbar-slide.active .scrollbar-trigger:after { + content: ''; + position: absolute; + width: var(--r-scrollbar-trigger-size); + height: var(--r-scrollbar-trigger-size); + border-radius: 20px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + transition: transform 0.2s ease, opacity 0.2s ease; + opacity: 0.4; + } + + .scrollbar-slide.active .scrollbar-trigger.active:after, + .scrollbar-slide.active .scrollbar-trigger.active ~ .scrollbar-trigger:after { + opacity: 1; + } + + .scrollbar-slide.active .scrollbar-trigger ~ .scrollbar-trigger.active:after { + transform: translate(calc( var(--r-scrollbar-width) * -2), 0); + background-color: rgba(var(--r-overlay-element-bg-color), 1); + } +} + + /********************************************* * PRINT STYLES *********************************************/ diff --git a/css/theme/source/beige.scss b/css/theme/source/beige.scss index 1f601781c7c..7598b94f82b 100644 --- a/css/theme/source/beige.scss +++ b/css/theme/source/beige.scss @@ -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) ); diff --git a/css/theme/source/black-contrast.scss b/css/theme/source/black-contrast.scss new file mode 100644 index 00000000000..9e1a2cafbe1 --- /dev/null +++ b/css/theme/source/black-contrast.scss @@ -0,0 +1,49 @@ +/** + * 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 ----------------- +@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: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 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"; +// --------------------------------------------- diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index 358dc1df44b..7c655c4f98b 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -30,7 +30,7 @@ $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #42affa; $linkColorHover: lighten( $linkColor, 15% ); -$selectionBackgroundColor: lighten( $linkColor, 25% ); +$selectionBackgroundColor: rgba( $linkColor, 0.75 ); $heading1Size: 2.5em; $heading2Size: 1.6em; diff --git a/css/theme/source/dracula.scss b/css/theme/source/dracula.scss new file mode 100644 index 00000000000..ae968b8c752 --- /dev/null +++ b/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); + } + } +} + diff --git a/css/theme/source/moon.scss b/css/theme/source/moon.scss index ff2074aff09..59ef0a95a7e 100644 --- a/css/theme/source/moon.scss +++ b/css/theme/source/moon.scss @@ -18,10 +18,6 @@ /** * Solarized colors by Ethan Schoonover */ -html * { - color-profile: sRGB; - rendering-intent: auto; -} // Solarized colors $base03: #002b36; diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss index 1c8d778761d..babec4d1cae 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/source/serif.scss @@ -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; } diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss index faf245f2993..51a21af2615 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/source/simple.scss @@ -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); diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss index c83b9c06179..457e9e50924 100644 --- a/css/theme/source/sky.scss +++ b/css/theme/source/sky.scss @@ -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; diff --git a/css/theme/source/solarized.scss b/css/theme/source/solarized.scss index 8bdf1ebcbbc..f3253458faa 100644 --- a/css/theme/source/solarized.scss +++ b/css/theme/source/solarized.scss @@ -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) ); diff --git a/css/theme/source/white-contrast.scss b/css/theme/source/white-contrast.scss new file mode 100644 index 00000000000..e22007e23b4 --- /dev/null +++ b/css/theme/source/white-contrast.scss @@ -0,0 +1,52 @@ +/** + * 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 ----------------- +@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: lighten( $linkColor, 15% ); +$selectionBackgroundColor: lighten( $linkColor, 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"; +// --------------------------------------------- diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss index 443d30a509b..a2b1292f4e8 100644 --- a/css/theme/source/white.scss +++ b/css/theme/source/white.scss @@ -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); diff --git a/css/theme/template/exposer.scss b/css/theme/template/exposer.scss index 4aec3e8c837..2e9288d313a 100644 --- a/css/theme/template/exposer.scss +++ b/css/theme/template/exposer.scss @@ -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}; } diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 5a917f862a2..3d54ac82478 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -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() { diff --git a/demo.html b/demo.html index ab11f77248d..5a8ba36165e 100644 --- a/demo.html +++ b/demo.html @@ -86,7 +86,7 @@ Hidden Slides Pretty Code - + import React, { useState } from 'react'; function Example() { @@ -101,8 +101,8 @@ Pretty Code - With animations - + +
+ import React, { useState } from 'react'; function Example() { @@ -101,8 +101,8 @@ Pretty Code
import React, { useState } from 'react'; function Example() { @@ -101,8 +101,8 @@ Pretty Code
+ +