[IMP] odoo_theme: toctrees-l1,l2 design improvement

Issue 1: 
========
The toctrees in the documentation are visually inconsistent because of
the content. Sometimes we have titles that are also links and visually
collides with the rest of the toc making it hard to read. This applies
to toctree-l1 and toctree-l2.

Fix 1:
========
When we have a link and title toctree-l1 or toctree-l2 in a list 
containing other nested toc, we apply another styling displaying it 
with the same color as a title, but with an icon and hover behavior 
indicating that it is a link. (This commit also changes the direction of
the i-link icon to make it standard). 

Issue 2:
========
When we have only have toctree-l1 links without nested toc the toctree
is uselessly taking a lot of space. 

Fix: 2
========

In these scenario we replace the toctree-l1 class with toctree-l2 to
make them appear as a discreet list.


task-3138525
task-3138563

part of 

task-3059178

Author: mano-odoo

extensions/odoo_theme/static/fonts/icomoon.eot

@@ -35,6 +35,32 @@
         content.querySelectorAll('a.external').forEach(externalLink => {
             externalLink.setAttribute('target', '_blank');
         })
+
+        // Add extra classes to allow more control on the design of the toctrees
+        const tocTreeWrapperEl = document.querySelector('.toctree-wrapper');
+        let tocFirstLevelOnly = true;
+        let tocFirstLevelAreLinks = true;
+
+        // Add a class to all toctree-l1 if there is a 2nd level toctree inside.
+        tocTreeWrapperEl?.querySelectorAll('.toctree-l1').forEach(tocl1 => {
+            if (tocl1.querySelector('.toctree-l2')) {
+                tocl1.classList.add('o_toc_contains_l2');
+                tocFirstLevelOnly = false;
+            }
+            // Same logic is applied for tocl2 if there is a 3rd level inside their parent l1
+            if (tocl1.querySelector('.toctree-l3')) {
+                tocl1.querySelectorAll('.toctree-l2').forEach (tocl2 => {
+                    tocl2.classList.add('o_toc_contains_l3');
+                });
+            }
+            tocl1.querySelector('a').getAttribute('href') == '#' ? tocFirstLevelAreLinks = false : '';
+        });
+        // Swap tocl1 for tocl2 if they are only links without nested toc
+        if (tocFirstLevelAreLinks && tocFirstLevelOnly) {
+          tocTreeWrapperEl?.querySelectorAll('.toctree-l1').forEach(tocl1 => {
+                tocl1.classList.replace('toctree-l1', 'toctree-l2');
+            });
+        }
     });
 
 })();

extensions/odoo_theme/static/fonts/icomoon.svg

@@ -39,5 +39,5 @@ b, strong{
 }
 
 a {
-    font-weight: $font-weight-bold;
+    font-weight: var(--o-link-fontweight, #{$font-weight-bold});
 }

extensions/odoo_theme/static/fonts/icomoon.ttf

@@ -49,6 +49,7 @@ $h6-font-size:                              $font-size-base !default;
 $font-weight-lighter:         200;
 $font-weight-light:           300;
 $font-weight-normal:          400;
+$font-weight-medium:          500;
 $font-weight-bold:            600;
 $font-weight-bolder:          700;
 

extensions/odoo_theme/static/fonts/icomoon.woff

@@ -259,11 +259,11 @@ sup { top: -.5em; }
 // Links
 
 a {
-  color: $link-color;
+  color: var(--o-link-color, #{$link-color});
   text-decoration: $link-decoration;
 
   &:hover {
-    color: $link-hover-color;
+    color: var(--o-link-hover-color, #{$link-hover-color});
     text-decoration: $link-hover-decoration;
   }
 }

extensions/odoo_theme/static/fonts/icomoon.woff2

@@ -585,28 +585,45 @@ main.container-fluid {
 }
 
 .toctree-wrapper {
+    %toctree-custom-link {
+        > a:not([href="#"]){
+            --o-link-color: #{$o-gray-color};
+            --o-link-hover-color: #{$primary};
+
+            &:after {
+                content: ' #{$i-link}';
+                @include o-inline-icon(auto, baseline, 0.7em, $font-weight-bold);
+                color: $primary;
+            }
+        }
+    }
+
     > 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;
+
+        > 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: $font-weight-bolder;
+        }
+
+        &.o_toc_contains_l2 {
+            @extend %toctree-custom-link;
+        }
     }
 
-    .toctree-l2 > a[href="#"] {
-        margin-top: 0.7rem;
-        display: inline-block;
+    .toctree-l2.o_toc_contains_l3 {
+        margin-top: map-get($spacers, 3);
+        @extend %toctree-custom-link;
     }
 
     a[href="#"] {
@@ -615,6 +632,10 @@ main.container-fluid {
         pointer-events: none;
         cursor: default;
     }
+
+    .toctree-l3 > a {
+        --o-link-fontweight: #{$font-weight-medium};
+    }
 }
 
 article.doc-body {