Custom SublimeText theme for the JSONView browser plugin.
Paste the sublime-text.css stylesheet rules into the theme editor.
Tip: Themes can be configure under the options in the extensions page in the browser.
Custom SublimeText theme for the JSONView browser plugin.
Paste the sublime-text.css stylesheet rules into the theme editor.
Tip: Themes can be configure under the options in the extensions page in the browser.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8" /> | |
<link rel="stylesheet" type="text/css" href="jsonview-core.css" /> | |
<link rel="stylesheet" type="text/css" href="sublime-text.css" /> | |
</head> | |
<body> | |
<div id="json"> | |
<div class="collapser"></div>{<span class="ellipsis"></span> | |
<ul class="obj collapsible"> | |
<li> | |
<div class="hoverable"> | |
<span class="property">hey</span>: <span class="type-string">"guy"</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">anumber</span>: <span class="type-number">243</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"><span class="property">anobject</span>: | |
<div class="collapser"></div>{<span class="ellipsis"></span> | |
<ul class="obj collapsible"> | |
<li> | |
<div class="hoverable"> | |
<span class="property">whoa</span>: <span class="type-string">"nuts"</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable collapsed"><span class="property">anarray</span>: | |
<div class="collapser"></div>[<span class="ellipsis"></span> | |
<ul class="array collapsible"> | |
<li> | |
<div class="hoverable"> | |
<span class="type-number">1</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="type-number">2</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="type-string">"thr<h1>ee"</span> | |
</div> | |
</li> | |
</ul>], | |
</div> | |
</li> | |
<li> | |
<div class="hoverable hovered"> | |
<span class="property">more</span>: <span class="type-string">"stuff"</span> | |
</div> | |
</li> | |
</ul>},</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">awesome</span>: <span class="type-boolean">true</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">bogus</span>: <span class="type-boolean">false</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">meaning</span>: <span class="type-null">null</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">link</span>: <span class="type-string">"</span><a href="#">http://jsonview.com</a><span class="type-string">"</span>, | |
</div> | |
</li> | |
<li> | |
<div class="hoverable"> | |
<span class="property">notLink</span>: <span class="type-string">"http://jsonview.com is great"</span> | |
</div> | |
</li> | |
</ul>} | |
</div> | |
</body> | |
</html> |
body { | |
margin-bottom: 23px; | |
white-space: normal !important; | |
} | |
ul { | |
list-style-type: none; | |
padding: 0px; | |
margin: 0px 0px 0px 26px; | |
} | |
li { | |
position: relative; | |
} | |
.hoverable { | |
transition: background-color .2s ease-out 0s; | |
-webkit-transition: background-color .2s ease-out 0s; | |
display: inline-block; | |
} | |
.hovered { | |
transition-delay: .2s; | |
-webkit-transition-delay: .2s; | |
} | |
.selected { | |
outline-style: solid; | |
outline-width: 1px; | |
outline-style: dotted; | |
} | |
.collapsed>.collapsible { | |
display: none; | |
} | |
.ellipsis { | |
display: none; | |
} | |
.collapsed>.ellipsis { | |
display: inherit; | |
} | |
.collapser { | |
position: absolute; | |
top: 1px; | |
left: -1.5em; | |
cursor: default; | |
user-select: none; | |
-webkit-user-select: none; | |
} | |
.status { | |
position: fixed; | |
left: 0px; | |
bottom: 0px; | |
min-width: 628px; | |
border-color: #c2c2c2; | |
border-top-width: 1px; | |
border-right-width: 1px; | |
border-bottom-width: 0px; | |
border-left-width: 0px; | |
border-style: solid; | |
border-top-right-radius: 4px; | |
height: 16px; | |
padding-top: 2px; | |
padding-bottom: 2px; | |
padding-right: 7px; | |
padding-left: 4px; | |
font-family: sans-serif; | |
font-size: 12px; | |
opacity: 0; | |
background-color: #d2d2f6; | |
color: #696969; | |
transition: opacity .2s ease-out; | |
-webkit-transition: opacity .2s ease-out; | |
user-select: none; | |
-webkit-user-select: none; | |
} | |
.status:not(:empty ) { | |
opacity: 1; | |
} | |
.toolbox { | |
font-family: sans-serif; | |
font-size: 13px; | |
opacity: .25; | |
background-color: #d2d2f6; | |
position: fixed; | |
right: 0px; | |
top: 0px; | |
border-color: #c2c2c2; | |
border-bottom-width: 1px; | |
border-left-width: 1px; | |
border-top-width: 0px; | |
border-right-width: 0px; | |
border-style: solid; | |
border-bottom-left-radius: 4px; | |
padding-bottom: 3px; | |
transition: opacity .2s ease-out; | |
-webkit-transition: opacity .2s ease-out; | |
cursor: default; | |
user-select: none; | |
-webkit-user-select: none; | |
padding-left: 2px; | |
} | |
.toolbox:hover { | |
opacity: 1; | |
} | |
.toolbox>* { | |
padding-left: 3px; | |
padding-right: 3px; | |
} | |
.toolbox>a { | |
padding-left: 5px; | |
} | |
.toolbox>img { | |
height: 14px; | |
vertical-align: bottom; | |
cursor: pointer; | |
} |
body { | |
white-space: pre; | |
background: #272822; | |
color: #D7005E; | |
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif; | |
} | |
a:link, a:visited { | |
color: #66D9EF; | |
} | |
a:hover { | |
color: #FFFFFF; | |
} | |
a:active { | |
color: #D7005E; | |
} | |
.property { | |
color: #A3E200; | |
} | |
.property:after { | |
color: #D7005E; | |
} | |
.type-null { | |
color: #AB80FE; | |
} | |
.type-boolean { | |
color: #AB80FE; | |
} | |
.type-number { | |
color: #AB80FE; | |
} | |
.type-string { | |
color: #E6DB74; | |
} | |
.callback-function { | |
color: #66D9EF; | |
} | |
.collapsible { | |
margin-left: 2em; | |
} | |
.collapser { | |
top: 0px; | |
padding-right: 6px; | |
padding-left: 6px; | |
color: #8A8A8B; | |
} | |
.collapser:after { | |
content: "\25BC"; | |
} | |
.collapsed > .collapser:after { | |
content: "\25B6"; | |
} | |
.ellipsis : { | |
color: #66D9EF; | |
} | |
.ellipsis:after { | |
content: "\2026"; | |
color: #66D9EF; | |
} | |
.hoverable { | |
padding-top: 1px; | |
padding-bottom: 1px; | |
padding-left: 2px; | |
padding-right: 2px; | |
border-radius: 2px; | |
} | |
.hovered { | |
background-color: #3E3D31; | |
} | |
.selected { | |
outline-style: dashed; | |
outline-color: #FFFFFF !important; | |
} |