Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Reset CSS #8

Merged
merged 2 commits into from
Jun 9, 2024
Merged

Fix Reset CSS #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6c3ce4c
Remove unnecessary CSS reset from HighlightedLine component
lemo-nade-room Jun 9, 2024
ddc278d
Add CSS reset and apply to Highlighted component
lemo-nade-room Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 133 additions & 0 deletions src/lib/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
3 changes: 2 additions & 1 deletion src/lib/ui/Highlighted.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}
Expand Down
94 changes: 0 additions & 94 deletions src/lib/ui/HighlightedLine.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>