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}) }