odoo/doc/_extensions/odoo_ext/static/style.less

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

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

@import "mixins";
@import "animations";
@import "typography";
@import "layout";
@import "header";
@import "footer";
@import "aside";
@import "print";



// Documentation header's customizations
// --------------------------------------
// Header style is based on odoo.com and can be find in the header.less file.
// The following rules are specific for the documentation website.

.o_main_header {
  @o-sub-inner-h:  @w-sub-nav-height - 2;

  &.o_mobile_menu_opened .mdi-navigation-menu {
    background-color: @footer-bg-color;
    color: @gray-lighter;
  }

  > .o_sub_nav #o_sub-menu .o_breadcrumb {

    @media screen and (min-width: @screen-sm-min) {
      background-color: transparent;
      padding: 0;
      margin: 0 0 0 -15px;
      height: @o-sub-inner-h;
      line-height: @o-sub-inner-h;
    }

    > li {
      display: block;
      &, > a {
        height: 30px;
        line-height: 2;
      }

      &:before {
        font-weight: @fw_bold;
        float: left;
        padding: 0;
        margin-right: -1px;
        display: none;
      }

      @media screen and (min-width: @screen-sm-min) {
        margin-left: 0;
        margin-right: -1px;
        height: @o-sub-inner-h;
        line-height: @o-sub-inner-h;
        display: inline-block;

        &:before {
          display: block;
        }

        > a {
          padding: 0;
          height: @o-sub-inner-h;
          line-height: @w-sub-nav-height;
          letter-spacing: -0.1px;
          word-spacing: -1px;
          font-size: 0.9em;
          display: inline-block;
          height: 100%;
          max-width: 80px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        &:last-child > a {
          max-width: 170px;
        }
      }

      @media screen and (min-width: 1980px) {
        > a {
          max-width: 120px;
        }
      }

      @media screen and (min-width: @screen-lg-min) {
        &:last-child > a {
          max-width: none;
        }
      }

      @media screen and (max-width: @screen-xs-max) {
        > a {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        > a:before {
          content: "|";
          margin-right: 0.5em;
        }
        &:nth-child(1) > a:before {
          display: none;
        }
        &:nth-child(2) > a:before {
          padding-left: 0.5em;
        }
        &:nth-child(3) > a:before {
          padding-left: 1em;
        }
      }
    }
  }

  &.index {
    @media screen and (max-width: @screen-xs-max ){
       > .o_sub_nav #o_sub-menu .o_breadcrumb {
         display: none;
       }
    }
  }

  > .o_sub_nav {
    border-radius: 0;

    .navbar-toggle {
      padding: 0 15px;
      margin: 0;
      height: @o-sub-inner-h;
      background-color: @gray-lighter;

      span {
        line-height: @o-sub-inner-h;
      }

      &.collapsed {
        background-color: @w-header-white;
      }
    }

    .collapse .nav {
      margin-right: 0;
      margin-bottom: 0;

      &:first-of-type {
        margin-right: -15px;
      }

      > li {
        margin: 0;

        > a {
          padding:0 0 0 10px;
        }

        &.divider {
          height: auto;
          line-height: 1;
          border-bottom: 1px solid @gray-light;
          padding: 4px 0px 5px;
        }

        &.dropdown {
         .o-doc-dropdown();
        }
      }
    }

    > .container > .collapse > .nav,
    > .container .o_breadcrumb {
       > li > a {
        @media screen and (min-width: @screen-sm-min) and ( max-width: @screen-sm-max ) {
          font-size: 10px;
          font-weight: @fw_semibold;
        }
      }
    }

    li.dropdown {
      .o-doc-dropdown();
    }
  }


  &.o_inverted:not(.o_scrolled) {
    @media (max-width: @screen-xs-max) {
      .o_sub_nav {
        display: block;
        margin-bottom: 0;

        .nav {
          margin: 0 0 0 -8px;

          > li > a{
            color: @text-color;

            &:hover, &:focus {
              color: @header-link-normal;
            }
          }
        }
      }
    }

    .o_sub_nav_actions {
      margin-left: 10px;

      > li {
        background: fade(@gray-lightest, 10%);
        margin-right: 1px;

        &:last-child {
          margin-right: 0
        }
      }
    }
  }

  &.o_scrolled {
    .o_sub_nav {
      #o_doc_title {
        .opacity(1);
        .translate(0, 0);
        .transition(~'opacity 1s, transform 0.3s');
      }

      .o_sub_nav_actions {
        margin-left: 10px;

        &:first-of-type {
          margin-right: -25px;
        }

        > li {
          background: fade(@gray, 10%);
          margin-right: 1px;

          &:last-child {
            margin-right: 0
          }
        }
      }
    }
  }
}

#wrap {
  z-index: 1;
  position: relative;
  background: @gray-lightest;
  padding-bottom: 40px;
}

main {
  z-index: 0;
  position: relative;
  margin: -10px auto 0;
  display: block;
  border-radius: 2px;
  background-color: @doc_paper;
  .deep-1;

  @media screen and(min-width: @screen-sm) {
    margin: -40px auto 0px;
  }
}

main.index {
  .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;
    overflow: hidden;
    margin-bottom: @card_margin-bottom;
    min-height: @card_min-height;
    background-color: @doc_paper;
    will-change: transform;
    .deep-2;
    .transform(scale3d(0, 0, 0) translate3d(50px, 0, 0));
    .transition( all .5s @o-ease );

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

    &: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-img {
  .o-gradient();
  .o-position-absolute(0, 0);
  .translate3d(0;0;0);
  .square(100%);
  display: block;
  background-size: cover;
  background-position: 50%;
}

.card.top {
  padding: 10% 0 8%;
  position: relative;
  overflow: hidden;
  margin: 0;
  .o-gradient();
  .animation(fadeIn 1s);
  .box-shadow(none);
  .transform-origin(50% 0px 0px);

  @media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
    padding-top: 12%;
  }

  #wrap.index & {
    padding: 0 0 4%;

    @media screen and (min-width: @screen-sm-min) {
      padding-top: 12%;
    }

    @media screen and (min-width: @screen-lg-min) {
      padding-top: 8%;
    }
  }

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

  &:before {
    content:"";
    display: block;
    background-image: url("img/banner_bg.png");
    background-size: cover;
    background-position: 50%;
    .o-position-absolute(0, 0);
    .square(100%);
  }

  &:hover {
    .box-shadow(none);
  }

  .card-img {
    background-image: url("img/banner_bg.png");
  }

  @media screen and (min-width: @screen-sm-min) and (max-width: (@screen-md-min - 1)) {
    padding: 12% 0 8%;

    #wrap.index & {
      padding: 12% 0 4%;
    }
  }

  .container {
    position: relative;
    h1 {
      .h2;
      color: white;

      @media screen and (min-width: @screen-sm-min) {
        .h1;
        color: white;
      }
    }
  }
}

.card.top.has_banner {
  background: @footer-bg-color;

  &:before {
    display: none;
  }

  .card-img {
    opacity: 0.35;
  }
}

// the first level of an application toctree should look more like sections

.toctree-wrapper > ul {
    list-style: none;
    padding: 0;

    > li.toctree-l1 > span {
        font-family: @headings-font-family;
        // copy h2 content :/
        .h2()
    }
}

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

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

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

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

    &:before {
      .mdi-icon("\e639");
      .o-position-absolute(50%, auto, auto, 6px);
      .translate(0, -0.15em);
      font-size: 4em;

      @media (max-width: @screen-sm-min){
        display:none;
      }
    }
  }
  &.alert-success {
    border-color: lighten(@brand-success, 30%);
    background-color: lighten(@brand-success, 45%);
    color: darken(@brand-success, 35%);

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

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

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

    > .alert-title, > h3 {
      color: @brand-danger
    }
    > .alert-title:before, > h3: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;
      }
      > .alert-title:before, > h3:before {
        .translate(0;0);
        top: 28px;
        content: "\e709";
      }
  }

  &.alert-go_to {
    border-color: lighten(@brand-info, 30%);
    background-color: lighten(@brand-info, 45%);
    border-width: 2px;
    margin: 2em auto;
    a{
      color: darken(@brand-info, 25%);
    }
    > .alert-title, > h3 {
      color: @brand-info
    }
    > .alert-title:before, > h3:before {
      content: "\e70d";
    }
  }

  &.doc-content{
    @media (min-width: @screen-lg-min) {
      max-width: 55%;
    }
  }
}

img.img-responsive {
  margin-bottom: (@line-height-computed / 2);
}

.figure {
  h4 {
    margin: 0.5em 0 1.5em;
    padding-left: 1em;
    font-size: 1em;
    font-style: italic;
  }
}

.pq-patch{
  background: @gray-light;
  em {padding-left: 10px;}
}

span.menuselection{
  font-weight: @fw_semibold;
}

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

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

blockquote {
  font-family: @font-family-serif;
  font-weight: @fw_semibold;
  font-style: italic;

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

    cite {
      font-style: italic;
    }
  }
  @media (min-width:@screen-md-min) {
    border-left: 3px solid fade(@brand-primary, 50%);
  }
}
code, .code {
  font-size: 0.8em;
  font-weight: @fw_semibold;
  color: darken(@brand-primary, 30%);
  background-color: lighten(@brand-primary, 50%);
}
.btn {
  border-radius: 0;
}
dd {
    margin-left: 40px;
}

.code-fields {
  font-size: .9em;
  border: 2px solid @gray-light;

  .code-field {
  }

  .code-field-body {
  }

  .code-field-name {
    font-weight: @fw_semibold;
    color: @headings-color;

    &:after{
      content:":";
    }
    @media screen and (min-width: @screen-md-min){
      font-size: .9em;
      text-align: right;
    }
  }

  ul {
    list-style: none;

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

table, .table {
  font-size: 0.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;
    }
}

main.has_code_col{
  @media (min-width: @screen-lg-min) {
    .doc-aside {
      color: @gray-light;

      pre{
        font-size: 12px;
      }
    }
  }
}

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

  &.index-category {
    min-height: 300px;
    min-height: 30vh;

    li.toctree-l1 {
      padding: 5px 0;
    }
  }
}

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

    > li {
      color: text-color;
      font-weight:  @fw_semibold;
      border-bottom: 1px solid transparent;
      margin: 5px;
      font-size: 1.3em;
      cursor: pointer;
      display: inline-block;
      list-style: none;
      .transition(all .2s);
      .opacity(0.6);

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

.highlight {
  background: @doc_code-bg;
  color: @gray-light;
  border-radius: @border-radius-base;
  margin-bottom: (@line-height-computed / 2);
  pre {
    margin-bottom:  0;
  }
}

pre {
  font-size: 0.8em;
  color: @gray-light;
  background: @doc_code-bg;
  font-family: @font-family-monospace;
  font-weight:  @fw_semibold;
  position: relative;
  border: none;
  max-width: 100%;
  overflow: auto;
  margin: 0;
  margin-bottom: (@line-height-computed / 2);
}

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

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


// Special Pages

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