472 lines
11 KiB
CSS
472 lines
11 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
|
|
|
|
/* =============================================================================
|
|
CSS CUSTOM PROPERTIES
|
|
============================================================================= */
|
|
|
|
:root {
|
|
--ots-bg: #0b111a;
|
|
--ots-surface: #141c2b;
|
|
--ots-surface-2: #1b2436;
|
|
--ots-surface-3: #222c3f;
|
|
--ots-border: #2c3a54;
|
|
--ots-text: #e6eefb;
|
|
--ots-text-muted: #a9b6cc;
|
|
--ots-text-faint: #8d99b4;
|
|
--ots-primary: #e87800;
|
|
--ots-primary-rgb: 232, 120, 0;
|
|
--ots-primary-2: #c46500;
|
|
--ots-success: #2ad4a4;
|
|
--ots-success-rgb: 42, 212, 164;
|
|
--ots-warning: #f4b860;
|
|
--ots-warning-rgb: 244, 184, 96;
|
|
--ots-danger: #ff6b6b;
|
|
--ots-info: #5ec0ff;
|
|
--ots-info-rgb: 94, 192, 255;
|
|
|
|
--ots-radius-sm: 4px;
|
|
--ots-radius-md: 8px;
|
|
--ots-radius-lg: 12px;
|
|
|
|
--ots-shadow-sm: 0 3px 8px rgba(0, 0, 0, 0.2);
|
|
--ots-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.25);
|
|
|
|
--ots-transition: 160ms ease;
|
|
}
|
|
|
|
/* =============================================================================
|
|
GLOBAL RESET & TYPOGRAPHY
|
|
============================================================================= */
|
|
|
|
html, body {
|
|
background: var(--ots-bg);
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
body {
|
|
padding-top: 70px;
|
|
font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
font-feature-settings: "kern" 1, "liga" 1;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--ots-text);
|
|
font-weight: 600;
|
|
}
|
|
|
|
a {
|
|
color: var(--ots-primary);
|
|
transition: color var(--ots-transition);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--ots-primary-2);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p, li, td, th {
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
hr {
|
|
border-color: var(--ots-border);
|
|
}
|
|
|
|
strong {
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
/* =============================================================================
|
|
NAVBAR
|
|
============================================================================= */
|
|
|
|
nav#top-nav,
|
|
nav#top-nav.navbar-inverse {
|
|
background-color: var(--ots-surface-2);
|
|
border-color: var(--ots-border);
|
|
box-shadow: var(--ots-shadow-sm);
|
|
}
|
|
|
|
nav#top-nav .navbar-brand,
|
|
nav#top-nav .navbar-brand:hover,
|
|
nav#top-nav .navbar-brand:focus {
|
|
color: var(--ots-text);
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
}
|
|
|
|
ul.navbar-nav a,
|
|
.navbar-inverse .navbar-nav > li > a {
|
|
color: var(--ots-text-muted);
|
|
transition: color var(--ots-transition), border-color var(--ots-transition);
|
|
border-bottom: 3px solid transparent;
|
|
}
|
|
|
|
ul.navbar-nav a:hover,
|
|
.navbar-inverse .navbar-nav > li > a:hover {
|
|
color: var(--ots-text);
|
|
background: transparent;
|
|
border-bottom: 3px solid var(--ots-primary);
|
|
}
|
|
|
|
.navbar-inverse .navbar-nav > .active > a,
|
|
.navbar-inverse .navbar-nav > .active > a:hover,
|
|
.navbar-inverse .navbar-nav > .active > a:focus {
|
|
color: var(--ots-primary);
|
|
background-color: transparent;
|
|
border-bottom: 3px solid var(--ots-primary);
|
|
}
|
|
|
|
.navbar-inverse .navbar-toggle {
|
|
border-color: var(--ots-border);
|
|
}
|
|
|
|
.navbar-inverse .navbar-toggle .icon-bar {
|
|
background-color: var(--ots-text-muted);
|
|
}
|
|
|
|
.navbar-inverse .navbar-toggle:hover,
|
|
.navbar-inverse .navbar-toggle:focus {
|
|
background-color: var(--ots-surface-3);
|
|
}
|
|
|
|
.navbar-inverse .navbar-collapse {
|
|
border-color: var(--ots-border);
|
|
background: var(--ots-surface-2);
|
|
}
|
|
|
|
/* =============================================================================
|
|
SIDEBAR
|
|
============================================================================= */
|
|
|
|
.ss_sidebar {
|
|
width: 230px;
|
|
}
|
|
|
|
.ss_body .col-md-3 {
|
|
background: var(--ots-surface);
|
|
border-right: 1px solid var(--ots-border);
|
|
min-height: 100vh;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
ul#side-nav.nav-pills > li > a,
|
|
ul#side-nav.nav-pills > li > p > a {
|
|
color: var(--ots-text-muted);
|
|
background: transparent;
|
|
border-radius: var(--ots-radius-sm);
|
|
padding: 8px 12px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: background var(--ots-transition), color var(--ots-transition);
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
ul#side-nav.nav-pills > li > a:hover,
|
|
ul#side-nav.nav-pills > li > p > a:hover {
|
|
background: rgba(var(--ots-primary-rgb), 0.1);
|
|
color: var(--ots-text);
|
|
text-decoration: none;
|
|
border-left-color: var(--ots-primary);
|
|
}
|
|
|
|
ul#side-nav.nav-pills > li.active > a,
|
|
ul#side-nav.nav-pills > li.active > a:hover,
|
|
ul#side-nav.nav-pills > li.active > a:focus {
|
|
background: rgba(var(--ots-primary-rgb), 0.18);
|
|
color: var(--ots-primary);
|
|
border-left-color: var(--ots-primary);
|
|
}
|
|
|
|
ul#side-nav ul {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
ul#side-nav ul > li {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
ul#side-nav ul > li > a,
|
|
ul#side-nav ul > li > p > a {
|
|
display: block;
|
|
color: var(--ots-text-faint);
|
|
font-size: 13px;
|
|
padding: 6px 10px;
|
|
border-radius: var(--ots-radius-sm);
|
|
border-left: 2px solid transparent;
|
|
transition: background var(--ots-transition), color var(--ots-transition);
|
|
}
|
|
|
|
ul#side-nav ul > li > a:hover,
|
|
ul#side-nav ul > li > p > a:hover {
|
|
color: var(--ots-text);
|
|
background: rgba(var(--ots-primary-rgb), 0.08);
|
|
text-decoration: none;
|
|
border-left-color: var(--ots-primary);
|
|
}
|
|
|
|
ul#side-nav ul > li.active > a,
|
|
ul#side-nav ul > li.active > p > a,
|
|
ul#side-nav ul > li > p.active > a {
|
|
color: var(--ots-primary);
|
|
background: rgba(var(--ots-primary-rgb), 0.14);
|
|
border-left-color: var(--ots-primary);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* =============================================================================
|
|
CONTENT AREA
|
|
============================================================================= */
|
|
|
|
.ss_body {
|
|
min-height: 650px;
|
|
}
|
|
|
|
.ss_body .col-md-9 {
|
|
background: var(--ots-bg);
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 24px;
|
|
}
|
|
|
|
.header-link {
|
|
padding-left: 4px;
|
|
line-height: 1;
|
|
font-size: 16px;
|
|
color: var(--ots-text-faint);
|
|
opacity: 0;
|
|
transition: opacity var(--ots-transition), color var(--ots-transition);
|
|
}
|
|
|
|
h1:hover .header-link,
|
|
h2:hover .header-link,
|
|
h3:hover .header-link {
|
|
opacity: 1;
|
|
color: var(--ots-primary);
|
|
}
|
|
|
|
/* =============================================================================
|
|
TABLES (class added by jQuery)
|
|
============================================================================= */
|
|
|
|
.ss_body .table {
|
|
color: var(--ots-text);
|
|
border-color: var(--ots-border);
|
|
}
|
|
|
|
.ss_body .table > thead > tr > th {
|
|
background: var(--ots-surface-3);
|
|
color: var(--ots-text);
|
|
border-bottom: 2px solid var(--ots-border);
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ss_body .table > tbody > tr > td {
|
|
color: var(--ots-text);
|
|
border-color: var(--ots-border);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ss_body .table > tbody > tr {
|
|
background: transparent;
|
|
}
|
|
|
|
.ss_body .table > tbody > tr:nth-of-type(odd) {
|
|
background: rgba(var(--ots-primary-rgb), 0.04);
|
|
}
|
|
|
|
.ss_body .table > tbody > tr:hover {
|
|
background: rgba(var(--ots-primary-rgb), 0.08);
|
|
}
|
|
|
|
/* =============================================================================
|
|
IMAGES (class added by jQuery)
|
|
============================================================================= */
|
|
|
|
.img-thumbnail {
|
|
background: var(--ots-surface-2);
|
|
border: 1px solid var(--ots-border);
|
|
border-radius: var(--ots-radius-md);
|
|
padding: 4px;
|
|
margin-bottom: 12px;
|
|
box-shadow: var(--ots-shadow-sm);
|
|
}
|
|
|
|
/* =============================================================================
|
|
CODE BLOCKS
|
|
============================================================================= */
|
|
|
|
code {
|
|
background: var(--ots-surface-3);
|
|
color: var(--ots-info);
|
|
border: 1px solid var(--ots-border);
|
|
border-radius: var(--ots-radius-sm);
|
|
padding: 2px 6px;
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
pre {
|
|
background: var(--ots-surface-2);
|
|
color: var(--ots-text);
|
|
border: 1px solid var(--ots-border);
|
|
border-radius: var(--ots-radius-md);
|
|
padding: 16px;
|
|
box-shadow: var(--ots-shadow-sm);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
pre code {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
/* =============================================================================
|
|
CALLOUT BOXES (blockquote.tip / .cloud / .noncloud)
|
|
============================================================================= */
|
|
|
|
blockquote.tip,
|
|
blockquote.cloud,
|
|
blockquote.noncloud {
|
|
padding: 14px 18px;
|
|
margin: 24px 0;
|
|
display: block;
|
|
border-radius: var(--ots-radius-md);
|
|
border-left: 4px solid;
|
|
background: transparent;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
blockquote.tip p,
|
|
blockquote.cloud p,
|
|
blockquote.noncloud p {
|
|
color: var(--ots-text);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
blockquote.tip {
|
|
background: rgba(var(--ots-info-rgb), 0.08);
|
|
border-left-color: var(--ots-info);
|
|
}
|
|
|
|
blockquote.cloud {
|
|
background: rgba(var(--ots-success-rgb), 0.08);
|
|
border-left-color: var(--ots-success);
|
|
}
|
|
|
|
blockquote.noncloud {
|
|
background: rgba(var(--ots-warning-rgb), 0.08);
|
|
border-left-color: var(--ots-warning);
|
|
}
|
|
|
|
/* =============================================================================
|
|
INFO BOX
|
|
============================================================================= */
|
|
|
|
.top-tip {
|
|
border: 1px solid var(--ots-border);
|
|
border-radius: var(--ots-radius-lg);
|
|
padding: 24px;
|
|
margin-top: 32px;
|
|
margin-bottom: 32px;
|
|
background: var(--ots-surface-2);
|
|
box-shadow: var(--ots-shadow-sm);
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
/* =============================================================================
|
|
API DOCS
|
|
============================================================================= */
|
|
|
|
.api-method-call-doc {
|
|
margin-top: 30px;
|
|
border-bottom: 1px solid var(--ots-border);
|
|
}
|
|
|
|
/* =============================================================================
|
|
FOOTER
|
|
============================================================================= */
|
|
|
|
.ss_footer {
|
|
padding-top: 40px;
|
|
padding-bottom: 30px;
|
|
margin-top: 80px;
|
|
color: var(--ots-text-faint);
|
|
border-top: 1px solid var(--ots-border);
|
|
background: var(--ots-surface);
|
|
text-align: left;
|
|
}
|
|
|
|
.ss_footer p {
|
|
margin-bottom: 0;
|
|
color: var(--ots-text-faint);
|
|
}
|
|
|
|
.ss_footer_links {
|
|
margin-top: 10px;
|
|
color: var(--ots-text-muted);
|
|
}
|
|
|
|
.ss_footer a,
|
|
.ss_languages a {
|
|
color: var(--ots-text-muted);
|
|
transition: color var(--ots-transition);
|
|
}
|
|
|
|
.ss_footer a:hover,
|
|
.ss_languages a:hover {
|
|
color: var(--ots-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ss_back_to_top {
|
|
cursor: pointer;
|
|
color: var(--ots-primary);
|
|
font-weight: 500;
|
|
transition: color var(--ots-transition);
|
|
}
|
|
|
|
.ss_back_to_top:hover {
|
|
color: var(--ots-primary-2);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.logo {
|
|
width: 100px;
|
|
margin-bottom: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* =============================================================================
|
|
BOOTSTRAP 3 OVERRIDES
|
|
============================================================================= */
|
|
|
|
blockquote {
|
|
border-left-color: var(--ots-border);
|
|
color: var(--ots-text-muted);
|
|
}
|
|
|
|
.well {
|
|
background: var(--ots-surface-2);
|
|
border-color: var(--ots-border);
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
.label-default {
|
|
background: var(--ots-surface-3);
|
|
color: var(--ots-text);
|
|
}
|
|
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--ots-bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--ots-border); border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--ots-text-faint); }
|