Jump to content
Fórum Script Brasil
  • 0

Desifxar Sidebar e Subir Conteudo


Question

Olá a todos.

Estou fazendo a documentação de alguns produtos e encontrei este site https://getgrav.org/ e estou usando tema LEARN2 https://demo.hibbittsdesign.org/grav-learn2-git-sync/ que satisfaz minha necessidade. O que vou fazer é integrar visual com o restante do site.

Pensei em usar IFRAME mas não é nada elegante.

Como no demo acima o Sidebar é fixo e o conteúdo é que rola, comentei esta linha no CSS

#sidebar {
  background-color: #38424D;
/*  position: fixed; */

Só que não estou conseguindo trazer o lado do conteúdo para o topo conforme este link https://www.mundophpbb.com.br/docs/teste/ 

Agradeço a quem puder ajudar.

Ps.: Quanto a integração visual não tenho problema.

Obrigado

 

Edited by Chico Gois
Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Posted (edited)

Eu consegui o que queria, porem a sidebar agora cria barra de rolagem quando o conteúdo é pequeno.

Este é o CSS

@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Muli:300,400|Inconsolata);
#top-github-link, #body #breadcrumbs {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.button, .button-secondary {
  display: inline-block;
  padding: 7px 12px; }
  .button:active, .button-secondary:active {
    margin: 2px 0 -2px 0; }

body {
  background: #fff;
  color: #555;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  color: #1694CA; }
  a:hover {
    color: #0e6185; }

pre {
  position: relative; }

.bg {
  background: #fff;
  border: 1px solid #eaeaea; }

b, strong, label, th {
  font-weight: 600; }

.default-animation, #header #logo-svg, #header #logo-svg path, #sidebar, #sidebar ul, #body, #body .padding, #body .nav {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease; }

fieldset {
  border: 1px solid #ddd; }

textarea, input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], select[multiple=multiple] {
  background-color: white;
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); }
  textarea:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, select[multiple=multiple]:hover {
    border-color: #c4c4c4; }
  textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus {
    border-color: #1694CA;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(19, 131, 179, 0.7); }

#header {
  background: #1694CA;
  color: #fff;
  text-align: center;
  padding: 1rem; }
  #header a {
    display: inline-block; }
  #header #logo-svg {
    width: 8rem;
    height: 2rem; }
    #header #logo-svg path {
      fill: #fff; }

.searchbox {
  margin-top: 0.5rem;
  position: relative;
  border: 1px solid #19a5e1;
  background: #1383b3;
  border-radius: 4px; }
  .searchbox label {
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    left: 10px;
    top: 3px; }
  .searchbox span {
    color: rgba(255, 255, 255, 0.6);
    position: absolute;
    right: 10px;
    top: 3px;
    cursor: pointer; }
    .searchbox span:hover {
      color: rgba(255, 255, 255, 0.9); }
  .searchbox input {
    display: inline-block;
    color: #fff;
    width: 100%;
    height: 30px;
    background: transparent;
    border: 0;
    padding: 0 25px 0 30px;
    margin: 0;
    font-weight: 400; }
    .searchbox input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.6); }
    .searchbox input::-moz-placeholder {
      color: rgba(255, 255, 255, 0.6); }
    .searchbox input:-moz-placeholder {
      color: rgba(255, 255, 255, 0.6); }
    .searchbox input:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.6); }

#sidebar-toggle {
  display: none; }
  @media only all and (max-width: 47.938em) {
    #sidebar-toggle {
      display: inline-block; } }

#sidebar {
  background-color: #38424D;
  position: absolute;
  top: 0;
  width: 300px;
  bottom: 0;
  left: auto;
  font-weight: 500;
  font-size: 15px; }
  #sidebar a {
    color: #bbbbbb; }
    #sidebar a:hover {
      color: #d5d5d5; }
    #sidebar a.subtitle {
      color: rgba(187, 187, 187, 0.6); }
  #sidebar hr {
    border-bottom: 1px solid #323a44; }
  #sidebar a.padding {
    padding: 0 1rem; }
  #sidebar h5 {
    margin: 2rem 0 0;
    position: relative;
    line-height: 2; }
    #sidebar h5 a {
      display: block;
      margin-left: 0;
      margin-right: 0;
      padding-left: 1rem;
      padding-right: 1rem; }
    #sidebar h5 i {
      color: rgba(187, 187, 187, 0.6);
      position: absolute;
      right: 0.6rem;
      top: 0.7rem;
      font-size: 80%; }
    #sidebar h5.parent a {
      background: #293038;
      color: #c8c8c8 !important; }
    #sidebar h5.active a {
      background: #fff;
      color: #555 !important; }
    #sidebar h5.active i {
      color: #555 !important; }
  #sidebar h5 + ul.topics {
    display: none;
    margin-top: 0; }
  #sidebar h5.parent + ul.topics, #sidebar h5.active + ul.topics {
    display: block; }
  #sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0; }
    #sidebar ul.searched a {
      color: #888888; }
    #sidebar ul.searched .search-match a {
      color: #d5d5d5; }
      #sidebar ul.searched .search-match a:hover {
        color: #eeeeee; }
    #sidebar ul.topics {
      margin: 0 1rem; }
      #sidebar ul.topics.searched ul {
        display: block; }
      #sidebar ul.topics ul {
        display: none;
        padding-bottom: 1rem; }
        #sidebar ul.topics ul ul {
          padding-bottom: 0; }
      #sidebar ul.topics li.parent ul, #sidebar ul.topics > li.active ul {
        display: block; }
      #sidebar ul.topics > li > a {
        line-height: 2rem;
        font-size: 1.1rem; }
        #sidebar ul.topics > li > a b {
          opacity: 0.5;
          font-weight: normal; }
        #sidebar ul.topics > li > a .fa {
          margin-top: 9px; }
      #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
        background: #2d353e;
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem; }
    #sidebar ul li.active > a {
      background: #fff;
      color: #555 !important;
      margin-left: -1rem;
      margin-right: -1rem;
      padding-left: 1rem;
      padding-right: 1rem; }
    #sidebar ul li {
      padding: 0; }
      #sidebar ul li.visited + span {
        margin-right: 16px; }
      #sidebar ul li a {
        display: block;
        padding: 2px 0; }
        #sidebar ul li a span {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: block; }
      #sidebar ul li > a {
        padding: 4px 0; }
      #sidebar ul li .fa {
        display: none;
        float: right;
        font-size: 13px;
        min-width: 16px;
        margin: 4px 0 0 0;
        text-align: right; }
      #sidebar ul li.visited > a .read-icon {
        color: #1694CA;
        display: inline; }
      #sidebar ul li li {
        padding-left: 1rem;
        text-indent: 0.2rem; }

#main {
  background: #f7f7f7;
  margin: 0 0 1.563rem 0; }

#body {
  position: relative;
  margin-left: 300px;
  min-height: 100%; }
  #body img, #body .video-container {
    margin: 3rem auto;
    display: block;
    text-align: center; }
    #body img.border, #body .video-container.border {
      border: 2px solid #e6e6e6 !important;
      padding: 2px; }
    #body img.shadow, #body .video-container.shadow {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
  #body .bordered {
    border: 1px solid #ccc; }
  #body .padding {
    padding: 3rem 6rem; }
    @media only all and (max-width: 59.938em) {
      #body .padding {
        position: static;
        padding: 15px 3rem; } }
    @media only all and (max-width: 47.938em) {
      #body .padding {
        padding: 5px 1rem; } }
  #body h1 + hr {
    margin-top: -1.7rem;
    margin-bottom: 3rem; }
  @media only all and (max-width: 59.938em) {
    #body #navigation {
      position: static;
      margin-right: 0 !important;
      width: 100%;
      display: table; } }
  #body .nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    font-size: 50px;
    height: 100%;
    cursor: pointer;
    display: table;
    text-align: center; }
    #body .nav > i {
      display: table-cell;
      vertical-align: middle;
      text-align: center; }
    @media only all and (max-width: 59.938em) {
      #body .nav {
        display: table-cell;
        position: static;
        top: auto;
        width: 50%;
        text-align: center;
        height: 100px;
        line-height: 100px;
        padding-top: 0; }
        #body .nav > i {
          display: inline-block; } }
    #body .nav:hover {
      background: #F6F6F6; }
    #body .nav.nav-pref {
      left: 0; }
    #body .nav.nav-next {
      right: 0; }

#body-inner {
  margin-bottom: 5rem; }

#chapter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem 0; }
  #chapter #body-inner {
    padding-bottom: 3rem;
    max-width: 80%; }
  #chapter h3 {
    font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    font-weight: 400;
    text-align: center; }
  #chapter h1 {
    font-size: 5rem;
    border-bottom: 4px solid #F0F2F4; }
  #chapter p {
    text-align: center;
    font-size: 1.2rem; }

#footer {
  padding: 3rem 1rem;
  color: #a2a2a2;
  font-size: 13px; }
  #footer p {
    margin: 0; }

body {
  font-family: "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  letter-spacing: -0.03rem;
  font-weight: 400; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  line-height: 150%;
  letter-spacing: -0px; }

h1 {
  text-align: center;
  letter-spacing: -3px; }

h2 {
  letter-spacing: -2px; }

h3 {
  letter-spacing: -1px; }

blockquote {
  border-left: 10px solid #F0F2F4; }
  blockquote p {
    font-size: 1.1rem;
    color: #999; }
  blockquote cite {
    display: block;
    text-align: right;
    color: #666;
    font-size: 1.2rem; }

blockquote {
  position: relative; }

blockquote blockquote {
  position: static; }

blockquote > blockquote > blockquote {
  margin: 0; }
  blockquote > blockquote > blockquote p {
    padding: 15px;
    display: block;
    font-size: 1rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    color: #666; }
    blockquote > blockquote > blockquote p:first-child:before {
      position: absolute;
      top: 2px;
      color: #fff;
      font-family: FontAwesome;
      content: '';
      left: 10px; }
    blockquote > blockquote > blockquote p:first-child:after {
      position: absolute;
      top: 2px;
      color: #fff;
      left: 2rem;
      font-weight: bold;
      content: 'Info'; }
  blockquote > blockquote > blockquote > p {
    margin-left: -71px;
    border-top: 30px solid #F0B37E;
    background: #FFF2DB; }
  blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -94px;
    border-top: 30px solid rgba(217, 83, 79, 0.8);
    background: #FAE2E2; }
    blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Warning'; }
  blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -118px;
    border-top: 30px solid #6AB0DE;
    background: #E7F2FA; }
    blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Note'; }
  blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p {
    margin-left: -142px;
    border-top: 30px solid rgba(92, 184, 92, 0.8);
    background: #E6F9E6; }
    blockquote > blockquote > blockquote > blockquote > blockquote > blockquote > p:first-child:after {
      content: 'Tip'; }

code,
kbd,
pre,
samp {
  font-family: "Inconsolata", monospace; }

code {
  background: #f9f2f4;
  color: #9c1d3d;
  padding: .2rem .4rem;
  border-radius: 3px; }

pre {
  padding: 1rem;
  margin: 2rem 0;
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 2px;
  line-height: 1.15;
  font-size: 1rem; }
  pre code {
    color: #237794;
    background: inherit;
    font-size: 1rem; }

hr {
  border-bottom: 4px solid #F0F2F4; }

.page-title {
  margin-top: -25px;
  padding: 25px;
  float: left;
  clear: both;
  background: #1694CA;
  color: #fff; }

#body a.anchor-link {
  color: #ccc; }
#body a.anchor-link:hover {
  color: #1694CA; }

.scrollbar-inner > .scroll-element .scroll-element_track {
  background-color: rgba(255, 255, 255, 0.3); }

.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #b5d1eb; }

.scrollbar-inner > .scroll-element:hover .scroll-bar {
  background-color: #ccc; }

.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar {
  background-color: #ccc; }

table {
  border: 1px solid #eaeaea;
  table-layout: auto; }

th {
  background: #f7f7f7;
  padding: 0.5rem; }

td {
  padding: 0.5rem;
  border: 1px solid #eaeaea; }

.button {
  background: #1694CA;
  color: #fff;
  box-shadow: 0 3px 0 #1380ae; }
  .button:hover {
    background: #1380ae;
    box-shadow: 0 3px 0 #106c93;
    color: #fff; }
  .button:active {
    box-shadow: 0 1px 0 #106c93; }

.button-secondary {
  background: #F8B450;
  color: #fff;
  box-shadow: 0 3px 0 #f7a733; }
  .button-secondary:hover {
    background: #f7a733;
    box-shadow: 0 3px 0 #f69b15;
    color: #fff; }
  .button-secondary:active {
    box-shadow: 0 1px 0 #f69b15; }

.bullets {
  margin: 1.7rem 0;
  margin-left: -0.85rem;
  margin-right: -0.85rem;
  overflow: auto; }

.bullet {
  float: left;
  padding: 0 0.85rem; }

.two-column-bullet {
  width: 50%; }
  @media only all and (max-width: 47.938em) {
    .two-column-bullet {
      width: 100%; } }

.three-column-bullet {
  width: 33.33333%; }
  @media only all and (max-width: 47.938em) {
    .three-column-bullet {
      width: 100%; } }

.four-column-bullet {
  width: 25%; }
  @media only all and (max-width: 47.938em) {
    .four-column-bullet {
      width: 100%; } }

.bullet-icon {
  float: left;
  background: #1694CA;
  padding: 0.875rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  color: #fff;
  font-size: 1.75rem;
  text-align: center; }

.bullet-icon-1 {
  background: #1694CA; }

.bullet-icon-2 {
  background: #16cac4; }

.bullet-icon-3 {
  background: #b2ca16; }

.bullet-content {
  margin-left: 4.55rem; }

.tooltipped {
  position: relative; }

.tooltipped:after {
  position: absolute;
  z-index: 1000000;
  display: none;
  padding: 5px 8px;
  font: normal normal 11px/1.5 "Muli", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: break-word;
  white-space: pre;
  pointer-events: none;
  content: attr(aria-label);
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  -webkit-font-smoothing: subpixel-antialiased; }

.tooltipped:before {
  position: absolute;
  z-index: 1000001;
  display: none;
  width: 0;
  height: 0;
  color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
  content: "";
  border: 5px solid transparent; }

.tooltipped:hover:before, .tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
  display: inline-block;
  text-decoration: none; }

.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
  top: 100%;
  right: 50%;
  margin-top: 5px; }
.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
  top: auto;
  right: 50%;
  bottom: -5px;
  margin-right: -5px;
  border-bottom-color: rgba(0, 0, 0, 0.8); }

.tooltipped-se:after {
  right: auto;
  left: 50%;
  margin-left: -15px; }

.tooltipped-sw:after {
  margin-right: -15px; }

.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
  right: 50%;
  bottom: 100%;
  margin-bottom: 5px; }
.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
  top: -5px;
  right: 50%;
  bottom: auto;
  margin-right: -5px;
  border-top-color: rgba(0, 0, 0, 0.8); }

.tooltipped-ne:after {
  right: auto;
  left: 50%;
  margin-left: -15px; }

.tooltipped-nw:after {
  margin-right: -15px; }

.tooltipped-s:after,
.tooltipped-n:after {
  transform: translateX(50%); }

.tooltipped-w:after {
  right: 100%;
  bottom: 50%;
  margin-right: 5px;
  transform: translateY(50%); }
.tooltipped-w:before {
  top: 50%;
  bottom: 50%;
  left: -5px;
  margin-top: -5px;
  border-left-color: rgba(0, 0, 0, 0.8); }

.tooltipped-e:after {
  bottom: 50%;
  left: 100%;
  margin-left: 5px;
  transform: translateY(50%); }
.tooltipped-e:before {
  top: 50%;
  right: -5px;
  bottom: 50%;
  margin-top: -5px;
  border-right-color: rgba(0, 0, 0, 0.8); }

/*************** SCROLLBAR BASE CSS ***************/
.highlightable {
  padding: 25px 0 15px; }

.scroll-wrapper {
  overflow: hidden !important;
  padding: 0 !important;
  position: relative; }

.scroll-wrapper > .scroll-content {
  border: none !important;
  box-sizing: content-box !important;
  height: auto;
  left: 0;
  margin: 0;
  max-height: none;
  max-width: none !important;
  overflow: scroll !important;
  padding: 0;
  position: relative !important;
  top: 0;
  width: auto !important; }

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
  height: 0;
  width: 0; }

.scroll-element {
  display: none; }

.scroll-element, .scroll-element div {
  box-sizing: content-box; }

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
  display: block; }

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
  cursor: default; }

.scroll-textarea > .scroll-content {
  overflow: hidden !important; }

.scroll-textarea > .scroll-content > textarea {
  border: none !important;
  box-sizing: border-box;
  height: 100% !important;
  margin: 0;
  max-height: none !important;
  max-width: none !important;
  overflow: scroll !important;
  outline: none;
  padding: 2px;
  position: relative !important;
  top: 0;
  width: 100% !important; }

.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
  height: 0;
  width: 0; }

/*************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
  border: none;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: 10; }

.scrollbar-inner > .scroll-element div {
  display: block;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%; }

.scrollbar-inner > .scroll-element.scroll-x {
  bottom: 2px;
  height: 8px;
  left: 0;
  width: 100%; }

.scrollbar-inner > .scroll-element.scroll-y {
  height: 100%;
  right: 2px;
  top: 0;
  width: 8px; }

.scrollbar-inner > .scroll-element .scroll-element_outer {
  overflow: hidden; }

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px; }

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: 0.3; }

/* update scrollbar offset if both scrolls are visible */
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track {
  left: -12px; }

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track {
  top: -12px; }

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
  left: -12px; }

.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
  top: -12px; }

.lightbox-active #body {
  overflow: visible; }
  .lightbox-active #body .padding {
    overflow: visible; }

#github-contrib i {
  vertical-align: middle; }

.featherlight img {
  margin: 0 !important; }

.lifecycle #body-inner ul {
  list-style: none;
  margin: 0;
  padding: 2rem 0 0;
  position: relative; }
.lifecycle #body-inner ol {
  margin: 1rem 0 1rem 0;
  padding: 2rem;
  position: relative; }
  .lifecycle #body-inner ol li {
    margin-left: 1rem; }
  .lifecycle #body-inner ol strong, .lifecycle #body-inner ol label, .lifecycle #body-inner ol th {
    text-decoration: underline; }
  .lifecycle #body-inner ol ol {
    margin-left: -1rem; }
.lifecycle #body-inner h3[class*='level'] {
  font-size: 20px;
  position: absolute;
  margin: 0;
  padding: 4px 10px;
  right: 0;
  z-index: 1000;
  color: #fff;
  background: #1ABC9C; }
.lifecycle #body-inner ol h3 {
  margin-top: 1rem !important;
  right: 2rem !important; }
.lifecycle #body-inner .level-1 + ol {
  background: #f6fefc;
  border: 4px solid #1ABC9C;
  color: #16A085; }
  .lifecycle #body-inner .level-1 + ol h3 {
    background: #2ECC71; }
.lifecycle #body-inner .level-2 + ol {
  background: #f7fdf9;
  border: 4px solid #2ECC71;
  color: #27AE60; }
  .lifecycle #body-inner .level-2 + ol h3 {
    background: #3498DB; }
.lifecycle #body-inner .level-3 + ol {
  background: #f3f9fd;
  border: 4px solid #3498DB;
  color: #2980B9; }
  .lifecycle #body-inner .level-3 + ol h3 {
    background: #34495E; }
.lifecycle #body-inner .level-4 + ol {
  background: #e4eaf0;
  border: 4px solid #34495E;
  color: #2C3E50; }
  .lifecycle #body-inner .level-4 + ol h3 {
    background: #34495E; }

#top-bar {
  background: #F6F6F6;
  border-radius: 2px;
  margin: 0rem -1rem 2rem;
  padding: 0 1rem;
  height: 0;
  min-height: 3rem; }

#top-github-link {
  position: relative;
  z-index: 1;
  float: right;
  display: block; }

#body #breadcrumbs {
  height: auto;
  display: block;
  margin-bottom: 0;
  padding-left: 0;
  line-height: 1.4; }
  #body #breadcrumbs span {
    padding: 0 0.1rem; }

@media only all and (max-width: 59.938em) {
  #sidebar {
    width: 230px; }

  #body {
    margin-left: 230px; } }
@media only all and (max-width: 47.938em) {
  #sidebar {
    width: 230px;
    left: -230px; }

  #body {
    margin-left: 0;
    width: 100%; }

  .sidebar-hidden {
    overflow: hidden; }
    .sidebar-hidden #sidebar {
      left: 0; }
    .sidebar-hidden #body {
      margin-left: 230px;
      overflow: hidden; }
    .sidebar-hidden #overlay {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 10;
      background: rgba(255, 255, 255, 0.5);
      cursor: pointer; } }
.copy-to-clipboard {
  background-image: url(../images/clippy.svg);
  background-position: 50% 50%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  width: 27px;
  height: 1.45rem;
  top: -1px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  color: #3c3c3c;
  background-color: #f9f2f4;
  margin-left: -.2rem;
  cursor: pointer;
  border-radius: 0 2px 2px 0; }
  .copy-to-clipboard:hover {
    background-color: #f1e1e5; }
  pre .copy-to-clipboard {
    position: absolute;
    right: 4px;
    top: 4px;
    background-color: #eee;
    border-color: #ddd;
    border-radius: 2px; }
    pre .copy-to-clipboard:hover {
      background-color: #d9d9d9; }

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d; }

/*# sourceMappingURL=theme.css.map */

 

Edited by Chico Gois
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      148681
    • Total Posts
      644506
×
×
  • Create New...