Merge branch '12.0-one-doc-edi' of github.com:odoo/documentation-user into 12.0-one-doc-edi

Makefile

@@ -39,6 +39,7 @@ edi: clean html
 
 static: extensions/odoo_theme/static/style.css
 	cp -r extensions/odoo_theme/static/* _build/html/_static/
+	cp -r static/* _build/html/_static/
 
 html: extensions/odoo_theme/static/style.css
 	@echo "Starting build..."

conf.py

@@ -188,7 +188,7 @@ html_js_files = [
     'js/coa-valuation-anglo-saxon.js',
 ]
 html_css_files = [
-    'css/accounting.css',
+    #'css/accounting.css',
     'css/legal.css',
 ]
 

extensions/odoo_theme/layout.html

@@ -85,18 +85,16 @@
                     {# Custom landing page on the root of the documentation #}
                     {% include "layout_templates/homepage.html" %}
                 {% else %}
-                    <div class="row">
+                    <article class="doc-body">
-                        <article class="doc-body mb-5">
                         <!-- Beacon used by the Sphinx search to know where to look for a string -->
                         <div role="main">
                             {% block body %} {% endblock %}
                         </div>
                         {# Do not show the edition link for pages without content #}
-                            {% if github_link and not 'has_only_toc' in meta %}
+                        {% if github_link and 'has_only_toc' not in meta and pagename != 'search' %}
                             <a href="{{ github_link(mode='edit') }}" class="o_git_link"><i class="i-edit"></i> Edit on GitHub</a>
                         {% endif %}
                     </article>
-                    </div>
                 {% endif %}
             </div>
             <div id="mask"></div>

extensions/odoo_theme/layout_templates/footer.html

@@ -1,12 +1,12 @@
-<div class="o_get_help row">
+<div class="o_get_help d-lg-flex text-center text-lg-start">
-    <div class="col-12 col-md-10">
+    <div class="col-12 col-lg-10">
         <h5><i class="i-o-help me-2"></i>Get Help</h5>
         <div>
             <a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary">Contact Support</a>
             <a href="" target="_blank" class="btn btn-outline-secondary">Ask the Odoo Community</a>
         </div>
     </div>
-    <div class="col-12 col-md-2">
+    <div class="col-12 col-lg-2 mt-5 mt-lg-0">
         <a href="https://www.odoo.com">
             <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" width="100" alt="Odoo"/>
         </a>

extensions/odoo_theme/layout_templates/header.html

@@ -2,7 +2,7 @@
       <a href="{{ pathto(master_doc) }}" class="o_logo">
           <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}"
                height="30" alt="Odoo"/>
-          <span class="text-dark fw_extralight">docs</span>
+          <span>docs</span>
       </a>
 </div>
 {% include "layout_templates/searchbox.html" %}

extensions/odoo_theme/layout_templates/language_switcher.html

@@ -1,8 +1,18 @@
 <div class="o_languages me-2">
 	<div class="dropdown">
-        <button class="btn border dropdown-toggle" id="languages" data-bs-toggle="dropdown">
+        {% if alternate_languages|length > 0 %}
+            <button class="btn border dropdown-toggle"
+                    id="languages"
+                    data-bs-toggle="dropdown">
                 {{ language }} {# The current language #}
             </button>
+        {% else %}
+            <button class="btn border"
+                    id="languages"
+                    disabled="">
+                {{ language }} {# The current language #}
+            </button>
+        {% endif %}
         <ul class="dropdown-menu" aria-labelledby="languages">
             {% for alternate_language, language_code, url in alternate_languages %}
                 <li><a class="dropdown-item" href="{{ url }}">{{ alternate_language }}</a></li>

extensions/odoo_theme/layout_templates/version_switcher.html

@@ -4,9 +4,19 @@
     </div>
     <div class="col-8">
         <div class="dropdown">
-            <button class="btn border dropdown-toggle" id="versions" data-bs-toggle="dropdown">
+            {% if alternate_versions|length > 0 %}
+                <button class="btn border dropdown-toggle"
+                        id="versions"
+                        data-bs-toggle="dropdown">
                     {{ version }} {# The current version #}
                 </button>
+            {% else %}
+                <button class="btn border"
+                        id="versions"
+                        disabled="">
+                    {{ version }} {# The current version #}
+                </button>
+            {% endif %}
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
                 {% for alternate_version, url in alternate_versions %}
                     <li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>

extensions/odoo_theme/pygments_override.py

@@ -15,12 +15,13 @@ class OdooStyle(Style):
     default_style = ''
 
     background_color = '#F8F8F8'
+    highlight_color = '#EAEAEA'
 
     styles = {
         Whitespace: '#bbbbbb',
         Comment: 'italic #008800',
         String: '#800080',
-        Number: 'bold #2e8b57',
+        Number: 'bold',
         Other: 'bg:#ffffe0',
         Keyword: '#2c2cff',
         Keyword.Reserved: 'bold #353580',
@@ -36,7 +37,7 @@ class OdooStyle(Style):
         Generic: '#2c2cff',
         Generic.Emph: '#008800',
         Generic.Error: '#d30202',
-        Error: 'bg:#e3d2d2 #a61717'
+        Error: 'bg:#ffe2e2 #a61717'
     }
 
 import types

extensions/odoo_theme/static/scss/_iconfont.scss

@@ -423,3 +423,9 @@
     content: $i-edit;
   }
 }
+
+.i-close {
+  &:before {
+    content: $i-close;
+  }
+}

extensions/odoo_theme/static/scss/_mixins.scss

@@ -87,12 +87,12 @@
 
 //-- add icon
 
-@mixin inline-icomoon($icon-content, $margin) {
+@mixin inline-icomoon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
     content: '#{$icon-content}';
     font-family: '#{$icomoon-font-family}' !important;
-    @include font-size(1.5rem);
+    @include font-size($font-size);
-    font-weight: $fw_regular;
+    font-weight: $font-weight;
-    vertical-align: middle;
+    vertical-align: $v-align;
     margin: $margin;
 }
 

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;

extensions/odoo_theme/static/scss/_typography.scss

@@ -20,9 +20,21 @@
 }
 
 @font-face {
-        font-family: Inter;
+      font-family: 'Inter';
-        src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format("truetype-variations");
+      font-weight: 100 900;
-        font-weight: 1 999;
+      font-display: swap;
+      font-style: normal;
+      font-named-instance: 'Regular';
+      src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
+}
+
+@font-face {
+      font-family: 'Inter';
+      font-weight: 100 900;
+      font-display: swap;
+      font-style: italic;
+      font-named-instance: 'Italic';
+      src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
 }
 
 //------------------------------------------------------------------------------

extensions/odoo_theme/static/scss/_variables.scss

@@ -160,6 +160,7 @@ $i-exercise: "\e918";
 $i-lightbulb: "\e921";
 $i-check: "\e909";
 $i-edit: "\e932";
+$i-close: "\e933";
 
 
 //------------------------------------------------------------------------------

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;
 

extensions/odoo_theme/static/style.scss

@@ -11,7 +11,7 @@ div[aria-label="related navigation"] {
 }
 
 body {
-    a {
+    a:not(:hover), a.o_logo {
         text-decoration: none !important;
     }
     dd {
@@ -46,11 +46,12 @@ header.o_main_header{
             margin-right: 3rem;
             > .o_logo {
                 img {
-                    margin-right: 0.2rem;
+                    margin-bottom: -2px;
-                    vertical-align: text-bottom;
+                    vertical-align: baseline;
                 }
                 span {
-                    font-size: 2rem;
+                    @include font-size($font-size-base);
+                    color: $o-violet;
                 }
             }
         }
@@ -67,6 +68,16 @@ header.o_main_header{
             color: $gray;
         }
     }
+
+    .highlight-link {
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        a {
+            padding: 0 1rem;
+            @include font-size($font-size-secondary);
+        }
+    }
     .o_languages {
         width: 120px;
     }
@@ -189,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;
@@ -237,7 +253,7 @@ header.o_main_header{
             font-weight: $fw_bold;
             color: $gray-darker;
             padding-left: .5rem;
-            margin-bottom: 0;
+            margin-bottom: .5rem;
         }
 
         a {
@@ -364,6 +380,8 @@ header.o_main_header{
         &.has_code_col {
 
             article.doc-body {
+                padding-left: 1rem;
+                padding-right: 1rem;
 
                 > *{
                   max-width: 100%;
@@ -384,6 +402,12 @@ header.o_main_header{
                         @include code-col();
                     }
 
+
+
+                    .o_git_link {
+                        top: .5rem;
+                        right: calc(43% + 1rem);
+                    }
                     section {
 
                         > * {
@@ -393,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;
@@ -406,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;
                             }
@@ -435,6 +458,7 @@ header.o_main_header{
                                 border-top: 0;
 
                                 div[class^="highlight"] {
+                                    border: 0;
                                     margin: 0;
                                 }
                             }
@@ -448,21 +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);
+            }
 
-            dt {
+            .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 {
                 &:before {
                     @include scroll-padding()
                 }
+            } */
+            // Search items highlighted
+            dt:target, span.highlighted {
+                background-color: lighten($color-alpha, 50%);
             }
 
             section {
@@ -478,20 +528,31 @@ 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 {
+                    text-decoration: none;
                     visibility: hidden !important;
                     &:after {
                         content: '#{$i-link}';
@@ -505,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"] {
@@ -525,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;
@@ -539,6 +597,90 @@ 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;
+            counter-reset: a;
+            > li {
+                position: relative;
+                counter-increment: a;
+                &:before {
+                    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;
+                }
+            }
+        }
 
 //------------------------------------------------------------------------------
 // Alerts
@@ -548,111 +690,102 @@ 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;
             border-radius: 0;
             border-width: 0 0 0 3px;
+            @include font-size($font-size-secondary);
 
-            > p {
+            code {
+                background-color: $white !important;
+            }
+
+            > p , > ul{
+                margin-bottom: .5rem;
+            }
+            > *:last-child {
                 margin-bottom: 0;
             }
 
             > h3, > .alert-title {
                 line-height: 1em;
                 margin: 0 0 10px 0;
-                font-size: 1rem;
+                @include font-size($font-size-base);
                 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 {
+            &.alert-info, &[class^="admonition"] {
-                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 {
                 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
+                    color: $brand-info;
-                }
+                    &:before {
-
-                > .alert-title:before, > h3:before {
                         content: '#{$i-info}';
                     }
                 }
+            }
 
             &.alert-note {
-                border-color: tint-color($brand-info, 30%);
+                border-color: shade-color($info, 30%);
-                background-color: tint-color($brand-info, 85%);
+                background-color: $gray-lightest;
-                color: shade-color($brand-info, 35%);
+                color: shade-color($info, 55%);
 
                 > .alert-title, > h3 {
-                    color: $brand-info
+                    color: shade-color($info, 45%);
-                }
+                    &:before {
-
-                > .alert-title:before, > h3:before {
                         content: '#{$i-note}';
                     }
                 }
 
-            &.alert-tip, &.tip {
-                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 {
+            &.alert-tip, &.tip {
+                border-color: shade-color($color-alpha, 10%);
+                background-color: $gray-lightest;
+                color: shade-color($color-alpha, 55%);
+
+                > .alert-title, > h3 {
+                    color: shade-color($color-alpha, 40%);
+                    &:before {
                         content: '#{$i-lightbulb}';
+                        @include font-size(1.2rem);
+                    }
                 }
             }
 
             &.alert-warning, &.warning {
-                border-color: $warning;
+                border-color: $brand-warning;
 
                 > .alert-title, > h3 {
-                    color: $brand-warning;
+                    color: shade-color($brand-warning, 10%);
-                }
+                    &:before {
-
-                > .alert-title:before, > h3:before {
                         content: '#{$i-warning}';
                     }
                 }
+            }
 
             &.alert-danger {
                 border-color: $danger;
 
                 > .alert-title, > h3 {
-                    color: $brand-danger
+                    color: darken($brand-danger,20%);
-                }
+                    &:before {
-
-                > .alert-title:before, > h3:before {
                         content: '#{$i-danger}';
                     }
                 }
+            }
 
             &.alert-exercise {
                 border-color: tint-color($doc_exercise, 30%);
@@ -670,21 +803,19 @@ header.o_main_header{
 
             &.alert-go_to {
                 display: inline-block;
-                border-color: tint-color($secondary, 60%);
+                border-color: $o-violet;
-                background-color: tint-color($secondary, 80%);
+                background-color: $gray-lightest;
-                border-width: 2px;
+                width: calc(50% - 1rem);
-                margin: 2em auto;
-
                 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}';
                 }
             }
         }

static/css/accounting.css

@@ -2,7 +2,15 @@
 main.index .toctree-wrapper > .row:first-child > .col-md-3 {
     margin: 0 !important;
 }
-
+.doc-aside {
+    border: 1px solid #d5d5d5;
+    background-color: #f8f8f8;
+    padding: 0 !important;
+    font-size: 14px;
+}
+.doc-aside p{
+    padding: .5rem;
+}
 .intro-list {
     margin-top: 1em;
 }
@@ -12,13 +20,16 @@ main.index .toctree-wrapper > .row:first-child > .col-md-3 {
 }
 
 .related {
-    background-color: hsl(219, 76%, 88%) !important;
+    background-color: hsl(317deg 16% 90%) !important;
+    transition: .3s;
 }
 .secondary {
-    background-color: hsl(219, 67%, 94%) !important;
+    background-color: hsl(180deg 67% 94%) !important;
+    transition: .3s;
 }
 .highlight-op {
-    background-color: hsl(219, 67%, 94%);
+    background-color: hsl(317deg 16% 90%) !important;
+    transition: .3s;
 }
 
 label:hover,
@@ -28,16 +39,20 @@ label:hover,
     cursor: pointer;
 }
 
-.accounts-table {
+/*.accounts-table {
     font-size: 90%;
-}
+}*/
 
 .accounts-table dl {
     margin: 0;
+    padding: .5rem 0;
 }
 
 .accounts-table h4, .accounts-table h5 {
-    font-weight: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+    padding: .5rem;
+
 }
 
 .accounts-table h4 {
@@ -50,10 +65,11 @@ label:hover,
 /* P&L & Balance Sheet columns */
 .accounts-table > div > div {
     flex: 1;
-    padding: 5px;
+    padding: .5rem;
-    margin: 0 .5rem;
+}
-    border: 2px solid #666;
+
-    border-radius: 3px;
+.accounts-table > div > div:first-child {
+    border-right: 1px solid #d5d5d5
 }
 
 /* sections */
@@ -64,19 +80,20 @@ label:hover,
 
 .accounts-table > div > div div > h5 {
     order: 99;
-
+    border-top: 1px solid #d5d5d5;
-    text-transform: uppercase;
+    border-bottom: 1px solid #d5d5d5;
-
+    /*text-transform: uppercase;*/
-    padding: 0.3em 0;
+    /*padding: 0.3em 0;*/
-    border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 10 / 3px 0 3px;
+    /*border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 10 / 3px 0 3px;*/
 }
 .accounts-table > div > div div div > h5 {
     /* slightly smaller than normal 14px h5 size */
     font-size: 12.5px;
-    border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 5;
+    /*border-image: linear-gradient(to bottom, transparent, rgb(221, 225, 231), transparent, rgb(221, 225, 231), transparent) 5 0 5;*/
 }
 .accounts-table dt {
-    font-weight: normal;
+    font-weight: 700;
+    padding: 0 .5rem;
 }
 .accounts-table dt span {
     font-style: italic;
@@ -102,20 +119,21 @@ label:hover,
 
 @media (min-width: 992px) {
     .accounts-table, .doc-aside .highlighter-target {
-        font-size: 90%;
+        /*font-size: 90%;*/
-        color: #888 !important;
+        /*color: #8d8d8d !important;*/
     }
     .doc-aside .highlighter-target th {
-        font-weight: normal;
+        font-weight: 400;
-        font-size: 110%;
+        /*font-size: 110%;*/
     }
     .accounts-table .related, .doc-aside .highlighter-target .related {
-        background-color: transparent !important;
+        /*background-color: #eee !important;*/
-        color: #eee !important;
+        color: #7A436B !important;
+
     }
     .accounts-table .secondary, .doc-aside .highlighter-target .secondary {
-        background-color: transparent !important;
+        background-color: #eee !important;
-        color: #aaa !important;
+        color: #7A436B !important;
     }
 
     .chart-of-accounts .highlight-op,
@@ -133,7 +151,9 @@ label:hover,
         background-color: #030035;
     }
 }
-
+.entries-listing {
+    padding: .5rem;
+}
 .journal-entries .entries-listing p {
     font-style: italic;
 }
@@ -141,6 +161,7 @@ label:hover,
 #reconciliation .reconciliation-example div.buttons {
     display: flex;
     justify-content: center;
+    margin-bottom: 1rem;
 }
 #reconciliation .reconciliation-example div.buttons button {
     margin: 0 0.5em;
@@ -148,40 +169,41 @@ label:hover,
 
 @keyframes reconcile {
     0% {
-        font-size: 100%;
+        opacity: 1;
         padding-top: 5px;
         padding-bottom: 5px;
-        background-color: rgba(2, 0, 31, 0);
+        background-color: transparent;
     }
     60% {
-        background-color: rgba(2, 0, 31, 1);
+        background-color: hsl(317deg 16% 90%);
     }
     80% {
-        font-size: 100%;
+        opacity: 1;
         padding-top: 5px;
         padding-bottom: 5px;
     }
     100% {
-        font-size: 0%;
+        opacity: 0;
         padding-top: 0;
         padding-bottom: 0;
         display: none;
     }
 }
 .reconcile1 .invoice1, .reconcile1 .invoice1 td {
-    animation: reconcile 5s ease-in forwards;
+    animation: reconcile 2s;
 }
 .reconcile2 .invoice2, .reconcile2 .invoice2 td {
-    animation: reconcile 5s ease-in forwards;
+    animation: reconcile 2s;
 }
 
 .invoice1.reconciled, .invoice2.reconciled {
     display: none;
 }
 
-blockquote.highlights {
+blockquote.highlights, blockquote.highlights p{
     border: none;
-    margin-bottom: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     text-align: center;
 }
 

static/js/accounts.js

@@ -13,7 +13,7 @@
     var AccountsTable = React.createClass({
         render: function () {
             return React.DOM.div(
-                { style: { marginTop: '1em' } },
+                { style: { marginTop: '0' } },
                 React.DOM.div(// P&L
                     highlight(this.props.current === 'p-l'),
                     React.DOM.h4(null, "Profit & Loss"),