From 777e2a2d05237d53a121e512de388bdf2dd99b4b Mon Sep 17 00:00:00 2001 From: Thomas Fritsch Date: Sat, 2 Sep 2023 12:03:11 +0200 Subject: [PATCH 1/3] fix dracula li markers replace :before pseudo elements with :marker selector allows to have different marker based on the level of nesting (as in other themes : disc, square, circle) --- css/theme/source/dracula.scss | 38 +++++++++-------------------------- dist/theme/dracula.css | 29 ++------------------------ 2 files changed, 11 insertions(+), 56 deletions(-) diff --git a/css/theme/source/dracula.scss b/css/theme/source/dracula.scss index 67fb59c9177..1554763aeb2 100644 --- a/css/theme/source/dracula.scss +++ b/css/theme/source/dracula.scss @@ -99,34 +99,14 @@ $codeFont: "Fira Code", $systemFontsMono; } // Dracula colored list bullets and numbers -.reveal ul { - list-style: none; +.reveal { + ul, ol { + li::marker { + color: var(--r-list-bullet-color); + } + } + ol { + counter-reset: li; + } } -.reveal ul li::before { - content: "•"; - color: var(--r-list-bullet-color); - display: inline-block; - width: 1em; - margin-left: -1em -} - -.reveal ol { - list-style: none; - counter-reset: li; -} - -.reveal ol li::before { - content: counter(li) "."; - color: var(--r-list-bullet-color); - display: inline-block; - width: 2em; - - margin-left: -2.5em; - margin-right: 0.5em; - text-align: right; -} - -.reveal ol li { - counter-increment: li -} diff --git a/dist/theme/dracula.css b/dist/theme/dracula.css index f17aac39fb3..73dd0fffd4e 100644 --- a/dist/theme/dracula.css +++ b/dist/theme/dracula.css @@ -1,4 +1,3 @@ -@charset "UTF-8"; /** * Dracula Dark theme for reveal.js. * Based on https://draculatheme.com @@ -382,33 +381,9 @@ section.has-light-background, section.has-light-background h1, section.has-light color: var(--r-inline-code-color); } -.reveal ul li { - list-style: none; -} - -.reveal ul li::before { - content: "•"; +.reveal ul li::marker, .reveal ol li::marker { color: var(--r-list-bullet-color); - display: inline-block; - width: 1em; - margin-left: -1em; } - .reveal ol { - list-style: none; counter-reset: li; -} - -.reveal ol li::before { - content: counter(li) "."; - color: var(--r-list-bullet-color); - display: inline-block; - width: 2em; - margin-left: -2.5em; - margin-right: 0.5em; - text-align: right; -} - -.reveal ol li { - counter-increment: li; -} +} \ No newline at end of file From 3a830dd98ffdff2284e23ad3801e4be3d5793261 Mon Sep 17 00:00:00 2001 From: Thomas Fritsch Date: Sat, 2 Sep 2023 12:19:59 +0200 Subject: [PATCH 2/3] fix dracula theme li numbering --- css/theme/source/dracula.scss | 3 --- dist/theme/dracula.css | 3 --- 2 files changed, 6 deletions(-) diff --git a/css/theme/source/dracula.scss b/css/theme/source/dracula.scss index 1554763aeb2..50c1bd5416e 100644 --- a/css/theme/source/dracula.scss +++ b/css/theme/source/dracula.scss @@ -105,8 +105,5 @@ $codeFont: "Fira Code", $systemFontsMono; color: var(--r-list-bullet-color); } } - ol { - counter-reset: li; - } } diff --git a/dist/theme/dracula.css b/dist/theme/dracula.css index 73dd0fffd4e..43430d46c85 100644 --- a/dist/theme/dracula.css +++ b/dist/theme/dracula.css @@ -383,7 +383,4 @@ section.has-light-background, section.has-light-background h1, section.has-light .reveal ul li::marker, .reveal ol li::marker { color: var(--r-list-bullet-color); -} -.reveal ol { - counter-reset: li; } \ No newline at end of file From 81ea1162927f26a1aa4fa91750d34a0ef7702ad4 Mon Sep 17 00:00:00 2001 From: Thomas Fritsch Date: Sat, 2 Sep 2023 12:21:54 +0200 Subject: [PATCH 3/3] refactor dracula theme sass code --- css/theme/source/dracula.scss | 23 ++++++++++------------- dist/theme/dracula.css | 3 --- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/css/theme/source/dracula.scss b/css/theme/source/dracula.scss index 50c1bd5416e..ae968b8c752 100644 --- a/css/theme/source/dracula.scss +++ b/css/theme/source/dracula.scss @@ -86,20 +86,17 @@ $codeFont: "Fira Code", $systemFontsMono; --r-list-bullet-color: #{$listBulletColor}; } -.reveal strong, .reveal b { - color: var(--r-bold-color); -} - -.reveal em, .reveal i, .reveal blockquote { - color: var(--r-italic-color); -} - -.reveal code { - color: var(--r-inline-code-color); -} - -// Dracula colored list bullets and numbers .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/dist/theme/dracula.css b/dist/theme/dracula.css index 43430d46c85..a2fe2d22d5c 100644 --- a/dist/theme/dracula.css +++ b/dist/theme/dracula.css @@ -372,15 +372,12 @@ section.has-light-background, section.has-light-background h1, section.has-light .reveal strong, .reveal b { color: var(--r-bold-color); } - .reveal em, .reveal i, .reveal blockquote { color: var(--r-italic-color); } - .reveal code { color: var(--r-inline-code-color); } - .reveal ul li::marker, .reveal ol li::marker { color: var(--r-list-bullet-color); } \ No newline at end of file