API docs variables
Dropdown
Dropdown
--docs-dropdown-font-size: var(--font-size-base); --docs-dropdown-text-color: var(--text-color-secondary); --docs-dropdown-padding-vertical: 6px; --docs-dropdown-padding-left: 10px; --docs-dropdown-padding-right: 26px; --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left); --docs-dropdown-border: 1px solid var(--border-color-primary);
Response Panel colors
Panel response common
--panel-response-heading-padding: 10px 20px; --panel-response-heading-font-size: var(--font-size-base); --panel-response-heading-line-height: var(--line-height-sm); --panel-response-heading-font-weight: var(--font-weight-bold); --panel-response-heading-text-color: var(--text-color-primary); --panel-response-body-text-color: var(--text-color-secondary);
Panel response success
--panel-response-success-border-color: var(--color-success-border); --panel-response-success-heading-bg-color: var(--color-success-bg); --panel-response-success-heading-text-color: var(--panel-response-heading-text-color); --panel-response-success-body-bg-color: transparent; --panel-response-success-body-text-color: var(--panel-response-body-text-color);
Panel response error
--panel-response-error-border-color: var(--color-error-border); --panel-response-error-heading-bg-color: var(--color-error-bg); --panel-response-error-heading-text-color: var(--panel-response-heading-text-color); --panel-response-error-body-bg-color: transparent; --panel-response-error-body-text-color: var(--panel-response-body-text-color);
Panel response redirect
--panel-response-redirect-border-color: var(--color-warning-border); --panel-response-redirect-heading-bg-color: var(--color-warning-bg); --panel-response-redirect-heading-text-color: var(--panel-response-heading-text-color); --panel-response-redirect-body-bg-color: transparent; --panel-response-redirect-body-text-color: var(--panel-response-body-text-color);
Panel response info
--panel-response-info-border-color: var(--color-info-border); --panel-response-info-heading-bg-color: var(--color-info-bg); --panel-response-info-heading-text-color: var(--panel-response-heading-text-color); --panel-response-info-body-bg-color: transparent; --panel-response-info-body-text-color: var(--panel-response-body-text-color);
Panel response callback
--panel-response-callback-border-color: var(--color-blue-3); --panel-response-callback-heading-bg-color: var(--color-blue-1); --panel-response-callback-heading-text-color: var(--panel-response-heading-text-color); --panel-response-callback-body-bg-color: transparent; --panel-response-callback-body-text-color: var(--panel-response-body-text-color);
Panels
Panel common variables
Panel common variables
--panel-gap-horizontal: var(--spacing-xl); --panel-gap-vertical: var(--spacing-base); --panel-border-radius: var(--border-radius); --panel-border: 1px solid var(--border-color-secondary); --panel-line-height: var(--line-height-base); --panel-font-size: var(--font-size-base); --panel-font-family: var(--font-family-base); --panel-font-weight: var(--font-weight-semibold); --panel-heading-font-family: var(--font-family-base); --panel-heading-font-size: 18px; --panel-heading-font-weight: var(--font-weight-bold); --panel-heading-text-color: var(--text-color-primary); --panel-heading-padding: var(--spacing-md); --panel-heading-line-height: var(--line-height-base); --panel-heading-white-space: 'nowrap'; --panel-heading-border: 1px solid var(--border-color-primary); --panel-body-font-family: var(--font-family-base); --panel-body-font-size: var(--font-size-base); --panel-body-font-weight: var(--font-weight-regular); --panel-body-text-color: var(--text-color-secondary); --panel-body-padding: var(--spacing-md); --panel-body-border: 1px solid var(--border-color-primary);
Panel schemas
classes
'panel-request-schemas','panel-response-schemas','panel-callback-schemas','panel-security-schemas','panel-default'
Panel schemas with class
.panel-request-schemas, .panel-response-schemas, .panel-callback-schemas, .panel-security-schemas, .panel-default { --panel-text-color: var(--text-color-primary); --panel-font-family-local: var(--panel-font-family); --panel-font-size-local: var(--panel-font-size); --panel-font-weight-local: var(--panel-font-weight); --panel-bg-color: var(--bg-color); --panel-border-local: var(--panel-border); --panel-border-radius-local: calc(1px + var(--panel-border-radius)); --panel-chevron-icon-color: var(--text-color-primary); --panel-body-text-color: var(--panel-text-color); --panel-body-font-family-local: var(--panel-body-font-family); --panel-body-font-size-local: var(--panel-body-font-size); --panel-body-font-weight-local: var(--panel-body-font-weight); --panel-body-padding-local: var(--panel-body-padding); --panel-body-bg-color: var(--bg-color); --panel-body-border: var(--panel-body-border); --panel-heading-text-color: var(--panel-text-color); --panel-heading-font-family-local: var(--panel-heading-font-family); --panel-heading-font-size-local: var(--panel-heading-font-size); --panel-heading-font-weight-local: var(--panel-heading-font-weight); --panel-heading-line-height-local: var(--panel-heading-line-height); --panel-heading-padding-local: var(--panel-heading-padding); --panel-heading-bg-color: var(--bg-color); --panel-heading-border: var(--panel-heading-border); --panel-heading-white-space-local: var(--panel-heading-white-space); }
Panel samples common
Panel samples common
--panel-samples-block-bg-color: var(--bg-color); --panel-samples-width: 50%; --panel-samples-text-color: var(--text-color-primary); --panel-samples-font-family: var(--panel-font-family); --panel-samples-font-size: var(--panel-font-size); --panel-samples-font-weight: var(--panel-font-weight); --panel-samples-bg-color: var(--layer-color); --panel-samples-border: var(--panel-border); --panel-samples-chevron-icon-color: var(--text-color-primary);
Panel samples body
--panel-samples-body-text-color: var(--text-color-secondary); --panel-samples-body-font-family: var(--panel-body-font-family); --panel-samples-body-font-size: var(--panel-body-font-size); --panel-samples-body-font-weight: var(--panel-body-font-weight); --panel-samples-body-padding: var(--panel-body-padding); --panel-samples-body-bg-color: var(--layer-color); --panel-samples-body-border: unset;
Panel samples heading
--panel-samples-heading-text-color: var(--text-color-primary); --panel-samples-heading-font-family: var(--panel-heading-font-family); --panel-samples-heading-font-size: var(--panel-font-size); --panel-samples-heading-font-weight: var(--panel-font-weight); --panel-samples-heading-line-height: var(--line-height-sm); --panel-samples-heading-padding: 14px var(--spacing-base) 10px 20px; --panel-samples-heading-bg-color: var(--layer-color); --panel-samples-heading-border: unset;
Panel samples with class
classes
'panel-language-list','panel-overview','panel-download','panel-servers-list','panel-request-samples','panel-response-samples','panel-callback-samples'
Panel samples with class
.panel-language-list, .panel-overview, .panel-download, .panel-servers-list, .panel-request-samples, .panel-response-samples, .panel-callback-samples { --text-color: var(--panel-samples-text-color); --panel-text-color: var(--panel-samples-text-color); --panel-font-family-local: var(--panel-samples-font-family); --panel-font-size-local: var(--panel-samples-font-size); --panel-font-weight-local: var(--panel-samples-font-weight); --panel-bg-color: var(--panel-samples-bg-color); --panel-border-local: var(--panel-samples-border); --panel-border-radius-local: var(--panel-border-radius); --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); --panel-body-text-color: var(--panel-samples-body-text-color); --panel-body-bg-color: var(--panel-samples-body-bg-color); --panel-body-font-family-local: var(--panel-samples-body-font-family); --panel-body-font-size-local: var(--panel-samples-body-font-size); --panel-body-font-weight-local: var(--panel-samples-body-font-weight); --panel-body-padding-local: var(--panel-samples-body-padding); --panel-body-border-local: var(--panel-samples-body-border); --panel-heading-text-color: var(--panel-samples-heading-text-color); --panel-heading-bg-color: var(--panel-samples-heading-bg-color); --panel-heading-font-family-local: var(--panel-samples-heading-font-family); --panel-heading-font-size-local: var(--panel-samples-heading-font-size); --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight); --panel-heading-line-height-local: var(--panel-samples-heading-line-height); --panel-heading-padding-local: var(--panel-samples-heading-padding); --panel-heading-border: var(--panel-samples-heading-border); --panel-heading-border-bottom: var(--panel-samples-border); }
Panel response
Panel response common
.panel-response-success, .panel-response-info, .panel-response-error, .panel-response-redirect, .panel-response-callback { --panel-body-text-color: var(--panel-response-body-text-color); --panel-border-radius-local: calc(1px + var(--panel-border-radius)); --panel-heading-text-color: var(--panel-response-heading-text-color); --panel-heading-font-size-local: var(--panel-response-heading-font-size); --panel-heading-font-weight-local: var(--panel-response-heading-font-weight); --panel-heading-line-height-local: var(--panel-response-heading-line-height); --panel-heading-padding-local: var(--panel-response-heading-padding); --panel-heading-border: var(--panel-samples-heading-border); --panel-heading-white-space-local: normal; --panel-body-padding-local: var(--panel-body-padding); }
Panel response success
.panel-response-success { --panel-border-local: 1px solid var(--panel-response-success-border-color); --panel-body-text-color: var(--panel-response-success-body-text-color); --panel-body-bg-color: var(--panel-response-success-body-bg-color); --panel-heading-bg-color: var(--panel-response-success-heading-bg-color); --panel-heading-text-color: var(--panel-response-success-heading-text-color); }
Panel response info
.panel-response-info { --panel-border-local: 1px solid var(--panel-response-info-border-color); --panel-body-text-color: var(--panel-response-info-body-text-color); --panel-body-bg-color: var(--panel-response-info-body-bg-color); --panel-heading-bg-color: var(--panel-response-info-heading-bg-color); --panel-heading-text-color: var(--panel-response-info-heading-text-color); }
Panel response error
.panel-response-error { --panel-border-local: 1px solid var(--panel-response-error-border-color); --panel-body-text-color: var(--panel-response-error-body-text-color); --panel-body-bg-color: var(--panel-response-error-body-bg-color); --panel-heading-bg-color: var(--panel-response-error-heading-bg-color); --panel-heading-text-color: var(--panel-response-error-heading-text-color); }
Panel response redirect
.panel-response-redirect { --panel-border-local: 1px solid var(--panel-response-redirect-border-color); --panel-body-text-color: var(--panel-response-redirect-body-text-color); --panel-body-bg-color: var(--panel-response-redirect-body-bg-color); --panel-heading-bg-color: var(--panel-response-redirect-heading-bg-color); --panel-heading-text-color: var(--panel-response-redirect-heading-text-color); }
Panel response callback
.panel-response-callback { --panel-body-text-color: var(--panel-response-callback-body-text-color); --panel-body-bg-color: var(--panel-response-callback-body-bg-color); --panel-heading-text-color: var(--panel-response-callback-heading-text-color); --panel-body-padding-local: 0 0 var(--spacing-base) var(--spacing-lg); }
Other panel variables
Panel samples tabs
--panel-samples-tabs-font-size: var(--panel-font-size); --panel-samples-tabs-font-family: var(--panel-font-family); --panel-samples-tabs-font-weight: var(--panel-font-weight); --panel-samples-tabs-text-color: var(--text-color-secondary); --panel-samples-tabs-text-color-hover: var(--text-color-primary); --panel-samples-tabs-text-color-active: var(--text-color-primary); --panel-samples-tabs-text-color-disabled: var(--button-content-color-disabled); --panel-samples-tabs-bg-color: transparent; --panel-samples-tabs-bg-color-hover: transparent; --panel-samples-tabs-bg-color-active: var(--bg-color); --panel-samples-code-block-bg-color: var(--code-block-bg-color);
Panel samples other styles
--panel-samples-dropdown-bg-color: var(--bg-color); --panel-samples-dropdown-color: var(--text-color-secondary); --panel-samples-dropdown-border: 1px solid var(--border-color-primary);
Panel servers-list other styles
--panel-servers-list-input-bg-color: var(--bg-color-raised);
API docs
Layout
--layout-controls-margin: 20px; --layout-controls-height: 36px; --layout-controls-width: 36px; --layout-stacked-small-max-width: 90%; --layout-stacked-medium-max-width: 75%; --layout-stacked-large-max-width: 1200px; --layout-three-panel-small-max-width: 100%; --layout-three-panel-medium-max-width: 100%; --layout-three-panel-large-max-width: 1800px; --layout-panel-schemas-small-max-width: none; --layout-panel-schemas-medium-max-width: none; --layout-panel-schemas-large-max-width: none;
Mime-type dropdown
--schemas-mime-type-dropdown-padding: 0px 26px 0px 4px; --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-text-color);
Discriminator dropdown
--schemas-discriminator-dropdown-padding: 2px 24px 2px 8px; --schemas-discriminator-dropdown-border: 1px solid var(--border-color-primary); --schemas-discriminator-font-size: var(--docs-dropdown-font-size); --schemas-discriminator-dropdown-text-color: var(--docs-dropdown-text-color);
Schema type title
--schema-type-title-text-color: var(--text-color-secondary); --schema-type-text-color: var(--text-color-description); --schema-labels-font-size: var(--font-size-base); --schema-labels-line-height: var(--line-height-base); --schema-labels--text-color: var(--text-color-secondary);
Schema lines color
--schemas-lines-color: var(--border-color-primary);
Schema inline code
--schema-inline-code-font-family: var(--inline-code-font-family); --schema-inline-code-font-size: var(--inline-code-font-size); --schema-inline-code-font-weight: var(--inline-code-font-weight); --schema-inline-code-text-color: var(--text-color-secondary); --schema-inline-code-line-height: var(--inline-code-line-height); --schema-inline-bg-color: var(--border-color-secondary); --schema-inline-border-color: var(--border-color-primary); --schema-inline-border: 1px solid var(--schema-inline-border-color);
Schema example label
--schema-example-text-color: var(--schema-inline-code-text-color); --schema-example-bg-color: var(--schema-inline-bg-color); --schema-example-border-color: var(--schema-inline-border-color);
Schema constraint label
--schema-constraint-text-color: var(--schema-inline-code-text-color); --schema-constraint-bg-color: var(--schema-inline-bg-color); --schema-constraint-border-color: var(--schema-inline-border-color);
Schema enum label
--schema-enum-text-color: var(--schema-inline-code-text-color); --schema-enum-bg-color: var(--schema-inline-bg-color); --schema-enum-border-color: var(--schema-inline-border-color);
Schema default label
--schema-default-text-color: var(--schema-inline-code-text-color); --schema-default-bg-color: var(--schema-inline-bg-color); --schema-default-border-color: var(--schema-inline-border-color);
Schema recursive label
--schema-recursive-text-color: var(--text-color-on-color); --schema-recursive-bg-color: var(--color-persian-green-6); --schema-recursive-border-color: var(--schema-recursive-bg-color);
Schema non-null label
--schema-non-null-text-color: var(--schema-inline-code-text-color); --schema-non-null-bg-color: var(--schema-inline-bg-color); --schema-non-null-border-color: var(--schema-inline-border-color);
Schema nested
--schema-nested-offset: calc(var(--spacing-unit) * 2.5); --schema-nested-bg-color: var(--tree-bg-color-active);
Schema required
--schema-required-color: #E20C0C;
Schema buttons
--schema-buttons-font-family: var(--code-font-family); --schema-buttons-font-weight: var(--code-font-weight); --schema-buttons-font-size: var(--code-font-size); --schema-buttons-text-color: var(--text-color-secondary); --schema-buttons-bg-color: transparent; --schema-buttons-border-color: var(--border-color-primary); --schema-buttons-bg-color-hover: var(--button-bg-color-secondary-hover); --schema-buttons-bg-color-active: var(--button-bg-color-secondary-pressed); --schema-buttons-selected-text-color: var(--schema-buttons-text-color); --schema-buttons-selected-bg-color: var(--button-bg-color-secondary-pressed); --schema-buttons-selected-border-color: var(--schema-buttons-border-color); --schema-buttons-selected-bg-color-hover: var(--button-bg-color-secondary-hover); --schema-buttons-selected-bg-color-active: var(--button-bg-color-secondary-pressed);
Schema property
--schemas-property-name-text-color: var(--text-color-primary); --schemas-property-name-font-size: var(--font-size-base); --schemas-property-name-font-family: var(--code-font-family); --schemas-property-name-font-weight: var(--font-weight-regular); --schemas-property-name-line-height: var(--line-height-base); --schemas-property-name-text-transform: none; --schemas-property-deprecated-text-color: var(--text-color-primary); --schema-property-labels-font-size: var(--schema-labels-font-size); --schema-property-required-label-text-color: var(--schema-required-color); --schema-property-additional-label-text-color: var(--text-color-secondary); --schema-property-access-label-text-color: var(--text-color-secondary); --schema-property-details-width: 70%; --schema-property-details-spacing: var(--spacing-base); --schema-fist-property-details-spacing: var(--spacing-sm);
Other schema variables
--schema-chevron-color: var(--text-color-secondary); --schema-chevron-size: 9px; --schema-property-deep-link-icon-color: var(--color-primary-base); --schema-property-deep-link-icon: none; --loading-spinner-color: var(--color-primary-base); --linear-progress-color: var(--color-info-base); --linear-progress-bg-color: var(--color-info-bg); --fab-bg-color: var(--color-primary-base); --fab-box-shadow: var(--bg-raised-shadow); --fab-bg-color-hover: var(--color-primary-base); --fab-box-shadow-hover: var(--bg-raised-shadow); --fab-bg-color-active: var(--color-primary-base); --fab-box-shadow-active: var(--bg-raised-shadow); --fab-icon-color: var(--navbar-text-color);