jsonview icon indicating copy to clipboard operation
jsonview copied to clipboard

Published 20 hours ago • verified publisher icon bhollis

A collection of small style adjustments

Open stanio opened this issue 1 year ago • 2 comments

These are small style adjustments I'm currently using via "user styles". See the individual commit messages for some more details, while I'll leave some Before and After screenshots here:

  • Give .collapsible.collapsed { height: 1lh }


    Using #json { line-height: 2 }:
    collapsed-before collapsed-after
  • Avoid horizontal scroll with very long string or link values
    long-link-before long-link-after
    long-string-before long-string-after

    Firefox breaks somewhat more by default:
    firefox-long-before firefox-long-after
  • Specify <meta name="color-scheme" content="light dark">
    selection-color-before selection-color-after

    Firefox View > Page Style > No Style:
    no-style-before no-style-after
  • Force transparent background for "collapsed" text selection
    translucent-selection-before translucent-selection-after
  • Specify widths/lengths in ch unit
    indent-before indent-after

  • Enlarge .collapser width/click-area

See if you may be interested in any of these.

stanio avatar Sep 03 '24 08:09 stanio

  • Specify widths/lengths in ch unit
  • Enlarge .collapser width/click-area

I'll drop these last two from this PR as I'm still tweaking them for myself.

stanio avatar Sep 04 '24 05:09 stanio

Awesome, thank you! I'll take a look through these and see what can be merged!

bhollis avatar Sep 10 '24 02:09 bhollis