Merge pull request #8 from lemo-nade-room/develop

Fix Reset CSS
lemo-nade-room · Jun 9, 2024 · 3dc0058 · 3dc0058
2 parents 4fdf39a + ddc278d
commit 3dc0058
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 95 deletions.
diff --git a/src/lib/reset.css b/src/lib/reset.css
@@ -0,0 +1,133 @@
+.svelte-diff-highlighting {
+	/***
+        The new CSS reset - version 1.11.2 (last updated 15.11.2023)
+        GitHub page: https://github.com/elad2412/the-new-css-reset
+    ***/
+
+	/*
+        Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+        - The "symbol *" part is to solve Firefox SVG sprite bug
+        - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+     */
+
+	*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+		all: unset;
+		display: revert;
+	}
+
+	/* Preferred box-sizing value */
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	/* Fix mobile Safari increase font-size on landscape mode */
+
+	html {
+		-moz-text-size-adjust: none;
+		-webkit-text-size-adjust: none;
+		text-size-adjust: none;
+	}
+
+	/* Reapply the pointer cursor for anchor tags */
+
+	a,
+	button {
+		cursor: revert;
+	}
+
+	/* Remove list styles (bullets/numbers) */
+
+	ol,
+	ul,
+	menu,
+	summary {
+		list-style: none;
+	}
+
+	/* For images to not be able to exceed their container */
+
+	img {
+		max-inline-size: 100%;
+		max-block-size: 100%;
+	}
+
+	/* removes spacing between cells in tables */
+
+	table {
+		border-collapse: collapse;
+	}
+
+	/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+
+	input,
+	textarea {
+		-webkit-user-select: auto;
+	}
+
+	/* revert the 'white-space' property for textarea elements on Safari */
+
+	textarea {
+		white-space: revert;
+	}
+
+	/* minimum style to allow to style meter element */
+
+	meter {
+		-webkit-appearance: revert;
+		appearance: revert;
+	}
+
+	/* preformatted text - use only for this feature */
+
+	:where(pre) {
+		all: revert;
+		box-sizing: border-box;
+	}
+
+	/* reset default text opacity of input placeholder */
+
+	::placeholder {
+		color: unset;
+	}
+
+	/* fix the feature of 'hidden' attribute.
+       display:revert; revert to element instead of attribute */
+
+	:where([hidden]) {
+		display: none;
+	}
+
+	/* revert for bug in Chromium browsers
+       - fix for the content editable attribute will work properly.
+       - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+
+	:where([contenteditable]:not([contenteditable='false'])) {
+		-moz-user-modify: read-write;
+		-webkit-user-modify: read-write;
+		overflow-wrap: break-word;
+		-webkit-line-break: after-white-space;
+		-webkit-user-select: auto;
+	}
+
+	/* apply back the draggable feature - exist only in Chromium and Safari */
+
+	:where([draggable='true']) {
+		-webkit-user-drag: element;
+	}
+
+	/* Revert Modal native behavior */
+
+	:where(dialog:modal) {
+		all: revert;
+		box-sizing: border-box;
+	}
+
+	/* Remove details summary webkit styles */
+
+	::-webkit-details-marker {
+		display: none;
+	}
+}
diff --git a/src/lib/ui/Highlighted.svelte b/src/lib/ui/Highlighted.svelte
@@ -4,6 +4,7 @@
 -->
 
 <script lang="ts">
+	import '../reset.css';
 	import hljs, { type HighlightResult } from 'highlight.js';
 	import { onMount } from 'svelte';
 	import { Language } from '$lib/scripts/language.js';
@@ -36,7 +37,7 @@
 	$: oldLines = oldHighilghted?.value.split('\n') ?? [];
 </script>
 
-<div class="scroll">
+<div class="scroll svelte-diff-highlighting">
 	<p class="highlighted">
 		{#each lines as line, i}
 			{@const lineNumber = i + 1}

diff --git a/src/lib/ui/HighlightedLine.svelte b/src/lib/ui/HighlightedLine.svelte
@@ -54,99 +54,5 @@
 			user-select: text;
 			-webkit-user-select: text;
 		}
-
-		/***
-		The new CSS reset - version 1.11.2 (last updated 15.11.2023)
-		GitHub page: https://github.com/elad2412/the-new-css-reset
-***/
-
-		/*
-					Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
-					- The "symbol *" part is to solve Firefox SVG sprite bug
-					- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
-			 */
-		& *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
-			all: unset;
-			display: revert;
-		}
-
-		/* Preferred box-sizing value */
-		& *,
-		*::before,
-		*::after {
-			box-sizing: border-box;
-		}
-
-		/* Reapply the pointer cursor for anchor tags */
-		& a,
-		button {
-			cursor: revert;
-		}
-
-		/* Remove list styles (bullets/numbers) */
-		& ol,
-		ul,
-		menu,
-		summary {
-			list-style: none;
-		}
-
-		/* For images to not be able to exceed their container */
-		& img {
-			max-inline-size: 100%;
-			max-block-size: 100%;
-		}
-
-		/* removes spacing between cells in tables */
-		& table {
-			border-collapse: collapse;
-		}
-
-		/* revert the 'white-space' property for textarea elements on Safari */
-		& textarea {
-			white-space: revert;
-		}
-
-		/* minimum style to allow to style meter element */
-		& meter {
-			-webkit-appearance: revert;
-			appearance: revert;
-		}
-
-		/* preformatted text - use only for this feature */
-		& :where(pre) {
-			all: revert;
-			box-sizing: border-box;
-		}
-
-		/* reset default text opacity of input placeholder */
-		& ::placeholder {
-			color: unset;
-		}
-
-		/* fix the feature of 'hidden' attribute.
-				 display:revert; revert to element instead of attribute */
-		& :where([hidden]) {
-			display: none;
-		}
-
-		/* revert for bug in Chromium browsers
-				 - fix for the content editable attribute will work properly.
-				 - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
-		& :where([contenteditable]:not([contenteditable='false'])) {
-			-moz-user-modify: read-write;
-			-webkit-user-modify: read-write;
-			overflow-wrap: break-word;
-		}
-
-		/* apply back the draggable feature - exist only in Chromium and Safari */
-		& :where([draggable='true']) {
-			-webkit-user-drag: element;
-		}
-
-		/* Remove details summary webkit styles */
-		& ::-webkit-details-marker {
-			display: none;
-		}
 	}
 </style>