From b8288b7fd15ab8236649e34bd245290ec1fc0a2c Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Thu, 4 Mar 2021 16:48:42 +0100
Subject: [PATCH] [DESIGN]

---
 .../odoo_theme/static/scss/_sphinx_basic.scss |  51 ++--
 .../static/scss/bootstrap_overridden.scss     |   1 +
 extensions/odoo_theme/static/style.scss       | 284 ++++++++++--------
 3 files changed, 192 insertions(+), 144 deletions(-)

diff --git a/extensions/odoo_theme/static/scss/_sphinx_basic.scss b/extensions/odoo_theme/static/scss/_sphinx_basic.scss
index b17ef4eac..82a229154 100644
--- a/extensions/odoo_theme/static/scss/_sphinx_basic.scss
+++ b/extensions/odoo_theme/static/scss/_sphinx_basic.scss
@@ -22,7 +22,7 @@ div.section::after {
 }
 
 /* -- relbar ---------------------------------------------------------------- */
-
+/*
 div.related {
     width: 100%;
     font-size: 90%;
@@ -45,7 +45,7 @@ div.related li {
 div.related li.right {
     float: right;
     margin-right: 5px;
-}
+} */
 
 /* -- search page ----------------------------------------------------------- */
 
@@ -54,12 +54,12 @@ ul.search {
     padding: 0;
 }
 
-ul.search li {
+/* ul.search li {
     padding: 5px 0 5px 20px;
     background-image: url(file.png);
     background-repeat: no-repeat;
     background-position: 0 7px;
-}
+} */
 
 ul.search li a {
     font-weight: bold;
@@ -205,7 +205,6 @@ div.body td {
 }
 
 p.rubric {
-    margin-top: 30px;
     font-weight: bold;
 }
 
@@ -241,9 +240,9 @@ img.align-default, .figure.align-default {
     text-align: center;
 }
 
-.align-default {
+/* .align-default {
     text-align: center;
-}
+} */
 
 .align-right {
     text-align: right;
@@ -266,9 +265,9 @@ p.sidebar-title {
     font-weight: bold;
 }
 
-div.admonition, div.topic, blockquote {
+/* div.admonition, div.topic, blockquote {
     clear: left;
-}
+} */
 
 /* -- topics ---------------------------------------------------------------- */
 
@@ -308,20 +307,20 @@ div.body p.centered {
 
 /* -- content of sidebars/topics/admonitions -------------------------------- */
 
-div.sidebar > :last-child,
+/* div.sidebar > :last-child,
 div.topic > :last-child,
 div.admonition > :last-child {
     margin-bottom: 0;
-}
+} */
 
-div.sidebar::after,
+/* div.sidebar::after,
 div.topic::after,
 div.admonition::after,
 blockquote::after {
     display: block;
     content: '';
     clear: both;
-}
+} */
 
 /* -- tables ---------------------------------------------------------------- */
 
@@ -392,9 +391,9 @@ div.figure {
     padding: 0.5em;
 }
 
-div.figure p.caption {
+/* div.figure p.caption {
     padding: 0.3em;
-}
+} */
 
 div.figure p.caption span.caption-number {
     font-style: italic;
@@ -548,9 +547,9 @@ dl > dd:last-child > :last-child {
     margin-bottom: 0;
 }
 
-dt:target, span.highlighted {
+/* dt:target, span.highlighted {
     background-color: #fbe54e;
-}
+} */
 
 rect.highlighted {
     fill: #fbe54e;
@@ -595,9 +594,9 @@ dl.glossary dt {
     margin-left: 1.5em;
 }
 
-.guilabel, .menuselection {
+/* .guilabel, .menuselection {
     font-family: sans-serif;
-}
+} */
 
 .accelerator {
     text-decoration: underline;
@@ -613,10 +612,10 @@ dl.glossary dt {
     content: ":";
 }
 
-abbr, acronym {
+/* abbr, acronym {
     border-bottom: dotted 1px;
     cursor: help;
-}
+} */
 
 /* -- code displays --------------------------------------------------------- */
 
@@ -672,9 +671,9 @@ table.highlighttable td.code {
     overflow: hidden;
 }
 
-.highlight .hll {
+/* .highlight .hll {
     display: block;
-}
+} */
 
 div.highlight pre,
 table.highlighttable pre {
@@ -716,17 +715,17 @@ div.literal-block-wrapper {
 code.descname {
     background-color: transparent;
     font-weight: bold;
-    font-size: 1.2em;
+    /* font-size: 1.2em; */
 }
 
 code.descclassname {
     background-color: transparent;
 }
 
-code.xref, a code {
+/* code.xref, a code {
     background-color: transparent;
     font-weight: bold;
-}
+} */
 
 h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
     background-color: transparent;
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
index ff4743552..ba1d67445 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
@@ -28,6 +28,7 @@ $display-line-height:                       1;
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
 
+$btn-font-size:                             $font-size-secondary;
 $btn-font-weight:                           $fw_semibold;
 $btn-focus-box-shadow:                      0 0 0 transparent;
 
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 1ca433ed4..65e18567b 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -70,32 +70,12 @@ header.o_main_header{
     }
 
     .highlight-link {
-        cursor: pointer;
         margin-bottom: 0;
-        display: inline-flex;
+        display: flex;
         align-items: center;
         a {
-            color: transparent;
-            text-decoration: none;
-            transition: .3s;
-            transition-delay: .5s;
-
-            &:before {
-                content:'\00d7';
-                display: inline-block;
-                font-weight: $fw_bold;
-                @include font-size($font-size-base);
-                width: 21px;
-                border-radius: 30px;
-                line-height: 21px;
-                background: $gray-light;
-                color: $white;
-                text-align: center;
-                margin: auto .5rem;
-            }
-        }
-        a:hover {
-            color: $gray
+            padding: 0 1rem;
+            @include font-size($font-size-secondary);
         }
     }
     .o_languages {
@@ -220,6 +200,11 @@ header.o_main_header{
 
             &:not(.toctree-l1) {
                 .o_toc_entry_wrapper {
+                    &:not(.o_page_toc_title) {
+                        display: flex;
+                        align-items: baseline;
+                    }
+
                     > i[class^="i-"] {
                         display: inline-block;
                         margin-right: .2rem;
@@ -268,7 +253,7 @@ header.o_main_header{
             font-weight: $fw_bold;
             color: $gray-darker;
             padding-left: .5rem;
-            margin-bottom: 0;
+            margin-bottom: .5rem;
         }
 
         a {
@@ -395,6 +380,8 @@ header.o_main_header{
         &.has_code_col {
 
             article.doc-body {
+                padding-left: 1rem;
+                padding-right: 1rem;
 
                 > *{
                   max-width: 100%;
@@ -415,8 +402,11 @@ header.o_main_header{
                         @include code-col();
                     }
 
+
+
                     .o_git_link {
-                        left: 53%;
+                        top: .5rem;
+                        right: calc(43% + 1rem);
                     }
                     section {
 
@@ -427,6 +417,10 @@ header.o_main_header{
                             clear: left;
                         }
 
+                        > h1 {
+                            max-width: calc(54% - 120px);
+                        }
+
                         > h1, > h2, > h3, > h4, > h5, > h6 {
                             float: none;
                             clear: none;
@@ -440,15 +434,10 @@ header.o_main_header{
                             padding: 1rem;
 
                             blockquote {
-                                font-family: $font-family-serif;
                                 font-weight: $fw_semibold;
                                 font-style: italic;
                             }
 
-                            h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-                                color: $white;
-                            }
-
                             pre {
                                 font-size: 12px;
                             }
@@ -483,29 +472,47 @@ header.o_main_header{
             }
         }
 
-        article {
+        article.doc-body {
             position: relative;
 
             .o_git_link {
                 @include font-size($font-size-secondary);
-                @include o-position-absolute($top: 1rem, $right: 1rem);
+                @include o-position-absolute($top: calc(#{$o-header-height} + 1rem), $right: 1rem);
                 i {
                     margin-right: .2rem;
                 }
             }
+            .command {
+                font-family: var(--bs-font-monospace);
+            }
+
+            .field-list {
+                @include font-size($font-size-secondary);
+                padding: .5rem;
+                border: 1px solid $gray-light;
+
+                ul {
+                    list-style: none;
+                }
+            }
 
             code {
                 display: inline-block;
+                color: inherit;
                 background: $doc_code-bg;
                 padding: 0 .3rem;
                 margin: 0.1rem;
                 border: 1px solid $gray-light;
             }
 
-            dt {
+            /* dt {
                 &:before {
                     @include scroll-padding()
                 }
+            } */
+            // Search items highlighted
+            dt:target, span.highlighted {
+                background-color: lighten($color-alpha, 50%);
             }
 
             section {
@@ -521,17 +528,27 @@ header.o_main_header{
                     color: $o-violet-dark;
                     font-weight: $fw_bold;
                     max-width: calc(100% - 120px);
+                    + p {
+                        margin-top: 1rem;
+                    }
                 }
 
                 > h2 {
+                    font-family: $font-family-serif;
                     color: $gray-darker;
-                    padding-bottom: .5rem;
+                    margin-top: .5rem;
+                    margin-bottom: 1.5rem;
+                    padding-bottom: .3rem;
                     border-bottom: 1px solid $gray-light;
                 }
 
                 > h3 {
                     color: $gray-darkest;
-                    font-weight: $fw_extrabold;
+                    font-weight: $fw_bold;
+                }
+
+                > h4, > h5, > h6 {
+                    font-weight: $fw_semibold;
                 }
 
                 a.headerlink {
@@ -549,19 +566,15 @@ header.o_main_header{
                         @include o-transition(all, .1s)
                     }
                 }
-                // This makes permalinks only visible on hover.
                 h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption {
                     &:hover > a.headerlink:after{
+                    // This makes permalinks only visible on hover.
                         visibility: visible;
                         opacity: 1;
                     }
                 }
             }
 
-            .img-fluid {
-                margin-bottom: 1rem;
-            }
-
         }
 
         div[class^="highlight"] {
@@ -569,6 +582,7 @@ header.o_main_header{
             overflow-x: auto;
             border: 1px solid $gray-light;
             margin: 1px 0 24px 0;
+            max-width: 90vw;
 
             div[class^="highlight"] {
                 padding: 0px;
@@ -583,29 +597,87 @@ header.o_main_header{
                 overflow: auto;
             }
         }
+        // fixes on pages
+        .guilabel, .menuselection {
+            font-weight: $fw_semibold;
+        }
+
+        .dfn{
+            @include font-size($font-size-secondary);
+            line-height: 1;
+            color: $o-violet;
+            font-weight: $fw_semibold;
+            &:before {
+                content:'?';
+                display: inline-block;
+                width: 15px;
+                height: 15px;
+                background-color: $o-violet;
+                border: 1px solid $o-violet;
+                border-radius: 20px;
+                text-align: center;
+                color: $white;
+                font-weight: $fw_extrabold;
+                margin: 0 .2rem;
+            }
+        }
+
+        .pq-patch em {
+            display: block;
+            border-radius: 4px 4px 0 0;
+            background: $gray-lighter;
+            padding: .2rem 1rem;
+            @include font-size($font-size-secondary);
+            font-weight: 600;
+        }
+
+        img.img-fluid:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
+            border: 1px solid $gray-lighter;
+            background: $white;
+            margin-bottom: 1rem;
+            padding: .5rem;
+        }
+
+        .container .container:not([class^="col"]) {
+            padding: 0;
+            margin: 0;
+        }
+
         ul, ol {
             text-align: left;
         }
+
+        .figure {
+            .caption, .caption-text {
+                font-weight: $fw_semibold;
+                color: $gray;
+            }
+            .caption, .caption-text, .legend, .legend p{
+                font-style: italic;
+                margin: 0 auto;
+            }
+            &:not([class^="col"]) .legend {
+                max-width: 60%;
+            }
+        }
+
         // restyle numbers on lists
         ol {
-            list-style: none;
+            /* list-style: none;
             counter-reset: a;
             > li {
                 position: relative;
                 counter-increment: a;
                 &:before {
-                    content: counter(a);
-                    color: $o-violet;
-                    border: 2px solid $o-violet;
-                    @include font-size($font-size-secondary);
-                    font-weight: bold;
-                    line-height: 1;
-                    text-align: center;
-                    padding: 1px 0;
-                    width: 20px;
-                    height: 20px;
-                    border-radius: 10px;
-                    @include o-position-absolute(2px, auto, auto, -2rem);
+                    content: counter(a) '.';
+                    font-weight: $fw_semibold;
+                    @include o-position-absolute(auto, auto, auto, -1.8rem);
+                }
+            } */
+            ol {
+                list-style: lower-alpha;
+                > li:before {
+                    content: none;
                 }
             }
         }
@@ -618,7 +690,7 @@ header.o_main_header{
 // alert-danger
 // alert-go_to
 // alert-exercise
-// alert-success
+// alert-success // removed : never used in doc
         .alert {
             position: relative;
             display: block;
@@ -626,7 +698,14 @@ header.o_main_header{
             border-width: 0 0 0 3px;
             @include font-size($font-size-secondary);
 
+            code {
+                background-color: $white !important;
+            }
+
             > p , > ul{
+                margin-bottom: .5rem;
+            }
+            > *:last-child {
                 margin-bottom: 0;
             }
 
@@ -637,92 +716,63 @@ header.o_main_header{
                 font-weight: $fw_bold;
 
                 &:before {
-                    @include inline-icomoon($i-info, 0 .2rem 0 0);
+                    @include inline-icomoon($i-info, 0 .2rem 0 0, baseline, $font-size-base, inherit);
                     @include media-breakpoint-down(md) {
                         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: '#{$i-check}';
-                }
-            }
-
-            &.alert-info {
+            &.alert-info, &[class^="admonition"] {
                 border-color: tint-color($brand-info, 30%);
                 background-color: tint-color($brand-info, 85%);
                 color: shade-color($brand-info, 35%);
 
                 > .alert-title, > h3 {
-                    color: $brand-info
-                }
-
-                > .alert-title:before, > h3:before {
-                    content: '#{$i-info}';
+                    color: $brand-info;
+                    &:before {
+                        content: '#{$i-info}';
+                    }
                 }
             }
 
             &.alert-note {
-                border-color: tint-color($brand-info, 30%);
-                background-color: tint-color($brand-info, 85%);
-                color: shade-color($brand-info, 35%);
+                border-color: shade-color($info, 30%);
+                background-color: $gray-lightest;
+                color: shade-color($info, 55%);
 
                 > .alert-title, > h3 {
-                    color: $brand-info
+                    color: shade-color($info, 45%);
+                    &:before {
+                        content: '#{$i-note}';
+                    }
                 }
 
-                > .alert-title:before, > h3:before {
-                    content: '#{$i-note}';
-                }
+
             }
 
             &.alert-tip, &.tip {
-                border: none;
-                background-color: tint-color($info, 85%);
-                color: shade-color($info, 65%);
-                padding-left:3rem;
-                padding-right: 2rem;
-                margin-left: -3rem;
-                margin-right: -2rem;
+                border-color: shade-color($color-alpha, 10%);
+                background-color: $gray-lightest;
+                color: shade-color($color-alpha, 55%);
 
                 > .alert-title, > h3 {
-                    color: shade-color($info, 50%);
-                    display: inline-block;
-                    margin-bottom: 0;
-                    margin-right: .5rem;
+                    color: shade-color($color-alpha, 40%);
                     &:before {
                         content: '#{$i-lightbulb}';
-                        vertical-align: text-top;
+                        @include font-size(1.2rem);
                     }
-                    &:after {
-                        content: ':';
-                    }
-                }
-
-                > p {
-                   display: inline-block;
                 }
             }
 
             &.alert-warning, &.warning {
-                border-color: $warning;
+                border-color: $brand-warning;
 
                 > .alert-title, > h3 {
-                    color: $brand-warning;
-                }
-
-                > .alert-title:before, > h3:before {
-                    content: '#{$i-warning}';
+                    color: shade-color($brand-warning, 10%);
+                    &:before {
+                        content: '#{$i-warning}';
+                    }
                 }
             }
 
@@ -730,11 +780,10 @@ header.o_main_header{
                 border-color: $danger;
 
                 > .alert-title, > h3 {
-                    color: $brand-danger
-                }
-
-                > .alert-title:before, > h3:before {
-                    content: '#{$i-danger}';
+                    color: darken($brand-danger,20%);
+                    &:before {
+                        content: '#{$i-danger}';
+                    }
                 }
             }
 
@@ -754,20 +803,19 @@ header.o_main_header{
 
             &.alert-go_to {
                 display: inline-block;
-                border-color: tint-color($secondary, 60%);
-                background-color: tint-color($secondary, 80%);
-                border-width: 2px;
+                border-color: $o-violet;
+                background-color: $gray-lightest;
                 width: calc(50% - 1rem);
                 a {
-                    color: shade-color($secondary, 35%);
+                    color: $o-violet-dark;
                 }
 
                 > .alert-title, > h3 {
-                    color: $secondary;
+                    color: $o-violet-dark;
                 }
 
                 > .alert-title:before, > h3:before {
-                    content: '#{$i-view-more}';
+                    content: '#{$i-arrow-right}';
                 }
             }
         }