@miyagi/core/frontend/assets/css/iframe/jsontree.js.css

miyagi is a component development tool for JavaScript template engines.

/*
 * JsonTree.js Library v2.0.0
 *
 * Copyright 2024 Bunoon
 * Released under the MIT License
 */
.json-tree-js {
	--json-tree-js-text-bold-weight: 400;
	--json-tree-js-header-bold-weight: 700;
	--json-tree-js-title-bold-weight: var(--json-tree-js-header-bold-weight);
	--json-tree-js-text-bold-weight-active: var(
		--json-tree-js-header-bold-weight
	);
	--json-tree-js-color-black: #3b3a3a;
	--json-tree-js-color-white: currentcolor;
	--json-tree-js-color-snow-white: currentcolor;
	--json-tree-js-color-boolean: light-dark(#d9173e, hsl(348deg 100% 68%));
	--json-tree-js-color-decimal: #e3c868;
	--json-tree-js-color-number: #666bf9;
	--json-tree-js-color-string: light-dark(hsl(80deg 100% 24%), #8dd203);
	--json-tree-js-color-date: #a656f5;
	--json-tree-js-color-array: light-dark(#7a4613, hsl(30deg 73% 50%));
	--json-tree-js-color-object: currentcolor;
	--json-tree-js-color-null: #bbb;
	--json-tree-js-color-function: var(--json-tree-js-color-null);
	--json-tree-js-color-unknown: var(--json-tree-js-color-null);
	--json-tree-js-container-background-color: #22272e;
	--json-tree-js-container-border-color: #454c56;
	--json-tree-js-button-background-color: #2d333b;
	--json-tree-js-button-border-color: var(
		--json-tree-js-container-border-color
	);
	--json-tree-js-button-text-color: var(--json-tree-js-color-white);
	--json-tree-js-button-background-color-hover: var(
		--json-tree-js-container-border-color
	);
	--json-tree-js-button-text-color-hover: var(--json-tree-js-color-snow-white);
	--json-tree-js-button-background-color-active: #616b79;
	--json-tree-js-button-text-color-active: var(--json-tree-js-color-snow-white);
	--json-tree-js-border-radius: 0.5rem;
	--json-tree-js-border-style-scrollbar: inset 0 0 6px
		var(--json-tree-js-color-dark-gray);
	--json-tree-js-border-size: 0.5px;
	--json-tree-js-spacing: 10px;
	--json-tree-js-spacing-font-size: 1em;
	--json-tree-js-transition: all 0.3s;
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Container
    -------------------------------------------------------------------------
*/
div.json-tree-js {
	box-sizing: border-box;
	display: inline-block;
	background-color: var(--color-Code-background);
	color: var(--json-tree-js-color-white);
	border: 0.0625rem solid var(--color-Outline);
	padding: var(--json-tree-js-spacing);
	font-size: var(--json-tree-js-spacing-font-size);
	font-weight: var(--json-tree-js-text-bold-weight);
	line-height: 1.5;
	width: 100%;
	margin: 0 !important;
}

div.json-tree-js div.no-click {
	pointer-events: none !important;
}

div.json-tree-js * {
	box-sizing: border-box;
}

div.json-tree-js *::before,
div.json-tree-js *::after {
	box-sizing: border-box;
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Arrows
    -------------------------------------------------------------------------
*/

div.json-tree-js :is(.down-arrow, .right-arrow, .no-arrow) {
	background: none;
	appearance: none;
	padding: 0;
	border: none;
	font: inherit;
	width: 1.5em;
	height: 1.5em;
	display: inline-flex;
}

div.json-tree-js .no-arrow {
	visibility: hidden;
	pointer-events: none;
}

div.json-tree-js :is(.down-arrow, .right-arrow) {
	cursor: pointer;
	justify-content: center;
	align-items: center;
	transform: translateY(-0.125em);
}

div.json-tree-js :is(.down-arrow, .right-arrow)::after {
	content: "";
	border: var(--toggle-border);
	border-color: currentcolor;
	border-top-width: 0.25em;
	border-inline-end-width: 0.25em;
	display: inline-block;
	font-size: 0.4em;
	height: var(--toggle-height);
	flex: 0 0 var(--toggle-width);
}

div.json-tree-js :is(.down-arrow, .right-arrow):hover {
	opacity: 0.7;
}

div.json-tree-js .down-arrow::after {
	transform: translateY(-25%) rotate(135deg);
}

div.json-tree-js .right-arrow::after {
	transform: translateX(-25%) rotate(45deg);
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Title Bar
    -------------------------------------------------------------------------
*/
div.json-tree-js div.title-bar {
	display: flex;
	margin-bottom: var(--json-tree-js-spacing);
}

div.json-tree-js div.title-bar div.title {
	display: none;
}

div.json-tree-js div.title-bar div.controls {
	display: none;
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Object Type Title
    -------------------------------------------------------------------------
*/
div.json-tree-js div.object-type-title {
	font-weight: var(--json-tree-js-header-bold-weight);
	text-align: left !important;
}

div.json-tree-js div.object-type-title span.array {
	color: var(--json-tree-js-color-array);
}

div.json-tree-js div.object-type-title span.object {
	color: var(--json-tree-js-color-object);
}

div.json-tree-js div.object-type-title span.count {
	margin-left: calc(var(--json-tree-js-spacing) / 2);
	font-weight: var(--json-tree-js-text-bold-weight);
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Object Type Contents
    -------------------------------------------------------------------------
*/
div.json-tree-js div.object-type-contents {
	margin-top: calc(var(--json-tree-js-spacing) / 2);
	margin-left: calc(var(--json-tree-js-spacing) * 2);
	text-align: left !important;
}

div.json-tree-js div.object-type-contents div.object-type-value {
	margin-top: calc(var(--json-tree-js-spacing) / 2);
	margin-bottom: calc(var(--json-tree-js-spacing) / 2);
}

div.json-tree-js div.object-type-contents div.object-type-value span.split {
	margin-left: calc(var(--json-tree-js-spacing) / 2);
	margin-right: calc(var(--json-tree-js-spacing) / 2);
}

div.json-tree-js div.object-type-contents div.object-type-value span.boolean,
div.json-tree-js div.object-type-contents div.object-type-value span.decimal,
div.json-tree-js div.object-type-contents div.object-type-value span.number,
div.json-tree-js div.object-type-contents div.object-type-value span.string,
div.json-tree-js div.object-type-contents div.object-type-value span.date,
div.json-tree-js div.object-type-contents div.object-type-value span.null,
div.json-tree-js div.object-type-contents div.object-type-value span.function,
div.json-tree-js div.object-type-contents div.object-type-value span.unknown {
	transition: var(--json-tree-js-transition);
	transition-property: opacity;
}

div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.boolean:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.decimal:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.number:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.string:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.date:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.null:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.function:not(.no-hover):hover,
div.json-tree-js
	div.object-type-contents
	div.object-type-value
	span.unknown:not(.no-hover):hover {
	cursor: pointer;
	opacity: 0.7;
}

div.json-tree-js div.object-type-contents div.object-type-value span.comma {
	color: var(--json-tree-js-color-white);
	font-weight: var(--json-tree-js-text-bold-weight);
}

div.json-tree-js div.object-type-contents div.object-type-value span.boolean {
	color: var(--json-tree-js-color-boolean);
}

div.json-tree-js div.object-type-contents div.object-type-value span.decimal {
	color: var(--json-tree-js-color-decimal);
}

div.json-tree-js div.object-type-contents div.object-type-value span.number {
	color: var(--json-tree-js-color-number);
}

div.json-tree-js div.object-type-contents div.object-type-value span.string {
	color: var(--json-tree-js-color-string);
}

div.json-tree-js div.object-type-contents div.object-type-value span.date {
	color: var(--json-tree-js-color-date);
}

div.json-tree-js div.object-type-contents div.object-type-value span.array {
	font-weight: var(--json-tree-js-header-bold-weight);
	color: var(--json-tree-js-color-array);
}

div.json-tree-js div.object-type-contents div.object-type-value span.object {
	font-weight: var(--json-tree-js-header-bold-weight);
	color: var(--json-tree-js-color-object);
}

div.json-tree-js div.object-type-contents div.object-type-value span.null {
	color: var(--json-tree-js-color-null);
	font-style: italic;
}

div.json-tree-js div.object-type-contents div.object-type-value span.function {
	color: var(--json-tree-js-color-function);
	font-style: italic;
}

div.json-tree-js div.object-type-contents div.object-type-value span.unknown {
	color: var(--json-tree-js-color-unknown);
	font-style: italic;
}

div.json-tree-js div.object-type-contents div.object-type-value span.count {
	margin-left: calc(var(--json-tree-js-spacing) / 2);
	font-weight: var(--json-tree-js-text-bold-weight);
}

/*
    -------------------------------------------------------------------------
    JsonTree.js - Custom Scroll Bar
    -------------------------------------------------------------------------
*/
.custom-scroll-bars::-webkit-scrollbar {
	width: 12px;
}

.custom-scroll-bars::-webkit-scrollbar-track {
	box-shadow: var(--json-tree-js-border-style-scrollbar);
}

.custom-scroll-bars::-webkit-scrollbar-thumb {
	box-shadow: var(--json-tree-js-border-style-scrollbar);
	background: var(--json-tree-js-color-white);
}

.custom-scroll-bars::-webkit-scrollbar-thumb:hover {
	background-color: var(--json-tree-js-color-white);
}

.custom-scroll-bars::-webkit-scrollbar-thumb:active {
	background-color: var(--json-tree-js-color-lighter-gray);
}

/*# sourceMappingURL=jsontree.js.css.map */