Bläddra i källkod

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)
Thomas Fritsch 1 år sedan
förälder
incheckning
777e2a2d05
2 ändrade filer med 11 tillägg och 56 borttagningar
  1. 9 29
      css/theme/source/dracula.scss
  2. 2 27
      dist/theme/dracula.css

+ 9 - 29
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
-}

+ 2 - 27
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;
-}
+}