/// /// This file regroups the variables that style odoo components. /// They are available in every asset bundle. /// // Contrast ratio // Global sans-serif fonts stack, defined here as we need to process // it before actually using it (to add more unicode support with the special // Odoo font for example). Adding unicode support is not done directly here as // this font can be used by the website where the unicode support is already // automatically added. $o-system-fonts: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Ubuntu, "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji") !default; // Color-scheme $o-webclient-color-scheme: dark !default; // Colors // This is BS default $o-white: #272a35; $o-black: #ffffff; $o-gray-100: #1b1d26;//main background $o-gray-200: #272a35; $o-gray-300: #3c3e4a;//card outlines, shadow, etc. $o-gray-400: #5b5e6a;// text in discuss area $o-gray-500: #606471; $o-gray-600: #4dd2c7; $o-gray-600: #a5a6a8; $o-gray-700: #d1d1d1; //text in main areas $o-gray-800: #e4e4e4; //button text, etc. $o-gray-900: #e4e4e4; //column heading text, etc. $o-grays: ( 100: $o-gray-100, 200: $o-gray-200, 300: $o-gray-300, 400: $o-gray-400, 500: $o-gray-500, 600: $o-gray-600, 700: $o-gray-700, 800: $o-gray-800, 900: $o-gray-900, ) !default; $o-community-color: #eded0d !default; $o-enterprise-color: #235c78d1 !default; $o-enterprise-action-color: #017e84 !default; $o-brand-odoo: #272a35 !default; // final header color $o-brand-primary: #235c78 !default; //wait to use this color till form button is figured out // $o-brand-primary: #664165 !default; //Odoo Enterprise default button purple $o-brand-secondary: $o-gray-700; $o-brand-lightsecondary: $o-gray-100 !default; $o-action: $o-brand-primary !default; $o-success: #28a745 !default; $o-info: #74dcf3 !default; $o-warning: #e0a12d !default; $o-danger: #ff5757 !default; // Fine-tune contextual text colors. // Overrides $theme-colors generated 'text-x' classes only. // Custom colors are set by $o-text-colors-custom $o-theme-text-colors: ( "success": #28a745, "info": #74dcf3, "warning": #fbb56a, "danger": #ff5757, )!default; .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { // color: #d1d1d1; background-color: $o-gray-200!important; // border-color: #3c3e4a #3c3e4a #FFFFFF; } .o_main_navbar { .dropdown-toggle, .o_nav_entry, .o_menu_brand { color: #e4e4e4 !important; } } .o-mail-Chatter-top:has(.o-mail-Chatter-sendMessage.active) { .o-mail-Composer { background-color: $o-gray-100 !important; } } // Opacities $o-opacity-disabled: .5 !default; $o-opacity-muted: .76 !default; $o-opacities: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, disabled: $o-opacity-disabled, muted: $o-opacity-muted, ) !default; // // Font families // $o-font-family-sans-serif: o-add-unicode-support-font($o-system-fonts) !default; // $o-font-family-monospace: o-add-unicode-support-font((SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)) !default; // $o-headings-font-family: o-add-unicode-support-font(("SF Pro Display", $o-system-fonts)) !default; // Font sizes // $o-root-font-size: 1rem !default; // // $o-font-size-base: o-to-rem(14px) !default; // $o-font-size-base-touch: o-to-rem(16px) !default; // $o-font-size-base-small: o-to-rem(13px) !default; // $o-font-size-base-smaller: o-to-rem(12px) !default; // $o-line-height-base: 1.5 !default; // This is BS default // Font weights // Caution: These values represent the desired font weights, but they may vary // depending on the user's operating system. // Because we rely on system fonts, the browser will interpret these values // based on the available fonts on the user's device. // If the exact font weight is unavailable, the browser will attempt to assign // a suitable weight using the fallowing fallback scheme. // https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#fallback_weights // $o-font-weight-normal: 400 !default; // $o-font-weight-medium: 500 !default; // $o-font-weight-bold: 700 !default; // $o-font-weight-extrabold: 800 !default; // // Font colors $o-main-text-color: $o-gray-700 !default; //text in main areas $o-main-bg-color: #f0eeee !default; $o-main-color-muted: rgba($o-main-text-color, $o-opacity-muted) !default; $o-main-headings-color: $o-gray-900 !default; //column heading text, etc. $o-main-link-color: #72d4cb !default; $o-main-favorite-color: #f3cc00 !default; $o-main-code-color: #d2317b !default; // Components colors $o-component-active-color: #ffffff !default; $o-component-active-bg: #17373b !default; $o-component-active-border: #03f9e3 !default; $o-view-background-color: #272a35 !default; $o-shadow-color: #4a3c4b !default; $o-form-lightsecondary: #cccccc !default; //not sure what this one does $o-list-footer-bg-color: transparent !default; $o-list-footer-font-weight: bold !default; // // Custom colors generation maps // $o-text-colors-custom: ( // "action": $o-action, // "favourite": $o-main-favorite-color, // ) !default; // $o-bg-colors-custom: ( // "action": $o-action, // "view": $o-view-background-color, // "favourite": $o-main-favorite-color, // ) !default; // $o-btn-custom: ( // "favourite": $o-main-favorite-color, // ) !default; // // Components (BS) // $o-border-color: var(--border-color, #{$o-gray-300}) !default; // // Forms // // o-inputs // $o-input-padding-y: 2px !default; // $o-input-padding-x: 4px !default; $o-input-border-required: #FFF !default; $o-input-hover-border-color: $o-gray-500 !default; // // Layout // // // // Extension of BS4. This is not redefining the BS4 variable directly as we only // // need the extra ones for media queries (not creating new breakpoint classes). // // Note: default BS4 values are hardcoded here while it should be possible to // // merge with the default BS variable (but we would have to take care of // // ordering & cie). // $o-extra-grid-breakpoints: ( // xs: 0, // vsm: 475px, // sm: 576px, // md: 768px, // lg: 992px, // xl: 1200px, // xxl: 1534px, // ) !default; // $o-spacer: 16px !default; // = 1rem // $o-form-group-cols: 12 !default; // $o-form-spacing-unit: 5px !default; // $o-horizontal-padding: $o-spacer !default; // $o-innergroup-rpadding: 45px !default; // $o-dropdown-hpadding: 20px !default; // $o-dropdown-vpadding: 3px !default; // $o-dropdown-max-height: 70vh !default; // $o-statbutton-height: 44px !default; // $o-statbutton-vpadding: 0px !default; // $o-statbutton-spacing: 6px !default; // $o-modal-lg: 980px !default; // $o-modal-md: 650px !default; // // Needed for having no spacing between sheet and mail body in mass_mailing: // // Different required cancel paddings between web and web_enterprise // $o-sheet-cancel-tpadding: 0px !default; // $o-statusbar-height: 33px !default; // $o-label-font-size-factor: 0.8 !default; // // == List group // $o-list-group-active-color: #aa00ff !default; // $o-list-group-active-bg: lighten(saturate(adjust-hue($o-info, 15), 1.8), 50) !default; // // == Badges // // Define a minimum width. This value is arbitrary and strictly font-related. // $o-badge-min-width: 3ch !default; // $o-nb-calendar-colors: 24 !default; // $o-base-settings-mobile-tabs-height: 40px !default; // $o-base-settings-mobile-tabs-overflow-gap: 3% !default; // $o-cp-breadcrumb-height: 30px !default; // $o-cp-button-sm-no-border-padding: 0.4rem; // $o-datepicker-week-color: #8f8f8f !default; // $o-card-body-bg-opacity: 0.9 !default; // // Border-radius // $o-border-radius: o-to-rem(4px) !default; // $o-border-radius-sm: o-to-rem(3px) !default; // $o-border-radius-lg: o-to-rem(6px) !default; // // touch // $o-touch-btn-padding: 7px 14px !default; // // == Buttons // // Map of customized values for each button. If a button's design is defined // // here, the relative values will take priority over default BS ones. // // Notice: each map's entry is passed directly to the Bootstrap mixin, meaning // // that all states must be defined, there can't be omissions. $o-btns-bs-override: () !default; $o-btns-bs-override: map-merge(( "primary": ( background: $o-brand-primary, border: $o-brand-primary, color: #FFF, hover-background: lighten($o-brand-primary, 7%), hover-border: lighten($o-brand-primary, 7%), hover-color: #FFF, active-background: lighten($o-brand-primary, 7%), active-border: lighten($o-brand-primary, 7%), active-color: #364a5d, ), "secondary": ( background: $o-gray-300, border: $o-gray-300, color: $o-gray-800, hover-background: $o-gray-400, hover-border: $o-gray-400, hover-color: $o-gray-900, active-background: $o-component-active-bg, active-border: $o-component-active-border, active-color: $o-component-active-color, ), "light": ( background: $o-gray-300, border: $o-gray-300, color: $o-gray-800, hover-background: $o-gray-200, hover-border: $o-gray-200, hover-color: $o-gray-800, active-background: $o-component-active-bg, active-border: $o-component-active-border, active-color: $o-component-active-color, ), ), $o-btns-bs-override); $o-btns-bs-outline-override: () !default; $o-btns-bs-outline-override: map-merge(( "primary": ( background: transparent, border: lighten($o-brand-primary, 20%), color: lighten($o-brand-primary, 20%), hover-background: lighten($o-brand-primary, 7%), hover-border: lighten($o-brand-primary, 7%), hover-color: #FFF, active-background: lighten($o-brand-primary, 7%), active-border: lighten($o-brand-primary, 7%), active-color: #FFF, ), "secondary": ( background: transparent, border: $o-gray-300, color: $o-gray-700, hover-background: $o-gray-400, hover-border: $o-gray-400, hover-color: $o-gray-800, active-background: $o-component-active-bg, active-border: $o-component-active-border, active-color: $o-component-active-color, ), ), $o-btns-bs-outline-override); :root { --o-stat-button-color: $o-gray-400; /* Define --o-stat-button-color as a custom property with a red color value */ } .bg-200 { --background-color: #3c3e4a !important; /* find a better way to do this */ } .table-info { --table-color: #FFF !important; --table-bg: #20364b !important; --table-border-color: #4d5e6f !important; --table-striped-bg: #243a4f !important; --table-striped-color: #FFF !important; --table-active-bg: #364a5d !important; --table-active-color: #FFF !important; --table-hover-bg: #364a5d !important; --table-hover-color: #FFF !important; color: var(--table-color) !important; border-color: var(--table-border-color) !important; } .list-group-item.active { z-index: 2 !important; color: #02c7b5 !important; background-color: #3c3e4b !important; border-color: #02c7b5 !important; } .form-check-input:checked { background-color: #02c7b5 !important; border-color: #02c7b5 !important; } .form-check:hover, .form-check:hover .form-check-input:not(:disabled) { border-color: #02c7b5 !important; } $o-list-group-active-bg: #364a5d !default; .modal:not([data-bs-backdrop="false"]) { background-color: rgba(0, 0, 0, 0.5) !important; } .o-FileViewer-header.bg-black-75 { color: #fff !important; background-color: #262A36 !important; } .o_grid_apps_menu { &__button { color: if($o-webclient-color-scheme == 'dark', $o-gray-600, $o-navbar-brand-color) !important; &:hover, &:focus { background: if($o-webclient-color-scheme == 'dark', $o-black, $o-navbar-entry-bg--hover); } } }