/*! Jazzy
- github.com/realm/jazzy
* Copyright Realm Inc. * SPDX-License-Identifier: MIT */
//////////////////////////////// // Constants ////////////////////////////////
$bg_color: #414141; $doc_coverage_color: #999; $code_color: #777; $code_bg_color: eee; $link_color: #0088cc; $white_color: fff; $light_gray_bg_color: f2f2f2; $declaration_bg_color: f9f9f9; $sidebar_bg_color: f9f9f9; $declaration_title_language_color: #4b8afb;
$sidebar_width: 230px; $content_wrapper_width: 980px; $content_top_offset: 70px; $content_body_margin: 16px; $content_body_left_offset: $sidebar_width + $content_body_margin; $header_height: 32px; $breadcrumb_padding_top: 12px;
$code_font: 0.95em Menlo, monospace;
$gray_border_color: e2e2e2; $gray_border: 1px solid $gray_border_color; $declaration_language_border: 5px solid cde9f4;
$aside_color: aaa; $aside_border: 5px solid lighten($aside_color, 20%); $aside_warning_color: ff0000; $aside_warning_border: 5px solid lighten($aside_warning_color, 20%);
//////////////////////////////// // Reset ////////////////////////////////
html, body, div, span, h1, h3, h4, p, a, code, em, img, ul, li, table, tbody, tr, td {
background: transparent; border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline;
}
//////////////////////////////// // Global ////////////////////////////////
body {
background-color: $light_gray_bg_color; font-family: Helvetica, freesans, Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: subpixel-antialiased; word-wrap: break-word;
}
// Headers
h1, h2, h3 {
margin-top: 0.8em; margin-bottom: 0.3em; font-weight: 100; color: black;
} h1 {
font-size: 2.5em;
} h2 {
font-size: 2em; border-bottom: $gray_border;
} h4 {
font-size: 13px; line-height: 1.5; margin-top: 21px;
} h5 {
font-size: 1.1em;
} h6 {
font-size: 1.1em; color: $code_color;
} .section-name {
color: rgba(128,128,128,1); display: block; font-family: Helvetica; font-size: 22px; font-weight: 100; margin-bottom: 15px;
}
// Code
pre, code {
font: $code_font; color: $code_color; word-wrap: normal;
} p code, li code {
background-color: $code_bg_color; padding: 2px 4px; border-radius: 4px;
} pre > code {
padding: 0;
}
// Links
a {
color: $link_color; text-decoration: none; code { color: inherit; }
}
// Lists
ul {
padding-left: 15px;
} li {
line-height: 1.8em;
}
// Images
img {
max-width: 100%;
}
// Blockquotes
blockquote {
margin-left: 0; padding: 0 10px; border-left: 4px solid #ccc;
}
// HRs
hr {
height: 1px; border: none; background-color: $gray_border_color;
}
// Footnotes
.footnote-ref {
display: inline-block; scroll-margin-top: $content-top-offset;
}
.footnote-def {
scroll-margin-top: $content-top-offset;
}
// General Content Wrapper
.content-wrapper {
margin: 0 auto; width: $content_wrapper_width;
}
//////////////////////////////// // Header & Top Breadcrumbs ////////////////////////////////
header {
font-size: 0.85em; line-height: $header_height; background-color: $bg_color; position: fixed; width: 100%; z-index: 3; img { padding-right: 6px; vertical-align: -3px; height: 16px; } a { color: $white_color; } p { float: left; color: $doc_coverage_color; } .header-right { float: right; margin-left: 16px; }
}
breadcrumbs {
background-color: $light_gray_bg_color; height: $content_top_offset - $header_height - $breadcrumb_padding_top; padding-top: $breadcrumb_padding_top; position: fixed; width: inherit; z-index: 2; margin-top: $header_height; white-space: nowrap; overflow-x: scroll; #carat { height: 10px; margin: 0 5px; }
}
//////////////////////////////// // Side Navigation ////////////////////////////////
.sidebar {
background-color: $sidebar_bg_color; border: $gray_border; overflow-y: auto; overflow-x: hidden; position: fixed; top: $content_top_offset; bottom: 0; width: $sidebar_width; word-wrap: normal;
}
.nav-groups {
list-style-type: none; background: $white_color; padding-left: 0;
}
.nav-group-name {
border-bottom: $gray_border; font-size: 1.1em; font-weight: 100; padding: 15px 0 15px 20px; > a { color: #333; }
}
.nav-group-tasks {
margin-top: 5px;
}
.nav-group-task {
font-size: 0.9em; list-style-type: none; white-space: nowrap; a { color: #888; }
}
//////////////////////////////// // Main Content ////////////////////////////////
.main-content {
background-color: $white_color; border: $gray_border; margin-left: $content_body_left_offset; position: absolute; overflow: hidden; padding-bottom: 20px; top: $content_top_offset; width: $content_wrapper_width - $content_body_left_offset; p, a, code, em, ul, table, blockquote { margin-bottom: 1em; } p { line-height: 1.8em; } section { .section:first-child { margin-top: 0; padding-top: 0; } .task-group-section .task-group:first-of-type { padding-top: 10px; .section-name { padding-top: 15px; } } .heading:before { content: ""; display: block; padding-top: $content_top_offset; margin: -$content_top_offset 0 0; } } .section-name { p { margin-bottom: inherit; line-height: inherit; } code { background-color: inherit; padding: inherit; color: inherit; } }
}
.section {
padding: 0 25px;
}
.highlight {
background-color: $code_bg_color; padding: 10px 12px; border: $gray_border; border-radius: 4px; overflow-x: auto;
}
.declaration .highlight {
overflow-x: initial; // This allows the scrollbar to show up inside declarations padding: 0 40px 40px 0; margin-bottom: -25px; background-color: transparent; border: none;
}
.section-name {
margin: 0; margin-left: 18px;
}
.task-group-section {
margin-top: 10px; padding-left: 6px; border-top: $gray_border;
}
.task-group {
padding-top: 0px;
}
.task-name-container {
a[name] { &:before { content: ""; display: block; padding-top: $content_top_offset; margin: -$content_top_offset 0 0; } }
}
.section-name-container {
position: relative; display: inline-block; .section-name-link { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin-bottom: 0; } .section-name { position: relative; pointer-events: none; z-index: 1; a { pointer-events: auto; } }
}
.item {
padding-top: 8px; width: 100%; list-style-type: none; a[name] { &:before { content: ""; display: block; padding-top: $content_top_offset; margin: -$content_top_offset 0 0; } } code { background-color: transparent; padding: 0; } .token, .direct-link { display: inline-block; text-indent: -20px; padding-left: 3px; margin-left: 35px; font-size: 11.9px; transition: all 300ms; } .token-open { margin-left: 20px; } .discouraged { text-decoration: line-through; }
}
.declaration-note {
font-size: .85em; color: rgba(128,128,128,1); font-style: italic;
}
.pointer-container {
border-bottom: $gray_border; left: -23px; padding-bottom: 13px; position: relative; width: 110%;
}
.pointer {
background: $declaration_bg_color; border-left: $gray_border; border-top: $gray_border; height: 12px; left: 21px; top: -7px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); position: absolute; width: 12px;
}
.height-container {
display: none; left: -25px; padding: 0 25px; position: relative; width: 100%; overflow: hidden; .section { background: $declaration_bg_color; border-bottom: $gray_border; left: -25px; position: relative; width: 100%; padding-top: 10px; padding-bottom: 5px; }
}
.aside, .language {
padding: 6px 12px; margin: 12px 0; border-left: $aside_border; overflow-y: hidden; .aside-title { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; padding-bottom: 0; margin: 0; color: $aside_color; -webkit-user-select: none; } p:last-child { margin-bottom: 0; }
}
.language {
border-left: $declaration_language_border; .aside-title { color: $declaration_title_language_color; }
}
.aside-warning, .aside-deprecated, .aside-unavailable {
border-left: $aside_warning_border; .aside-title { color: $aside_warning_color; }
}
.graybox {
border-collapse: collapse; width: 100%; p { margin: 0; word-break: break-word; min-width: 50px; } td { border: $gray_border; padding: 5px 25px 5px 10px; vertical-align: middle; } tr td:first-of-type { text-align: right; padding: 7px; vertical-align: top; word-break: normal; width: 40px; }
}
.slightly-smaller {
font-size: 0.9em;
}
footer {
position: relative; top: 10px; bottom: 0px; margin-left: 25px; p { margin: 0; color: #aaa; font-size: 0.8em; }
}
//////////////////////////////// // Dash ////////////////////////////////
html.dash {
header, #breadcrumbs, .sidebar { display: none; } .main-content { width: $content_wrapper_width; margin-left: 0; border: none; width: 100%; top: 0; padding-bottom: 0; } .height-container { display: block; } .item .token { margin-left: 0; } .content-wrapper { width: auto; } #footer { position: static; }
}
// =========================================================================== // // Search // // =========================================================================== form {
float: right; input { font: Helvetica, freesans, Arial, sans-serif; margin-top: 6px; font-size: 13px; line-height: 20px; padding: 0px 10px; border: none; border-radius: 1em; .loading & { background: white url(../img/spinner.gif) center right 4px no-repeat; } } // Typeahead elements .tt-menu { margin: 0; min-width: 300px; background: $white_color; color: #333; border: $gray_border; z-index: 4; } .tt-highlight { font-weight: bold; } .tt-suggestion { font: Helvetica, freesans, Arial, sans-serif; font-size: 14px; padding: 0 8px; span { display: table-cell; white-space: nowrap; } .doc-parent-name { width: 100%; text-align: right; font-weight: normal; font-size: 0.9em; padding-left: 16px; } } .tt-suggestion:hover, .tt-suggestion.tt-cursor { cursor: pointer; background-color: #4183c4; color: #fff; } .tt-suggestion:hover .doc-parent-name, .tt-suggestion.tt-cursor .doc-parent-name { color: #fff; }
}