gitbook-plugin-theme-bandwidth/src/less/website/base.less

Bandwidth Theme for GitBook

/* Variables */
:root {
  /*Blue*/
  --bw-blue: #00bef0;
  --bw-alternate-blue: #008db1;
  --bw-light-blue: #d9f5fc;
  --bw-blue-border: 1px solid #33c9f0;
  --bw-dark-blue: #004658;
  --bw-dark-blue-border: 1px solid var(--bw-dark-blue);
  --bw-db-border-thick: 2px solid var(--bw-dark-blue);
  /*Green*/
  --bw-green: #6cbf0d;
  --bw-light-green: #e9f5db;
  --bw-border-green: #b5df86;
  --bw-green-border: 1px solid var(--bw-border-green);
  --bw-dark-green: #5a9f0b;
  /*Purple*/
  --bw-purple: #a95adf;
  /*Red*/
  --bw-red: #e8562e;
  --bw-light-red: #fceae6;
  --bw-border-red: #f6bbab;
  --bw-red-border: 1px solid var(--bw-border-red);
  --bw-dark-red: #b1351e;
  /*Other*/
  --border-grey: #c2c2c2;
  --bw-border: 1px solid var(--border-grey);
  --border-white: 1px solid #fff;
  --disabled-grey: #e1e1e1;
  --input-border: 1px solid var(--disabled-grey);
  --bw-orange: #ff673c;
  --bw-help-text: #7f8897;
  --dark-grey: #272B2D;
  --med-grey: #666;
  --light-grey: #f3f3f3;
  --background-grey: #f7f7f7;
  --light-opacity: rgba(0,188,236, 0.0);
  --dark-opacity: rgba(0,0,0, 0.4);

  --xs: 5px;
  --s: 10px;
  --m: 15px;
  --l: 30px;
  --xl: 60px;

  --border-radius: 5px;
  --button-radius: 10em;

  --outer-padding: 2em;

  --shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
  --shadow-hover: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
body{
  overflow: hidden;
}
.book-summary{
  font-family: 'Overpass', Open Sans;
}
.page-inner{
  margin-top: 0px;
  top: 50px;
}
a[aria-label="Change Layout"]{
  display: none !important;
}
.book-body, .book-summary{
  height: ~"calc(100% - 83px)";
  position: fixed;
  bottom: 0;
  top: inherit;
  background-color: #fff;
}
.book-summary{
  background-color: #f7f7f7;
}
.book-header{
  border-top: 1px solid rgba(0,0,0,.07);
  top: 83px;
}
.book-header h1 a, .book-header h1 a:hover {
  border-bottom: none;
}
.book-header .btn.lang-switcher.active {
  background-color: #1c0a14;
  color: #00bcec;
}
.book-header .btn.lang-switcher {
  text-transform: uppercase;
  background-color: #1c0a14;
  color: #8e8e8e;
  float: left;
  line-height: 70px;
  padding-bottom: 70px;
  font-weight: bold;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
.book-header .btn.lang-switcher:hover{
  color: #fff;
}
.api-method-example h3{
  margin-top: 0px;
}
.page-inner section{
  font-size: 1em !important;
}
.api-method-code {
  color: #EEE;
  min-height: 100vh;
}
.api-method-code pre {
  color: #EEE;
  background-color: #1c0a14;
  border-radius: 3px;
}
.markdown-section pre>code{
  font-size: 1em;
}
.book-summary ul.summary li.active>a {
  color: #00bcec;
}
.gitbook-link{
  display: none;
}
.markdown-section h1 {
  padding-top: 0px;
  margin-top: 0px;
  font-size:2.5em;
  font-weight: 100 !important;
  text-transform: capitalize;
  line-height: 1.1em;
}
.markdown-section h2 {
  font-size: 1.5em;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 0px;
  line-height: initial;
}
.markdown-section{
  h1,h2,h3{
    margin-bottom: 5px;
  }
}
.book.color-theme-3 .book-header .btn.lang-switcher.active {
  background-color: #186469;
  background-color: #2D3134;
  color: #fff;
}
.book-summary ul.summary li a, .book-summary ul.summary li span {
  padding: 1px 15px;

}
.book-summary ul.summary li.header {
  padding: 15px 15px 0px 15px;
  font-size: .85em;
  text-transform: uppercase;
  color: #5f5f5f;
  font-weight: 700;
}
.book-summary ul.summary li.header:first-child {
  padding-top: 5px;
}
.book-header h1{
  display: none;
}
.pull-right{
  display: none;
}
.font-settings{
  display: none;
}
.chapter span{
  text-transform: uppercase;
  color: #939da3 !important;
  padding-top: 20px !important;
}

h1{
  text-transform: uppercase;
  font-weight: 900 !important;
}
#hero h1, h2.mobileShow{
  font-weight: 100 !important;
  font-size: 2.5em !important;
  line-height: 1.1em !important;
  text-transform: none !important;
  margin-bottom: 30px !important;
}
body *{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  color: #008db1;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}
a:focus {
  outline: none;
}
a:active {
  color: #008db1;
}
a:after {
    content: "";
    background: #008db1;
    border-radius: 2em;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: -.1em;
    left: 0;
    transition: height .15s ease, width .15s ease, left .15s ease, opacity .15s ease .15s;
}
a.aimg:after,
.head ul li a:after,
.book-header > a:after,
.api-code-top > a:after{
  height: 0px;
}
a:hover:after,
a:focus:after,
a.anchor-i:hover:after,
a.anchor-i:focus:after {
    height: ~"calc(100% + .2em)";
    width: ~"calc(100% + .6em)";
    left: -.3em;
    opacity: .125;
    transition: height .15s ease, width .15s ease, left .15s ease, opacity 0s ease;
}
.book-summary ul.summary li a:hover,
.book-summary ul.summary li a:focus{
  text-decoration: none;
}
.book-summary ul.summary li a:hover:after,
.book-summary ul.summary li a:focus:after,
a.aimg:hover:after,
a.aimg:focus:after,
.head > a:hover:after,
.head > a:focus:after,
.book-header > a:hover:after,
.book-header > a:focus:after,
.api-code-top > a:hover:after,
.api-code-top > a:focus:after{
  background: #fff;
  text-decoration: none;
  opacity: 0.0;
}
// li.chapter, li.header{
//   border-left: 3px solid #f3f3f3;
// }
// li.chapter:hover{
//   border-left: 3px solid #00bcec;
// }
a.anchor-external i {
  background: #fff;
  border-radius: 2em;
  padding: 0 .25em;
  position: absolute;
  right: 0;
  z-index: 1;
  opacity: 0;
  transition: right 0.3s ease 0.2s, opacity 0.2s ease;
}
a.anchor-external:hover i,
a.anchor-external:focus i {
  opacity: 1;
  right: -1.5em;
  transition: right 0.3s ease, opacity 0.2s ease 0.1s;
}
a.anchor-i:after {
  height: 0;
}
a.anchor-code:after,
a.anchor-img:after {
  display: none;
}
a.anchor-code:hover code,
a.anchor-code:focus code {
  background-color: #d9f5fc;
}
aside.alert a{
  font-family: 'Overpass', sans-serif;
  border-bottom: none;
  margin-left: 0px;
}
aside.alert a:after{
  // bottom: -.5em;
}
.markdown-section a:active, .markdown-section a:focus, .markdown-section a:hover {
  text-decoration: none;
}
.radio-group{
  height: 75px;
  background-color: #1c0a14;
  padding-left: 45px;
}
div.radio-group *,
div.radio-group *:after {
    transition: all 0.2s ease;
}
/* hide input */
div.radio-group input[type="radio"]:empty {
    margin: -9999px;
}
/* basic label styles */
div.radio-group input[type="radio"]:empty ~ label {
    margin-right: -1px;
    padding: 1em 1em;
    cursor: pointer;
    float: left;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.radio-group.lg input[type="radio"]:empty ~ label {
    padding: 1.8em 2.2em;
}
div.radio-group input[type="radio"]:empty ~ label span {
    font-weight: bold;
    text-transform: uppercase;
}
div.radio-group input[type="radio"]:empty ~ label p {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
}
div.radio-group input[type="radio"]:first-of-type + label {
    border-radius: 3px 0 0 3px;
}
div.radio-group input[type="radio"]:last-of-type + label {
    border-radius: 0 3px 3px 0;
}
/* disabled */
div.radio-group input[type="radio"]:disabled ~ label {
    background: #e1e1e1;
    border: 1px solid #c2c2c2;
    cursor: auto;
    opacity: 0.5 !important;
}
/* checked */
div.radio-group input[type="radio"]:checked + label {
    opacity: 1;
    color: #00bcec;
}
div.radio-group input[type="radio"] + label:after {
    content: "";
    background: #00bcec;
    width: calc(100% + 2px);
    height: 0;
    position: absolute;
    bottom: -1px;
    left: -1px;
    display: block;
}
div.radio-group input[type="radio"]:disabled + label:after {
    background-color: #c2c2c2;
}
div.radio-group input[type="radio"]:first-of-type + label:after {
    border-radius: 0 0 0 3px;
}
div.radio-group input[type="radio"]:last-of-type + label:after {
    border-radius: 0 0 3px 0;
}
div.radio-group input[type="radio"]:checked + label:after {
    height: 0px;
}
/* not checked */
div.radio-group input[type="radio"]:not(:checked) + label {
    opacity: 0.5;
    color: #FFF;
}
div.radio-group input[type="radio"]:not(:checked):not(:disabled):hover + label {
    opacity: 1;
    border-color: #00bcec;
    z-index: 1;
}
/* vertical orientation */
div.radio-group.vertical input[type="radio"]:empty ~ label {
    margin-right: 0;
    margin-bottom: -1px;
    width: calc(100% - 2.8em - 2px); /* padding + borders */
    clear: both;
}
div.radio-group.lg.vertical input[type="radio"]:empty ~ label {
    width: calc(100% - 4.4em - 2px); /* padding + borders */
}
div.radio-group.vertical input[type="radio"]:first-of-type + label {
    border-radius: 3px 3px 0 0;
}
div.radio-group.vertical input[type="radio"]:last-of-type + label {
    border-radius: 0 0 3px 3px;
}
div.radio-group.vertical input[type="radio"]:first-of-type + label:after {
    border-radius: 0;
}
div.radio-group.vertical input[type="radio"]:last-of-type + label:after {
    border-radius: 0 0 3px 3px;
}
.expandable pre{
  border-radius: 3px;
  padding-bottom: 30px;
}
pre code{
  border: none !important;
}
pre.smstut, pre.voicetut, pre.pntut, .markdown-section pre{
  padding-left: 60px;
  border-radius: 0px;
  background-color: #1c0a14;
  color: #fff;
}
.markdown-section code {
  padding: .3em;
  margin: 0;
  font-size: .85em;
  background-color: #f7f7f7;
  border-radius: 3px;
  border: 1px solid #e4e4e4;
}
.markdown-section code, .markdown-section pre {
    font-family: 'Overpass Mono',monospace;
}
code {
  padding: .3em;
  margin: 0;
  font-size: .85em;
  background-color: #f1f1f1;
  border-radius: 3px;
  direction: ltr;
}
code:before, code:after{
  letter-spacing: -.2em;
  content: "\00a0";
}
.get{
  background-color: #00aa6c !important;
  color: #fff !important;
  border:none !important;
  font-family: 'Overpass Mono',monospace;
}
.post{
  background-color: #0099e5 !important;
  color: #fff !important;
  border:none !important;
  font-family: 'Overpass Mono',monospace;
}
.put{
  background-color: #7e2eca !important;
  color: #fff !important;
  border:none !important;
  font-family: 'Overpass Mono',monospace;
}
.delete{
  background-color:#ff391a !important;
  color: #fff !important;
  border:none !important;
  font-family: 'Overpass Mono',monospace;
}
.patch{
  background-color:#93627d !important;
  color: #fff !important;
  border:none !important;
  font-family: 'Overpass Mono',monospace;
}
.externalLink .icons8-open-in-window{
  display: none;
}
.externalLink.show .icons8-open-in-window{
  display: inherit;
}
.get + code{
    width: ~"calc(100% - 40px)";
}
.post + code{
    width: ~"calc(100% - 48px)";
}
.delete + code{
    width: ~"calc(100% - 63px)";
}
.put + code{
    width: ~"calc(100% - 40px)";
}
.patch + code{
  width: ~"calc(100% - 56px)";
}
.api-method-definition p code:nth-of-type(2) {
    display: inline-block;
    word-wrap: normal;
    overflow-x: auto;
    border-radius: 0px 3px 3px 0px;
    font-size: .8em !important;
    white-space:nowrap;
}
.api-method-definition p code:nth-of-type(1) {
    display: inline-block;
    vertical-align: top;
    border-radius: 3px 0px 0px 3px;
}
.expand{
   content: 'EXPAND';
   visibility: hidden;
   font-size: 1em;
   width: 27px;
   height: 27px;
   float: left;
   padding-top: 5px !important;
   cursor: pointer;
}
.divider{
   clear: both;
}
.mm-code-first{
  background-color: #fff !important;
  border-left: 1px solid #fff !important;
}
.mm-method-code{
  min-height: inherit !important;
}
.mm-method-code .api-method-example{
  margin-top: 15px;
}
.api-method-definition h3 {
    margin-top: 0px;
}