From b7acae4e6dd0c37f5eda49604939c2f6015a6d9e Mon Sep 17 00:00:00 2001 From: Stanimir Stamenkov Date: Thu, 29 Aug 2024 14:52:47 +0300 Subject: [PATCH 1/4] Give .collapsible.collapsed { height: 1lh } Amends #98 with a more reliable declaration ensuring visible ellipsis with any font's normal line height, incl. custom line-height. 'lh' is more recently implemented CSS unit: - https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#line_height_units so keep the original `line-height: 1.2` as a fallback. --- src/viewer.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/viewer.css b/src/viewer.css index 77ad30b..84c21ac 100644 --- a/src/viewer.css +++ b/src/viewer.css @@ -43,6 +43,7 @@ body { .collapsible.collapsed { height: 1.2em; + height: 1lh; width: 1em; display: inline-block; overflow: hidden; From a1f2c2e6aa6a7773b5d5f7be9d525c06f4f9c531 Mon Sep 17 00:00:00 2001 From: Stanimir Stamenkov Date: Thu, 29 Aug 2024 15:14:56 +0300 Subject: [PATCH 2/4] Avoid horizontal scroll with very long string or link values - https://developer.mozilla.org/en-US/docs/Web/CSS/word-break Alternative could be: overflow-wrap: break-word; but the former ensures the value starts at the same line as the property name, for example. --- src/viewer.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/viewer.css b/src/viewer.css index 84c21ac..9c17df5 100644 --- a/src/viewer.css +++ b/src/viewer.css @@ -186,4 +186,8 @@ h1 { .spacer { display: inline-block; width: 0px; -} \ No newline at end of file +} + +.string, :any-link { + word-break: break-all; +} From af59b9992e34b28e6d329158f583bd14dc75358e Mon Sep 17 00:00:00 2001 From: Stanimir Stamenkov Date: Thu, 29 Aug 2024 15:02:10 +0300 Subject: [PATCH 3/4] Specify Standard metadata names : > color-scheme: specifies one or more color schemes with which > the document is compatible. The browser will use this information > in tandem with the user's browser or device settings to determine > what colors to use for everything from background and foregrounds > to form controls and scrollbars. This also adjusts the selection/highlight colors, all CSS system colors: - https://drafts.csswg.org/css-color/#css-system-colors It could prevent "white flashes" in some contexts. The difference with the CSS `color-scheme` property [1] is, for example, with Firefox View > Page Style > No Style it still honors the browser's color theme. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme --- src/jsonformatter.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/jsonformatter.ts b/src/jsonformatter.ts index f9f6022..a4f0040 100644 --- a/src/jsonformatter.ts +++ b/src/jsonformatter.ts @@ -217,6 +217,7 @@ function toHTML(content: string, title: string) { return ` ${htmlEncode(title)} + ${content} From d8a01e1588c57aef8d437cc1998a3c127ce4d54f Mon Sep 17 00:00:00 2001 From: Stanimir Stamenkov Date: Sat, 31 Aug 2024 14:39:00 +0300 Subject: [PATCH 4/4] Force transparent background for "collapsed" text selection This avoids somewhat annoying translucent-background selection overlays. - https://developer.mozilla.org/en-US/docs/Web/CSS/::selection --- src/viewer.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/viewer.css b/src/viewer.css index 9c17df5..c35e94e 100644 --- a/src/viewer.css +++ b/src/viewer.css @@ -191,3 +191,7 @@ h1 { .string, :any-link { word-break: break-all; } + +:is(.spacer, :not(.quoted) > .q)::selection { + background-color: transparent; +}