html {
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
background: #fafafa;
}
/* Bump the default text size by ~1pt. Swagger UI's rem-based sizes
(headings, models) scale automatically off the root font-size; the
commonly-read px-based body copy is bumped explicitly alongside it. */
html {
font-size: 17px;
}
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .opblock-external-docs-wrapper p,
.swagger-ui .opblock-title_normal p,
.swagger-ui .response-col_description .markdown p,
.swagger-ui .response-col_description .renderedMarkdown p,
.swagger-ui .renderedMarkdown p,
.swagger-ui .markdown p,
.swagger-ui .parameter__name,
.swagger-ui .response-col_status,
.swagger-ui .opblock-summary-description,
.swagger-ui label {
font-size: 15px;
}
/* Brand typography: Montserrat (Zenivize's heading/body font) for
general text, Work Sans (Zenivize's button/nav font) for controls. */
.swagger-ui {
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.swagger-ui .info .title,
.swagger-ui .opblock-tag,
.swagger-ui h1,
.swagger-ui h2,
.swagger-ui h3,
.swagger-ui h4,
.swagger-ui h5 {
font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 600;
}
.swagger-ui .btn,
.swagger-ui select,
.swagger-ui .opblock-summary-method,
.swagger-ui .servers-title,
.swagger-ui label {
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* Brand topbar: swap the default Swagger wordmark for the Zenivize logo
on a light bar, since the logo's navy text isn't legible on Swagger's
near-black default topbar. */
.swagger-ui .topbar,
html.dark-mode .swagger-ui .topbar {
background-color: #ffffff;
border-bottom: 3px solid #8322ff;
}
.topbar .link svg {
display: none;
}
.topbar .link {
background-image: url('./zenivize-logo.png');
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
width: 165px;
height: 54px;
}
/* Brand accent color (Zenivize purple) in place of Swagger's default
blue/green chrome. HTTP-method colors (GET/POST/etc.) are left alone
since those are semantic. */
.swagger-ui .btn.execute {
background-color: #8322ff;
border-color: #8322ff;
}
.swagger-ui .info a,
.swagger-ui .info a:hover {
color: #8322ff;
}
.swagger-ui .opblock-tag:hover {
background: rgba(131, 34, 255, 0.04);
}
.swagger-ui input[type=text]:focus,
.swagger-ui input[type=password]:focus,
.swagger-ui textarea:focus {
border-color: #8322ff;
}
.token-helper-hidden {
display: none;
}
.scheme-container .auth-wrapper {
display: none;
}
.token-helper {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px 20px;
background: #ffffff;
color: #3b4151;
font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
border-top: 1px solid #e0ccf9;
}
.token-helper-label {
font-weight: 600;
color: #2f4397;
}
.token-helper input {
padding: 6px 10px;
border: 1px solid #d8d8d8;
border-radius: 4px;
font-family: inherit;
font-size: 13px;
}
.token-helper input:focus {
outline: none;
border-color: #8322ff;
box-shadow: 0 0 0 1px #8322ff;
}
.token-helper button {
padding: 6px 16px;
background: #8322ff;
border: none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-weight: 600;
font-family: inherit;
font-size: 13px;
}
.token-helper button:hover {
background: #6e1bd6;
}
.token-helper-status {
margin-left: 4px;
}
.token-helper-status.error {
color: #f93e3e;
}
.token-helper-status.success {
color: #2f4397;
}
.token-helper-locked-notice {
flex-basis: 100%;
color: #6b6b6b;
}
body.token-authorized .token-helper-locked-notice {
display: none;
}
/* Dark mode: Swagger UI toggles `dark-mode` on (its own toggle
button, or the OS preference on first load) rather than relying on a
prefers-color-scheme media query, so match that mechanism here. */
html.dark-mode body {
background: #1c2022;
}
html.dark-mode .token-helper {
background: #1c2022;
color: #e4e6e6;
border-top: 1px solid #545d61;
box-shadow: 0 1px 2px 0 #545d61;
}
html.dark-mode .token-helper-label {
color: #b68ae1;
}
html.dark-mode .token-helper-locked-notice {
color: #b7bcbf;
}
html.dark-mode .token-helper input {
background: #1c2022;
border-color: #b7bcbf;
color: #f0f1f1;
}
html.dark-mode .token-helper input::placeholder {
color: #f0f1f1;
opacity: .5;
}
html.dark-mode .token-helper input:focus {
border-color: #a970ff;
box-shadow: 0 0 0 1px #a970ff;
}
html.dark-mode .token-helper-status.success {
color: #b68ae1;
}
html.dark-mode .token-helper-status.error {
color: #ff5f5f;
}
/* Hide endpoints (and webhooks) until the user authorizes: this isn't
real access control (the spec/servers are still visible), it just
signals that this API isn't meant to be poked at without a Company
ID/API Key. Scoping the `display:none` to the unauthorized state
(rather than pairing it with an explicit "show" override) means
authorized elements just fall back to Swagger UI's own layout
instead of us having to guess flex vs. block per section. */
body:not(.token-authorized) .swagger-ui .opblock-tag-section,
body:not(.token-authorized) .webhooks-container,
body:not(.token-authorized) .swagger-ui .models {
display: none;
}