[FIX] ws doc: copy button in columned version
[odoo/odoo.git] / doc / _themes / odoodoc / static / style.less
index f2eaba2..994351a 100644 (file)
 // indent level for various items list e.g. dl, fields lists, ...
 @item-indent: 30px;
 
+* {
+  box-sizing: border-box;
+}
 body {
+  overflow: auto;
   position: relative;
 }
 
-.document-super {
+.document-super:not(.stripe) {
   .container();
 }
+.document-super.stripe {
+  .container-fluid();
+}
 
 .document {
   .make-row();
@@ -85,20 +92,39 @@ body {
       opacity: 0;
       .transition(all 0.3s ease-out);
     }
-    > a:after {
-      content: " ";
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-left: 5px;
-      vertical-align: middle;
-      border-top: 4px solid @gray-light;
-      border-right: 4px solid transparent;
-      border-left: 4px solid transparent;
+    &.dropdown {
+      > a:after {
+        content: " ";
+        display: inline-block;
+        width: 0;
+        height: 0;
+        margin-left: 5px;
+        vertical-align: middle;
+        border-top: 4px solid @gray-light;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+      }
+      .dropdown-menu > li.current > a.current {
+        background-color: @brand-primary;
+        color: white;
+      }
     }
-    .dropdown-menu > li.current > a.current {
-      background-color: @brand-primary;
-      color: white;
+  }
+  /* version switcher */
+  div.versions {
+    position: relative;
+    cursor: pointer;
+    font-size: 300%;
+    display: inline-block;
+
+    > a {
+      font-size: 40%;
+      margin: 0.2em;
+      color: #999;
+      font-family: Lato, Arial, sans-serif;
+      &:hover, &:focus {
+        text-decoration: none;
+      }
     }
   }
 }
@@ -155,33 +181,6 @@ body {
       display: block;
     }
   }
-
-  > p {
-    margin: 5px 10px 10px;
-    a {
-      font-size: 13px;
-      &:hover {
-        text-decoration: none;
-      }
-
-      &.github {
-        padding-left: 15px;
-        position: relative;
-        &:before {
-          left: 0;
-          top: 1px;
-          content: '';
-          position: absolute;
-          width: 13px;
-          height: 13px;
-          background: url(github-link.png) left bottom / 13px no-repeat;
-        }
-        &:hover:before {
-          background-position: left top;
-        }
-      }
-    }
-  }
 }
 
 /* Side navigation graphical styling */
@@ -192,8 +191,13 @@ body {
 @nav-current-offset: 2px;
 @nav-current: @nav-spacing - @nav-current-offset;
 
+.sphinxsidebar {
+  z-index: 1;
+}
 .sphinxsidebarwrapper {
   width: 100%;
+  font-size: 13px;
+  z-index: 1;
 
   .hidden-xs();
   .hidden-sm();
@@ -206,7 +210,6 @@ body {
   }
 
   .nav > li > a {
-    font-size: 13px;
     font-weight: bold;
     padding-left: @nav-spacing;
   }
@@ -283,6 +286,33 @@ body {
     }
   }
 }
+/* github link for current document */
+.sphinxsidebarwrapper > p {
+  margin: 5px 10px 10px;
+  a {
+    font-size: 13px;
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.github {
+      padding-left: 15px;
+      position: relative;
+      &:before {
+        left: 0;
+        top: 1px;
+        content: '';
+        position: absolute;
+        width: 13px;
+        height: 13px;
+        background: url(github-link.png) left bottom / 13px no-repeat;
+      }
+      &:hover:before {
+        background-position: left top;
+      }
+    }
+  }
+}
 
 /* Show and affix the side nav when space allows it */
 @media (min-width: @screen-md-min) {
@@ -440,36 +470,29 @@ div.section > h2 {
  *
  * Generated via Pygments
  */
-
-.highlight {
-  padding: 9px 14px;
-  margin-bottom: 14px;
-  background-color: #f7f7f9 !important;
-  border: 1px solid #e1e1e8;
-  border-radius: 4px;
-}
 .highlight pre {
-  color: #333;
-  padding: 0 45px 0 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  background-color: transparent;
-  border: 0;
+  padding: 4px;
+  font-size: 75%;
+  // don't break lines within words
+  word-break: normal;
+  word-wrap: normal;
+}
+.switchable .highlight.with-btn-clipboard pre {
+  // avoid copy button overlapping with even long lines
+  padding-right: 50px;
 }
 
 /*
  * ZeroClipboard styles
  */
-
-.zero-clipboard {
+.highlight {
   position: relative;
-  display: none;
 }
 .btn-clipboard {
   position: absolute;
   top: 0;
   right: 0;
-  z-index: 10;
+  z-index: 3;
   display: block;
   padding: 5px 8px;
   font-size: 12px;
@@ -478,16 +501,14 @@ div.section > h2 {
   background-color: #fff;
   border: 1px solid #e1e1e8;
   border-radius: 0 4px 0 4px;
-}
-.btn-clipboard-hover {
-  color: #fff;
-  background-color: @brand-primary;
-  border-color: @brand-primary;
-}
 
-@media (min-width: 768px) {
-  .zero-clipboard {
-    display: block;
+  &:focus {
+    outline: none;
+  }
+
+  &.active {
+    background-color: #ffffad;
+    .transition(background-color .5s linear);
   }
 }
 
@@ -525,8 +546,285 @@ td.field-body {
     padding: 0;
 }
 
-// code block lines should not wrap
-pre {
-  word-break: normal;
-  word-wrap: normal;
+// lighten js namespace/class name
+.descclassname {
+  opacity: 0.5;
+}
+
+
+.index-tree {
+  ul, li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  > ul > li {
+    margin-bottom: 0.5em;
+    > a {
+      .h3();
+      text-align: center;
+    }
+    > ul {
+      display: -webkit-flex;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+      > li {
+        width: 50%;
+        a {
+          .h4();
+          padding-left: 10%;
+          padding-right: 10%;
+        }
+      }
+    }
+    a {
+      display: block;
+      color: @link-color !important;
+      padding: 0.3em 0;
+      margin: 3px !important;
+      &:hover {
+        background-color: @gray-lighter;
+      }
+    }
+  }
+}
+
+@background-right: @gray-dark;
+@color-right: @gray-lighter;
+@color-right-code: lighten(#000, 80%);
+@separator-right: @gray-light;
+// STRIPE-STYLE PAGES
+.stripe {
+  .section {
+    margin-bottom: 2em;
+  }
+
+  // === columning only on medium+ ===
+  @media (min-width: @screen-md-min) {
+    // column 1
+    .section > *,
+    .section > .force-left {
+      width: 49%;
+      float: left;
+      clear: left;
+    }
+    // column 2
+    .section > .force-right {
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+    .section > .force-right,
+    .section > [class*=highlight] {
+      float: none;
+      clear: none;
+      margin-left: 50%;
+      width: 50%;
+      color: @color-right;
+      a {
+        color: lighten(@link-color, 30%);
+      }
+      code, .literal {
+        color: @code-bg;
+        background-color: @gray;
+      }
+      &:not(.highlight-json) .highlight {
+        border-bottom-color: @separator-right;
+      }
+      &.admonition {
+        margin-left: 51%;
+        width: 49%;
+        border-top-color: @separator-right;
+        border-bottom-color: @separator-right;
+        border-right-color: @separator-right;
+      }
+      pre {
+        // padding leads to overflow scrollbar in safari for no reason I understand,
+        // margin does not have that issue
+        padding: 0;
+        margin: 10px;
+
+        background: none;
+        border: none;
+      }
+      .highlight {
+        border-color: @gray;
+        border-style: solid;
+        border-width: 1px 0;
+        // solarized-ish from https://gist.github.com/qguv/7936275
+        color: @color-right-code;
+        background: none;
+        .lineno { color: #586e75 } /* Line Numbers */
+        .c { color: #586e75 } /* Comment */
+        .err { color: @color-right-code } /* Error */
+        .g { color: @color-right-code } /* Generic */
+        .k { color: #859900 } /* Keyword */
+        .l { color: @color-right-code } /* Literal */
+        .n { color: @color-right-code } /* Name */
+        .o { color: #859900 } /* Operator */
+        .x { color: #cb4b16 } /* Other */
+        .p { color: @color-right-code } /* Punctuation */
+        .cm { color: #586e75 } /* Comment.Multiline */
+        .cp { color: #859900 } /* Comment.Preproc */
+        .c1 { color: #586e75 } /* Comment.Single */
+        .cs { color: #859900 } /* Comment.Special */
+        .gd { color: #2aa198 } /* Generic.Deleted */
+        .ge { color: @color-right-code; font-style: italic } /* Generic.Emph */
+        .gr { color: #dc322f } /* Generic.Error */
+        .gh { color: #cb4b16 } /* Generic.Heading */
+        .gi { color: #859900 } /* Generic.Inserted */
+        .go { color: @color-right-code } /* Generic.Output */
+        .gp { color: @color-right-code } /* Generic.Prompt */
+        .gs { color: @color-right-code; font-weight: bold } /* Generic.Strong */
+        .gu { color: #cb4b16 } /* Generic.Subheading */
+        .gt { color: @color-right-code } /* Generic.Traceback */
+        .kc { color: #cb4b16 } /* Keyword.Constant */
+        .kd { color: #268bd2 } /* Keyword.Declaration */
+        .kn { color: #859900 } /* Keyword.Namespace */
+        .kp { color: #859900 } /* Keyword.Pseudo */
+        .kr { color: #268bd2 } /* Keyword.Reserved */
+        .kt { color: #dc322f } /* Keyword.Type */
+        .ld { color: @color-right-code } /* Literal.Date */
+        .m { color: #2aa198 } /* Literal.Number */
+        .s { color: #2aa198 } /* Literal.String */
+        .na { color: @color-right-code } /* Name.Attribute */
+        .nb { color: #B58900 } /* Name.Builtin */
+        .nc { color: #268bd2 } /* Name.Class */
+        .no { color: #cb4b16 } /* Name.Constant */
+        .nd { color: #268bd2 } /* Name.Decorator */
+        .ni { color: #cb4b16 } /* Name.Entity */
+        .ne { color: #cb4b16 } /* Name.Exception */
+        .nf { color: #268bd2 } /* Name.Function */
+        .nl { color: @color-right-code } /* Name.Label */
+        .nn { color: @color-right-code } /* Name.Namespace */
+        .nx { color: @color-right-code } /* Name.Other */
+        .py { color: @color-right-code } /* Name.Property */
+        .nt { color: #268bd2 } /* Name.Tag */
+        .nv { color: #268bd2 } /* Name.Variable */
+        .ow { color: #859900 } /* Operator.Word */
+        .w { color: @color-right-code } /* Text.Whitespace */
+        .mf { color: #2aa198 } /* Literal.Number.Float */
+        .mh { color: #2aa198 } /* Literal.Number.Hex */
+        .mi { color: #2aa198 } /* Literal.Number.Integer */
+        .mo { color: #2aa198 } /* Literal.Number.Oct */
+        .sb { color: #586e75 } /* Literal.String.Backtick */
+        .sc { color: #2aa198 } /* Literal.String.Char */
+        .sd { color: @color-right-code } /* Literal.String.Doc */
+        .s2 { color: #2aa198 } /* Literal.String.Double */
+        .se { color: #cb4b16 } /* Literal.String.Escape */
+        .sh { color: @color-right-code } /* Literal.String.Heredoc */
+        .si { color: #2aa198 } /* Literal.String.Interpol */
+        .sx { color: #2aa198 } /* Literal.String.Other */
+        .sr { color: #dc322f } /* Literal.String.Regex */
+        .s1 { color: #2aa198 } /* Literal.String.Single */
+        .ss { color: #2aa198 } /* Literal.String.Symbol */
+        .bp { color: #268bd2 } /* Name.Builtin.Pseudo */
+        .vc { color: #268bd2 } /* Name.Variable.Class */
+        .vg { color: #268bd2 } /* Name.Variable.Global */
+        .vi { color: #268bd2 } /* Name.Variable.Instance */
+        .il { color: #2aa198 } /* Literal.Number.Integer.Long */
+      }
+    }
+    // separator above H2
+    .body > .section > .section {
+      border-top: 1px solid @color-right;
+    }
+    .section > h1, .section > h2, .section > h3, .section > h4, .section > h5,
+    .section > h6 {
+      max-width: 50%;
+
+    }
+    .section > h1, .section > h2, .section > h3, .section > h4, .section > h5,
+    .section > h6, .section > .section {
+      position: relative;
+      width: auto;
+      float: none;
+      clear: both;
+    }
+
+    .documentwrapper {
+      overflow: auto;
+      // middle separator
+      &:before {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 50%;
+        content: "";
+        width: 50%;
+        background: @background-right;
+      }
+    }
+
+    .highlight pre {
+      // but allow additional line-breaks between "words" to avoid overflow
+      white-space: pre-wrap;
+    }
+
+    .btn-clipboard {
+      background-color: transparent;
+      color: @color-right;
+      border-color: @separator-right;
+      border-top: none;
+      border-top-right-radius: 0;
+
+      &.active {
+        background-color: @gray;
+        .transition(background-color .5s linear);
+      }
+    }
+  }
+
+  .switcher {
+    color: white;
+    width: auto !important;
+    float: none !important;
+
+    position: absolute;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+
+    right: 0.5em;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    z-index: 5;
+    &.affix {
+      position: fixed;
+      top: 0;
+    }
+
+    li {
+      background-color: #0f131a;
+      padding: 0.4em 1em;
+      border: 1px solid #333;
+      border-left-width: 0;
+      cursor: pointer;
+      &:first-child {
+        border-left-width: 1px;
+        border-radius: 0 0 0 5px;
+      }
+      &:last-child {
+        border-radius: 0 0 5px 0;
+      }
+      &:hover {
+        background-color: #222;
+      }
+      &.active {
+        background-color: #333;
+      }
+    }
+  }
+
+  // === show/hide code snippets ===
+  [class*=only-],
+  .switchable > .highlight {
+    display: none;
+  }
+  // must be final rule of page
+  .only-python, .highlight-python > .highlight {
+    display: block;
+  }
 }