diff --git a/Makefile b/Makefile index 5b6bf304e..e5768df23 100644 --- a/Makefile +++ b/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..." diff --git a/conf.py b/conf.py index 032aadfe5..c98448ad3 100644 --- a/conf.py +++ b/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', ] diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html index a204bc5a3..86930dbea 100644 --- a/extensions/odoo_theme/layout.html +++ b/extensions/odoo_theme/layout.html @@ -85,18 +85,16 @@ {# Custom landing page on the root of the documentation #} {% include "layout_templates/homepage.html" %} {% else %} -
-
- -
- {% block body %} {% endblock %} -
- {# Do not show the edition link for pages without content #} - {% if github_link and not 'has_only_toc' in meta %} - Edit on GitHub - {% endif %} -
-
+
+ +
+ {% block body %} {% endblock %} +
+ {# Do not show the edition link for pages without content #} + {% if github_link and 'has_only_toc' not in meta and pagename != 'search' %} + Edit on GitHub + {% endif %} +
{% endif %}
diff --git a/extensions/odoo_theme/layout_templates/footer.html b/extensions/odoo_theme/layout_templates/footer.html index 9c46ceea2..2c73c1851 100644 --- a/extensions/odoo_theme/layout_templates/footer.html +++ b/extensions/odoo_theme/layout_templates/footer.html @@ -1,12 +1,12 @@ -
-
+
+
Get Help
Contact Support Ask the Odoo Community
-
+
Odoo diff --git a/extensions/odoo_theme/layout_templates/header.html b/extensions/odoo_theme/layout_templates/header.html index 53c0884cf..6c11dcafe 100644 --- a/extensions/odoo_theme/layout_templates/header.html +++ b/extensions/odoo_theme/layout_templates/header.html @@ -2,7 +2,7 @@
{% include "layout_templates/searchbox.html" %} diff --git a/extensions/odoo_theme/layout_templates/language_switcher.html b/extensions/odoo_theme/layout_templates/language_switcher.html index 6ec6c21db..d26b063b2 100644 --- a/extensions/odoo_theme/layout_templates/language_switcher.html +++ b/extensions/odoo_theme/layout_templates/language_switcher.html @@ -1,8 +1,18 @@
- + {% if alternate_languages|length > 0 %} + + {% else %} + + {% endif %}
    {% for alternate_language, language_code, url in alternate_languages %}
  • {{ alternate_language }}
    • diff --git a/extensions/odoo_theme/layout_templates/version_switcher.html b/extensions/odoo_theme/layout_templates/version_switcher.html index 52db73ef1..c8799749b 100644 --- a/extensions/odoo_theme/layout_templates/version_switcher.html +++ b/extensions/odoo_theme/layout_templates/version_switcher.html @@ -4,9 +4,19 @@
- + {% if alternate_versions|length > 0 %} + + {% else %} + + {% endif %}
    {% for alternate_version, url in alternate_versions %}
  • {{ alternate_version }}
    • diff --git a/extensions/odoo_theme/pygments_override.py b/extensions/odoo_theme/pygments_override.py index 1cec09da8..805244ce6 100644 --- a/extensions/odoo_theme/pygments_override.py +++ b/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 diff --git a/extensions/odoo_theme/static/fonts/Inter-italic.var.woff2 b/extensions/odoo_theme/static/fonts/Inter-italic.var.woff2 new file mode 100644 index 000000000..fe6faaa58 Binary files /dev/null and b/extensions/odoo_theme/static/fonts/Inter-italic.var.woff2 differ diff --git a/extensions/odoo_theme/static/fonts/Inter-roman.var.woff2 b/extensions/odoo_theme/static/fonts/Inter-roman.var.woff2 new file mode 100644 index 000000000..dbcd4ce78 Binary files /dev/null and b/extensions/odoo_theme/static/fonts/Inter-roman.var.woff2 differ diff --git a/extensions/odoo_theme/static/fonts/icomoon.eot b/extensions/odoo_theme/static/fonts/icomoon.eot index 46b76f911..9b0714875 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.eot and b/extensions/odoo_theme/static/fonts/icomoon.eot differ diff --git a/extensions/odoo_theme/static/fonts/icomoon.svg b/extensions/odoo_theme/static/fonts/icomoon.svg index e9ba92415..1f9a4ad0a 100644 --- a/extensions/odoo_theme/static/fonts/icomoon.svg +++ b/extensions/odoo_theme/static/fonts/icomoon.svg @@ -40,11 +40,11 @@ - + - + @@ -58,6 +58,7 @@ + @@ -83,7 +84,7 @@ - + diff --git a/extensions/odoo_theme/static/fonts/icomoon.ttf b/extensions/odoo_theme/static/fonts/icomoon.ttf index 15fff3aaf..36038e9bd 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.ttf and b/extensions/odoo_theme/static/fonts/icomoon.ttf differ diff --git a/extensions/odoo_theme/static/fonts/icomoon.woff b/extensions/odoo_theme/static/fonts/icomoon.woff index 73f450283..ed1d686e1 100644 Binary files a/extensions/odoo_theme/static/fonts/icomoon.woff and b/extensions/odoo_theme/static/fonts/icomoon.woff differ diff --git a/extensions/odoo_theme/static/scss/_iconfont.scss b/extensions/odoo_theme/static/scss/_iconfont.scss index f19d915a1..5deea8555 100644 --- a/extensions/odoo_theme/static/scss/_iconfont.scss +++ b/extensions/odoo_theme/static/scss/_iconfont.scss @@ -422,4 +422,10 @@ &:before { content: $i-edit; } +} + +.i-close { + &:before { + content: $i-close; + } } \ No newline at end of file diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index 79221bfbf..9529fc8d1 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/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); - font-weight: $fw_regular; - vertical-align: middle; + @include font-size($font-size); + font-weight: $font-weight; + vertical-align: $v-align; margin: $margin; } 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/_typography.scss b/extensions/odoo_theme/static/scss/_typography.scss index 0c3e389dc..be839388f 100644 --- a/extensions/odoo_theme/static/scss/_typography.scss +++ b/extensions/odoo_theme/static/scss/_typography.scss @@ -20,9 +20,21 @@ } @font-face { - font-family: Inter; - src: url('fonts/Inter-VariableFont_slnt,wght.ttf') format("truetype-variations"); - font-weight: 1 999; + font-family: 'Inter'; + font-weight: 100 900; + 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"); } //------------------------------------------------------------------------------ diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index 37093a440..46e098691 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/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"; //------------------------------------------------------------------------------ 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 77fea187e..65e18567b 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/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; - vertical-align: text-bottom; + margin-bottom: -2px; + 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,97 +690,89 @@ 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 { - 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-color: tint-color($brand-info, 30%); - background-color: tint-color($brand-info, 85%); - color: shade-color($brand-info, 35%); + border-color: shade-color($color-alpha, 10%); + background-color: $gray-lightest; + color: shade-color($color-alpha, 55%); > .alert-title, > h3 { - color: $brand-info - } - - > .alert-title:before, > h3:before { - content: '#{$i-lightbulb}'; + 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; - } - - > .alert-title:before, > h3:before { - content: '#{$i-warning}'; + color: shade-color($brand-warning, 10%); + &:before { + content: '#{$i-warning}'; + } } } @@ -646,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}'; + } } } @@ -670,21 +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; - margin: 2em auto; - + 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}'; } } } diff --git a/static/css/accounting.css b/static/css/accounting.css index e85de0552..4e6124271 100644 --- a/static/css/accounting.css +++ b/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; - margin: 0 .5rem; - border: 2px solid #666; - border-radius: 3px; + padding: .5rem; +} + +.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; - - text-transform: uppercase; - - 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-top: 1px solid #d5d5d5; + border-bottom: 1px solid #d5d5d5; + /*text-transform: uppercase;*/ + /*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;*/ } .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%; - color: #888 !important; + /*font-size: 90%;*/ + /*color: #8d8d8d !important;*/ } .doc-aside .highlighter-target th { - font-weight: normal; - font-size: 110%; + font-weight: 400; + /*font-size: 110%;*/ } .accounts-table .related, .doc-aside .highlighter-target .related { - background-color: transparent !important; - color: #eee !important; + /*background-color: #eee !important;*/ + color: #7A436B !important; + } .accounts-table .secondary, .doc-aside .highlighter-target .secondary { - background-color: transparent !important; - color: #aaa !important; + background-color: #eee !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; } diff --git a/static/js/accounts.js b/static/js/accounts.js index d98ce05ba..d9a3e67f1 100644 --- a/static/js/accounts.js +++ b/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"),