зеркало из https://github.com/github/vitess-gh.git
732 строки
14 KiB
SCSS
732 строки
14 KiB
SCSS
---
|
|
---
|
|
|
|
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css");
|
|
|
|
// Colors
|
|
// We're using the Material "Indigo" palette: https://material.google.com/style/color.html#color-color-palette
|
|
// Indigo 500
|
|
$primaryBrandColor: #3F51B5;
|
|
// Indigo 800
|
|
$darkerBrandColor: #283593;
|
|
// Indigo 50
|
|
$lighterBrandColor: #E8EAF6;
|
|
// Purple 800
|
|
$accentColor: #6A1B9A;
|
|
|
|
// This ensures that icons on the home page use 100% opacity
|
|
// with the $primaryBrandColor. Otherwise, the icons inherit
|
|
// opacity settings from the header or text is too dark.
|
|
$homePageHeaderColor: #757575;
|
|
|
|
$linkColor: $primaryBrandColor;
|
|
$linkHoverColor: $darkerBrandColor;
|
|
$codeColor: $darkerBrandColor;
|
|
$codeBkColor: $lighterBrandColor;
|
|
$wellColor: #FAFAFA;
|
|
$textColor: #616161;
|
|
$linkDisabledColor: $textColor;
|
|
|
|
$textOnlyLogoFontFamily: "Kavoon", serif;
|
|
|
|
$fontFamily: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
// Override Bootstrap defaults
|
|
body {
|
|
color: $textColor;
|
|
font-family: $fontFamily;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
// Default link styles
|
|
a {
|
|
color: $primaryBrandColor;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: $linkHoverColor;
|
|
}
|
|
a.disabled {
|
|
color: $linkDisabledColor;
|
|
}
|
|
a.external:after {
|
|
content: '➚';
|
|
}
|
|
|
|
// Paragraphs
|
|
p {
|
|
line-height: 22px;
|
|
margin: 0 0 1em;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
|
|
// Headers
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #000;
|
|
opacity: 0.54;
|
|
}
|
|
h2, h3, h4, h5 {
|
|
margin-bottom: 0.8em;
|
|
}
|
|
#centerTextCol {
|
|
h2, h3, h4, h5, h6 {
|
|
// We need to set padding-top:50px so heading text isn't hidden
|
|
// by the nav bar when linking to a specific anchor. We then set
|
|
// a negative margin-top to try to close some of the gap back up,
|
|
// but we can only go as far as the margin-bottom of the previous
|
|
// paragraph, or else it will overlap and prevent links above from
|
|
// being clicked.
|
|
padding-top: 50px;
|
|
margin-top: -16px;
|
|
}
|
|
}
|
|
|
|
// Code blocks (<code> + <pre>)
|
|
code {
|
|
color: $codeColor;
|
|
background-color: transparent;
|
|
font-size: 14px;
|
|
padding: 0;
|
|
}
|
|
|
|
pre, pre.prettyprint {
|
|
background-color: $codeBkColor;
|
|
color: #000;
|
|
border: none !important;
|
|
font-size: 14px !important;
|
|
margin: 0 0 1.2em;
|
|
padding: 9.5px !important;
|
|
}
|
|
|
|
// Callouts (note, caution, warning, special, success)
|
|
aside.note, div.note, p.note {
|
|
background: #757575;
|
|
color: #FFF;
|
|
display: block;
|
|
margin: 16px 0;
|
|
padding: 24px 24px 24px 72px;
|
|
::before {
|
|
content: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/aside-note.svg');
|
|
float: left;
|
|
height: 24px;
|
|
margin-left: -48px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
aside.caution, div.caution, p.caution {
|
|
background: #F4B400;
|
|
color: #FFF;
|
|
display: block;
|
|
margin: 16px 0;
|
|
padding: 24px 24px 24px 72px;
|
|
::before {
|
|
content: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/aside-caution.svg');
|
|
float: left;
|
|
height: 24px;
|
|
margin-left: -48px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
aside.warning, div.warning, p.warning {
|
|
background: #DD2C00;
|
|
color: #FFF;
|
|
display: block;
|
|
margin: 16px 0;
|
|
padding: 24px 24px 24px 72px;
|
|
::before {
|
|
content: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/aside-warning.svg');
|
|
float: left;
|
|
height: 24px;
|
|
margin-left: -48px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
aside.special, div.special, p.special {
|
|
background: #039BE5;
|
|
color: #FFF;
|
|
display: block;
|
|
margin: 16px 0;
|
|
padding: 24px 24px 24px 72px;
|
|
::before {
|
|
content: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/aside-special.svg');
|
|
float: left;
|
|
height: 24px;
|
|
margin-left: -48px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
aside.success, div.success, p.success {
|
|
background: #0F9D58;
|
|
color: #FFF;
|
|
display: block;
|
|
margin: 16px 0;
|
|
padding: 24px 24px 24px 72px;
|
|
::before {
|
|
content: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/aside-success.svg');
|
|
float: left;
|
|
height: 24px;
|
|
margin-left: -48px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
// End callouts
|
|
|
|
// Feature comparisons
|
|
.compare-no, .compare-yes {
|
|
font-weight: bold;
|
|
}
|
|
.compare-no::before {
|
|
background: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/compare-no.svg')
|
|
}
|
|
.compare-yes::before {
|
|
background: url('https://developers.google.com/_static/d0cc006813/images/redesign-14/compare-yes.svg')
|
|
}
|
|
.compare-no::before,
|
|
.compare-yes::before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 24px;
|
|
margin: -4px 4px 0 0;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
width: 24px;
|
|
}
|
|
|
|
// Navbar
|
|
|
|
#common-nav{
|
|
margin-bottom: 0px;
|
|
background-color: $darkerBrandColor;
|
|
|
|
.logo {
|
|
height: 34px;
|
|
}
|
|
}
|
|
#common-nav > div {
|
|
max-width: 100%;
|
|
}
|
|
|
|
// Navbar colors
|
|
.inverse {
|
|
background-color: $primaryBrandColor;
|
|
color: white;
|
|
|
|
a {
|
|
color: $lighterBrandColor;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: $linkHoverColor;
|
|
}
|
|
}
|
|
|
|
.inverse .inverse-light {
|
|
background-color: $lighterBrandColor;
|
|
}
|
|
|
|
// Fix Bootstrap mobile menu colors on inverse navbar
|
|
.navbar-toggle .icon-bar {
|
|
background-color: $lighterBrandColor;
|
|
}
|
|
|
|
/* Home page styles */
|
|
#home {
|
|
h2 {
|
|
color: $homePageHeaderColor;
|
|
opacity: 1;
|
|
a {
|
|
color: $homePageHeaderColor;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: $primaryBrandColor;
|
|
}
|
|
}
|
|
}
|
|
#home > div.container {
|
|
max-width: 100%;
|
|
}
|
|
.home-full-width {
|
|
width: 100%;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
.container {
|
|
.jumbotron {
|
|
background: $darkerBrandColor;
|
|
border-radius: 0px 0px 6px 6px;
|
|
color: $lighterBrandColor;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.page-title-bar{
|
|
background-color: $lighterBrandColor;
|
|
margin: 50px 0px 0px;
|
|
padding-bottom: 10px;
|
|
padding-top: 15px;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $primaryBrandColor;
|
|
}
|
|
}
|
|
.page-spacer {
|
|
height: 2em;
|
|
}
|
|
#home-page-logo {
|
|
margin: 40px;
|
|
max-width: calc(100% - 80px);
|
|
text-align: center;
|
|
height: 228px;
|
|
}
|
|
#home-page-text-only-logo {
|
|
font-family: $textOnlyLogoFontFamily;
|
|
font-size: 96px;
|
|
}
|
|
.navbar-brand-text-only {
|
|
line-height: 50px;
|
|
.text-only-logo {
|
|
font-family: $textOnlyLogoFontFamily;
|
|
font-size: 24px;
|
|
}
|
|
:hover {
|
|
color: $lighterBrandColor;
|
|
}
|
|
}
|
|
.kavoon {
|
|
font-family: $textOnlyLogoFontFamily;
|
|
}
|
|
// Docs layout specific
|
|
.docs-side-nav {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
|
|
// Table styles
|
|
table {
|
|
background:none repeat scroll 0 0 #FFF;
|
|
border:1px solid #D0D0D0;
|
|
border-bottom:1px solid #D0D0D0;
|
|
border-collapse:collapse;
|
|
border-spacing:0;
|
|
text-align:left;
|
|
width:100%;
|
|
margin-bottom: 2.125em;
|
|
}
|
|
|
|
table thead {
|
|
background: #757575;
|
|
tr th {
|
|
color: #FFF;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
table tr th {
|
|
color: #FFF;
|
|
font-weight: 500;
|
|
text-align: left;
|
|
}
|
|
|
|
table tbody td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
table tr td, table tr th {
|
|
padding:0.625em;
|
|
}
|
|
table tfoot, table tr:nth-of-type(2n) {
|
|
background:none repeat scroll 0 0 #F6F6F6;
|
|
}
|
|
table tbody {
|
|
background:none repeat scroll 0 0 #FFF;
|
|
}
|
|
tbody th, tbody td {
|
|
border-right:1px solid #E0E0E0;
|
|
}
|
|
|
|
/*
|
|
* Responsive tables
|
|
*/
|
|
table.responsive tr:not(.alt) td td:first-child,
|
|
table.responsive td tr:not(.alt) td:first-child {
|
|
vertical-align: top;
|
|
}
|
|
table.responsive table.responsive {
|
|
margin: 0;
|
|
}
|
|
|
|
table.responsive tr:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
table.responsive td tr:first-child td {
|
|
padding-top: 0;
|
|
}
|
|
|
|
table.responsive td tr:last-child td {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
table.responsive td td:first-child {
|
|
padding-left: 0;
|
|
}
|
|
table.responsive th:not(:first-child) {
|
|
display: none;
|
|
}
|
|
|
|
#api-method-summary tr td.api-method-summary-group {
|
|
background:#F6F6F6;
|
|
}
|
|
#api-method-summary tr {
|
|
background:#FFF;
|
|
}
|
|
br.bigbreak {
|
|
line-height: 2em;
|
|
}
|
|
div.indent-details {
|
|
padding-left: 1.6250em;
|
|
}
|
|
|
|
// Table of contents
|
|
#toc {
|
|
border-left: solid 3px $primaryBrandColor;
|
|
padding-left: 12px;
|
|
}
|
|
#toc ol, #toc ul {
|
|
font-size: 13px;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
#toc ol ol, #toc ol ul, #toc ul ol, #toc ul ul {
|
|
padding-left: 25px;
|
|
list-style: circle;
|
|
}
|
|
#toc li {
|
|
margin-bottom: 0;
|
|
}
|
|
#toc-contents-header {
|
|
font-size: 13px;
|
|
}
|
|
|
|
// Lists
|
|
ol ol, ol ul, ul ol, ul ul {
|
|
margin: 0.8em 0em;
|
|
}
|
|
ol ol li, ol ul li, ul ol li, ul ul li {
|
|
margin: 0;
|
|
}
|
|
li {
|
|
line-height: 22px;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/*
|
|
* Top nav
|
|
*/
|
|
.icon-bar {
|
|
background-color:#FFF;
|
|
}
|
|
|
|
/*
|
|
* Left nav
|
|
*/
|
|
#left-nav {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#sidebar > li > h4.no-top-margin {
|
|
margin-top: 0;
|
|
}
|
|
#sidebar > li > h4 {
|
|
font-size: 16px;
|
|
margin-top: 0.8em;
|
|
}
|
|
.nav > li > h4.no-top-margin {
|
|
margin-top: 0;
|
|
}
|
|
#sidebar > li > a {
|
|
padding: 6px 15px 6px 0px;
|
|
}
|
|
#sidebar li a {
|
|
font-size: 13px;
|
|
}
|
|
#sidebar li ul li, #sidebar li ol li {
|
|
padding-bottom: 5px;
|
|
}
|
|
#sidebar li.submenu ul {
|
|
display: none;
|
|
li.submenu-parent {
|
|
padding-bottom: 0;
|
|
ul {
|
|
display: block;
|
|
list-style-type: none;
|
|
margin: 0.4em 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
#sidebar.affix-top {
|
|
max-height: calc(100vh - 172px);
|
|
}
|
|
#sidebar.affix,#sidebar.affix-top{
|
|
max-width: 170px;
|
|
@media (min-width: 992px) {
|
|
width: 228px;
|
|
}
|
|
}
|
|
#sidebar.affix, #tocSidebar.affix {
|
|
@media (min-width: 1200px) {
|
|
position: fixed;
|
|
top: 70px;
|
|
bottom: 0px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
@media (min-width: 992px) {
|
|
position: fixed;
|
|
top: 70px;
|
|
bottom: 0px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
// collapsible menus
|
|
h4.arrow-d, h4.arrow-r {
|
|
cursor: pointer;
|
|
}
|
|
|
|
h4.arrow-r::before {
|
|
content: "+ ";
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
}
|
|
|
|
h4.arrow-d::before {
|
|
content: "- ";
|
|
font-family: monospace;
|
|
font-weight: bold;
|
|
}
|
|
#search-form {
|
|
padding: 4px 6px;
|
|
width: 100%;
|
|
}
|
|
|
|
#masthead {
|
|
background-color: $lighterBrandColor;
|
|
margin-bottom: 40px;
|
|
min-height: 105px;
|
|
|
|
h1 {
|
|
color: $primaryBrandColor;
|
|
font-size: 36px;
|
|
opacity: 1;
|
|
padding: 18px;
|
|
@media (min-width: 768px) {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-brand {
|
|
padding: 7px 15px;
|
|
|
|
}
|
|
|
|
.nav > li {
|
|
margin-bottom: 0;
|
|
}
|
|
.nav li.active-item {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
ul, ol {
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
.nav-stacked > li+li {
|
|
margin-top: 0;
|
|
}
|
|
.nav ol, .nav ul {
|
|
list-style: none;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.affix-top,.affix{
|
|
position: static;
|
|
}
|
|
|
|
// Accommodate different screen sizes
|
|
@media (min-width: 1200px) {
|
|
body .home-full-width {
|
|
max-width: 100%;
|
|
}
|
|
#tocSidebar.affix, #tocSidebar.affix-top {
|
|
}
|
|
#toc > ul > li > a {
|
|
display: inline-block;
|
|
padding-left: 10px;
|
|
text-indent: -10px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
#sidebar.affix-top, #tocSidebar.affix-top {
|
|
position: static;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
body .home-full-width {
|
|
width: 100%;
|
|
margin: 0px;
|
|
}
|
|
#sidebar.affix {
|
|
position: fixed;
|
|
top: 70px;
|
|
bottom: 0px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
|
|
/* Three-column layout */
|
|
#leftCol {
|
|
float: left;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
@media screen and (max-width: 991px) {
|
|
max-width: 200px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
display: none;
|
|
}
|
|
}
|
|
#centerCol {
|
|
@media screen and (max-width: 1199px) {
|
|
z-index: 1;
|
|
}
|
|
@media screen and (max-width: 991px) {
|
|
margin-left: calc(25% + 15px);
|
|
z-index: 1;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
#rightCol {
|
|
float: right;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding-right: 0px;
|
|
position: static;
|
|
z-index: 10000;
|
|
|
|
li.active > a {
|
|
color: $accentColor;
|
|
font-weight: bold;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
#tocSidebar.affix, #tocSidebar.affix-top {
|
|
max-width: 210px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1199px) {
|
|
margin: 0;
|
|
}
|
|
@media screen and (max-width: 991px) {
|
|
float: none;
|
|
margin: 12px 0 30px calc(25% + 15px);
|
|
max-width: 255px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
margin: 12px 0 30px;
|
|
}
|
|
}
|
|
|
|
main .fa {
|
|
color: $primaryBrandColor;
|
|
}
|
|
#mobile-left-nav-menu-button {
|
|
display: none;
|
|
background-color: transparent;
|
|
background-image: url('/images/left-nav-menu-expander.svg');
|
|
border: 0;
|
|
height: 24px;
|
|
margin-left: 10px;
|
|
min-width: 24px;
|
|
@media screen and (max-width: 767px) {
|
|
display: block;
|
|
}
|
|
}
|
|
#collapsed-left-menu {
|
|
display: none;
|
|
h4 {
|
|
color: $lighterBrandColor;
|
|
}
|
|
#collapsed-left-menu-repo-link {
|
|
font-size: 18px;
|
|
margin-left: 0.25em;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
display: block;
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
.main-site-content {
|
|
@media screen and (max-width: 991px) {
|
|
padding: 0 24px;
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
@media screen and (max-width: 1199px) {
|
|
#toc-content-row {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
@media screen and (max-width: 991px) {
|
|
/*
|
|
* Force responsive tables to lay out completely vertically. The "responsive"
|
|
* class should only be applied to tables that are composed like a definition
|
|
* list, with a "term" (say, a property name) in the first column and any
|
|
* "definitions" (say, type, description, and a sample value) stacked on top
|
|
* of each other in the second column. This makes it possible to lay out the
|
|
* table vertically and keep it readable on smaller screens without horizontal
|
|
* scrolling. This structure and behavior is documented.
|
|
*/
|
|
table.responsive,
|
|
table.responsive thead,
|
|
table.responsive tbody,
|
|
table.responsive tr,
|
|
table.responsive th,
|
|
table.responsive td {
|
|
display: block;
|
|
}
|
|
}
|
|
@media screen and (max-width: 767px) {
|
|
#standard-menu-links {
|
|
display: none;
|
|
}
|
|
}
|
|
.reset-box-sizing,
|
|
.reset-box-sizing *,
|
|
.reset-box-sizing *:before,
|
|
.reset-box-sizing *:after {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
border: none;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.gsc-table-result td {
|
|
padding-left: 8px;
|
|
}
|