//Variables $one__font: "Odoo Unicode Support Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; //Colors $one__light: #FFF !default; $one__primary: #386aeb !default; $one__sidebar-color-hover: #274aa5 !important; $one__sidebar-border: #386aeb !important; $one__sidebar-color: #386aeb !important; $one__sidebar_text: #fff !default; $one__primary-light: #ebf0fd !default; $one__primary-dark: #274aa5 !important; $one__light-font-primary: #1f2631 !important; $one__light-font-secondary: #575757 !important; $one__hover-bkg-light: #f5f5f5 !important; $one__border-light: #d4d4d4 !important; $one__info: #454555 !important; //Border Style $one__border: 0px; $one__button-padding: auto; //Misc $transition-normal: all 0.4s linear !default; $transition-fast: all 0.2s linear !default; //Paths $dots_menu_toggled: url('/vista_backend_theme/static/src/img/icons/dots-menu-primary.png'); //Misc $transition-normal: all 0.4s linear !default; //Animations @mixin c_fadeBackgroundOut($name, $s_opacity, $e_opacity, $r, $g, $b){ @keyframes #{$name}{ 0%{ background-color: rgba($r, $g, $b, $s_opacity); } 100%{ background-color: rgba($r, $g, $b, $e_opacity); } } } body{ background-color: $one__light !important; font-family: $one__font; } //NAVBAR .o_main_navbar { -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important; box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important; background-color: $one__light; border-bottom: none; -moz-box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.5) 0px 6px 6px; -webkit-box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.5) 0px 6px 6px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.5) 0px 6px 6px; color: $one__light-font-primary; //height: 60px !important; } @media (min-width: 768px) { .o_menu_systray .o-dropdown.dropdown > .o-dropdown--menu { top: 46px !important; left: 85% !important; right: 20px !important; } } .top_heading a.o_menu_brand{ font-weight: bolder !important; } .o_menu_systray > li{ font-size: 1.5rem !important; } .o_menu_systray > *{ margin-right: 15px; &:last-child{ margin-right: 0px; } @media (max-width: 767.98px) { margin-right: 0px !important; &:last-child{ margin-right: 0px; } } } @media (max-width: 767.98px) { .o_user_menu .o_user_avatar { margin-right: 0px !important; } } li.o_MessagingMenu.o-is-open { background-color: $one__hover-bkg-light; border-bottom: none !important; } .o_mail_systray_item .o_notification_counter{ background-color: $one__primary !important; color: $one__light !important; } .o_MessagingMenu_counter { margin-left: -12px !important; } .o_notification_counter{ margin-left: -18px !important; } .o_NotificationGroup_date{ color: $one__primary !important } .o_menu_sections > li > a, .o_main_navbar > li > label{ color: $one__light-font-primary; display: block !important; &:hover{ background-color: $one__hover-bkg-light; //border-bottom: 1px solid $one__border-light; } } .o_switch_company_menu > a{ color: $one__light-font-primary; font-size: 1.8rem !important } .oe_topbar_name{ color: $one__light-font-primary; @media (max-width: 576px) { display: none; } } .o_main_navbar > a:hover, .o_main_navbar > a:focus, .o_main_navbar > button:hover, .o_main_navbar > button:focus { background-color: $one__hover-bkg-light; //border-bottom: 1px solid $one__border-light; } .o_MessagingMenu, .o_mail_systray_item{ a{ color: $one__light-font-primary; } } .o_MessagingMenu_counter, .o_notification_counter { background-color: $one__primary; color: $one__light; } .o_main_navbar .show .dropdowdropdown-toggle, .o_main_navbar .show .dropdown-toggle { background-color: $one__hover-bkg-light; //border-bottom: 1px solid $one__border-light; } .o_main_navbar .o_user_menu .oe_topbar_avatar { height: 32px !important; width: 32px !important; } .oe_topbar_name{ color: $one__light-font-primary !important; } .o_dashboards .o_website_dashboard div.o_box h2, .o_dashboards .o_website_dashboard div.o_box h4 { color: $one__primary !important; } .o_control_panel { padding: 2.5rem 1rem !important; margin-bottom: 1.5rem !important; border-bottom: 1px solid $one__border-light; width: 98%; margin-left: auto; margin-right: auto; } .o_form_view .oe_button_box .oe_stat_button .o_button_icon { color: $one__primary; } .o_control_panel .breadcrumb{ background-color: none !important; padding: auto !important } .o_control_panel .breadcrumb > li, .breadcrumb-item > a{ font-size: 2rem !important; color: $one__light-font-secondary; max-width: 100% !important; } .o_control_panel > div{ display: flex; justify-content: space-between; } .breadcrumb-item.active{ $color: $one__light-font-primary; } .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::before { border-left-color: $one__primary !important; } .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled::after, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::before { border-left-color: none !important; } .o_statusbar_status > .o_arrow_button.btn-secondary{ background-color: $one__light !important; } .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled { border-left: none !important; } // .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::before, // .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(:first-child)::after { // background-color: $one__light !important; // } .o_content{ width: 98%; margin-left: auto; margin-right: auto; } .top_heading{ display: flex; align-items: center; ul.o_menu_apps{ list-style: none; margin: 0 0.8rem 0 0; padding: 0px; } li.dropdown{ list-style: none; } a.o_menu_brand{ color: $one__light-font-primary; font-size: 1.5rem !important; } } .o_menu_sections, .o_menu_systray{ display: flex; align-items: center; list-style: none !important; //height: 60px !important; li{ margin-right: 1rem; &:last-child{ margin-right: 0 !important; } } .o-dropdown.dropdown > .o-dropdown--menu{ border-color: transparent; } } .o_main_navbar .dropdown .dropdown-toggle, .o_main_navbar .o_menu_sections .dropdown .dropdown-toggle, .o_nav_entry { color: $one__light-font-primary; } .o_menu_systray, .o_menu_sections{ li{ position: relative !important; a.o_MessagingMenu_toggler, a.dropdown-toggle{ display: flex !important; align-items: center !important; height: 60px !important; padding: 0px 7.5px; img{ margin-right: 0.8rem; transform: none !important; } } } } .o_main_navbar .dropdown-menu.show { min-width: auto !important; } .o_form_view .o_form_uri > span:first-child { color: $one__primary; } .o_onboarding_container{ margin-top: -1.575rem !important; } .o_loading_indicator.o_loading > span { background: $one__primary !important; } .o_menu_systray > li > a > span.fa{ color: $one__light-font-primary; font-size: 1.9rem !important; margin: auto 11px !important; } //`Custom` .c_navbar_container{ display: flex; justify-content: center; width: 100%; margin-left: auto; margin-right: auto; padding: 0 1rem 0 0 !important; } .c_sidebar_active{ height: 46px; width: 60px; display: flex !important; justify-content: center; align-items: center; background-color: $one__primary; color: $one__light !important; margin-right: 1.5rem !important; clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%); &:hover{ background-color: $one__primary-dark; transition: $transition-normal; } } .c_sidebar_passive{ height: 46px; width: 60px; display: flex !important; justify-content: center; align-items: center; background-color: $one__light; color: $one__primary !important; clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%); } //END OF NAVBAR .dropdown-menu{ border-radius: 0px; a, .dropdown-item{ color: $one__light-font-primary; &:hover{ color: $one__primary !important; background-color: $one__primary-light; transition: $transition-normal; } } } //Buttons .btn{ border-radius: 0px; &:hover{ filter: brightness(90%) !important; box-shadow: none; transition: $transition-normal; } } .btn-primary{ background-color: $one__primary !important; border-color: $one__primary !important; color: $one__light !important; &:hover{ background-color: $one__primary-dark !important; } &:focus{ box-shadow: 0 0 0 0.2rem rgba(235,240,253, 0.8); } } .btn-secondary{ background-color: $one__hover-bkg-light; border-color: $one__hover-bkg-light; color: $one__light-font-primary; &:focus{ box-shadow: 0 0 0 0.2rem rgba(245,245,245, 1); } } .btn-fill-info, .btn-info { background-color: $one__info; border-color: $one__info; color: $one__light; } .btn-group, .o_filter_menu{ button, div.btn-group{ margin-right: 3px; &:last-child{ margin-right: 0px !important; } } } .btn-link{ color: $one__primary !important; &:hover{ background-color: $one__hover-bkg-light !important; } } .o_control_panel .o_cp_bottom_left > .o_cp_action_menus .o_dropdown_toggler_btn, .o_control_panel .o_cp_bottom_left > .o_cp_action_menus .dropdown-toggle { margin-right: 0px !important; } .o_activity_view .o_record_selector, .o_stat_value { color: $one__primary !important; } .o_web_settings_invite{ height: 26px !important; margin-top: 6px !important; } .o_NotificationList{ div:hover { background-color: $one__primary-light; } } .o_MessagingMenu_tabButton, .o_MessagingMenu_newMessageButton{ color: $one__primary; opacity: 0.8; .o-active{ opacity: 1; font-weight: bold; } } .o_ThreadPreview_date, .o_activity_filter_button, .o_mail_activity_action{ color: $one__primary !important; &:before{ color: $one__light-font-primary; } &:hover{ color: $one__primary-dark !important; } } //Controls .custom-control.custom-checkbox .custom-control-input:not(:checked):not(:indeterminate) ~ .custom-control-label::before { background: none; outline: 1px solid $one__hover-bkg-light; } .custom-checkbox .custom-control-label::before { border-radius: 0px; } .custom-control-input:checked ~ .custom-control-label::before { color: $one__light; border-color: $one__primary; background-color: $one__primary; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } .o_input{ border-radius: 0px !important; border-color: $one__border-light; } .o_required_modifier.o_input, .o_required_modifier .o_input, .o_searchview .o_searchview_autocomplete li.o_selection_focus { background-color: $one__primary-light !important; } .ui-menu-item > a{ background-color: $one__light !important; color: $one__primary !important; &:hover, &:active, &:focus, &:focus-within, &:focus-visible, &:visited{ color: $one__primary !important; background-color: $one__primary-light !important; } } .nav-tabs .nav-link { border-radius: 0px !important; border-top: 3px solid transparent !important; } .nav-tabs .nav-link.active { border-top: 3px solid $one__primary !important; } .nav-tabs .nav-link:hover{ border-top: 3px solid $one__primary !important; color: $one__primary-dark; transition: transition-normal !important; } .o_form_view .o_horizontal_separator { color: $one__primary; } .panel-heading.note-toolbar { background-color: $one__light !important; } div.o_boolean_toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before { background-color: $one__primary !important; } //Misc. .badge-primary{ background-color: $one__primary; border-radius: 0px; padding: 5px; } //Links a { color: $one__primary; text-decoration: none; background-color: transparent; &hover{ color: $one__primary-dark; text-decoration: none; transition: $transition-normal; } } a.o_menu_brand{ color: $one__light-font-primary; font-weight: bold; } .o_form_uri{ color: $one__primary !important; } .o_Message_prettyBody > div > p > a { background-color: $one__primary !important; } .o_onboarding_step_title > a { color: $one__light; } .oe_kanban_action_a{ color: $one__light-font-primary; } .o_kanban_view .oe_kanban_card.oe_kanban_global_click:focus, .o_kanban_view .oe_kanban_card.oe_kanban_global_click:focus-within, .o_kanban_view .oe_kanban_card.oe_kanban_global_click_edit:focus, .o_kanban_view .oe_kanban_card.oe_kanban_global_click_edit:focus-within, .o_kanban_view .o_kanban_record.oe_kanban_global_click:focus, .o_kanban_view .o_kanban_record.oe_kanban_global_click:focus-within, .o_kanban_view .o_kanban_record.oe_kanban_global_click_edit:focus, .o_kanban_view .o_kanban_record.oe_kanban_global_click_edit:focus-within{ outline: thin solid $one__primary-light !important; } //Tables .o_list_view thead { background-color: $one__hover-bkg-light; } .o_list_view .o_list_table thead { color: $one__light-font-secondary; border-bottom: 1px solid $one__border-light; } .o_list_view .o_list_table thead > tr > th:not(.o_list_record_selector) { border-left: none; } table thead th { vertical-align: bottom; border-top: none !important; border-bottom: none !important; padding: 1rem !important; } table-sm th, .table-sm td { padding: 1rem !important; border-top: none !important; } tr:nth-child(even){ background-color: $one__hover-bkg-light; } .o_list_view .o_list_table tfoot { background-color: $one__light; filter: brightness(95.5%) !important; } //Search .o_searchview .o_searchview_facet, .o_setting_search { background: $one__light; border-radius: 0px !important; border: 1px solid $one__border-light; color: $one__light-font-secondary; } .o_searchview .o_searchview_facet .o_searchview_facet_label { background-color: $one__light; } .o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label { color: $one__light-font-secondary; margin: 0px -3px 3px 3px; } .o_searchview .o_searchview_input_container .o_searchview_facet .o_facet_remove{ bottom: 3px !important; } .o_searchview .o_searchview_input_container .o_searchview_facet .o_facet_values { padding: 2px 18px 0 5px !important; } .o_searchview{ padding: 0.5rem !important; border-radius: 0px; } .searchInput{ border: none !important; } .searchIcon{ margin: 5px 10px 0 0; } .o_setting_search { padding: 5px; } //Kanban .oe_kanban_card{ border-color: $one__border-light; padding: 1rem !important; } //Calendar @include c_fadeBackgroundOut('fadeCalendarRow', 1, 0.6, 212, 212, 212 ); .o_calendar_sidebar_container .ui-datepicker td.ui-datepicker-current-day.ui-datepicker-today a, .o_calendar_sidebar_container .ui-datepicker td.ui-datepicker-current-day a, .o_calendar_view .o_calendar_widget .fc-dayGridMonth-view .fc-content-skeleton .fc-today .fc-day-number { color: $one__light !important; background-color: $one__primary !important; } .o_calendar_sidebar_container .ui-datepicker td a{ color: $one__light-font-secondary; } .o_calendar_sidebar_container .ui-datepicker td.ui-datepicker-today a{ background-color: $one__border-light; } .o_calendar_sidebar_container .ui-datepicker .o_selected_range.o_color:not(.ui-datepicker-unselectable) { animation: fadeCalendarRow 2s forwards; } .fc-now-indicator { border-color: $one__primary !important; } .fc-ltr .fc-time-grid .fc-now-indicator-arrow { left: 0; border-width: 5px 0 5px 6px; border-top-color: transparent !important; border-bottom-color: transparent !important; } .o_calendar_view .fc-view .fc-event.o_calendar_color_1.o_cw_custom_highlight { box-shadow: 0 12px 12px -5px rgba(156, 181, 245, 0.8); color: $one__primary; font-weight: bold; } .o_calendar_view .fc-view .fc-event.o_calendar_color_1 .fc-bg { background-color: $one__primary-light; } .o_calendar_view .fc-view .fc-event.o_calendar_color_1 { border-color: $one__primary; color: #274aa5; opacity: 0.8; &:hover{ background: $one__primary-light; box-shadow: 0 12px 12px -5px rgba(156, 181, 245, 0.8); } } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: $one__primary !important; } //Dashboard Sidebar .o_Discuss, .o_setting_container{ width: 98%; margin-right: auto; margin-left: auto; border-top: none; } .o_widget_Discuss .o_Discuss_content { border-top: none !important; } .o_DiscussSidebar, .settings_tab{ color: $one__light-font-primary; background-color: transparent !important; border-right: 2px solid $one__border-light; height: 95%; margin-top: auto; margin-bottom: auto; } .o_DiscussSidebarItem{ padding: 0.4rem 0 !important; } .o_DiscussSidebarItem_activeIndicator.o-item-active{ width: 0; height: 0; background: transparent; margin-top: 0.375rem; margin-right: 8px !important; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid $one__primary; } .o_DiscussSidebarItem:hover{ background-color: transparent !important; color: $one__primary; } .o_DiscussSidebar_separator{ width: 95% !important; margin-left: auto; margin-right: auto; background-color: transparent !important; } .o_MessageList{ padding: 10px !important; } .o_Message.o-not-discussion{ background-color: $one__hover-bkg-light; border-color: $one__border-light; } //Settings .o_setting_container .settings_tab { .app_name{ color: $one__light-font-primary !important; } } .o_base_settings .o_control_panel .o_panel .o_setting_search .searchInput { max-width: none !important; margin: 4px 0 0 10px !important; } .o_setting_container .settings_tab .tab{ height: 30px !important; } .o_setting_container .settings{ padding: 10px !important; } .o_setting_container .settings_tab .app_name { color: $one__light-font-primary; &:hover{ color :$one__primary !important; } } .o_setting_container .settings_tab .selected{ background: transparent !important; box-shadow: none !important; position: relative; &:before{ content: ""; position: absolute; width: 0; height: 0; top: 24%; left: 0; background: transparent; margin-top: 0.375rem; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid $one__primary; } .app_name{ color: $one__light-font-primary; &:hover{ color :$one__primary !important; } } } .o_form_image_controls > .o_select_file_button{ background: $one__primary !important; color: $one__light; } .o_search_panel .o_search_panel_category .o_search_panel_section_icon { color: $one__primary; } .o_search_panel .list-group-item header.active { background-color: $one__primary-light; color: $one__primary; } //Chat .o_ChatWindowHeader{ background-color: $one__primary !important; color: $one__light !important; border-radius: 0px !important; } //Tables .o_purchase_dashboard .table > thead > tr > td.o_main, .o_purchase_dashboard .table tbody > tr > td.o_main { background-color: $one__primary; &:hover{ background-color: $one__primary-dark; } a{ color: $one__light; } } //Tags .o_field_widget.o_field_many2manytags .o_tag_color_5, .o_kanban_view .o_kanban_record .o_field_many2manytags .o_tag.o_tag_color_5 span, .o_kanban_view .o_kanban_record .o_kanban_tags .o_tag.o_tag_color_5 span { background-color: $one__primary; } .badge-pill{ a{ color: $one__light; } } .oe_kanban_card .o_kanban_tags .o_tag, .o_kanban_view .o_kanban_record .o_field_many2manytags .o_tag, .o_kanban_view .o_kanban_record .o_kanban_tags .o_tag { background-color: transparent !important; } .o-menu-toggle{ display: none !important; } .c_dots_menu{ background-image: url('/vista_backend_theme/static/src/img/icons/dots-menu.png'); width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; } .c_dots_menu_toggled{ background-image: $dots_menu_toggled; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; } //Responsive Layout @media (max-width: 767.98px) { //Settings .o_base_settings .o_setting_container { flex-flow: column nowrap; .settings_tab{ flex-direction: row; height: 40px; margin-top: -5px; justify-content: center; } } //App Bar .o_control_panel > div { flex-direction: column; margin-bottom: 0.5rem; } .o_control_panel .breadcrumb > li, .breadcrumb-item > a { font-size: 1.8rem !important; margin-bottom: 0.5rem; } .o_control_panel .o_cp_top_right { width: 100%; margin-bottom: 0.5rem; } .o_search_panel .o_search_panel_section_header { display: none; } .o_search_panel { flex: 0 0 120px !important; padding: 8px 8px 32px 0px !important; } //Discuss .o_Discuss.o-mobile{ width: 100% !important; border-top: 1px solid $one__border-light; } .o_MobileMessagingNavbar_tab.o-active > span{ color: $one__primary !important; } } #sidebar_panel { height: 100%; position: fixed; top: 0px; background-color: $one__sidebar-color; border-right: 1px solid $one__sidebar_border; display: none; width: 80px; overflow-y: scroll; -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ scrollbar-width: none; /* Hide scrollbar for Firefox */ z-index: 999; } .sidebar_app_name{ display: none; } #sidebar_panel::-webkit-scrollbar { display: none; /* Hide scrollbar for Chrome, Safari and Opera */ } .sidebar_menu{ margin-top: 20px !important; } .sidebar > h6{ color: $one__light; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; font-size: 0.9rem; margin-left: auto; margin-right: auto; width: 38px; display: block; margin-top: 18px !important; } .sidebar_panel .sidebar { padding: 0; white-space: nowrap; padding-bottom: 20px; padding-top: 5px; } .sidebar_panel .sidebar_close { text-align: end; display: none; position: sticky; height: 35px; padding-top: 5px; top: 0; background: #2a3042; z-index: 1; } .sidebar_panel .sidebar_close a#closeSidebar { font-size: 18px; margin-right: 10px; color: #ffffff; opacity: .3; } .sidebar_panel .sidebar_close a#closeSidebar img { width: 15px; } .sidebar_panel .sidebar .sidebar_logo { padding-top: 20px; text-align: center; padding-bottom: 20px; } .sidebar_panel .sidebar .sidebar_logo img { max-width: 150px; } .sidebar_panel .sidebar .sidebar_head { padding-top: 20px; padding-left: none; color: $one__light; } .sidebar_panel .sidebar .sidebar_menu { list-style: none; margin: 0; padding: 0; } .sidebar_panel .sidebar .sidebar_menu li { margin: 0; padding: 0; border: 0px; display: block; } .sidebar_panel .sidebar .sidebar_menu li a { margin: 0; border: 0px; display: block; cursor: pointer; overflow: hidden; padding: 8px 10px 8px 25px; color: #ffffff; font-size: 13px; transition:.3s all; } .sidebar_panel .sidebar .sidebar_menu li:hover a { background: $one__sidebar-color-hover; color: $one__light; } .sidebar_panel .nav-link { opacity: 1 !important; transition:.3s all; } .sidebar_panel .sidebar a.nav-link.active { color: $one__light !important; border-left: 4px solid $one__light; img{ margin-left: -0.5rem !important; } } .sidebar_panel .sidebar .sidebar_menu li a .sidebar_img { width: 32px; height: 32px; margin: 8px 8px 8px 0; } .sidebar_menu > li a.nav-link{ &:hover{ transform: scale(1.05) !important; transition: all 0.3s linear !important; } } .datepicker{ z-index: 9999 !important; } div.dropdown-menu.bootstrap-datetimepicker-widget { width: 28rem !important; } // .datepicker .table-sm > thead, // .datepicker > div > table > tbody > tr > td.active{ // background-color: $one__primary; // } // .datepicker .table-sm > thead > tr:first-child th:hover { // background-color: $one__primary-dark; // } // .datepicker .table-sm > tbody > tr > td.today::before{ // border-bottom-color: $one__primary; // }