Skip to content

Instantly share code, notes, and snippets.

@pyrtsa
Created April 3, 2013 22:40
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pyrtsa/5306116 to your computer and use it in GitHub Desktop.
Save pyrtsa/5306116 to your computer and use it in GitHub Desktop.
CSS for JSONView (the Google Chrome plugin)
body {
white-space: pre;
font-family: Menlo, monospace;
font-size: 13px;
}
.property {
/*font-weight: bold;*/
color: #3ac;
}
.type-null,
.type-boolean,
.type-number,
.type-string
{
}
.type-null {
color: #3333cc;
font-weight: bold;
}
.type-boolean {
color: #3333cc;
font-weight: bold;
}
.type-number {
color: #ff2222;
}
.type-string {
color: #c41a16;
}
.callback-function {
color: gray;
}
.collapser:after {
content: "▽";
color: #eee;
}
.collapsed > .collapser:after {
content: "▶";
color: #ccc;
}
.ellipsis:after {
content: " ... ";
}
.collapsible {
margin-left: 2em;
}
.hoverable {
padding: 1px 2px;
border-radius: 10px;
}
.hoverable:hover {
border: 1px solid #eee;
padding: 3px 6px;
margin: -3px -5px;
}
.hovered {
background-color: transparent;
}
.collapser {
padding-right: 10px;
padding-left: 6px;
}
* { outline: none !important; }
a:link, a:visited { color: #c41a16; text-decoration: none; }
a:focus, a:hover { color: #3333cc; text-decoration: underline; }
a:active { color: red; text-decoration: underline; }
@pyrtsa
Copy link
Author

pyrtsa commented Apr 4, 2013

Installation in Google Chrome:

  1. Visit Window > Extensions.
  2. Press Options below JSONView (assuming you have the JSONView extension installed).
  3. Next to "Build custom theme with style editor", press Open.
  4. Copy the source code from this gist over to "CSS".
  5. Press the Save button (lower right corner of the window).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment