From fe894ad110aa82a7e36dac0686c771939b31867d Mon Sep 17 00:00:00 2001 From: "Antoine Vandevenne (anv)" Date: Tue, 8 Nov 2022 14:56:03 +0100 Subject: [PATCH 01/31] [IMP] odoo_theme: add the class `o_code` on literals The SCSS that styles the `literal`, `code`, `file`, and `command` roles is excessively complex because the traduction from RST to HTML is not consistent from one role to another: some use `` elements, some have the `code` class, some wrap the literal with a `span` element. This commit sets the `o_code` class on all of these roles' parent node at translation time to allow simplifying the SCSS target. --- extensions/odoo_theme/translator.py | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/extensions/odoo_theme/translator.py b/extensions/odoo_theme/translator.py index 311f70283..8b12e6acf 100644 --- a/extensions/odoo_theme/translator.py +++ b/extensions/odoo_theme/translator.py @@ -137,6 +137,17 @@ class BootstrapTranslator(HTML5Translator): else: super().depart_title(node) + def visit_literal(self, node): + """ Override to add the class `o_code` to all `literal`, `code`, and `file` roles. """ + node['classes'].append('o_code') + return super().visit_literal(node) + + def visit_literal_strong(self, node): + """ Override to add the class `o_code` to all `command` roles. """ + if 'command' in node['classes']: + node['classes'].append('o_code') + return super().visit_literal_strong(node) + # overwritten # Ensure table class is present for tables def visit_table(self, node): From c51edecd28580f1b4c7ef2652011988f394aea5f Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Thu, 10 Nov 2022 16:03:21 +0100 Subject: [PATCH 02/31] [IMP][CSS] update literals styles (.o_code, .sig-*) --- extensions/odoo_theme/static/style.scss | 41 +++++++++++-------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index 6312b8a14..a4d339cee 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -437,22 +437,19 @@ header { padding: 0 .3rem; } } - code { + + // Markup Styles + .o_code, .sig [class^="sig-"] { display: inline-block; color: inherit; overflow-wrap: anywhere; - &:first-of-type:not(span):not(em) { - padding-left: .3rem; - } - &:last-of-type:not(em) { - padding-right: .3rem; - } - ~ .sig-paren, ~ .sig-param, ~ .optional { - @extend code; - + .sig-paren { - padding: 0 .1rem; - } - } + background: $o-gray-bg; + font-size: 0.875em; + font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; + } + + .o_code { + padding: 0 .3rem; &.file { font-family: $font-family-base; font-weight: $fw_medium; @@ -461,10 +458,14 @@ header { color: $color-beta-dark; background-color: lighten($color-beta-lightest, 30%); } + } - &:not(.file) { - color: inherit; - background: darken($doc_code-bg,3%); + .sig { + [class^="sig-"]:first-of-type, span[id] + [class^="sig-"]{ + padding-left: .3rem; + } + [class^="sig-"]:last-of-type { + padding-right: .3rem; } } @@ -661,12 +662,6 @@ header { } } - .command { - font-family: var(--bs-font-monospace); - font-weight: $fw_regular; - @extend code; - } - dl.py, dl.js, dl.o-definition-list { > dd { border-left: 3px solid $gray-lighter; @@ -683,7 +678,7 @@ header { } } &:not(:first-child) { - @extend code; + @extend .o_code; &:last-of-type { padding-right: .3rem; } From 0f911e984b1b4603692530f117d30dcc657514dc Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Thu, 10 Nov 2022 16:21:00 +0100 Subject: [PATCH 03/31] [IMP][CSS] Cleanup color variables --- .../odoo_theme/static/scss/_mixins.scss | 8 +- .../odoo_theme/static/scss/_variables.scss | 127 +++++------------- .../static/scss/bootstrap_overridden.scss | 32 ++++- extensions/odoo_theme/static/style.scss | 104 +++++++------- 4 files changed, 119 insertions(+), 152 deletions(-) diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss index fc99fa9c3..651e51a78 100644 --- a/extensions/odoo_theme/static/scss/_mixins.scss +++ b/extensions/odoo_theme/static/scss/_mixins.scss @@ -94,8 +94,8 @@ @mixin o-content-tab-selected { font-weight: $fw_bold; - background: $doc-paper; - border-bottom: 1px solid $doc-paper; - border-left: 1px solid $gray-light; - border-right: 1px solid $gray-light; + background: $white; + border-bottom: 1px solid $white; + border-left: 1px solid $o-gray-border; + border-right: 1px solid $o-gray-border; } diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index d5797e8d6..907a05995 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -4,43 +4,6 @@ $grid-breakpoint-xxxl: 1680px; $container-max-width-xxl:1380px; $container-max-width-xxxl: 1560px; -// Odoo Colours -// ============================================== -$o-violet-dark : #875A7B; -$o-violet-darker : #603c5e; - -$o-inverse-lightest : #98A6B0; -$o-inverse-light : #8B979F; -$o-inverse : #47738F; -$o-inverse-dark : #5B7687; -$o-inverse-darker : #485761; - -//== Apps' Families Colours -$color-alpha : #00A09D; -$color-alpha-dark : #18856F; -$color-alpha-light : #26D1AF; -$color-alpha-lightest : #2AEBC4; - -$color-beta : #5B899E; -$color-beta-dark : #3D5D6B; -$color-beta-light : #699FB8; -$color-beta-lightest : #77B5D1; - -$color-gamma : #E46F78; -$color-gamma-dark : #B0565C; -$color-gamma-light : #FC7C84; -$color-gamma-lightest : #FC959C; - -$color-delta : #5C5B80; -$color-delta-dark : #37364D; -$color-delta-light : #6E6D99; -$color-delta-lightest : #807FB3; - -$color-epsilon : #D5653E; -$color-epsilon-dark : #A34E2F; -$color-epsilon-light : #F07346; -$color-epsilon-lightest : #FF8D63; - // Typography // =============================================== $font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; @@ -149,68 +112,42 @@ $i-close: "\e942"; //------------------------------------------------------------------------------ // Colors //------------------------------------------------------------------------------ +//Replace bootstrap's gray values +$white: #FFFFFF; +$gray-100: #F8F8F8 !default; +$gray-200: #F2F2F2 !default; +$gray-300: #DEE2E6 !default; +$gray-400: #D5D5D5 !default; +$gray-500: #ADB5BD !default; +$gray-600: #888888 !default; +$gray-700: #707070 !default; +$gray-800: #343A40 !default; +$gray-900: #282F33 !default; -$o-violet: #875a7b; -$o-violet-dark: #7A436B; -$o-violet-darkest: #64305E; +$o-light: $gray-100; +$o-dark : $gray-800; -$o-inverse-lightest: #98a6b0; -$o-inverse-light: #8b979f; -$o-inverse: #47738f; -$o-inverse-dark: #5b7687; -$o-inverse-darker: #485761; +$o-gray-light : $gray-400; +$o-gray : $gray-600; -$color-alpha: #00A19B; -$color-alpha-dark: #017e84; -$color-alpha-light: #26d1af; -$color-alpha-lightest: #2aebc4; +$o-gray-border: $gray-400; +$o-gray-bg: $o-light; +$o-gray-color: $gray-900; -$color-beta: #5b899e; -$color-beta-dark: #3d5d6b; -$color-beta-light: #699fb8; -$color-beta-lightest: #77b5d1; +$o-violet : #7A436B; //Odoo's #875a7b Doesn't give AAA contrast on white background +$o-blue : #77b5d1; +$o-cyan: #0dcaf0; +$o-teal : #017e84; +$o-green : #519161; +$o-orange: #f39c1e; +$o-red: #D9534F; +$o-red-light: #FF5722; -$color-gamma: #e46f78; -$color-gamma-dark: #b0565c; -$color-gamma-light: #fc7c84; -$color-gamma-lightest: #fc959c; +$o-literals-bg: $gray-200; +$o-literals-border: $o-literals-bg; -$color-delta: #5c5b80; -$color-delta-dark: #37364d; -$color-delta-light: #6e6d99; -$color-delta-lightest: #807fb3; - -$color-epsilon: #d5653e; -$color-epsilon-dark: #a34e2f; -$color-epsilon-light: #f07346; -$color-epsilon-lightest: #ff8d63; - -$header-link-normal: #343a40; - -$gray-lightest: #F9F9F9; -$gray-lighter: #F2F2F2; -$gray-light: #d5d5d5; -$gray: #888888; -$gray-dark: #707070; -$gray-darker: #282F33; - -$primary: $color-alpha-dark; -$secondary: $o-violet-dark; - -$brand-primary : $o-violet; -$brand-success : #50AF51; -$brand-info: #4B9EB6; -$brand-warning : #f39c1e; -$brand-danger : #D9534F; - -$doc_paper_dark: $gray-lighter; -$doc_paper: #ffffff; -$doc_example: #519161; -$doc_exercise: #938E94; -$doc_code-bg: #F8F8F8; -$doc_lime: #CDDC39; -$doc_orange: #FF5722; -$doc_cyan: $color-alpha; +$o-toc-bg: $o-gray-bg; +$o-toc-border: $o-toc-bg; //------------------------------------------------------------------------------ // Misc @@ -219,7 +156,7 @@ $doc_cyan: $color-alpha; // Header $o-header-mobile-height: 50px; $o-header-height: 80px; -$o-header-white: #ffffff; +$o-header-bg: $white; $o-subheader-height: 32px; @@ -247,4 +184,4 @@ $margin-l: $padding-l; //------------------------------------------------------------------------------ // Accordion -$o-accordion-bg: tint-color($doc_exercise, 90%)!default; +$o-accordion-bg: $o-gray-bg!default; diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss index f20576489..5c46110c2 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -3,6 +3,36 @@ // /* $enable-responsive-font-sizes: true; */ +// Colors +$blue: $o-blue; +$purple: $o-violet; +$cyan: $o-cyan; +$red: $o-red; +$orange: $o-orange; +$green: $o-green; +$teal: $o-teal; + +$primary: $o-teal; +$secondary: $o-violet; +$light: $o-light; +$dark: $o-dark; +$success: $green; +$info: $blue; +$warning: $orange; +$danger: $red; + +$theme-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "tip": $primary, + "light": $light, + "dark": $dark, +); + // Fonts // Font, line-height, and color for body text, headings, and more. $font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default; @@ -31,7 +61,7 @@ $modal-backdrop-opacity: .7; // Accordion $accordion-body-padding-y: 0 !default; $accordion-body-padding-x: 0 !default; -$accordion-color: shade-color($doc_exercise, 35%) !default; +$accordion-color: shade-color($o-accordion-bg, 60%) !default; $accordion-bg: $o-accordion-bg; $accordion-button-color: $accordion-color !default; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index a4d339cee..da530e3df 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -78,7 +78,7 @@ header { z-index: 10; .o_main_header { height: $o-header-mobile-height; - background-color: $o-header-white; + background-color: $o-header-bg; padding: 0 $padding-s; @include media-breakpoint-up(lg) { height: $o-header-height; @@ -139,7 +139,7 @@ header { padding: 0 $padding-xs; font-size: 1.2rem; - color: $gray; + color: $o-gray; } .form-control { @@ -156,7 +156,7 @@ header { margin-bottom: 0; a { text-decoration: none; - color: $gray; + color: $o-gray; &:before { @include o-position-absolute($top: 50%, $right: 3rem); @include o-transform (translateY(-50%)) ; @@ -168,7 +168,7 @@ header { } .o_subheader { - background: $gray-lighter; + background: $o-gray-bg; height: $o-subheader-height; padding-right: $padding-s; @include media-breakpoint-up(lg) { @@ -214,10 +214,10 @@ header { left: -100%; @include o-transition(all, .3s); padding-left: $padding-s; - background-color: lighten($o-violet-dark, 70%) ; + background-color: lighten($o-violet, 70%) ; z-index: 10; @include font-size($font-size-secondary); - color: $o-violet-dark; + color: $o-violet; font-weight: $fw_regular; @include media-breakpoint-up(lg) { width: $o-side-nav-width; @@ -235,7 +235,7 @@ header { } &::-webkit-scrollbar-thumb { - background-color: $o-violet-darker ; + background-color: $o-violet; border-radius: 0; } } @@ -255,7 +255,7 @@ header { padding-bottom: $padding-xs; > .o_toc_entry_wrapper a { - color: $o-violet-dark; + color: $o-violet; font-weight: 600; } } @@ -265,13 +265,13 @@ header { li { &.o_active_toc_entry { &:not(.toctree-l1) > .o_toc_entry_wrapper i[class^="i-"]:not(.collapsed), > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i { - color: $o-violet-dark; + color: $o-violet; } } a { &.current { - color: $o-violet-dark; + color: $o-violet; } } } @@ -280,15 +280,15 @@ header { ul { .o_deepest_active_toc_entry { - background-color: $gray-lighter; - border-left: 3px solid $gray-lighter; + background-color: $o-toc-bg; + border-left: 3px solid $o-toc-border; margin-left: -3px; } > .toctree-l1 { &[class*="o_menu_"] > .o_toc_entry_wrapper > i:before { @include o-inline-icon($i-doc-apps, 0 5px 0 0); - color: $o-violet-dark; + color: $o-violet; } &.o_menu_applications > .o_toc_entry_wrapper > i:before{ @@ -328,7 +328,7 @@ header { a { display: inline-block; padding: .4rem 0; - color: $gray-darker; + color: $o-gray-color; font-weight: $fw_regular; } @@ -399,14 +399,14 @@ header { h3 { text-transform: uppercase; font-weight: $fw_bold; - color: $gray-darker; + color: $o-gray-color; padding-left: $padding-xs; margin-bottom: $padding-xs; } a { font-weight: $fw_regular; - color: $gray-darker; + color: $o-gray-color } .o_page_toc_title { @@ -438,12 +438,12 @@ header { } } - // Markup Styles + // Markup Styles (ex: ORM page) .o_code, .sig [class^="sig-"] { display: inline-block; color: inherit; overflow-wrap: anywhere; - background: $o-gray-bg; + background: $o-literals-bg; font-size: 0.875em; font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; } @@ -455,8 +455,8 @@ header { font-weight: $fw_medium; font-style: italic; padding-right: .4rem; - color: $color-beta-dark; - background-color: lighten($color-beta-lightest, 30%); + color: $blue-700; + background-color: $blue-100; } } @@ -526,7 +526,7 @@ header { &:before { @include o-inline-icon($i-article, 0 .2rem 0 0); - color: $gray-light; + color: $o-gray-light; } } } @@ -624,7 +624,7 @@ header { @include font-size($h2-font-size); margin-top: $padding-m; padding-bottom: $padding-xs; - border-bottom: 1px solid $gray-light; + border-bottom: 1px solid $o-gray-border; margin-bottom: $margin-s; font-size: 1.2rem; font-weight: 600; @@ -642,7 +642,7 @@ header { a[href="#"] { pointer-events: none; cursor: default; - color: $gray-darker; + color: $o-gray-color; font-weight: $fw_semibold; } } @@ -664,7 +664,7 @@ header { dl.py, dl.js, dl.o-definition-list { > dd { - border-left: 3px solid $gray-lighter; + border-left: 3px solid $o-literals-border; margin: 0; padding-left: $padding-s; padding-top: $padding-xs; @@ -672,7 +672,7 @@ header { &.class em.property { font-size: $font-size-secondary; &:first-child { - border-bottom: 3px solid $gray-lighter; + border-bottom: 3px solid $o-literals-border; + [class^=sig] { padding-left: .3rem; } @@ -689,7 +689,7 @@ header { dl.field-list { @include font-size($font-size-secondary); padding: .5rem; - border: 1px solid $gray-light; + border: 1px solid $o-gray-border; @include media-breakpoint-down(lg) { display: block; } @@ -719,7 +719,7 @@ header { section { > h1 { - color: $o-violet-dark; + color: $o-violet; font-weight: $fw_bold; @include media-breakpoint-up(lg) { max-width: calc(100% - 120px); @@ -731,11 +731,11 @@ header { > h2 { font-family: $font-family-serif; - color: $gray-darker; + color: $o-gray-color; margin-top: $margin-m; margin-bottom: $margin-s; padding-bottom: .3rem; - border-bottom: 1px solid $gray-light; + border-bottom: 1px solid $o-gray-border; } > h3 { @@ -752,7 +752,7 @@ header { } img { - border: 1px solid $gray-lighter; + border: 1px solid $o-gray-border; background: $white; padding: .5rem; margin-bottom: 1rem; @@ -776,7 +776,7 @@ header { .caption, .caption-text { font-weight: $fw_semibold; - color: $gray; + color: $o-gray; } .caption, .caption-text, .legend, .legend p { @@ -807,7 +807,7 @@ header { @include font-size($font-size-base); margin: 0 0 0 .3rem; visibility: hidden; - color: $gray-light; + color: $o-gray-light; opacity: 0; @include o-transition(all, .1s) } @@ -834,7 +834,7 @@ header { div[class^="highlight"] { // This styles the consoles like read-the-doc's consoles overflow-x: auto; - border: 1px solid $gray-light; + border: 1px solid $o-gray-border; margin: 1px 0 24px 0; div[class^="highlight"] { @@ -858,17 +858,17 @@ header { .dfn{ @include font-size($font-size-secondary); line-height: 1; - color: $color-beta; + color: $blue-600; font-weight: $fw_semibold; &:before { content:'?'; display: inline-block; width: 15px; height: 15px; - border: 2px solid $color-beta; + border: 2px solid $blue-600; border-radius: 20px; text-align: center; - color: $color-beta; + color: $blue-600; font-size: 12px; font-weight: $fw_extrabold; font-style: normal; @@ -879,7 +879,7 @@ header { .pq-patch em { display: block; border-radius: 4px 4px 0 0; - background: $gray-lighter; + background: $o-gray-bg; padding: .2rem 1rem; @include font-size($font-size-secondary); font-weight: 600; @@ -925,7 +925,7 @@ header { code, div[class^="highlight"] { background-color: $white !important; - border: 1px solid $gray-light; + border: 1px solid $o-gray-border; color: inherit; } @@ -1095,7 +1095,7 @@ header { //------------------------------------------------------------------------------ .o_spoiler { - border-color: tint-color($doc_exercise, 30%); + border-color: tint-color($dark, 30%); background-color: $o-accordion-bg; .accordion-button { @@ -1115,7 +1115,7 @@ header { } code, div[class^="highlight"] { - border-color: tint-color($doc-exercise, 50%); + border-color: tint-color($dark, 50%); &:first-child:last-child { margin-bottom: 0; @@ -1134,7 +1134,7 @@ header { margin-bottom: 1rem; div[role="tablist"] { - border-color: $gray-light; + border-color: $o-gray-border; display: inline-flex; overflow-x: auto; overflow-y: clip; @@ -1154,28 +1154,28 @@ header { } .sphinx-tabs-tab { - background: $gray-lightest; - color: $gray-900; + background: $o-gray-bg; + color: $o-gray-color; border: 0; - border-top: solid 1px $gray-light; + border-top: solid 1px $o-gray-border; padding: .5rem 1rem; &:hover { &:not([aria-selected="true"]) { cursor: pointer; - background: tint-color($o-violet-dark, 80%); - color: $o-violet-dark; + background: tint-color($o-violet, 80%); + color: $o-violet; transition: color .15s, background .15s; border-radius: 0; } } &:first-of-type { - border-left: solid 1px $gray-light; + border-left: solid 1px $o-gray-border; } &:last-of-type { - border-right: solid 1px $gray-light; + border-right: solid 1px $o-gray-border; } &:focus { @@ -1198,9 +1198,9 @@ header { } .sphinx-tabs-panel { - background: $doc-paper; - color: $gray-900; - border: 1px solid $gray-light; + background: $white; + color: $o-gray-color; + border: 1px solid $o-gray-border; padding: 1rem; &:focus { @@ -1243,7 +1243,7 @@ footer { .o_get_help { padding-top: $padding-l; padding-bottom: $padding-l; - background: $gray-lighter; + background: $o-gray-bg; @include media-breakpoint-up(lg) { padding-left: calc(#{$o-side-nav-width} + #{$padding-l}) } From 5b6705feccb612e305ca8d74ee6c540730f28e88 Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Thu, 15 Dec 2022 13:46:18 +0100 Subject: [PATCH 04/31] [IMP][CSS] Cleanup admonitions (alerts) --- .../static/scss/bootstrap_overridden.scss | 7 + extensions/odoo_theme/static/style.scss | 161 ++++++------------ extensions/odoo_theme/translator.py | 13 +- 3 files changed, 64 insertions(+), 117 deletions(-) diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss index 5c46110c2..0535180cd 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -70,3 +70,10 @@ $accordion-button-bg: $accordion-bg !default; $accordion-button-active-bg: $accordion-button-bg !default; $accordion-icon-transform: rotate(0deg) !default; + +//Alert +$alert-border-width: 3px; +$alert-border-scale: 0; +$alert-border-radius: 0 3px 3px 0; +$alert-bg-scale: -87%; +$alert-color-scale: 40%; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index da530e3df..0962dda2f 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -906,21 +906,8 @@ header { //------------------------------------------------------------------------------ // Alerts //------------------------------------------------------------------------------ -// alert-info -// alert-note -// alert-tip -// alert-warning -// alert-danger -// alert-example -// alert-exercise -// alert-go_to - .alert { - position: relative; - display: inline-block; - border-radius: 0; - border-width: 0 0 0 3px; - width: 100%; + border-width: 0 0 0 $alert-border-width; @include font-size($font-size-secondary); code, div[class^="highlight"] { @@ -932,6 +919,7 @@ header { > p , > ul { margin-bottom: .5rem; } + > *:last-child { margin-bottom: 0; } @@ -950,133 +938,88 @@ header { } } - &.alert-info, &[class^="admonition"] { - border-color: tint-color($brand-info, 30%); - background-color: tint-color($brand-info, 85%); - color: shade-color($brand-info, 35%); + // Custom Admonitions + &[class^="admonition"] { + @extend .alert-info; - > .alert-title, > h3 { - color: $brand-info; - &:before { - content: '#{$i-info}'; - } + code, div[class^="highlight"] { + border-color: tint-color($info, 30%); + } + } + + // Note + &.alert-primary { + > .alert-title:before, > h3:before { + content: '#{$i-note}'; } code, div[class^="highlight"] { - border-color: tint-color($brand-info, 30%); + border-color: tint-color($primary, 30%); } } - &.alert-note { - border-color: shade-color($info, 30%); - background-color: $gray-lightest; - color: shade-color($info, 55%); - - > .alert-title, > h3 { - color: shade-color($info, 45%); - &:before { - content: '#{$i-note}'; - } + // See Also + &.alert-secondary { + > .alert-title:before, > h3:before { + content: '#{$i-arrow-right}'; } - } - &.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: $brand-warning; - - > .alert-title, > h3 { - color: shade-color($brand-warning, 10%); - &:before { - content: '#{$i-warning}'; - } + a { + color: $secondary; } code, div[class^="highlight"] { - border-color: tint-color($brand-warning, 50%); + border-color: tint-color($secondary, 50%); } } - &.alert-danger { - border-color: $danger; - - > .alert-title, > h3 { - color: darken($brand-danger, 20%); - - &:before { - content: '#{$i-danger}'; - } - } - - code, div[class^="highlight"] { - border-color: tint-color($brand-danger, 50%); + // Tip + &.alert-tip { + background-color: $o-gray-bg; + > .alert-title:before, > h3:before { + content: '#{$i-lightbulb}'; + @include font-size(1.2rem); } } - &.alert-example { - border-color: tint-color($doc_example, 30%); - background-color: tint-color($doc_example, 90%); - color: shade-color($doc_example, 35%); - - > .alert-title, > h3 { - color: shade-color($doc_example, 35%); - } - + // Example + &.alert-success { > .alert-title:before, > h3:before { content: '#{$i-knowledge}'; } code, div[class^="highlight"] { - border-color: tint-color($doc-example, 50%); + border-color: tint-color($success, 50%); } } - &.alert-exercise { - border-color: tint-color($doc_exercise, 30%); - background-color: tint-color($doc_exercise, 90%); - color: shade-color($doc_exercise, 35%); - - > .alert-title, > h3 { - color: shade-color($doc_exercise, 35%); + // Warning & Important + &.alert-warning { + > .alert-title:before, > h3:before { + content: '#{$i-warning}'; } + code, div[class^="highlight"] { + border-color: tint-color($warning, 50%); + } + } + // Danger + &.alert-danger { + > .alert-title:before, > h3:before { + content: '#{$i-danger}'; + } + code, div[class^="highlight"] { + border-color: tint-color($danger, 50%); + } + } + + // Exercises + &.alert-dark { > .alert-title:before, > h3:before { content: '#{$i-exercise}'; } code, div[class^="highlight"] { - border-color: tint-color($doc-exercise, 50%); - } - } - - &.alert-go_to { - border-color: $o-violet; - background-color: $gray-lightest; - - a { - color: $o-violet-dark; - } - - > .alert-title, > h3 { - color: $o-violet-dark; - } - - > .alert-title:before, > h3:before { - content: '#{$i-arrow-right}'; - } - code, div[class^="highlight"] { - border-color: tint-color($o-violet, 50%); + border-color: tint-color($dark, 50%); } } } diff --git a/extensions/odoo_theme/translator.py b/extensions/odoo_theme/translator.py index 8b12e6acf..0a46f29eb 100644 --- a/extensions/odoo_theme/translator.py +++ b/extensions/odoo_theme/translator.py @@ -10,15 +10,12 @@ from sphinx.writers.html5 import HTML5Translator # └── Odoo Translator ADMONITION_MAPPING = { - # ???: 'alert-success', - - 'note': 'alert-note', - - 'hint': 'alert-info', +# The alert classes have been replaced by default BS classes to reduce number of scss lines. + 'note': 'alert-primary', 'tip': 'alert-tip', - 'seealso': 'alert-go_to', + 'seealso': 'alert-secondary', 'warning': 'alert-warning', 'attention': 'alert-warning', @@ -28,8 +25,8 @@ ADMONITION_MAPPING = { 'danger': 'alert-danger', 'error': 'alert-danger', - 'example': 'alert-example', - 'exercise': 'alert-exercise', + 'example': 'alert-success', + 'exercise': 'alert-dark', } From f35e8482f84ff1ce61d3ea6d08858d80eb18fc62 Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Thu, 15 Dec 2022 16:40:16 +0100 Subject: [PATCH 05/31] [IMP][CSS] Cleanup font variables --- .../odoo_theme/static/scss/_variables.scss | 4 +--- .../static/scss/bootstrap_overridden.scss | 6 +++--- extensions/odoo_theme/static/style.scss | 18 +++++++++--------- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss index 907a05995..6d4c7c87a 100644 --- a/extensions/odoo_theme/static/scss/_variables.scss +++ b/extensions/odoo_theme/static/scss/_variables.scss @@ -6,7 +6,7 @@ $container-max-width-xxxl: 1560px; // Typography // =============================================== -$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; +$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; $fw_extralight: 200; $fw_light: 300; @@ -17,8 +17,6 @@ $fw_bold: 700; $fw_extrabold: 800; $fw_black: 900; -$font-size-secondary: .875rem; - //------------------------------------------------------------------------------ // icomoon icons //------------------------------------------------------------------------------ diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss index 0535180cd..ca6e9a978 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -35,18 +35,18 @@ $theme-colors: ( // Fonts // Font, line-height, and color for body text, headings, and more. -$font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default; +$font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default; $h1-font-size: 1.875rem; $h2-font-size: 1.5rem; $h3-font-size: 1.125rem; $h4-font-size: 1rem; $h5-font-size: 1rem; -$h6-font-size: $font-size-secondary; +$h6-font-size: $font-size-sm; // Buttons // For each of Bootstrap's buttons, define text, background, and border color. -$btn-font-size: $font-size-secondary; +$btn-font-size: $font-size-sm; $btn-font-weight: $fw_semibold; $btn-focus-box-shadow: 0 0 0 transparent; $btn-close-bg: url('data:image/svg+xml,'); diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index 0962dda2f..26eda3498 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -145,7 +145,7 @@ header { .form-control { @include media-breakpoint-down(lg) { padding: 0.275rem 0.5rem; - font-size: $font-size-secondary; + font-size: $font-size-sm; } } @@ -216,7 +216,7 @@ header { padding-left: $padding-s; background-color: lighten($o-violet, 70%) ; z-index: 10; - @include font-size($font-size-secondary); + @include font-size($font-size-sm); color: $o-violet; font-weight: $fw_regular; @include media-breakpoint-up(lg) { @@ -374,7 +374,7 @@ header { aside.o_page_toc { color: $body-color; - @include font-size($font-size-secondary); + @include font-size($font-size-sm); &:not(.o_in_nav_toc) { display: none; @include media-breakpoint-up(xl) { @@ -652,7 +652,7 @@ header { position: relative; .o_git_link { - @include font-size($font-size-secondary); + @include font-size($font-size-sm); @include o-position-absolute($top: 0px, $right: $margin-s); @include media-breakpoint-up(lg) { @include o-position-absolute($top: 10px, $right: $margin-s); @@ -670,7 +670,7 @@ header { padding-top: $padding-xs; } &.class em.property { - font-size: $font-size-secondary; + font-size: $font-size-sm; &:first-child { border-bottom: 3px solid $o-literals-border; + [class^=sig] { @@ -687,7 +687,7 @@ header { } dl.field-list { - @include font-size($font-size-secondary); + @include font-size($font-size-sm); padding: .5rem; border: 1px solid $o-gray-border; @include media-breakpoint-down(lg) { @@ -856,7 +856,7 @@ header { } .dfn{ - @include font-size($font-size-secondary); + @include font-size($font-size-sm); line-height: 1; color: $blue-600; font-weight: $fw_semibold; @@ -881,7 +881,7 @@ header { border-radius: 4px 4px 0 0; background: $o-gray-bg; padding: .2rem 1rem; - @include font-size($font-size-secondary); + @include font-size($font-size-sm); font-weight: 600; } @@ -908,7 +908,7 @@ header { //------------------------------------------------------------------------------ .alert { border-width: 0 0 0 $alert-border-width; - @include font-size($font-size-secondary); + @include font-size($font-size-sm); code, div[class^="highlight"] { background-color: $white !important; From e94a132e1aae75bc0b4954dbad52feadd39ea8fa Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Fri, 16 Dec 2022 10:15:02 +0100 Subject: [PATCH 06/31] [IMP][CSS] Rescale heading fonts --- .../odoo_theme/layout_templates/footer.html | 2 +- .../odoo_theme/layout_templates/page_toc.html | 2 +- .../static/scss/bootstrap_overridden.scss | 19 +++++++++++-------- extensions/odoo_theme/static/style.scss | 7 +++---- 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/extensions/odoo_theme/layout_templates/footer.html b/extensions/odoo_theme/layout_templates/footer.html index 27de05dc6..d60af502e 100644 --- a/extensions/odoo_theme/layout_templates/footer.html +++ b/extensions/odoo_theme/layout_templates/footer.html @@ -1,6 +1,6 @@
-
{{ _("Get Help") }}
+

{{ _("Get Help") }}

{{ _("Contact Support") }} {{ _("Ask the Odoo Community") }} diff --git a/extensions/odoo_theme/layout_templates/page_toc.html b/extensions/odoo_theme/layout_templates/page_toc.html index c73d9f43e..cd5a288ad 100644 --- a/extensions/odoo_theme/layout_templates/page_toc.html +++ b/extensions/odoo_theme/layout_templates/page_toc.html @@ -1,4 +1,4 @@
-

{{ _("On this page") }}

+
{{ _("On this page") }}
{{ toc }} {# this is the page TOC (or local toc) #}
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss index ca6e9a978..19e7ae9ee 100644 --- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss +++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss @@ -36,19 +36,22 @@ $theme-colors: ( // Fonts // Font, line-height, and color for body text, headings, and more. $font-family-sans-serif: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default; -$h1-font-size: 1.875rem; -$h2-font-size: 1.5rem; -$h3-font-size: 1.125rem; -$h4-font-size: 1rem; -$h5-font-size: 1rem; -$h6-font-size: $font-size-sm; + +// Change scale from Major Third to Major Second (ref: https://type-scale.com/) +$font-size-base: 1rem; +$h1-font-size: $font-size-base * 1.802 !default; +$h2-font-size: $font-size-base * 1.602 !default; +$h3-font-size: $font-size-base * 1.424 !default; +$h4-font-size: $font-size-base * 1.266 !default; +$h5-font-size: $font-size-base * 1.125 !default; +$h6-font-size: $font-size-base !default; // Buttons // For each of Bootstrap's buttons, define text, background, and border color. -$btn-font-size: $font-size-sm; +$btn-font-size: .875rem; $btn-font-weight: $fw_semibold; -$btn-focus-box-shadow: 0 0 0 transparent; +$btn-close-focus-shadow: 0 0 0 0 transparent; $btn-close-bg: url('data:image/svg+xml,'); $btn-close-width: 2rem; diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index 26eda3498..7ab2df43f 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -396,7 +396,7 @@ header { } } - h3 { + h5 { text-transform: uppercase; font-weight: $fw_bold; color: $o-gray-color; @@ -438,7 +438,7 @@ header { } } - // Markup Styles (ex: ORM page) + // Literals Styles (ex: https://www.odoo.com/documentation/master/developer/reference/backend/orm.html#fields) .o_code, .sig [class^="sig-"] { display: inline-block; color: inherit; @@ -1191,9 +1191,8 @@ footer { padding-left: calc(#{$o-side-nav-width} + #{$padding-l}) } - h5 { + h4 { color: $secondary; - font-size: 20px; font-weight: $fw_bold; margin-bottom: 1.5rem; } From 950b714c92d05ad8ee6f924dda989712decfe752 Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Fri, 16 Dec 2022 11:29:02 +0100 Subject: [PATCH 07/31] [IMP][CSS] Revamp modal to use all BS classes and variables --- extensions/odoo_theme/static/js/layout.js | 9 ++++---- .../static/scss/bootstrap_overridden.scss | 15 +++++++++++++ extensions/odoo_theme/static/style.scss | 22 ------------------- 3 files changed, 20 insertions(+), 26 deletions(-) diff --git a/extensions/odoo_theme/static/js/layout.js b/extensions/odoo_theme/static/js/layout.js index ada1b203c..351eeb9b9 100644 --- a/extensions/odoo_theme/static/js/layout.js +++ b/extensions/odoo_theme/static/js/layout.js @@ -6,18 +6,19 @@ let imageModalId = 0; content.querySelectorAll('img').forEach(image => { // Enforce the presence of the `img-fluid` class on all images. - image.classList.add('img-fluid'); + image.classList.add('img-fluid', 'img-thumbnail'); // Add a modal to each image that does not explicitly block it and has no target. if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') { const modalContainer = document.createElement('div'); - modalContainer.classList.add('o_image_modal'); modalContainer.innerHTML = `
{%- include "layout_templates/searchbox.html" %} - {{ _('Try Odoo for FREE') }} + {{ _('Try Odoo for FREE') }}
diff --git a/extensions/odoo_theme/layout_templates/homepage.html b/extensions/odoo_theme/layout_templates/homepage.html index b6631c478..747786607 100644 --- a/extensions/odoo_theme/layout_templates/homepage.html +++ b/extensions/odoo_theme/layout_templates/homepage.html @@ -7,7 +7,7 @@

{{ _("User Docs") }}

{{ _("Discover our guide to help you use and configure the platform, by applications.") }}

-
{{ _("Top Apps") }}
+
{{ _("Top Apps") }}