From 9dc32cdd4e8c7e011db18375988cd8e12f2de884 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Mon, 2 Jan 2023 13:18:27 +0000
Subject: [PATCH] [IMP] odoo_theme: general cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A general reorganization of the code was needed for more clarity.
The different markup styles have been grouped together under a common
"chapter", comments have been rewritten and example pages have been
added for context.

Some levels have been removed Where there were too many for no reason.
By removing one level of styles (e.g.: `#wrap`) we avoid needing to
force overrides or adding `!important` to our code.
⌙ e.g.: before commit 9ef86cd93d8c6fc0fd96b437f629237e7a562c6e,
`.o_spoilers .accordion-body >:first-child` was being involuntarily
overridden.

task-3046383

X-original-commit: 620e3c33ef5ba2d33c1a08191c32d62dc7a614dd
Part-of: odoo/documentation#4114
---
 .../odoo_theme/static/scss/_sphinx_basic.scss |   16 +-
 .../odoo_theme/static/scss/_variables.scss    |    6 -
 extensions/odoo_theme/static/style.scss       | 1171 +++++++++--------
 3 files changed, 607 insertions(+), 586 deletions(-)

diff --git a/extensions/odoo_theme/static/scss/_sphinx_basic.scss b/extensions/odoo_theme/static/scss/_sphinx_basic.scss
index 197a0df39..e4e074511 100644
--- a/extensions/odoo_theme/static/scss/_sphinx_basic.scss
+++ b/extensions/odoo_theme/static/scss/_sphinx_basic.scss
@@ -588,15 +588,15 @@ ol.upperroman {
     list-style: upper-roman;
 }
 
-:not(li) > ol > li:first-child > :first-child,
-:not(li) > ul > li:first-child > :first-child {
-    margin-top: 0px;
-}
+// :not(li) > ol > li:first-child > :first-child,
+// :not(li) > ul > li:first-child > :first-child {
+//     margin-top: 0px;
+// }
 
-:not(li) > ol > li:last-child > :last-child,
-:not(li) > ul > li:last-child > :last-child {
-    margin-bottom: 0px;
-}
+// :not(li) > ol > li:last-child > :last-child,
+// :not(li) > ul > li:last-child > :last-child {
+//     margin-bottom: 0px;
+// }
 
 ol.simple ol p,
 ol.simple ul p,
diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss
index 4de50eeb0..ece0bbd90 100644
--- a/extensions/odoo_theme/static/scss/_variables.scss
+++ b/extensions/odoo_theme/static/scss/_variables.scss
@@ -1,9 +1,3 @@
-$o-grid-breakpoint-xxl: 1400px;
-$o-grid-breakpoint-xxxl: 1680px;
-
-$o-container-max-width-xxl:1380px;
-$o-container-max-width-xxxl: 1560px;
-
 // Typography
 // ===============================================
 $o-font-family-serif:                         'Roboto Slab', Georgia, "Times New Roman", Times, serif;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 3345d6486..3b7cd6bf4 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -21,6 +21,7 @@ body {
         text-underline-position: from-font;
 
         &.external:not(.image-reference):after {
+            //see https://www.odoo.com/documentation/master/contributing/documentation/rst_cheat_sheet.html#external-hyperlinks
             content: '#{$i-external-link}';
             margin: 0 $o-icon-margin;
             font-family: icomoon, sans-serif !important;
@@ -37,13 +38,6 @@ body {
         @include o-scroll-padding()
     }
 
-    abbr {
-        text-underline-offset: 2px;
-
-        &[title="Pull Request"] {
-            @include o-easter-egg();
-        }
-    }
 }
 
 .hidden {
@@ -52,11 +46,6 @@ body {
     visibility: hidden !important;
 }
 
-span.viewcode-link {
-    float: none;
-    margin-left: .3rem;
-}
-
 //------------------------------------------------------------------------------
 // Header with logo, searchbar and switchers
 //------------------------------------------------------------------------------
@@ -200,7 +189,7 @@ header {
 }
 
 //------------------------------------------------------------------------------
-// Left side nav toctree
+// Navigation - Left side-nav toctree
 //------------------------------------------------------------------------------
 
 .o_side_nav {
@@ -371,62 +360,63 @@ header {
         padding-left: 0;
     }
 }
+
 //------------------------------------------------------------------------------
-// On this page local toctree
+// Navigation - "On This Page" local toctree
 //------------------------------------------------------------------------------
 
-    aside.o_page_toc {
-        color: $body-color;
-        @include font-size($font-size-sm);
+aside.o_page_toc {
+    color: $body-color;
+    @include font-size($font-size-sm);
 
-        &:not(.o_in_nav_toc) {
-            position: -webkit-sticky;
-            position: sticky;
-            display: none;
-            height: 100%;
-            max-height: calc(100vh - #{$o-headers-height});
+    &:not(.o_in_nav_toc) {
+        position: -webkit-sticky;
+        position: sticky;
+        display: none;
+        height: 100%;
+        max-height: calc(100vh - #{$o-headers-height});
 
-            @include media-breakpoint-up(xl) {
-                display: block;
-                grid-area: toc;
-                top: $o-headers-height;
-                padding: $o-padding-m $o-padding-s $o-padding-m 0;
-                overflow-y: auto;
-            }
-        }
-
-        &.o_in_nav_toc {
+        @include media-breakpoint-up(xl) {
             display: block;
-
-            @include media-breakpoint-up(xl) {
-                display: none;
-            }
-        }
-
-        h5 {
-            margin-bottom: $o-padding-xs;
-            padding-left: $o-padding-xs;
-            font-weight: $font-weight-bolder;
-            color: $o-gray-color;
-            text-transform: uppercase;
-        }
-
-        a {
-            font-weight: $font-weight-normal;
-            color: $o-gray-color
-        }
-
-        .o_page_toc_title {
-            display:none;
-
-            + ul {
-                padding-left: 0;
-            }
+            grid-area: toc;
+            top: $o-headers-height;
+            padding: $o-padding-m $o-padding-s $o-padding-m 0;
+            overflow-y: auto;
         }
     }
 
+    &.o_in_nav_toc {
+        display: block;
+
+        @include media-breakpoint-up(xl) {
+            display: none;
+        }
+    }
+
+    h5 {
+        margin-bottom: $o-padding-xs;
+        padding-left: $o-padding-xs;
+        font-weight: $font-weight-bolder;
+        color: $o-gray-color;
+        text-transform: uppercase;
+    }
+
+    a {
+        font-weight: $font-weight-normal;
+        color: $o-gray-color
+    }
+
+    .o_page_toc_title {
+        display:none;
+
+        + ul {
+            padding-left: 0;
+        }
+    }
+}
+
 //------------------------------------------------------------------------------
-// Main page content
+// Layout
 //------------------------------------------------------------------------------
 
 #wrap {
@@ -440,563 +430,525 @@ header {
         grid-template-columns: minmax(0,$o-side-nav-width) minmax(0,auto) minmax(0,$o-on-page-width);
         margin-top: $o-headers-height;
     }
+}
 
-    // Literals Styles (ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#fields)
-    .o_code, .sig [class^="sig-"] {
-        @include o-code;
+main.container-fluid {
+    position: relative;
+    grid-area: main;
+    padding-bottom: $o-padding-l;
+
+    @include media-breakpoint-up(lg) {
+        grid-column-end: toc;
+        margin: 0;
+        padding: $o-padding-m $o-padding-l;
     }
 
-    .o_code {
-        padding: 0 .3rem;
+    @include media-breakpoint-up(xl) {
+        grid-column-end: main;
+    }
 
-        &.file {
-            padding-right: .4rem;
-            background-color: $blue-100;
-            font-family: $font-family-base;
-            font-weight: $o-font-weight-medium;
-            font-style: italic;
-            color: $blue-700;
+    &.o_index, &.o_fullwidth_page, &.o_has_code_column {
+        grid-column-end: toc;
+    }
+}
+
+//------------------------------------------------------------------------------
+// Content
+//------------------------------------------------------------------------------
+
+// Homepage
+// https://www.odoo.com/documentation/master/index.html
+
+.o_index {
+    .o_content_fw_banner {
+        align-items: center;
+        margin: 0 -0.75rem $o-margin-m;
+        padding: $o-padding-m $o-padding-s;
+        @include o-gradient();
+
+        @include media-breakpoint-up(lg) {
+            margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-m;
+            padding: $o-padding-m $o-padding-m;
+        }
+
+        @include media-breakpoint-up(xl) {
+            margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-l;
+            padding: $o-padding-l $o-padding-l;
+        }
+    }
+    .row:first-of-type h2.border-top {
+        @include media-breakpoint-up(lg) {
+            border-top: 0 solid transparent !important;
         }
     }
 
-    .sig {
-        .sig-prename {
-            padding-left: .3rem;
+    h5 {
+        font-size: 12px;
+    }
 
-            &+ .sig-name {
-                padding-right: .3rem;
+    ul > li {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-bottom: $o-padding-xs;
+
+        &:before {
+            content: $i-article;
+            @include o-inline-icon(0 $o-icon-margin 0 0);
+            color: $o-gray-light;
+        }
+    }
+}
+
+// First level legal page and pages with toctrees
+// (ex: https://www.odoo.com/documentation/master/developer.html)
+.o_fullwidth_page div.toctree-wrapper > ul {
+    flex-wrap: wrap;
+    display: flex;
+
+    > li {
+
+        @include media-breakpoint-down(lg) {
+            width: 100%;
+        }
+
+        @include media-breakpoint-up(lg) {
+            width: 33%;
+
+            &:not(:nth-of-type(3n)){
+                padding-right: $o-padding-m;
+            }
+        }
+    }
+}
+
+// Pages with a column for code on the right
+// (ex: https://www.odoo.com/documentation/master/applications/finance/accounting/getting_started/memento.html)
+
+.o_has_code_column {
+    article.doc-body {
+        @include media-breakpoint-up(xl) {
+            .o_git_link {
+                right: calc(#{$o-codecol-width} + #{$o-padding-l});
+            }
+
+            section {
+                > * {
+                    float: left;
+                    clear: left;
+                    width: $o-halfpage-width;
+                }
+
+                > h1 {
+                    max-width: calc(#{$o-halfpage-width} - 120px);
+                }
+
+                > h1, > h2, > h3, > h4, > h5, > h6 {
+                    float: none;
+                    clear: none;
+                }
+
+                .doc-aside {
+                    float: none;
+                    clear: none;
+                    width: $o-codecol-width;
+                    margin-left: 57%;
+                    padding: $o-padding-s;
+
+                    blockquote {
+                        font-weight: $font-weight-bold;
+                        font-style: italic;
+                    }
+
+                    pre {
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+    }
+
+    + aside.o_page_toc{
+        display: none;
+    }
+}
+
+.o_hide_toc .toctree-wrapper {
+    display: none;
+}
+
+.toctree-wrapper {
+    > ul, .toctree-l1 > ul {
+        padding-left: 0;
+        list-style: none;
+    }
+
+    .toctree-l1 > a {
+        display: block;
+        margin-top: $o-padding-m;
+        margin-bottom: $o-margin-s;
+        padding-bottom: $o-padding-xs;
+        border-bottom: 1px solid $o-gray-border;
+        @include font-size($h2-font-size);
+        font-weight: 600;
+    }
+
+    .toctree-l1 {
+        margin-bottom: 2rem;
+    }
+
+    .toctree-l2 > a[href="#"] {
+        margin-top: 0.7rem;
+        display: inline-block;
+    }
+
+    a[href="#"] {
+        color: $o-gray-color;
+        font-weight: $font-weight-bold;
+        pointer-events: none;
+        cursor: default;
+    }
+}
+
+article.doc-body {
+    position: relative;
+    padding-top: $o-padding-s;
+
+    .o_git_link {
+        @include o-position-absolute($top: 0px, $right: $o-margin-s);
+        @include font-size($font-size-sm);
+
+        @include media-breakpoint-up(lg) {
+            @include o-position-absolute($top: 10px, $right: $o-margin-s);
+        }
+
+        i {
+            margin-right: .2rem;
+        }
+    }
+
+    // Search items highlighted
+    span.highlighted {
+        background-color: lighten($warning, 15%);
+    }
+
+    section {
+        margin-bottom: $o-margin-m;
+
+        > h1 {
+            margin-bottom: $o-margin-s;
+            color: $secondary;
+            font-weight: $font-weight-bolder;
+
+            @include media-breakpoint-up(lg) {
+                max-width: calc(100% - 120px);
             }
         }
 
-        em.property + .sig-name {
-            padding-left: .3rem;
+        > h2 {
+            margin-bottom: $o-margin-s;
+            padding-bottom: .3rem;
+            border-bottom: 1px solid $o-gray-border;
+            font-family: $o-font-family-serif;
+            color: $o-gray-color;
         }
 
-        .sig-paren:last-of-type {
+        > h3 {
+            font-size: $font-size-base * 1.3;
+            font-weight: $font-weight-bold;
+        }
+
+        img {
+            margin-bottom: $o-margin-s;
+        }
+
+        img:not(.o-no-modal) {
+            cursor: pointer;
+        }
+
+        iframe {
+            margin-bottom: $o-margin-s;
+        }
+
+        p > img {
+            margin-bottom: 0;
+            padding: 0;
+            border: none;
+        }
+
+        .figure {
+            .caption, .caption-text {
+                font-weight: $font-weight-bold;
+                color: $o-gray;
+            }
+
+            .caption, .caption-text, .legend, .legend p {
+                margin: 0 auto;
+                font-style: italic;
+            }
+
+            @include media-breakpoint-up(md) {
+                &:not([class^="col"]) .legend {
+                    max-width: 60%;
+                }
+            }
+        }
+
+        a.headerlink {
+            line-height: 0;
+            visibility: hidden !important;
+            text-decoration: none;
+            font-size: 0;
+
+            &:before {
+                content: "\a0";
+            }
+
+            &:after {
+                content: '#{$i-link}';
+                visibility: hidden;
+                opacity: 0;
+                transition: all, .1s;
+                margin: 0 0 0 .3rem;
+                color: $o-gray-light;
+                font-family: icomoon, sans-serif !important;
+                @include font-size($font-size-base);
+            }
+        }
+
+        *:hover > a.headerlink:after {
+            // This makes permalinks only visible on hover.
+            visibility: visible;
+            opacity: 1;
+        }
+
+        table.table {
+            @include media-breakpoint-down(lg){
+                display: block;
+                overflow-x: auto;
+
+                code {
+                    overflow-wrap: break-word;
+                }
+            }
+        }
+    }
+}
+
+div[class^="highlight"] {
+    // This styles the consoles like read-the-doc's consoles
+    overflow-x: auto;
+    margin: 1px 0 24px 0;
+    border: 1px solid $o-gray-border;
+
+    div[class^="highlight"] {
+        margin: 0;
+        padding: 0;
+        border: none;
+    }
+    pre {
+        display: block;
+        overflow: auto;
+        white-space: pre;
+        margin: 0;
+        padding: 1rem;
+    }
+}
+
+iframe {
+    max-width: 100%;
+}
+
+.container .container:not([class^="col"]) {
+    margin: 0;
+    padding: 0;
+}
+
+ul, ol {
+    text-align: left;
+}
+
+ol ol {
+    list-style: lower-alpha;
+
+    > li:before {
+        content: none;
+    }
+}
+
+//------------------------------------------------------------------------------
+// Markups
+// (see https://www.odoo.com/documentation/master/contributing/documentation/rst_cheat_sheet.html#markups)
+//------------------------------------------------------------------------------
+
+// Technical Terms (Literals)
+.o_code, .sig [class^="sig-"] {
+    @include o-code;
+}
+
+.o_code {
+    padding: 0 .3rem;
+
+//File
+    &.file {
+        padding-right: .4rem;
+        background-color: $blue-100;
+        font-family: $font-family-base;
+        font-weight: $o-font-weight-medium;
+        font-style: italic;
+        color: $blue-700;
+    }
+}
+
+// Definitions
+.dfn{
+    @include font-size($font-size-sm);
+    line-height: 1;
+    color: $blue-600;
+    font-weight: $font-weight-bold;
+
+    &:before {
+        content:'?';
+        display: inline-block;
+        width: 15px;
+        height: 15px;
+        margin: 0 .1rem;
+        border: 2px solid $blue-600;
+        border-radius: 20px;
+        text-align: center;
+        color: $blue-600;
+        font-size: 12px;
+        font-weight: $font-weight-bolder;
+        font-style: normal;
+    }
+}
+
+//Abbreviations
+abbr {
+    text-underline-offset: 2px;
+
+    &[title="Pull Request"] {
+        @include o-easter-egg();
+    }
+}
+
+//GUI Element & Menu Selection
+.guilabel, .menuselection {
+    font-weight: $font-weight-bold;
+}
+
+// API and Reference Styles
+//(ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#fields)
+
+.sig {
+    .sig-prename {
+        padding-left: .3rem;
+
+        &+ .sig-name {
             padding-right: .3rem;
         }
     }
 
-    dl.py, dl.js, dl.o-definition-list {
-        > dd {
-            margin-top: -0.075rem;
-            padding-left: $o-padding-s;
-            padding-top: $o-padding-xs;
-            border-left: 3px solid $o-literals-border;
-        }
-
-        &.class em.property {
-            font-size: $font-size-sm;
-
-            &:first-child {
-                border-bottom: 3px solid $o-literals-border;
-            }
-
-            &:not(:first-child) {
-                @include o-code;
-                padding: 0 .3rem;
-            }
-        }
+    em.property + .sig-name {
+        padding-left: .3rem;
     }
 
-    dl:not([class]) dd {
-        margin-left: $o-margin-s;
+    .sig-paren:last-of-type {
+        padding-right: .3rem;
+    }
+}
+
+dl.py, dl.js, dl.o-definition-list {
+    > dd {
+        margin-top: -0.075rem;
+        padding-left: $o-padding-s;
+        padding-top: $o-padding-xs;
+        border-left: 3px solid $o-literals-border;
     }
 
-    dl.field-list {
-        padding: .5rem;
-        border: 1px solid $o-gray-border;
-        @include font-size($font-size-sm);
+    &.class em.property {
+        font-size: $font-size-sm;
 
-        @include media-breakpoint-down(lg) {
-            display: block;
+        &:first-child {
+            border-bottom: 3px solid $o-literals-border;
         }
 
-        > dt {
-            padding-left: 0;
-        }
-
-        ul {
-            list-style: none;
-            padding-left: 0;
-
-            li:not(:last-child) {
-                padding-bottom: $o-padding-xs;
-            }
+        &:not(:first-child) {
+            @include o-code;
+            padding: 0 .3rem;
         }
     }
+}
 
-    iframe {
-        max-width: 100%;
+// The field-lists are generated Parameters and Arguments
+// within the References (ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#odoo.fields.Field)
+dl.field-list {
+    padding: .5rem;
+    border: 1px solid $o-gray-border;
+    @include font-size($font-size-sm);
+
+    @include media-breakpoint-down(lg) {
+        display: block;
     }
 
-    main {
-        position: relative;
-        grid-area: main;
-        padding-bottom: $o-padding-l;
+    > dt {
+        padding-left: 0;
+    }
 
-        @include media-breakpoint-up(lg) {
-            grid-column-end: toc;
-            margin: 0;
-            padding: $o-padding-m $o-padding-l;
+    ul {
+        list-style: none;
+        padding-left: 0;
+
+        li:not(:last-child) {
+            padding-bottom: $o-padding-xs;
         }
+    }
+}
 
-        @include media-breakpoint-up(xl) {
-            grid-column-end: main;
-        }
+dl:not([class]) dd {
+    margin-left: $o-margin-s;
+}
 
-        &.o_index, &.o_fullwidth_page, &.o_has_code_column {
-            grid-column-end: toc;
-        }
-
-        // Homepage
-
-        &.o_index {
-            .o_content_fw_banner {
-                align-items: center;
-                margin: 0 -0.75rem $o-margin-m;
-                padding: $o-padding-m $o-padding-s;
-                @include o-gradient();
-
-                @include media-breakpoint-up(lg) {
-                    margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-m;
-                    padding: $o-padding-m $o-padding-m;
-                }
-
-                @include media-breakpoint-up(xl) {
-                    margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-l;
-                    padding: $o-padding-l $o-padding-l;
-                }
-            }
-            .row:first-of-type h2.border-top {
-                @include media-breakpoint-up(lg) {
-                    border-top: 0 solid transparent !important;
-                }
-            }
-
-            h5 {
-                font-size: 12px;
-            }
-
-            ul > li {
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding-bottom: $o-padding-xs;
-
-                &:before {
-                    content: $i-article;
-                    @include o-inline-icon(0 $o-icon-margin 0 0);
-                    color: $o-gray-light;
-                }
-            }
-        }
-
-        // First level legal page and pages with toctrees (i.e.: User Docs, Install & Maintain, Developer, Contributing)
-        &.o_fullwidth_page div.toctree-wrapper > ul {
-            flex-wrap: wrap;
-            display: flex;
-
-            > li {
-
-                @include media-breakpoint-down(lg) {
-                    width: 100%;
-                }
-
-                @include media-breakpoint-up(lg) {
-                    width: 33%;
-
-                    &:not(:nth-of-type(3n)){
-                        padding-right: $o-padding-m;
-                    }
-                }
-            }
-        }
-
-        // pages with column for code on the right
-        &.o_has_code_column {
-            article.doc-body {
-                @include media-breakpoint-up(xl) {
-                    .o_git_link {
-                        right: calc(#{$o-codecol-width} + #{$o-padding-l});
-                    }
-
-                    section {
-                        > * {
-                            float: left;
-                            clear: left;
-                            width: $o-halfpage-width;
-                        }
-
-                        > h1 {
-                            max-width: calc(#{$o-halfpage-width} - 120px);
-                        }
-
-                        > h1, > h2, > h3, > h4, > h5, > h6 {
-                            float: none;
-                            clear: none;
-                        }
-
-                        .doc-aside {
-                            float: none;
-                            clear: none;
-                            width: $o-codecol-width;
-                            margin-left: 57%;
-                            padding: $o-padding-s;
-
-                            blockquote {
-                                font-weight: $font-weight-bold;
-                                font-style: italic;
-                            }
-
-                            pre {
-                                font-size: 12px;
-                            }
-                        }
-                    }
-                }
-            }
-
-            + aside.o_page_toc{
-                display: none;
-            }
-        }
-
-        &.o_hide_toc .toctree-wrapper {
-            display: none;
-        }
-
-        .toctree-wrapper {
-            > ul, .toctree-l1 > ul {
-                padding-left: 0;
-                list-style: none;
-            }
-
-            .toctree-l1 > a {
-                display: block;
-                margin-top: $o-padding-m;
-                margin-bottom: $o-margin-s;
-                padding-bottom: $o-padding-xs;
-                border-bottom: 1px solid $o-gray-border;
-                @include font-size($h2-font-size);
-                font-weight: 600;
-            }
-
-            .toctree-l1 {
-                margin-bottom: 2rem;
-            }
-
-            .toctree-l2 > a[href="#"] {
-                margin-top: 0.7rem;
-                display: inline-block;
-            }
-
-            a[href="#"] {
-                color: $o-gray-color;
-                font-weight: $font-weight-bold;
-                pointer-events: none;
-                cursor: default;
-            }
-        }
-
-        article.doc-body {
-            position: relative;
-            padding-top: $o-padding-s;
-
-            .o_git_link {
-                @include o-position-absolute($top: 0px, $right: $o-margin-s);
-                @include font-size($font-size-sm);
-
-                @include media-breakpoint-up(lg) {
-                    @include o-position-absolute($top: 10px, $right: $o-margin-s);
-                }
-
-                i {
-                    margin-right: .2rem;
-                }
-            }
-
-            // Search items highlighted
-            span.highlighted {
-                background-color: lighten($warning, 15%);
-            }
-
-            section {
-                margin-bottom: $o-margin-m;
-
-                > h1 {
-                    margin-bottom: $o-margin-s;
-                    color: $secondary;
-                    font-weight: $font-weight-bolder;
-
-                    @include media-breakpoint-up(lg) {
-                        max-width: calc(100% - 120px);
-                    }
-                }
-
-                > h2 {
-                    margin-bottom: $o-margin-s;
-                    padding-bottom: .3rem;
-                    border-bottom: 1px solid $o-gray-border;
-                    font-family: $o-font-family-serif;
-                    color: $o-gray-color;
-                }
-
-                > h3 {
-                    font-size: $font-size-base * 1.3;
-                    font-weight: $font-weight-bold;
-                }
-
-                img {
-                    margin-bottom: $o-margin-s;
-                }
-
-                img:not(.o-no-modal) {
-                    cursor: pointer;
-                }
-
-                iframe {
-                    margin-bottom: $o-margin-s;
-                }
-
-                p > img {
-                    margin-bottom: 0;
-                    padding: 0;
-                    border: none;
-                }
-
-                .figure {
-                    .caption, .caption-text {
-                        font-weight: $font-weight-bold;
-                        color: $o-gray;
-                    }
-
-                    .caption, .caption-text, .legend, .legend p {
-                        margin: 0 auto;
-                        font-style: italic;
-                    }
-
-                    @include media-breakpoint-up(md) {
-                        &:not([class^="col"]) .legend {
-                            max-width: 60%;
-                        }
-                    }
-                }
-
-                a.headerlink {
-                    line-height: 0;
-                    visibility: hidden !important;
-                    text-decoration: none;
-                    font-size: 0;
-
-                    &:before {
-                        content: "\a0";
-                    }
-
-                    &:after {
-                        content: '#{$i-link}';
-                        visibility: hidden;
-                        opacity: 0;
-                        transition: all, .1s;
-                        margin: 0 0 0 .3rem;
-                        color: $o-gray-light;
-                        font-family: icomoon, sans-serif !important;
-                        @include font-size($font-size-base);
-                    }
-                }
-
-                *:hover > a.headerlink:after {
-                    // This makes permalinks only visible on hover.
-                    visibility: visible;
-                    opacity: 1;
-                }
-
-                table.table {
-                    @include media-breakpoint-down(lg){
-                        display: block;
-                        overflow-x: auto;
-
-                        code {
-                            overflow-wrap: break-word;
-                        }
-                    }
-                }
-            }
-        }
-
-        div[class^="highlight"] {
-            // This styles the consoles like read-the-doc's consoles
-            overflow-x: auto;
-            margin: 1px 0 24px 0;
-            border: 1px solid $o-gray-border;
-
-            div[class^="highlight"] {
-                margin: 0;
-                padding: 0;
-                border: none;
-            }
-            pre {
-                display: block;
-                overflow: auto;
-                white-space: pre;
-                margin: 0;
-                padding: 1rem;
-            }
-        }
-
-        .guilabel, .menuselection {
-            font-weight: $font-weight-bold;
-        }
-
-        .dfn{
-            @include font-size($font-size-sm);
-            line-height: 1;
-            color: $blue-600;
-            font-weight: $font-weight-bold;
-
-            &:before {
-                content:'?';
-                display: inline-block;
-                width: 15px;
-                height: 15px;
-                margin: 0 .1rem;
-                border: 2px solid $blue-600;
-                border-radius: 20px;
-                text-align: center;
-                color: $blue-600;
-                font-size: 12px;
-                font-weight: $font-weight-bolder;
-                font-style: normal;
-            }
-        }
-
-
-        .container .container:not([class^="col"]) {
-            margin: 0;
-            padding: 0;
-        }
-
-        ul, ol {
-            text-align: left;
-        }
-
-        ol ol {
-            list-style: lower-alpha;
-
-            > li:before {
-                content: none;
-            }
-        }
+// Child of source-code URL
+// ex: https://www.odoo.com/documentation/16.0/developer/reference/backend/orm.html#odoo.models.AbstractModel
+span.viewcode-link {
+    float: none;
+    margin-left: .3rem;
+}
 
 //------------------------------------------------------------------------------
 // Alerts
 //------------------------------------------------------------------------------
 
-        .alert {
-            border-width: 0 0 0 $alert-border-width;
+.alert {
+    border-width: 0 0 0 $alert-border-width;
 
-            > *:not(.sphinx-tabs) .o_code, > *:not(.sphinx-tabs) div[class^="highlight"] {
-                border: 1px solid var(--o-alert-code-border-color,#{$o-gray-border}) ;
-                background-color: $white !important;
-                color: inherit;
-            }
+    > *:not(.sphinx-tabs) .o_code, > *:not(.sphinx-tabs) div[class^="highlight"] {
+        border: 1px solid var(--o-alert-code-border-color,#{$o-gray-border}) ;
+        background-color: $white !important;
+        color: inherit;
+    }
 
-            > p , > ul {
-                margin-bottom: .5rem;
-            }
+    > p , > ul {
+        margin-bottom: .5rem;
+    }
 
-            > *:last-child {
-                margin-bottom: 0;
-            }
+    > *:last-child {
+        margin-bottom: 0;
+    }
 
-            > h3, > .alert-title {
-                margin: 0 0 10px 0;
-                @include font-size($h5-font-size);
-                line-height: 1em;
-                font-weight: $font-weight-bolder;
+    > h3, > .alert-title {
+        margin: 0 0 10px 0;
+        @include font-size($h5-font-size);
+        line-height: 1em;
+        font-weight: $font-weight-bolder;
 
-                &:before {
-                    content: var(--o-alert-icon, #{$o-alert-default-icon});
-                    @include o-inline-icon(0 $o-icon-margin 0 0, baseline, inherit, inherit);
+        &:before {
+            content: var(--o-alert-icon, #{$o-alert-default-icon});
+            @include o-inline-icon(0 $o-icon-margin 0 0, baseline, inherit, inherit);
 
-                    @include media-breakpoint-down(md) {
-                        display:none;
-                    }
-                }
-            }
-
-            // Custom Admonitions
-            &[class^="admonition"] {
-                --o-alert-icon: '#{$i-info}';
-                --o-alert-code-border-color: tint-color($info, 30%);
-
-                $background: shift-color($info, $alert-bg-scale);
-                $border: shift-color($info, $alert-border-scale);
-                $color: shift-color($info, $alert-color-scale);
-
-                @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-                    $color: mix($info, color-contrast($background), abs($alert-color-scale));
-                }
-
-                @include alert-variant($background, $border, $color);
-            }
-
-            // Note
-            &.alert-primary {
-                --o-alert-code-border-color: #{tint-color($primary, 50%)};
-                --o-alert-icon: '#{$i-note}';
-            }
-
-            // See Also
-            &.alert-secondary {
-                --o-alert-icon: '#{$i-article}';
-                --o-alert-code-border-color: #{tint-color($secondary, 30%)};
-
-                a {
-                    color: $secondary;
-                }
-            }
-
-            // Tip
-            &.alert-tip {
-                --o-alert-icon: '#{$i-lightbulb}';
-                --o-alert-code-border-color: #{$o-gray-border};
-
-                $background: $o-gray-bg;
-                $border: shift-color($primary, $alert-border-scale);
-                $color: shift-color($primary, $alert-color-scale);
-
-                @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
-                    $color: mix($primary, color-contrast($background), abs($alert-color-scale));
-                }
-
-                @include alert-variant($background, $border, $color);
-            }
-
-            // Example
-            &.alert-success {
-                --o-alert-icon: '#{$i-knowledge}';
-                --o-alert-code-border-color: #{tint-color($success, 50%)};
-            }
-
-            // Warning & Important
-            &.alert-warning {
-                --o-alert-icon: '#{$i-warning}';
-                --o-alert-code-border-color: #{tint-color($warning, 50%)};
-            }
-
-            // Danger
-            &.alert-danger {
-                --o-alert-icon: '#{$i-danger}';
-                --o-alert-code-border-color: #{tint-color($danger, 50%)};
-            }
-
-            // Exercises
-            &.alert-dark {
-                --o-alert-icon: '#{$i-exercise}';
-                --o-alert-code-border-color: $dark;
-
-                background: $gray-200;
+            @include media-breakpoint-down(md) {
+                display:none;
             }
         }
         .graphviz {
@@ -1007,6 +959,80 @@ header {
             }
         }
     }
+
+    // Custom Admonitions
+    &[class^="admonition"] {
+        --o-alert-icon: '#{$i-info}';
+        --o-alert-code-border-color: tint-color($info, 30%);
+
+        $background: shift-color($info, $alert-bg-scale);
+        $border: shift-color($info, $alert-border-scale);
+        $color: shift-color($info, $alert-color-scale);
+
+        @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+            $color: mix($info, color-contrast($background), abs($alert-color-scale));
+        }
+
+        @include alert-variant($background, $border, $color);
+    }
+
+    // Note
+    &.alert-primary {
+        --o-alert-code-border-color: #{tint-color($primary, 50%)};
+        --o-alert-icon: '#{$i-note}';
+    }
+
+    // See Also
+    &.alert-secondary {
+        --o-alert-icon: '#{$i-article}';
+        --o-alert-code-border-color: #{tint-color($secondary, 30%)};
+
+        a {
+            color: $secondary;
+        }
+    }
+
+    // Tip
+    &.alert-tip {
+        --o-alert-icon: '#{$i-lightbulb}';
+        --o-alert-code-border-color: #{$o-gray-border};
+
+        $background: $o-gray-bg;
+        $border: shift-color($primary, $alert-border-scale);
+        $color: shift-color($primary, $alert-color-scale);
+
+        @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+            $color: mix($primary, color-contrast($background), abs($alert-color-scale));
+        }
+
+        @include alert-variant($background, $border, $color);
+    }
+
+    // Example
+    &.alert-success {
+        --o-alert-icon: '#{$i-knowledge}';
+        --o-alert-code-border-color: #{tint-color($success, 50%)};
+    }
+
+    // Warning & Important
+    &.alert-warning {
+        --o-alert-icon: '#{$i-warning}';
+        --o-alert-code-border-color: #{tint-color($warning, 50%)};
+    }
+
+    // Danger
+    &.alert-danger {
+        --o-alert-icon: '#{$i-danger}';
+        --o-alert-code-border-color: #{tint-color($danger, 50%)};
+    }
+
+    // Exercises
+    &.alert-dark {
+        --o-alert-icon: '#{$i-exercise}';
+        --o-alert-code-border-color: $dark;
+
+        background: $gray-200;
+    }
 }
 
 //------------------------------------------------------------------------------
@@ -1174,6 +1200,7 @@ header {
 //------------------------------------------------------------------------------
 // Footer
 //------------------------------------------------------------------------------
+
 footer {
     .o_get_help {
         padding-top: $o-padding-l;