diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html index 6a707fa17..4769cc960 100644 --- a/extensions/odoo_theme/layout.html +++ b/extensions/odoo_theme/layout.html @@ -28,9 +28,7 @@ integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> {# TODO EDI boostrap beta cdn ??? Isn't there a stable CDN ? It looks like this cdn won't exist forever :D #} - + {% endblock %} diff --git a/extensions/odoo_theme/pygments_override.py b/extensions/odoo_theme/pygments_override.py index aa03003c0..07e472628 100644 --- a/extensions/odoo_theme/pygments_override.py +++ b/extensions/odoo_theme/pygments_override.py @@ -1,121 +1,39 @@ # -*- coding: utf-8 -*- from pygments.style import Style -from pygments.token import Keyword, Name, Comment, String, Error, Text, \ - Number, Operator, Generic, Whitespace, Punctuation, Other, Literal - - -BACKGROUND = '#272727' -CURRENT_LINE = "#41323f" -SELECTION = "#4f424c" -FOREGROUND = "#e7e9db" -COMMENT = "#776e71" -RED = "#ef6155" -ORANGE = "#f99b15" -YELLOW = "#fec418" -GREEN = "#48b685" -AQUA = "#5bc4bf" -BLUE = "#06b6ef" -PURPLE = "#815ba4" +from pygments.token import Keyword, Name, Comment, String, Error, \ + Number, Other, Whitespace, Generic class OdooStyle(Style): - """Modified version of Paraiso Dark style to avoid Pygments version - annoyances. - - ParaĆ­so (Dark) by Jan T. Sott - - Pygments template by Jan T. Sott (https://github.com/idleberg) - Created with Base16 Builder by Chris Kempson - (https://github.com/chriskempson/base16-builder). - - :copyright: Copyright 2006-2014 by the Pygments team - :license: BSD + """ + Style inspired by SAS' enhanced program editor. Note This is not + meant to be a complete style. It's merely meant to mimic SAS' + program editor syntax highlighting. + :copyright: Copyright 2006-2021 by the Pygments team, see AUTHORS. + :license: BSD, see LICENSE for details. """ default_style = '' - background_color = BACKGROUND - highlight_color = SELECTION + background_color = '#F8F8F8' styles = { - # No corresponding class for the following: - Text: FOREGROUND, - Whitespace: "", - Error: RED, - Other: "", - - Comment: COMMENT, - Comment.Multiline: "", - Comment.Preproc: "", - Comment.Single: "", - Comment.Special: "", - - Keyword: '#cb49a8', - Keyword.Constant: "", - Keyword.Declaration: "", - Keyword.Namespace: AQUA, - Keyword.Pseudo: "", - Keyword.Reserved: "", - Keyword.Type: YELLOW, - - Operator: AQUA, - Operator.Word: "", - - Punctuation: FOREGROUND, - - Name: FOREGROUND, - Name.Attribute: BLUE, - Name.Builtin: "", - Name.Builtin.Pseudo: "", - Name.Class: YELLOW, - Name.Constant: RED, - Name.Decorator: AQUA, - Name.Entity: "", - Name.Exception: RED, - Name.Function: BLUE, - Name.Property: "", - Name.Label: "", - Name.Namespace: YELLOW, - Name.Other: BLUE, - Name.Tag: '#21b799', - Name.Variable: RED, - Name.Variable.Class: "", - Name.Variable.Global: "", - Name.Variable.Instance: "", - - Number: ORANGE, - Number.Float: "", - Number.Hex: "", - Number.Integer: "", - Number.Integer.Long: "", - Number.Oct: "", - - Literal: ORANGE, - Literal.Date: GREEN, - - String: GREEN, - String.Backtick: "", - String.Char: FOREGROUND, - String.Doc: COMMENT, - String.Double: "", - String.Escape: ORANGE, - String.Heredoc: "", - String.Interpol: ORANGE, - String.Other: "", - String.Regex: "", - String.Single: "", - String.Symbol: "", - - Generic: "", - Generic.Deleted: RED, - Generic.Emph: "italic", - Generic.Error: "", - Generic.Heading: "bold " + FOREGROUND, - Generic.Inserted: GREEN, - Generic.Output: "", - Generic.Prompt: "bold " + COMMENT, - Generic.Strong: "bold", - Generic.Subheading: "bold " + AQUA, - Generic.Traceback: "", + Whitespace: '#bbbbbb', + Comment: 'italic #008800', + String: '#800080', + Number: 'bold #2e8b57', + Other: 'bg:#ffffe0', + Keyword: '#2c2cff', + Keyword.Reserved: 'bold #353580', + Keyword.Constant: 'bold', + Name.Builtin: '#2c2cff', + Name.Function: 'bold italic', + Name.Variable: 'bold #2c2cff', + Name.Attribute: '#2c2cff', + Name.Tag: "bold #008000", + Generic: '#2c2cff', + Generic.Emph: '#008800', + Generic.Error: '#d30202', + Error: 'bg:#e3d2d2 #a61717' } import types diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index 473287eaa..918b5e2ac 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -132,7 +132,7 @@ @mixin code-col(){ content: ""; background: $doc_code-bg; - @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); + /* @include box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3)); */ @include o-position-absolute($top: 3rem, $right:0); width: 43%; height: calc(100% - 3rem); diff --git a/extensions/odoo_theme/static/scss/_sphinx_basic.scss b/extensions/odoo_theme/static/scss/_sphinx_basic.scss index 74c82fc78..56253baab 100644 --- a/extensions/odoo_theme/static/scss/_sphinx_basic.scss +++ b/extensions/odoo_theme/static/scss/_sphinx_basic.scss @@ -325,12 +325,12 @@ blockquote::after { /* -- tables ---------------------------------------------------------------- */ -table.docutils { +/* table.docutils { margin-top: 10px; margin-bottom: 10px; border: 0; border-collapse: collapse; -} +} */ table.align-center { margin-left: auto; @@ -349,13 +349,13 @@ table caption span.caption-number { table caption span.caption-text { } -table.docutils td, table.docutils th { +/* table.docutils td, table.docutils th { padding: 1px 8px 1px 5px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #aaa; -} +} */ table.footnote td, table.footnote th { border: 0 !important; diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index f16f98e97..a6b795129 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -213,13 +213,13 @@ $secondary: $o-violet-dark; $brand-primary : $o-violet; $brand-success : #50AF51; $brand-info: #4B9EB6; -$brand-warning : #F0AD4E; +$brand-warning : #f39c1e; $brand-danger : #D9534F; $doc_paper_dark: $gray-lighter; $doc_paper: #ffffff; $doc_exercise: #938E94; -$doc_code-bg: $gray-darker; +$doc_code-bg: #F8F8F8; $doc_lime: #CDDC39; $doc_orange: #FF5722; $doc_cyan: $color-alpha; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index 4886ad786..6cd5b1444 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -155,43 +155,15 @@ header.o_main_header{ // Main page content //------------------------------------------------------------------------------ -// TODO EDI this fixes the scroll height issue but surely needs to be re-written -section { - padding-top: $o-header-height; - margin-top: -$o-header-height; -} -dt { - padding-top: $o-header-height; - margin-top: -$o-header-height; -} - -// TODO EDI this makes permalinks only visible on hover. Please re-write and sort - -a.headerlink { - visibility: hidden !important; - &:after { - @include inline-icomoon($i-link, 0 1rem 0 0); - visibility: hidden; - color: $gray-light; - opacity: 0; - transition: .1s - } -} - -h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { - &:hover > a.headerlink:after{ - visibility: visible; - opacity: 1; - } -} - #wrap { margin-top: $o-header-height; display: flex; justify-content: space-between; - main{ + + main { position: relative; padding-top: 3rem; + @include media-breakpoint-up(lg) { left: $o-side-nav-width; width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width}); @@ -200,17 +172,19 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { &.index, &.doc-toc, &.has_code_col { @include media-breakpoint-up(lg) { - width: calc(100vw - #{$o-side-nav-width}); + width: calc(100vw - #{$o-side-nav-width} ); } } // Homepage - &.index{ + &.index { + h2[class*="o_title_"] { color: $o-violet-dark; font-weight: $fw_bold; margin-bottom: 1rem; + &:before { @include inline-icomoon($i-o-services , 0 1rem 0 0); display: block; @@ -233,6 +207,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { content: '#{$i-advanced}'; } } + ul { padding: 1rem; > li { @@ -246,6 +221,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } } } + &.doc-toc { .toctree-wrapper { > ul { @@ -275,6 +251,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { margin-bottom: 1rem; } } + &.has_code_col { article.doc-body { @@ -371,25 +348,47 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } } - h1 { - color: $o-violet-dark; - margin-bottom: 2rem; - max-width: calc(100% - 120px); + dt { + padding-top: $o-header-height; + margin-top: -$o-header-height; } - h2 { - color: $gray-darker; - padding-bottom: .5rem; - border-bottom: 1px solid $gray-light; - /* margin-bottom: 2rem; - margin-top: 2rem; */ - } + section { + // This fixes the scroll position + padding-top: $o-header-height; + margin-top: -$o-header-height; - /* h3 { - font-size: 20px; - font-weight: $fw_regular; - color: $gray-darker; - } */ + > h1 { + color: $o-violet-dark; + font-weight: $fw_semibold; + max-width: calc(100% - 120px); + } + + > h2 { + color: $gray-darker; + padding-bottom: .5rem; + border-bottom: 1px solid $gray-light; + } + + a.headerlink { + visibility: hidden !important; + &:after { + @include inline-icomoon($i-link, 0 1rem 0 0); + visibility: hidden; + font-size: 1rem; + color: $gray-light; + opacity: 0; + transition: .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{ + visibility: visible; + opacity: 1; + } + } + } .img-fluid { @include box-shadow(0 3px 6px rgba(0, 0, 0, .16)); @@ -398,6 +397,31 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } + &:not(.has_code_col) { + div[class^="highlight"] { + border: 1px solid $gray-light; + } + } + + div[class^="highlight"] { + // This styles the consoles like read-the-doc's consoles + overflow-x: auto; + margin: 1px 0 24px 0; + + div[class^="highlight"] { + padding: 0px; + border: none; + margin: 0; + } + pre { + white-space: pre; + margin: 0; + padding: 1rem; + display: block; + overflow: auto; + } + } + //------------------------------------------------------------------------------ // Alerts //------------------------------------------------------------------------------ @@ -414,6 +438,10 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { border-radius: 0; border-width: 0 0 0 3px; + > p { + margin-bottom: 0; + } + > h3, > .alert-title { font-size: 1.642857143em; line-height: 1em; @@ -486,9 +514,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } &.alert-warning, &.warning { - border-color: lighten($brand-warning, 30%); - background-color: lighten($brand-warning, 35%); - color: darken($brand-warning, 35%); + border-color: $warning; > .alert-title, > h3 { color: $brand-warning; @@ -500,9 +526,7 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } &.alert-danger { - border-color: lighten($brand-danger, 30%); - background-color: lighten($brand-danger, 40%); - color: darken($brand-danger, 35%); + border-color: $danger; > .alert-title, > h3 { color: $brand-danger @@ -602,33 +626,6 @@ h1, h2, h3, h4, h5, h6, dt, caption, p.caption, div.code-block-caption { } } -/* .highlight { - background: $doc_code-bg; - color: $gray-light; - border-radius: $border-radius; - padding: 1rem; - margin-bottom: ($line-height-base/2)*1rem; - - pre { - margin-bottom: 0; - } -} */ -/* - -pre { - font-size: 0.8em; - color: $gray-light; - font-family: $font-family-monospace; - font-weight: $fw_semibold; - position: relative; - border: none; - max-width: 100%; - overflow: auto; - margin: 0; - margin-bottom: ($line-height-base / 2)rem; -} - */ - //------------------------------------------------------------------------------ // Footer //------------------------------------------------------------------------------ diff --git a/extensions/switcher/__init__.py b/extensions/switcher/__init__.py index 1ac17f0f1..f21be0829 100644 --- a/extensions/switcher/__init__.py +++ b/extensions/switcher/__init__.py @@ -26,7 +26,7 @@ class SwitcherDirective(Directive): def run(self): self.assert_has_content() - body = nodes.compound('\n'.join(self.content), classes=['tabs']) + body = nodes.compound('\n'.join(self.content), classes=['tab-content']) self.state.nested_parse(self.content, self.content_offset, body) titles = [] @@ -39,9 +39,9 @@ class SwitcherDirective(Directive): ) titles.append(' '.join(child['names'])) tabs = nodes.bullet_list('', *[ - nodes.list_item('', nodes.Text(title)) + nodes.list_item('', nodes.Text(title), classes=['nav-link']) for title in titles - ]) + ], classes=['nav nav-tabs'] ) node = nodes.compound('', tabs, body, classes=['content-switcher']) return [node] diff --git a/extensions/switcher/static/js/switcher.js b/extensions/switcher/static/js/switcher.js index ceaf17786..ffaec1ec4 100644 --- a/extensions/switcher/static/js/switcher.js +++ b/extensions/switcher/static/js/switcher.js @@ -6,8 +6,11 @@ document.querySelectorAll('.content-switcher').forEach(switcher => { const links = switcher.querySelectorAll('ul li'); const linksArray = Array.from(links); - const tabs = switcher.querySelectorAll('.tabs > div'); + const tabs = switcher.querySelectorAll('.tab-content > div'); + tabs.forEach(tab => { + tab.classList.add('tab-pane'); + }) function select(index) { links.forEach(link => { link.classList.remove('active');