@charset "utf-8";
/* CSS Document */
html, body {
max-width: 100%;
}
body {
padding: 0 !important;
margin: 0;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
html {
height: 100%;
}
/* ===== Back to top ===== */
.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 2147483647;
width: 46px;
height: 46px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
background: var(--json-dark, #0f172a);
color: #fff;
text-decoration: none;
border: none;
cursor: pointer;
font-size: 1.1em;
box-shadow: 0 8px 20px rgba(15,23,42,.35);
transition: background .2s ease, transform .2s ease;
}
.back-to-top.show { display: flex; }
.back-to-top:hover { background: var(--json-dark-2, #1e293b); transform: translateY(-3px); }
@media (max-width: 600px) {
.back-to-top { width: 40px; height: 40px; right: 16px; bottom: 16px; }
}
/* app.min.css reserves margin-top:70px for a fixed-position navbar; our
.site-topbar is in normal flow, so we replace it with a small breathing gap. */
.content-page {
margin-top: 0px;
}
/* app.min.css sets #wrapper/.content-page to overflow:hidden (vendor admin-
template chrome, index.html only - guide.html never loads that stylesheet).
An overflow:hidden ancestor becomes position:sticky's containing block, but
these two never scroll internally themselves (they're sized to fit their
content) - so a sticky descendant sticks relative to a box that never
moves, instead of tracking the page's real scroll on . Restore
visible so .page-ad-rail's sticky positioning tracks the actual page scroll. */
#wrapper, .content-page {
overflow: visible;
}
.page-layout { display: grid; grid-template-columns: 280px 1fr 280px; gap: 32px; align-items: start; }
/* Narrower rail columns once the viewport can't comfortably fit the full
280px width alongside the content column, before the rail disappears
entirely below 1200px (kept in sync with .page-ad-rail's own breakpoint
in ad-rail.css). */
@media (max-width: 1500px) {
.page-layout { grid-template-columns: 200px 1fr 200px; gap: 15px; }
}
@media (max-width: 1200px) {
.page-layout { grid-template-columns: 1fr; }
}
/* ===== JSON tool toolbar ===== */
.json-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #f7f8fa;
border-bottom: 1px solid #eee;
}
.jt-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #fff;
border: 1px solid #d7dbe1;
border-left: 3px solid var(--jt-accent, var(--json-accent, #f59e0b));
color: #23272f;
padding: 7px 13px;
border-radius: 7px;
font-size: 13px;
cursor: pointer;
transition: all .15s ease;
}
.jt-btn:hover { background: var(--jt-accent, var(--json-dark, #0f172a)); border-color: var(--jt-accent, var(--json-dark, #0f172a)); color: #fff; }
.jt-btn:active { transform: translateY(1px); }
.jt-btn i { color: var(--jt-accent, var(--json-accent, #f59e0b)); }
.jt-btn:hover i { color: #fff; }
.jt-btn-sm { padding: 4px 10px; font-size: 12px; }
.jt-c-format { --jt-accent: #2563eb; }
.jt-c-minify { --jt-accent: #475569; }
.jt-c-copy { --jt-accent: #16a34a; }
.jt-c-download { --jt-accent: #7c3aed; }
.jt-c-sample { --jt-accent: #0891b2; }
.jt-c-clear { --jt-accent: #dc2626; }
.jt-select {
border: 1px solid #d7dbe1;
border-radius: 7px;
padding: 7px 10px;
font-size: 13px;
background: #fff;
color: #23272f;
cursor: pointer;
}
.jt-search-wrap, .jt-filter-wrap {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #d7dbe1;
border-radius: 7px;
padding: 6px 12px;
}
.jt-search-wrap { flex: 1 1 140px; min-width: 120px; }
.jt-filter-wrap { flex: 0 0 auto; }
.jt-search-wrap i, .jt-filter-wrap i { color: #9aa0aa; }
.jt-search { border: 0; outline: none; flex: 1; font-size: 13px; background: transparent; }
.jt-filter-wrap .jt-select { border: 0; padding: 0; }
.json-stats-bar {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 8px 16px;
font-size: 12px;
color: #6b7280;
background: #fbfbfc;
border-bottom: 1px solid #eee;
}
.jt-analysis { font-weight: 600; color: var(--json-dark, #0f172a); }
.json-output-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 15px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: #6b7280;
border-bottom: 1px dashed #e5e7eb;
}
.jt-validator-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.json-search-match { background: #fde68a; border-radius: 3px; box-shadow: 0 0 0 2px #fde68a; }
/* ===== Toast ===== */
.jt-toast {
position: fixed;
left: 50%;
bottom: 30px;
transform: translate(-50%, 20px);
background: var(--json-dark, #0f172a);
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 13px;
box-shadow: 0 8px 24px rgba(15,23,42,.35);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
z-index: 2147483000;
}
.jt-toast.show { opacity: 1; transform: translate(-50%, 0); }
.jt-toast-error { background: #b91c1c; }
@media (max-width: 700px) {
.json-toolbar { padding: 10px; }
.jt-search-wrap { flex-basis: 100%; }
.jt-filter-wrap { flex-basis: 100%; }
}
.input-area {
box-sizing: border-box;
overflow: auto;
float: left;
border: solid 1px #eee;
}
.notification-area {
width: 100%;
float: left;
display: none;
box-sizing: border-box;
height: 98px;
overflow: hidden;
color: #fff;
box-sizing: border-box;
padding: 10px;
padding-top: 0px;
padding-bottom: 12px;
padding-left: 15px;
}
.jsonstring-area {
width: 100%;
float: left;
border-bottom: dashed 1px #ddd;
background: #fff;
box-sizing: border-box;
display: none;
height: 49px;
overflow: hidden;
color: #fff;
box-sizing: border-box;
padding: 10px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 15px;
}
.jsonstring-area.highlight {
background: #FFC;
}
.input-save {
float: left;
width: 70%;
display: none;
margin-right: 15px;
}
.input-save.show {
display: block;
}
.input-save-btn input {
cursor: pointer;
}
.urlShare {
float: left;
width: 90px;
padding-top: 4px;
color: #666;
}
.input-save input {
width: calc(100% - 115px);
border: solid 1px #aaa;
border-radius: 3px;
padding: 3px;
padding-left: 7px;
height: 15px;
font-size: 12px;
background: #fff;
}
.input-save input:focus {
outline: none;
}
.notification-area.with-error {
background: #FBE3E4;
color: #c9302c;
}
.notification-area.with-success {
background: #5cb85c;
}
.input-area textarea {
height: 99%;
width: 100%;
margin: 0px;
padding: 15px;
/*padding-bottom: 60px;*/
box-sizing: border-box;
border: 0px;
font-family: "Courier New", Courier, monospace;
resize: none;
}
.input-area textarea::-webkit-input-placeholder {
font-size: 14px;
color: #aaa;
font-family: "Courier New", Courier, monospace;
}
.input-area textarea::-moz-placeholder {
color: #aaa;
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
.input-area textarea:focus {
outline: none;
}
.output-area {
height: 600px;
position: relative;
box-sizing: border-box;
overflow: hidden;
float: left;
border: solid 1px #eee;
}
.json-container ul {
margin: 0;
padding: 0;
padding-left: 25px;
list-style: none;
border-left: 1px dotted #ccc;
}
.json-container ul.hovering-node {
border-left: 1px solid #999;
}
.json-container {
float: left;
width: 100%;
padding: 15px;
box-sizing: border-box;
height: calc(100% - 0px);
overflow: auto;
}
.json-container.whitespaced {
white-space: pre-wrap;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
line-height: 18px;
color: #777;
}
.json-container ul li {
margin-top: 5px;
margin-bottom: 5px;
}
a {
text-decoration: none;
color: #007fff;
}
.json-property {
font-size: 13px;
}
.danger {
color: #cc0000;
}
.json-property-key {
color: #3c73c3;
}
.json-property-value {
color: #0C3;
}
.json-property-value.null-value {
color: #aaa;
font-style: italic;
}
.json-property-value.string-value:before, .json-property-value.string-value:after {
content: '"';
}
.json-property-value.boolean-value {
color: #c4a000;
}
.json-property-value.integer-value {
color: #e6005c;
}
.json-node-opening {
color: #3c73c3;
}
.json-node-closing {
color: #3c73c3;
}
.json-node-opening.with-array {
color: #cc0000;
}
.json-node-closing.with-array {
color: #cc0000;
}
.json-container .json-key-value:after {
content: ",";
color: #3c73c3;
}
.json-container .json-key-value:last-child:after {
content: "";
}
.json-container span.json-property-key:after {
content: '" : ';
}
.json-container span.json-property-key.with-array:after {
content: '" : ';
}
.json-container span.json-property-key.with-object:after {
content: '" : ';
}
.json-container span.json-property-key:before {
content: '"';
}
.json-container span.json-property-key.blank-key:before {
content: '';
}
.json-container span.json-property-key.blank-key:after {
content: '';
}
.json-container .json-expand-plus a i {
margin-right: 3px;
}
.header-area {
bottom: 0;
width: 100%;
height: 40px;
box-sizing: border-box;
padding: 13px;
background: #333;
font-size: 12px;
color: #ccc;
}
.header-area a {
color: rgb(35, 190, 226);
}
.header-area a:hover {
text-decoration: underline;
}
.header-left {
float: left;
width: 33%;
}
.header-center {
float: left;
width: 33%;
text-align: center;
}
.header-center h1 {
font-size: 12px;
font-weight: normal;
margin: 0;
padding: 0;
}
.header-right {
float: right;
text-align: right;
width: 33%;
}
.header-right ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.header-right ul li {
display: inline-block;
padding-left: 5px;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #000;
display: none;
z-index: 1;
opacity: 0.6;
}
.overlay.show {
display: block;
}
.overlay-box.show {
display: block;
}
.overlay-box, .overlay-box-how {
width: 560px;
display: none;
height: 550px;
margin-left: -280px;
margin-top: -275px;
border-radius: 10px;
padding: 25px;
box-sizing: border-box;
background: #fff;
position: fixed;
overflow: auto;
left: 50%;
font-size: 14px;
line-height: 22px;
z-index: 2;
top: 50%;
}
.overlay-box-how {
height: 440px;
margin-top: -220px;
}
.common-box-o h2 {
margin: 0;
font-size: 28px;
font-weight: normal;
font-family: "Courier New", Courier, monospace;
}
.smallTxt {
color: #f7572f;
font-size: 16px;
}
.content-well {
background: #f6f6f6;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
}
.content-well p {
margin: 0;
padding: 0;
}
.hint {
color: #888;
font-size: 12px;
}
.subtitle {
font-size: 15px;
}
.cross-sign {
position: absolute;
right: 20px;
font-size: 15px;
top: 0;
font-weight: bold;
}
.cross-bottom-box {
color: #f7572f;
}
.main-seprator {
color: #f2f2f2;
margin: 0;
padding: 0;
border: solid 1px;
}
.common-box-o ol, .content-area-common ol {
margin: 0;
padding: 0;
margin-left: 15px;
margin-top: 15px;
}
.common-box-o ol li, .content-area-common ol li {
margin-bottom: 10px;
}
.overlay-box-how h1 {
margin-bottom: 15px;
}
.common-box-o ul, .content-area-common ul {
margin: 0;
padding: 0;
margin-left: 15px;
margin-top: 15px;
}
.header-center h1 a {
color: #ccc;
}
.container {
margin: auto;
width: 900px;
}
.clearfix {
clear: both;
}
.container h1 {
font-family: "Courier New", Courier, monospace;
color: #333;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: dashed 1px #333;
font-weight: normal;
}
.content-area-common {
line-height: 22px;
}
ul.leftindentul {
margin-left: 30px;
}
.errorJsLine {
background: #FBE3E4;
display: block;
padding: 2px;
padding-left: 7px;
color: #000;
padding-right: 7px;
}
.notification-area-outer {
position: relative;
float: left;
width: 100%;
}
.vlinkjson {
position: absolute;
right: 5px;
top: 5px;
font-size: 11px;
color: #c9302c;
}
.vlinkjson:hover {
text-decoration: underline;
}
.button {
border: 1px solid #bfbdbdee;
background: #eeee;
padding: 3px;
color: black;
border-radius: 1px;
margin: 10px;
cursor: pointer;
}
.result {
padding: 1em;
}
.pass {
background-color: #efe;
color: #393;
border: 1px solid #393;
padding: 5px;
}
.fail {
background-color: #fee;
color: #933;
border: 1px solid #933;
padding: 5px;
}
.hide {
display: none !important;
}
.header-right li {
cursor: pointer;
}
@media (min-width: 1367px) {
body[data-layout-mode=horizontal] .container-fluid {
max-width: 100%;
}
}
.foreground-div {
position: relative;
z-index: 2;
background: #f5f6f8;
}
.background-div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 90%;
z-index: 1;
overflow: auto;
}