NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP][CSS] Cleanup color variables

Browse Source
This commit is contained in:
Elisabeth Dickinson 2022-11-10 16:21:00 +01:00
parent 1fa11060ad
commit 2d977b2c48
4 changed files with 119 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
extensions/odoo_theme/static/scss/_mixins.scss
View File

@ -94,8 +94,8 @@
@mixin o-content-tab-selected { @mixin o-content-tab-selected {
font-weight: $fw_bold; font-weight: $fw_bold;
background: $doc-paper; background: $white;
border-bottom: 1px solid $doc-paper; border-bottom: 1px solid $white;
border-left: 1px solid $gray-light; border-left: 1px solid $o-gray-border;
border-right: 1px solid $gray-light; border-right: 1px solid $o-gray-border;
} }

127
extensions/odoo_theme/static/scss/_variables.scss
View File

@ -4,43 +4,6 @@ $grid-breakpoint-xxxl: 1680px;
$container-max-width-xxl:1380px; $container-max-width-xxl:1380px;
$container-max-width-xxxl: 1560px; $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 // Typography
// =============================================== // ===============================================
$font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif; $font-family-serif: 'Roboto Slab', Georgia, "Times New Roman", Times, serif;
@ -149,68 +112,42 @@ $i-close: "\e942";
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Colors // 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-light: $gray-100;
$o-violet-dark: #7A436B; $o-dark : $gray-800;
$o-violet-darkest: #64305E;
$o-inverse-lightest: #98a6b0; $o-gray-light : $gray-400;
$o-inverse-light: #8b979f; $o-gray : $gray-600;
$o-inverse: #47738f;
$o-inverse-dark: #5b7687;
$o-inverse-darker: #485761;
$color-alpha: #00A19B; $o-gray-border: $gray-400;
$color-alpha-dark: #017e84; $o-gray-bg: $o-light;
$color-alpha-light: #26d1af; $o-gray-color: $gray-900;
$color-alpha-lightest: #2aebc4;
$color-beta: #5b899e; $o-violet : #7A436B; //Odoo's #875a7b Doesn't give AAA contrast on white background
$color-beta-dark: #3d5d6b; $o-blue : #77b5d1;
$color-beta-light: #699fb8; $o-cyan: #0dcaf0;
$color-beta-lightest: #77b5d1; $o-teal : #017e84;
$o-green : #519161;
$o-orange: #f39c1e;
$o-red: #D9534F;
$o-red-light: #FF5722;
$color-gamma: #e46f78; $o-literals-bg: $gray-200;
$color-gamma-dark: #b0565c; $o-literals-border: $o-literals-bg;
$color-gamma-light: #fc7c84;
$color-gamma-lightest: #fc959c;
$color-delta: #5c5b80; $o-toc-bg: $o-gray-bg;
$color-delta-dark: #37364d; $o-toc-border: $o-toc-bg;
$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;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Misc // Misc
@ -219,7 +156,7 @@ $doc_cyan: $color-alpha;
// Header // Header
$o-header-mobile-height: 50px; $o-header-mobile-height: 50px;
$o-header-height: 80px; $o-header-height: 80px;
$o-header-white: #ffffff; $o-header-bg: $white;
$o-subheader-height: 32px; $o-subheader-height: 32px;
@ -247,4 +184,4 @@ $margin-l: $padding-l;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Accordion // Accordion
$o-accordion-bg: tint-color($doc_exercise, 90%)!default; $o-accordion-bg: $o-gray-bg!default;

32
extensions/odoo_theme/static/scss/bootstrap_overridden.scss vendored
View File

@ -3,6 +3,36 @@
// //
/* $enable-responsive-font-sizes: true; */ /* $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 // Fonts
// Font, line-height, and color for body text, headings, and more. // 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-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
$accordion-body-padding-y: 0 !default; $accordion-body-padding-y: 0 !default;
$accordion-body-padding-x: 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-bg: $o-accordion-bg;
$accordion-button-color: $accordion-color !default; $accordion-button-color: $accordion-color !default;

104
extensions/odoo_theme/static/style.scss
View File

@ -78,7 +78,7 @@ header {
z-index: 10; z-index: 10;
.o_main_header { .o_main_header {
height: $o-header-mobile-height; height: $o-header-mobile-height;
background-color: $o-header-white; background-color: $o-header-bg;
padding: 0 $padding-s; padding: 0 $padding-s;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
height: $o-header-height; height: $o-header-height;
@ -139,7 +139,7 @@ header {
padding: 0 $padding-xs; padding: 0 $padding-xs;
font-size: 1.2rem; font-size: 1.2rem;
color: $gray; color: $o-gray;
} }
.form-control { .form-control {
@ -156,7 +156,7 @@ header {
margin-bottom: 0; margin-bottom: 0;
a { a {
text-decoration: none; text-decoration: none;
color: $gray; color: $o-gray;
&:before { &:before {
@include o-position-absolute($top: 50%, $right: 3rem); @include o-position-absolute($top: 50%, $right: 3rem);
@include o-transform (translateY(-50%)) ; @include o-transform (translateY(-50%)) ;
@ -168,7 +168,7 @@ header {
} }
.o_subheader { .o_subheader {
background: $gray-lighter; background: $o-gray-bg;
height: $o-subheader-height; height: $o-subheader-height;
padding-right: $padding-s; padding-right: $padding-s;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@ -214,10 +214,10 @@ header {
left: -100%; left: -100%;
@include o-transition(all, .3s); @include o-transition(all, .3s);
padding-left: $padding-s; padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ; background-color: lighten($o-violet, 70%) ;
z-index: 10; z-index: 10;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
color: $o-violet-dark; color: $o-violet;
font-weight: $fw_regular; font-weight: $fw_regular;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
width: $o-side-nav-width; width: $o-side-nav-width;
@ -235,7 +235,7 @@ header {
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $o-violet-darker ; background-color: $o-violet;
border-radius: 0; border-radius: 0;
} }
} }
@ -255,7 +255,7 @@ header {
padding-bottom: $padding-xs; padding-bottom: $padding-xs;
> .o_toc_entry_wrapper a { > .o_toc_entry_wrapper a {
color: $o-violet-dark; color: $o-violet;
font-weight: 600; font-weight: 600;
} }
} }
@ -265,13 +265,13 @@ header {
li { li {
&.o_active_toc_entry { &.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 { &: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 { a {
&.current { &.current {
color: $o-violet-dark; color: $o-violet;
} }
} }
} }
@ -280,15 +280,15 @@ header {
ul { ul {
.o_deepest_active_toc_entry { .o_deepest_active_toc_entry {
background-color: $gray-lighter; background-color: $o-toc-bg;
border-left: 3px solid $gray-lighter; border-left: 3px solid $o-toc-border;
margin-left: -3px; margin-left: -3px;
} }
> .toctree-l1 { > .toctree-l1 {
&[class*="o_menu_"] > .o_toc_entry_wrapper > i:before { &[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
@include o-inline-icon($i-doc-apps, 0 5px 0 0); @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{ &.o_menu_applications > .o_toc_entry_wrapper > i:before{
@ -328,7 +328,7 @@ header {
a { a {
display: inline-block; display: inline-block;
padding: .4rem 0; padding: .4rem 0;
color: $gray-darker; color: $o-gray-color;
font-weight: $fw_regular; font-weight: $fw_regular;
} }
@ -399,14 +399,14 @@ header {
h3 { h3 {
text-transform: uppercase; text-transform: uppercase;
font-weight: $fw_bold; font-weight: $fw_bold;
color: $gray-darker; color: $o-gray-color;
padding-left: $padding-xs; padding-left: $padding-xs;
margin-bottom: $padding-xs; margin-bottom: $padding-xs;
} }
a { a {
font-weight: $fw_regular; font-weight: $fw_regular;
color: $gray-darker; color: $o-gray-color
} }
.o_page_toc_title { .o_page_toc_title {
@ -438,12 +438,12 @@ header {
} }
} }
// Markup Styles // Markup Styles (ex: ORM page)
.o_code, .sig [class^="sig-"] { .o_code, .sig [class^="sig-"] {
display: inline-block; display: inline-block;
color: inherit; color: inherit;
overflow-wrap: anywhere; overflow-wrap: anywhere;
background: $o-gray-bg; background: $o-literals-bg;
font-size: 0.875em; font-size: 0.875em;
font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace; font-family: 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
} }
@ -455,8 +455,8 @@ header {
font-weight: $fw_medium; font-weight: $fw_medium;
font-style: italic; font-style: italic;
padding-right: .4rem; padding-right: .4rem;
color: $color-beta-dark; color: $blue-700;
background-color: lighten($color-beta-lightest, 30%); background-color: $blue-100;
} }
} }
@ -526,7 +526,7 @@ header {
&:before { &:before {
@include o-inline-icon($i-article, 0 .2rem 0 0); @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); @include font-size($h2-font-size);
margin-top: $padding-m; margin-top: $padding-m;
padding-bottom: $padding-xs; padding-bottom: $padding-xs;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $o-gray-border;
margin-bottom: $margin-s; margin-bottom: $margin-s;
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 600; font-weight: 600;
@ -642,7 +642,7 @@ header {
a[href="#"] { a[href="#"] {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
color: $gray-darker; color: $o-gray-color;
font-weight: $fw_semibold; font-weight: $fw_semibold;
} }
} }
@ -664,7 +664,7 @@ header {
dl.py, dl.js, dl.o-definition-list { dl.py, dl.js, dl.o-definition-list {
> dd { > dd {
border-left: 3px solid $gray-lighter; border-left: 3px solid $o-literals-border;
margin: 0; margin: 0;
padding-left: $padding-s; padding-left: $padding-s;
padding-top: $padding-xs; padding-top: $padding-xs;
@ -672,7 +672,7 @@ header {
&.class em.property { &.class em.property {
font-size: $font-size-secondary; font-size: $font-size-secondary;
&:first-child { &:first-child {
border-bottom: 3px solid $gray-lighter; border-bottom: 3px solid $o-literals-border;
+ [class^=sig] { + [class^=sig] {
padding-left: .3rem; padding-left: .3rem;
} }
@ -689,7 +689,7 @@ header {
dl.field-list { dl.field-list {
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
padding: .5rem; padding: .5rem;
border: 1px solid $gray-light; border: 1px solid $o-gray-border;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
display: block; display: block;
} }
@ -719,7 +719,7 @@ header {
section { section {
> h1 { > h1 {
color: $o-violet-dark; color: $o-violet;
font-weight: $fw_bold; font-weight: $fw_bold;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
max-width: calc(100% - 120px); max-width: calc(100% - 120px);
@ -731,11 +731,11 @@ header {
> h2 { > h2 {
font-family: $font-family-serif; font-family: $font-family-serif;
color: $gray-darker; color: $o-gray-color;
margin-top: $margin-m; margin-top: $margin-m;
margin-bottom: $margin-s; margin-bottom: $margin-s;
padding-bottom: .3rem; padding-bottom: .3rem;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $o-gray-border;
} }
> h3 { > h3 {
@ -752,7 +752,7 @@ header {
} }
img { img {
border: 1px solid $gray-lighter; border: 1px solid $o-gray-border;
background: $white; background: $white;
padding: .5rem; padding: .5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -776,7 +776,7 @@ header {
.caption, .caption-text { .caption, .caption-text {
font-weight: $fw_semibold; font-weight: $fw_semibold;
color: $gray; color: $o-gray;
} }
.caption, .caption-text, .legend, .legend p { .caption, .caption-text, .legend, .legend p {
@ -807,7 +807,7 @@ header {
@include font-size($font-size-base); @include font-size($font-size-base);
margin: 0 0 0 .3rem; margin: 0 0 0 .3rem;
visibility: hidden; visibility: hidden;
color: $gray-light; color: $o-gray-light;
opacity: 0; opacity: 0;
@include o-transition(all, .1s) @include o-transition(all, .1s)
} }
@ -834,7 +834,7 @@ header {
div[class^="highlight"] { div[class^="highlight"] {
// This styles the consoles like read-the-doc's consoles // This styles the consoles like read-the-doc's consoles
overflow-x: auto; overflow-x: auto;
border: 1px solid $gray-light; border: 1px solid $o-gray-border;
margin: 1px 0 24px 0; margin: 1px 0 24px 0;
div[class^="highlight"] { div[class^="highlight"] {
@ -858,17 +858,17 @@ header {
.dfn{ .dfn{
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
line-height: 1; line-height: 1;
color: $color-beta; color: $blue-600;
font-weight: $fw_semibold; font-weight: $fw_semibold;
&:before { &:before {
content:'?'; content:'?';
display: inline-block; display: inline-block;
width: 15px; width: 15px;
height: 15px; height: 15px;
border: 2px solid $color-beta; border: 2px solid $blue-600;
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
color: $color-beta; color: $blue-600;
font-size: 12px; font-size: 12px;
font-weight: $fw_extrabold; font-weight: $fw_extrabold;
font-style: normal; font-style: normal;
@ -879,7 +879,7 @@ header {
.pq-patch em { .pq-patch em {
display: block; display: block;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background: $gray-lighter; background: $o-gray-bg;
padding: .2rem 1rem; padding: .2rem 1rem;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
font-weight: 600; font-weight: 600;
@ -925,7 +925,7 @@ header {
code, div[class^="highlight"] { code, div[class^="highlight"] {
background-color: $white !important; background-color: $white !important;
border: 1px solid $gray-light; border: 1px solid $o-gray-border;
color: inherit; color: inherit;
} }
@ -1088,7 +1088,7 @@ header {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
.o_spoiler { .o_spoiler {
border-color: tint-color($doc_exercise, 30%); border-color: tint-color($dark, 30%);
background-color: $o-accordion-bg; background-color: $o-accordion-bg;
.accordion-button { .accordion-button {
@ -1108,7 +1108,7 @@ header {
} }
code, div[class^="highlight"] { code, div[class^="highlight"] {
border-color: tint-color($doc-exercise, 50%); border-color: tint-color($dark, 50%);
&:first-child:last-child { &:first-child:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -1127,7 +1127,7 @@ header {
margin-bottom: 1rem; margin-bottom: 1rem;
div[role="tablist"] { div[role="tablist"] {
border-color: $gray-light; border-color: $o-gray-border;
display: inline-flex; display: inline-flex;
overflow-x: auto; overflow-x: auto;
overflow-y: clip; overflow-y: clip;
@ -1147,28 +1147,28 @@ header {
} }
.sphinx-tabs-tab { .sphinx-tabs-tab {
background: $gray-lightest; background: $o-gray-bg;
color: $gray-900; color: $o-gray-color;
border: 0; border: 0;
border-top: solid 1px $gray-light; border-top: solid 1px $o-gray-border;
padding: .5rem 1rem; padding: .5rem 1rem;
&:hover { &:hover {
&:not([aria-selected="true"]) { &:not([aria-selected="true"]) {
cursor: pointer; cursor: pointer;
background: tint-color($o-violet-dark, 80%); background: tint-color($o-violet, 80%);
color: $o-violet-dark; color: $o-violet;
transition: color .15s, background .15s; transition: color .15s, background .15s;
border-radius: 0; border-radius: 0;
} }
} }
&:first-of-type { &:first-of-type {
border-left: solid 1px $gray-light; border-left: solid 1px $o-gray-border;
} }
&:last-of-type { &:last-of-type {
border-right: solid 1px $gray-light; border-right: solid 1px $o-gray-border;
} }
&:focus { &:focus {
@ -1191,9 +1191,9 @@ header {
} }
.sphinx-tabs-panel { .sphinx-tabs-panel {
background: $doc-paper; background: $white;
color: $gray-900; color: $o-gray-color;
border: 1px solid $gray-light; border: 1px solid $o-gray-border;
padding: 1rem; padding: 1rem;
&:focus { &:focus {
@ -1236,7 +1236,7 @@ footer {
.o_get_help { .o_get_help {
padding-top: $padding-l; padding-top: $padding-l;
padding-bottom: $padding-l; padding-bottom: $padding-l;
background: $gray-lighter; background: $o-gray-bg;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding-left: calc(#{$o-side-nav-width} + #{$padding-l}) padding-left: calc(#{$o-side-nav-width} + #{$padding-l})
} }