From 6c3ce4cfecc8836c14b5bf9e6e720abf97f25e3e Mon Sep 17 00:00:00 2001 From: tanaka Date: Sun, 9 Jun 2024 16:38:17 +0900 Subject: [PATCH 1/2] Remove unnecessary CSS reset from HighlightedLine component The previous complex CSS reset has been removed from the HighlightedLine.svelte component. The code is now easier to maintain and read without unnecessary styles. --- src/lib/ui/HighlightedLine.svelte | 94 ------------------------------- 1 file changed, 94 deletions(-) diff --git a/src/lib/ui/HighlightedLine.svelte b/src/lib/ui/HighlightedLine.svelte index 6f51c98..f2a194d 100644 --- 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; - } } From ddc278d280f0f0adff474baa674c88e22dd7b7be Mon Sep 17 00:00:00 2001 From: tanaka Date: Sun, 9 Jun 2024 16:40:29 +0900 Subject: [PATCH 2/2] Add CSS reset and apply to Highlighted component A new CSS reset file has been added to the project, based on the new CSS reset version 1.11.2. This reset has been imported into the Highlighted.svelte component, applying a class to modify/reset the styles for improved consistency across different browsers. This should help in resolving any style inconsistencies and enhancing the overall UI of the app. --- src/lib/reset.css | 133 ++++++++++++++++++++++++++++++++++ src/lib/ui/Highlighted.svelte | 3 +- 2 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 src/lib/reset.css diff --git a/src/lib/reset.css b/src/lib/reset.css new file mode 100644 index 0000000..17b3889 --- /dev/null +++ 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 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 index 23c46c3..86bee86 100644 --- a/src/lib/ui/Highlighted.svelte +++ b/src/lib/ui/Highlighted.svelte @@ -4,6 +4,7 @@ --> -
+

{#each lines as line, i} {@const lineNumber = i + 1}