forked from Techsystech/web
397 lines
12 KiB
SCSS
397 lines
12 KiB
SCSS
///
|
|
/// 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);
|
|
}
|
|
}
|
|
}
|