apiconnect-explorer/dist/lib/css/json-schema-view.css

- [Getting Started](#getting-started) - [Configuration](#configuration) * [Required](#required) * [Optional](#optional) - [Usage in React](#usage-in-react) - [Usage outside of React](#usage-outside-of-react) - [Detailed description of options](#detail

/********************************************************* {COPYRIGHT-TOP} ***
 * Licensed Materials - Property of IBM
 *
 * (C) Copyright IBM Corporation 2021, 2025
 *
 * All Rights Reserved.
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 ********************************************************** {COPYRIGHT-END} **/
/*!
 * json-schema-view-js
 * https://github.com/mohsen1/json-schema-view-js#readme
 * Version: 0.4.1 - 2016-12-26T23:51:39.556Z
 * License: MIT
 */

.json-schema-view,
json-schema-view {
  font-family: monospace;
  font-size: 0;
  display: table-cell;
}

.json-schema-view > *,
json-schema-view > * {
  font-size: 14px;
}

.json-schema-view .toggle-handle,
json-schema-view .toggle-handle {
  margin: auto 0.3em;
  font-size: 10px;
  display: none;
  transform-origin: 50% 40%;
  transition: transform 150ms ease-in;
}

.json-schema-view .toggle-handle:after,
json-schema-view .toggle-handle:after {
  content: '▼';
}

.json-schema-view .toggle-handle,
json-schema-view .toggle-handle,
.json-schema-view .toggle-handle:hover,
json-schema-view .toggle-handle:hover {
  text-decoration: none;
  color: #333;
}

.json-schema-view .description,
json-schema-view .description {
  color: gray;
  font-style: italic;
}

.json-schema-view .title,
json-schema-view .title {
  font-weight: bold;
  cursor: auto;
}

.json-schema-view .title,
json-schema-view .title,
.json-schema-view .title:hover,
json-schema-view .title:hover {
  text-decoration: none;
  color: #333;
}

.json-schema-view .title,
json-schema-view .title,
.json-schema-view .brace,
json-schema-view .brace,
.json-schema-view .bracket,
json-schema-view .bracket {
  color: #333;
}

.json-schema-view .property,
json-schema-view .property {
  font-size: 0;
  display: table-row;
}

.json-schema-view .property > *,
json-schema-view .property > * {
  font-size: 14px;
  padding: 0.2em;
}

.json-schema-view .name,
json-schema-view .name,
.bodySection .json-schema-view .name {
  color: #606;
  display: table-cell;
  vertical-align: top;
}

.json-schema-view .type,
json-schema-view .type {
  color: #080;
}

.json-schema-view .type-any,
json-schema-view .type-any {
  color: #3333ff;
}

.json-schema-view .required,
json-schema-view .required {
  color: #f00;
}

.json-schema-view .format,
json-schema-view .format,
.json-schema-view .enums,
json-schema-view .enums {
  color: #999;
}

.json-schema-view .inner,
json-schema-view .inner {
  padding-left: 18px;
}

.json-schema-view.collapsed .description,
json-schema-view.collapsed .description {
  display: none;
}

.json-schema-view.collapsed .property,
json-schema-view.collapsed .property {
  display: none;
}

.json-schema-view.collapsed .closeing.brace,
json-schema-view.collapsed .closeing.brace {
  display: inline-block;
}

.json-schema-view.collapsed .toggle-handle,
json-schema-view.collapsed .toggle-handle {
  transform: rotate(-90deg);
}

.json-schema-view.json-schema-view-dark,
json-schema-view[json-schema-view-dark] {
  font-family: monospace;
  font-size: 0;
  display: table-cell;
}

.json-schema-view.json-schema-view-dark > *,
json-schema-view[json-schema-view-dark] > * {
  font-size: 14px;
}

.json-schema-view.json-schema-view-dark .toggle-handle,
json-schema-view[json-schema-view-dark] .toggle-handle {
  cursor: pointer;
  margin: auto 0.3em;
  font-size: 10px;
  display: inline-block;
  transform-origin: 50% 40%;
  transition: transform 150ms ease-in;
}

.json-schema-view.json-schema-view-dark .toggle-handle:after,
json-schema-view[json-schema-view-dark] .toggle-handle:after {
  content: '▼';
}

.json-schema-view.json-schema-view-dark .toggle-handle,
json-schema-view[json-schema-view-dark] .toggle-handle,
.json-schema-view.json-schema-view-dark .toggle-handle:hover,
json-schema-view[json-schema-view-dark] .toggle-handle:hover {
  text-decoration: none;
  color: #eee;
}

.json-schema-view.json-schema-view-dark .description,
json-schema-view[json-schema-view-dark] .description {
  color: gray;
  font-style: italic;
}

.json-schema-view.json-schema-view-dark .title,
json-schema-view[json-schema-view-dark] .title {
  font-weight: bold;
  cursor: pointer;
}

.json-schema-view.json-schema-view-dark .title,
json-schema-view[json-schema-view-dark] .title,
.json-schema-view.json-schema-view-dark .title:hover,
json-schema-view[json-schema-view-dark] .title:hover {
  text-decoration: none;
  color: #eee;
}

.json-schema-view.json-schema-view-dark .title,
json-schema-view[json-schema-view-dark] .title,
.json-schema-view.json-schema-view-dark .brace,
json-schema-view[json-schema-view-dark] .brace,
.json-schema-view.json-schema-view-dark .bracket,
json-schema-view[json-schema-view-dark] .bracket {
  color: #eee;
}

.json-schema-view.json-schema-view-dark .property,
json-schema-view[json-schema-view-dark] .property {
  font-size: 0;
  display: table-row;
}

.json-schema-view.json-schema-view-dark .property > *,
json-schema-view[json-schema-view-dark] .property > * {
  font-size: 14px;
  padding: 0.2em;
}

.json-schema-view.json-schema-view-dark .name,
json-schema-view[json-schema-view-dark] .name {
  color: lightblue;
  display: table-cell;
  vertical-align: top;
}

.json-schema-view.json-schema-view-dark .type,
json-schema-view[json-schema-view-dark] .type {
  color: lightgreen;
}

.json-schema-view.json-schema-view-dark .type-any,
json-schema-view[json-schema-view-dark] .type-any {
  color: #d4ebf2;
}

.json-schema-view.json-schema-view-dark .required,
json-schema-view[json-schema-view-dark] .required {
  color: #fe0000;
}

.json-schema-view.json-schema-view-dark .format,
json-schema-view[json-schema-view-dark] .format,
.json-schema-view.json-schema-view-dark .enums,
json-schema-view[json-schema-view-dark] .enums {
  color: #fff;
}

.json-schema-view.json-schema-view-dark .inner,
json-schema-view[json-schema-view-dark] .inner {
  padding-left: 18px;
}

.json-schema-view.json-schema-view-dark.collapsed .description,
json-schema-view[json-schema-view-dark].collapsed .description {
  display: none;
}

.json-schema-view.json-schema-view-dark.collapsed .property,
json-schema-view[json-schema-view-dark].collapsed .property {
  display: none;
}

.json-schema-view.json-schema-view-dark.collapsed .closeing.brace,
json-schema-view[json-schema-view-dark].collapsed .closeing.brace {
  display: inline-block;
}

.json-schema-view.json-schema-view-dark.collapsed .toggle-handle,
json-schema-view[json-schema-view-dark].collapsed .toggle-handle {
  transform: rotate(-90deg);
}