[IMP][CSS] Cleanup color variables
This commit is contained in:
Elisabeth Dickinson
Antoine Vandevenne (anv)
parent
778fbc37a6
commit
1e0b95df13
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user