// Assets
@import "bootstrap-3.3.4/less/bootstrap";
@import "mdi";

// Define custom variables for style and layout.
@import "variables";

// Define custom mixins missing in Bootstrap
@import "mixins";

@import "animations";

@import "typography";

@import "layout";



html, body {
  .antialiased;
}




// Header
// -----------------------------------


header {
  background: @doc_violet;

  .transition(background 1s);
  &.stacked{
    background:transparent;
    .transition(background 1s);
  }
}

#main-back {
  float  : left;
  .transition(margin .5s);
  a:hover{
    border-bottom: 1px solid transparent!important;
  }
}

.index #main-back {
  visibility: hidden;
}

#main_title {
  line-height: 2.4;
  color: white;
  font-weight: 900;
  white-space: nowrap;
  position: absolute;
  bottom: 0;
  margin:0;
  will-change: transform;
  .transform-origin(0% 100% 0px);
}

.index #main_title {
  font-weight: 300;
  &:before {
    content:"";
    display: inline-block;
    width: 75px;
    height: 25px;
    margin-right: 9px;
    background-image: url(img/odoo_logo_white.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-decoration: none;
    .translate(0; 3px);

    @media screen and(min-width: @screen-sm){
      width: 140px;
      height: 48px;
      .translate(0; 5px);
    }
  }
}

#main_navbar {
  z-index: @zIndex--header;
  background-color: transparent;
  border-radius: 0;
  border: none;
  margin: 0;
  min-height: 45px;
  width: 100%;
  position: fixed;
  top:0;
  .box-shadow(none);

  .navbar-toggle {
    padding: 7px 10px 9px;
    .icon-bar {
      background: #FFF;
    }
  }
  .navbar-nav > li > a {
    color: white;
    border-radius: 0;
    padding: 5px;
    margin: 5px;
    background: transparent;
    border-bottom: 1px solid transparent;
    .transition(border .2s);

    &:hover, &:active {
      background-color: transparent;
      border-bottom: 1px solid white;
    }
  }
  .navbar-nav {
    > li {
      height: 45px;
      .transition(background-color 500ms);
      &.open{
        background-color: fadeout(@doc_violet, 10%);
        background-color: transparent;
        > a:hover{
          background:transparent;
          border-bottom: 1px solid transparent;
        };
      }
    }
  }

  .dropdown-menu {
    box-shadow: none;
    border:none;
    background-color: fadeout(@doc_violet, 10%);
    border-top: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0px;
    .transition(background-color 500ms);
    a {
      color: white;
      &:hover{
        background-color: lighten(@doc_violet, 10%);
      }
    }
  }
  &.stacked {
    background-color: @doc_violet;
    .navbar-nav > li > a {
      &:hover, &:active {
        background-color: fadeout(#fff, 80%);
        background-color: transparent;
      }
    }
    .dropdown-menu {
      background-color: darken(@doc_violet,5%);
    }
    .navbar-nav {
      > li {
        &.open{
          background-color: darken(@doc_violet,5%);
          > a:hover{background:transparent};
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    .open .dropdown-menu {
      position: absolute;
      width: 100%;
    }
  }
}

#main_navbar {
  .container-fluid,
  .navbar-header,
  .navbar-header  .navbar-right,
  .navbar-header  .navbar-right li,
  .navbar-header  .navbar-left,
  .navbar-header  .navbar-left > li {
    height:100%;
    min-height: 45px;
  }

  li.versions {
    margin-left: 10px;
    height: auto;
    cursor: pointer;
    background-color: darken(@doc_violet,5%);
    > a {
      cursor: pointer;
      &:hover{
        border-bottom: 1px solid transparent;
      }
    }
    .dropdown-menu{
      min-width: 80px;
    }
    &.open{
      background-color: darken(@doc_violet,5%);
    }
  }
}

main {
  z-index: 0;
  position: relative;
  margin: 0px auto;
  display: block;
  border-radius: 2px;
  color: @doc_text;
  background-color: @doc_paper_dark;
  .fadeIn;
  .shadow-0;

  @media screen and(min-width: @screen-sm) {
    .fadeInUp;
  }
}

main.index {
  .animation-name(none);
  .box-shadow(none);
  padding-top: 50px;
  background:transparent;

  .row > h2 { // section title
    margin-bottom: 1em;
    margin-top: 1.5em;
  }

  .card {
    border-radius: 2px;
    position: relative;
    margin-bottom: @card_margin-bottom;
    min-height: @card_min-height;
    background-color: @doc_paper;
    will-change: transform;
    .shadow-1;
    .transform(scale3d(0, 0, 0) translate3d(50px, 0, 0));
    .transition( all .5s @ease-material);

    a, a:hover {
      color: @doc_text;
      text-decoration: none;
      border-radius: 2px 2px 0 0;
    }
    .card-img{
      .transition(all .5s @ease-material-3);
      overflow:hidden;
      span {
        height: 100%;
        width: 100%;
        position: relative;
        display: block;
        background-size: cover;
        background-position: 50%;
        will-change: transform;
        .transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
        .transform-origin(50%);
        .opacity(1);
        .transition(all .5s @ease-material);
      }
    }
    figcaption {
      .opacity(1);
      display: block;
      font-weight: 400;
      font-family: @headings-font-family;
      color: @doc_heading;
      margin: 0;
      background-color: white;
      font-size: 1.2em;
      top: 0;
      position: absolute;
      width: 100%;
      padding: 8px 12px;
      .transition(all .5s @ease-material);
    }

    &:hover .card-img span{
      .transform(scale3d(1.02, 1.02, 1.02) translate3d(0, 0, 0));
    }
  }

  .toc-single-entry .card figcaption {
    @media screen and(min-width: @screen-md){
      font-size: 1.5em;
      padding: 20px 15px;
    }
  }

  .col-md-6 .card, .col-md-4 .card{
    @media screen and(min-width: @screen-md){
      min-height: 300px;
      figcaption{
        font-size: 1.5em;
        padding: 20px 15px;
      }
    }
  }

  &.animating .card {
    .transform(scale3d(1, 1, 1) translate3d(0, 0, 0));
  }
}


.card.top {
  background: @doc_violet;
  .animation(fadeIn 1s);
  .box-shadow(none);
  .transform-origin(0px 0px 0px);

  &.stacked{
    background:transparent;
    .transition(background 1s);
  }
  &:hover {
    .box-shadow(none);
  }

  @media (min-width:@w-size-medium) {
    padding-top: 10%;
    padding-bottom: 15%;
  }
}

.card-img {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  background-image: url("img/geometric_gradient.png");
  background-size: cover;
  background-position: 50%;
  .translate3d(0;0;0);
  .square(100%);
}

// Elements
// -----------------------------------------------

hr.divider {
  border-color: fadeout(@doc_bg, 60%);
  position: absolute;
  width: 900%;
  margin-left: -13px;
}

main .alert, main .deprecated {
  padding: 15px;
  border-radius: 0;
  border-width: 0 0 0 3px;
  position: relative;
  max-width: 95%;
  display: inline-block;;
  @media (min-width: @w-size-small){
    padding-left: 5.5em;
  }
  > p, > ul {
    margin: .5em 0;
  }
  .alert-info; // 'INFO' is the default style

  > h3, > .alert-title, > p > .versionmodified {
    line-height: 1em;
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    font-family: @headings-font-family;

    &:before {
      font-family: 'Material-Design-Icons';
      content: "\e639";
      display: inline-block;
      text-rendering: geometricPrecision;
      transform: translate(0, -0.15em);
      position: absolute;
      top: 50%;
      left: 6px;
      font-size: 4em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      @media (max-width: @w-size-small){
        display:none;
      }
    }
  }
  &.alert-success {
    border-color: lighten(@doc_success, 30%);
    background-color: lighten(@doc_success, 45%);
    color: darken(@doc_success, 35%);

    > .alert-title, > h3 {
      color: @doc_success
    }
    > .alert-title:before, > h3:before {
      content: "\e625";
    }
  }
  &.alert-info, &.tip {
    border-color: lighten(@doc_info, 30%);
    background-color: lighten(@doc_info, 45%);
    color: darken(@doc_info, 35%);

    > .alert-title, > h3 {
      color: @doc_info;
      &:before {
        content: "\e639";
      }
    }
  }
  &.alert-warning, &.warning, &.deprecated {
    border-color: lighten(@doc_warning, 30%);
    background-color: lighten(@doc_warning, 35%);
    color: darken(@doc_warning, 35%);

    > .alert-title, > h3, > p > .versionmodified {
      color: @doc_warning;
      &:before {
        content: "\e6a4";
      }
    }
  }
  &.alert-danger {
    border-color: lighten(@doc_danger, 30%);
    background-color: lighten(@doc_danger, 40%);
    color: darken(@doc_danger, 35%);

    > .alert-title, > h3 {
      color: @doc_danger;
      &:before {
        content: "\e6a4";
      }
    }
  }
  &.alert-exercise {
      border-color: lighten(@doc_exercise, 30%);
      background-color: lighten(@doc_exercise, 40%);
      color: darken(@doc_exercise, 35%);

      > .alert-title, > h3 {
          color: @doc_exercise;
        &:before {
          .translate(0;0);
          top: 28px;
          content: "\e709";
        }
      }
  }

  &.doc-content{
    @media (min-width: @w-size-large) {
      max-width: 55%;
    }
  }
}
main .deprecated .versionmodified {
  display: block;
}

.pq-patch{
  background: rgb(194, 194, 194);
  em {padding-left: 10px;}
}

span.menuselection{
  font-weight: bold;
}

.list-group-item {
  border: none;
  background:transparent;
}

dt {  margin: .5em 0 .3em;}

blockquote {
  font-family: Georgia, serif;
  font-weight: bold;
  font-style: italic;

  footer {
    font-family: sans-serif;
    background: transparent;
    text-align: left;
    color: @doc_text;
    font-weight: normal;
    font-style: normal;

    cite {
      font-style: italic;
    }
  }
  @media (min-width:@w-size-medium) {
    border-left: 3px solid fade(@doc_accent, 50%);
  }
}
code, .code {
  font-weight: bold;
  color: darken(@doc_accent, 30%);
  background-color: lighten(@doc_accent, 50%);
}
.btn {
  border-radius: 0;
}
dd {
    margin-left: 40px;
}

.code-fields {
  font-size: .9em;
  border: 2px solid #EAEAEA;
  .code-field {
  }

  .code-field-body {
  }

  .code-field-name {
    font-weight: bold;
    color: @doc_heading;
    &:after{
      content:":";
    }
    @media screen and (min-width: @w-size-medium ){
      font-size: .9em;
      text-align: right;
    }
  }

  ul {
    list-style: none;

    strong {
      color: @doc_heading;
      font-family:@font-family-monospace;
    }
    em {
      color: @doc_heading;
      font-family:@font-family-monospace;
      font-weight: bold;
      font-size: .9em;
    }
  }
}

.code-class,
.code-staticmethod, .code-classmethod, .code-method, .code-function,
.code-attribute, .code-data {
    // indents *all* content
    padding-left: 20px;
    margin-bottom: 2em;
    // except for item title which gets dedented back
    > h6 {
        margin-left: -20px;
        margin-bottom: 0.3em;
        .viewcode-link {
            display: none;
            float: right
        }
        &:hover .viewcode-link {
            display: inline;
        }
    }
    p {
      margin-bottom: .5em;
    }
}

aside{
  background: rgb(253, 253, 253);
  margin-top: 45px;
}

.navbar-aside, #navClone {
  position: relative;
  overflow: hidden;
  background-color: @doc_paper_dark;
  .box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));
  &.affix {
    z-index: 2;
    top: 45px;
    position:fixed;
    backface-visibility: hidden;
    @media (max-width:@w-size-medium) {
      display: none;
    }
  }
  > ul.list-group{
    overflow-y: scroll;
    z-index: 0;
  }

  > h3 {
    margin:0;
    padding: 15px 0 10px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    color: @doc_text;
    overflow-x:hidden;
    position:relative;
    z-index: 1;
    .box-shadow(0 10px 9px -10px #d2d2d2);
  }

  .logo_box{
    width: 100%;
    background: rgb(253, 253, 253);
    position: relative;
    display: block;
    padding: 15px 30px 10px;
    border-bottom: 1px solid fadeout(@doc_text, 90%);
    .box-shadow(inset 0px 0 40px rgba(114, 122, 142, .1));

    text-align: center;
    .logo{
      float: left;
      width: 90%;
      margin: auto auto 10px 5%;
      height: 50px;
      background-image: url(img/odoo_logo_rgb.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      text-decoration: none;
    }
  }
  > .list-group {
    margin: 0;
  }

  .gith-container {
    margin:0;
    z-index: 1;
    position: relative;
    overflow-x:hidden;
    .box-shadow(0 -10px 9px -10px #d2d2d2;);
    .gith-link{
      font-weight: 600;
      color: @doc_text;
      text-decoration: none;
      display: inline-block;
      position:relative;
      margin: 10px 0;
      //z-index: 1;
      .transition(color .2s);
      &:hover{
        color: @doc_heading;
        text-decoration: none;
      }
      &:before {
        .size(20px;20px);
        .opacity(.5);
        content:"";
        position:relative;
        background-image: url("img/github-square_32.png");
        background-size: 100%;
        display: inline-block;
        vertical-align: middle;
        .translate(0;-1px);
        .transition(opacity .2s);
      }
      &:hover, &:focus{
        &:before {
          .opacity(1);
        }
      }
    }
  }

  // All levels
  ul {
    padding:0;
    position:relative;
    margin-bottom: 0!important;
    ul {
      max-height: 0;
      overflow:hidden;
    }

    li {
      padding: 0;
      position:relative;
      border-radius: 0;
      border-bottom: 1px solid fadeout(@doc_text, 90%);
      > a {
        font-size: 0.7em;
        border-left: 5px solid transparent;
        margin: 0;
        padding: 8px 0 8px 15px;
        color: @doc_heading;
        font-weight: bold;
        display: block;
        border-radius: 0;
        line-height: 1.2;
        background: darken(@doc_paper_dark, 10%);
        border-bottom: none;

        &:hover, &:active, &:focus {
          text-decoration: none;
          border-radius: 0;
          background: darken(@doc_paper_dark, 15%);
          border-left: 5px solid fadeout(@doc_accent, 50%);
        }
      }

      &:first-child, &:last-child{
        border-radius:0;
      }
    }
  }
  li.active {
    border-color: transparent;
    background: darken(@doc_paper_dark, 5%);
    border-bottom: 1px solid fadeout(@doc_text, 90%);
    border-left: 5px solid @doc_accent, 50%;

    &:hover, &:active, &:focus{
      border-color: transparent;
      background: darken(@doc_paper_dark, 5%);
      border-bottom: 1px solid fadeout(@doc_text, 90%);
      border-left: 5px solid @doc_accent, 50%;
    }

    > a {
      border-left: 5px solid @doc_accent;
    }
  }
  // First level
  > ul > li {
    border-radius: 0;
    padding:0;
    background: darken(@doc_paper_dark, 5%);
    border-bottom: 2px solid fadeout(@doc_text, 90%);
    > a {
      font-size: 0.9em;
      color: @doc_heading;
      padding: 12px 30px 12px 5px;
      background: darken(@doc_paper_dark, 5%);
    }
    &.parent{
      > a:after {
        content:"\e7c1";
        position:absolute;
        right: 10px;
        font-family: "Material-Design-Icons";
        opacity: 0.5;
      }
    }
    &.active {
      >a {
        border-bottom: inherit;
      }
      ul{
        max-height: 10000px;
      }
      &.parent{
        > a:after {
          opacity:1;
          color: @doc_accent;
        }
      }
    }

  }
}
.floating_action_container {
  position: fixed;
  right: 8px;
  bottom: 8px;
  width: auto;
  z-index: @zIndex--float_action;

  @media (min-width:@w-size-medium) {
    display: none;
  }
}
#floating_action {
  width: 56px;
  height: 56px;
  display: inline-block;
  z-index: 0;
  border-radius: 50%;
  padding: 16px;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  background-color: @doc_accent;
  .transition(transform 500ms @ease-material);

  i {
    color: white;
  }
  &.active {
    transform: translateZ(0px) rotateZ(-180deg);
  }
}
#floating_action_menu {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  right: 0;
  width: 380px;
  bottom: 0;
  padding: 0;
  display: block;
  border-radius: 2px;
  .transition(all 0.5s);
  visibility: hidden;
  .box-shadow(0 0 0 transparent);

  .content {
    margin:0;
    li {
      border: none;
      border-top: 1px solid #DDD;
      &:first-child{
        border-top: none;
      }
    }
    a {
      display: inline-block;
      cursor: pointer;
      color: @doc_heading;
      text-decoration: none;
      float: left;
      width: 100%;
      padding: 5px 10px;
    }
    .opacity(0);
  }
  .bubble {
    position: absolute;
    .size(1px; 1px);
    background: @doc_accent;
    content: '';
    bottom: 28px;
    right: 28px;
    color: #fff;
    border-radius: 50%;
    .transition(all 300ms @ease-material-2);
  }
  &:before {
    .bubble;
    background: white;
  }
  &.active {
    display: block;
    visibility: visible;
    .transition(all 500ms @ease-material-2);

    .bubble, &:before {
      .size(1000px; 2000px);
      border-radius: 50%;
      .opacity(0);
      margin-right: -500px;
      margin-bottom: -500px;
      display: block;
      .transition(all .4s @ease-material-2);
    }
    &:before {
      .opacity(1);
    }
    .content {
      position: relative;
      z-index: 1;
      .opacity(1);
      .transition(all 500ms cubic-bezier(0.55, 0.055, 0.675, 0.19));
    }
  }
}

main.has_code_col{
  @media (min-width: @w-size-large) {
    .doc-aside {
      color: lighten(@doc_heading, 30%);
      pre{
        font-size: 12px;
      }
    }
  }
}

article.doc-body {
  background: @doc_paper;
  section.doc-content:first-of-type{
    > p:first-child{
      .lead;
    }
  }
}

.content-switcher {
  margin-top: 1.5em;
  > ul {
    font-size: 10px;
    padding: 0;
    margin: 0;
    .opacity(0.6);
    .transition(all .2s ease);

    > li {
      color: lighten(@doc_heading, 30%);
      font-weight: bold;
      border-bottom: 1px solid lighten(@doc_code-bg, 30%);
      margin: 5px;
      font-size: 1.3em;
      .transition(all .2s);
      cursor: pointer;
      display: inline-block;
      list-style: none;

      &.active {
        border-bottom: 1px solid @doc_accent;
      }
    }
  }
  &:hover > ul {
    .opacity(1);
  }
  > .tabs > * {
    display: none;
    max-width: 100%;
    overflow-x: auto;
  }
  > .tabs > .active {
    display: block;
  }
}

pre {
  color: #e7e9db;
  background: @doc_code-bg;
  font-family: monospace;
  font-weight: bold;
  position: relative;
  border: none;
  max-width: 100%;
  overflow: auto;
  margin: 0;
}

#mask {
  .opacity(0);
  position: fixed;
  z-index: @zIndex--mask;
  top: 0;
  left: 0;
  .size(100%; 0);
  background-color: rgba(0, 0, 0, 0.2);
  .transition(opacity .3s);

  &.active {
    .opacity(1);
    display: block;
    .square(100%);
    .transition(opacity .3s);
  }
}


// Special Pages

// Theme tutorial
#thinking-modular > .clearfix.themes {
  margin-bottom: 3em;
}



footer {
  display: none;
  ///  <----------------
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}