492 lines
10 KiB
SCSS
492 lines
10 KiB
SCSS
/* Copyright 2016, 2019 Openworx.
|
|
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
|
|
|
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(/backend_theme_v12/static/src/font/Roboto-Regular.ttf)
|
|
}
|
|
|
|
|
|
$gray-base: #000;
|
|
$gray-darker: lighten($gray-base, 13.5%);
|
|
$gray-dark: #666;
|
|
$gray: #777;
|
|
$gray-light: #AEA79F;
|
|
$gray-lighter: lighten($gray-base, 93.5%);
|
|
|
|
|
|
// Change colors here
|
|
|
|
// Odoo EE colors
|
|
//$brand-primary: #875a7b;
|
|
//$brand-secondary: #00A09D;
|
|
//------------------------
|
|
$brand-primary: #008DCA;
|
|
$brand-secondary: #5EC269;
|
|
//------------------------
|
|
|
|
|
|
$brand-primary-dark: darken($brand-primary, 10%);
|
|
$brand-secondary-dark: darken($brand-secondary, 10%);
|
|
|
|
body {
|
|
|
|
font-family: "Roboto";
|
|
}
|
|
|
|
.o_loading {
|
|
background-color: $brand-primary;
|
|
}
|
|
|
|
.o_main_navbar {
|
|
background-color : $brand-primary;
|
|
}
|
|
|
|
.o_main_navbar > a:hover, .o_main_navbar > a:focus, .o_main_navbar > button:hover, .o_main_navbar > button:focus {
|
|
|
|
background-color: $brand-primary-dark;
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
.o_main_navbar > ul > li > a:hover, .o_main_navbar > ul > li > label:hover {
|
|
background-color: $brand-primary-dark;
|
|
}
|
|
|
|
.o_main_navbar .show .dropdown-toggle {
|
|
|
|
background-color: $brand-primary-dark;
|
|
|
|
}
|
|
|
|
// Fix color Add file button
|
|
.o_control_panel .o_cp_sidebar .o_hidden_input_file .o_form_binary_form span {
|
|
color: $gray-dark !important;
|
|
}
|
|
|
|
// Buttons
|
|
|
|
.btn {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.btn-primary {
|
|
|
|
color: #fff;
|
|
background-color: $brand-secondary;
|
|
border-color: $brand-secondary;
|
|
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
|
|
color: #fff;
|
|
background-color: $brand-secondary-dark;
|
|
border-color: $brand-secondary-dark;
|
|
}
|
|
|
|
.btn-secondary {
|
|
border: none;
|
|
}
|
|
|
|
.btn:active, .btn.active {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
background-color: #eee !important;
|
|
}
|
|
|
|
.btn-group.open .dropdown-toggle {
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
background-color: #eee !important;
|
|
}
|
|
|
|
|
|
.btn-link {
|
|
color: $brand-secondary;
|
|
}
|
|
|
|
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.btn-primary.disabled {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button:not(.disabled):hover {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.o_dropdown_toggler_btn, .o_dropdown_toggler_btn:hover, .o_dropdown_toggler_btn:focus, .o_dropdown_toggler_btn:hover, .o_dropdown_toggler_btn:focus, .btn-icon, .o_graph_button {
|
|
text-transform: none !important;
|
|
color: $gray-dark !important;
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
oe_highlight {
|
|
color: #ffffff !important;
|
|
background-color: $brand-primary !important;
|
|
}
|
|
|
|
.o_external_button {
|
|
color: $brand-primary !important;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.o_button_icon {
|
|
color: $brand-primary !important;
|
|
}
|
|
|
|
|
|
// Calendar
|
|
|
|
.o_calendar_container .o_calendar_sidebar_container .ui-datepicker table .ui-state-active {
|
|
background: none;
|
|
background-color: $brand-primary !important;
|
|
color: #ffffff !important;
|
|
}
|
|
.o_calendar_container .o_calendar_sidebar_container .ui-datepicker table .ui-state-default {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.datepicker {
|
|
.table-sm {
|
|
> thead {
|
|
color: white;
|
|
background-color: $brand-primary;
|
|
|
|
> tr {
|
|
&:first-child {
|
|
th:hover {
|
|
color: white;
|
|
background-color: darken($brand-primary, 10%);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
color: $o-datepicker-week-color;
|
|
background-color: $o-datepicker-week-bg-color;
|
|
}
|
|
> th {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
> tbody {
|
|
> tr {
|
|
> td {
|
|
&.active, .active {
|
|
background-color: $o-brand-primary;
|
|
border-radius: 100px;
|
|
}
|
|
|
|
&.today:before {
|
|
border-bottom-color: $o-brand-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.datepicker .table-sm > tbody > tr > td.active, .datepicker .table-sm > tbody > tr > td .active {
|
|
background-color: $brand-primary;
|
|
border-radius: 0;
|
|
}
|
|
|
|
// Filter search label
|
|
|
|
.o_searchview {
|
|
.o_searchview_facet {
|
|
|
|
background-color: #ffffff;
|
|
|
|
.o_searchview_facet_label {
|
|
background-color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
a {
|
|
|
|
color: $brand-secondary;
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
-webkit-text-decoration-skip: objects;
|
|
|
|
}
|
|
|
|
a:hover {
|
|
|
|
color: $brand-secondary-dark;
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
.o_control_panel {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.breadcrumb {
|
|
background-color: inherit;
|
|
}
|
|
|
|
// Input
|
|
|
|
input[type="text"], input[type="password"], input[type="number"],
|
|
textarea, select, .o_form_view.o_form_editable .o_form_field_many2manytags,
|
|
.o_searchview
|
|
{
|
|
border: 0;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
|
|
.o_web_client input:focus, .o_web_client textarea:focus, .o_web_client select:focus {
|
|
outline: none;
|
|
border-bottom: 2px solid $brand-primary;
|
|
}
|
|
|
|
.o_input {
|
|
border: 1px solid #ccc;
|
|
border-top-style: none;
|
|
border-right-style: none;
|
|
border-left-style: none;
|
|
color: $gray;
|
|
}
|
|
|
|
.o_field_widget {
|
|
&.o_field_many2one .o_external_button {
|
|
color: $brand-secondary
|
|
}
|
|
}
|
|
|
|
.o_required_modifier {
|
|
&.o_input, .o_input {
|
|
background-color: lighten($brand-primary, 35%) ! important;
|
|
}
|
|
}
|
|
|
|
.input-group-text {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
border: 0px;
|
|
}
|
|
|
|
// Listview
|
|
|
|
.o_list_view.table {
|
|
border: none;
|
|
}
|
|
.o_list_view.table thead, .o_list_view.table tfoot, .o_list_view.table td,.o_list_view.table th {
|
|
border: none;
|
|
}
|
|
|
|
.o_list_view.table thead {
|
|
background-color: #e2e2e0;
|
|
}
|
|
|
|
.o_list_view.table thead > tr > th.o_column_sortable:hover {
|
|
background-color: #D6D6D3;
|
|
}
|
|
|
|
.o_list_view.table tbody tr.o_group_header {
|
|
background-color: #dfdfdf;
|
|
background-image: none;
|
|
border-top: 1px solid #e2e2e0;
|
|
}
|
|
|
|
.table-striped > tbody > tr:nth-of-type(2n+1) {
|
|
background-color: #eef0f0;
|
|
}
|
|
|
|
.o_list_view tfoot tr:nth-child(1) td {
|
|
background-color: $brand-primary !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
|
|
.ui-autocomplete .ui-menu-item.ui-state-focus {
|
|
background-color: #dee2e6;
|
|
}
|
|
|
|
.ui-menu-item a:hover,.ui-menu-item a:focus {
|
|
color: #666666 !important;
|
|
}
|
|
.ui-autocomplete .ui-menu-item.ui-state-focus a{
|
|
color: #666666 !important;
|
|
}
|
|
|
|
.o_form_view .oe_button_box .oe_stat_button .o_stat_info .o_stat_value {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.o_form_view .o_horizontal_separator {
|
|
color: #666666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
// Forms
|
|
|
|
.o_form_view {
|
|
|
|
.o_form_sheet_bg {
|
|
background: none !important;
|
|
background-color: #F9F9F9 !important;
|
|
padding: 0px;
|
|
.o_form_sheet {
|
|
border: 1px solid #d9d7d7;
|
|
box-shadow: 0 5px 20px -15px black;
|
|
}
|
|
}
|
|
|
|
.o_form_statusbar {
|
|
//margin: -16px;
|
|
|
|
.o_statusbar_status {
|
|
> .o_arrow_button {
|
|
background: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// App Dashboard
|
|
|
|
/* .o_menu_apps .dropdown-menu.show {
|
|
background: transparent url('/dashboard') no-repeat scroll center center / cover;
|
|
|
|
} */
|
|
|
|
.o_menu_apps .dropdown-menu.show {
|
|
background: url(/dashboard);
|
|
background-origin: border-box;
|
|
background-size: cover;
|
|
height: calc(100vh);
|
|
max-height: calc(100vh);
|
|
border-top: $o-navbar-height solid transparent;
|
|
top: 0 !important;
|
|
}
|
|
|
|
.o_main_navbar > ul.o_menu_systray {
|
|
float: right;
|
|
position: relative;
|
|
z-index: 200;
|
|
}
|
|
|
|
.fa-th-large::before {
|
|
content: "\f00a";
|
|
}
|
|
|
|
.o_menu_apps .full {
|
|
width: 46px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 200;
|
|
}
|
|
|
|
.o-app-name {
|
|
color: #fff;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.o_menu_apps .dropdown-menu.show .o-app-icon {
|
|
padding: 20px 0 0;
|
|
}
|
|
|
|
.o_menu_apps .dropdown-menu.show .o-app-icon:hover {
|
|
box-shadow: 0 8px 15px -10px black;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.dropdown-item.o_app {
|
|
background: transparent;
|
|
}
|
|
|
|
.o-menu-search-result {
|
|
color: #fff;
|
|
}
|
|
|
|
// Chat window
|
|
|
|
.o_thread_window .o_thread_window_header {
|
|
background-color: $brand-primary;
|
|
}
|
|
|
|
// Formview
|
|
|
|
|
|
$gray-lighter-darker: #d9d7d7;
|
|
$o-statbutton-height: 40px;
|
|
$o-statbutton-spacing: 6px;
|
|
|
|
.o_form_view {
|
|
@mixin o-form-sheet-negative-margin() {
|
|
margin-left: -$o-horizontal-padding;
|
|
margin-right: -$o-horizontal-padding;
|
|
margin-top: -#{$o-horizontal-padding +1};
|
|
}
|
|
|
|
.o_form_uri {
|
|
display: inline-block;
|
|
|
|
color: $gray;
|
|
|
|
&:first-line {
|
|
color: $link-color;
|
|
}
|
|
|
|
&:hover {
|
|
color: darken($link-color, 15%); // hack required on chrome
|
|
|
|
&:first-line {
|
|
color: darken($link-color, 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.oe_avatar {
|
|
float: right;
|
|
|
|
>img {
|
|
max-height: 90px;
|
|
max-width: 90px;
|
|
margin-bottom: 10px;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
|
border: none;
|
|
}
|
|
|
|
+.oe_title {
|
|
padding-right: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Override `@include media-breakpoint-up` in module `web_responsive`
|
|
@include media-breakpoint-up(md) {
|
|
.o_form_view .oe_button_box + .oe_avatar + .oe_title {
|
|
/* Add 110px in the calculation for the avatar space */
|
|
width: calc(100% - 400px - 110px);
|
|
min-width: 400px;
|
|
max-width: 650px;
|
|
}
|
|
/* Same correction for res.users .oe_title div */
|
|
.o_form_view .o_field_integer + .oe_button_box + .o_form_header + .o_field_boolean +
|
|
.o_form_header + .oe_avatar + .oe_title {
|
|
width: calc(100% - 400px - 110px);
|
|
min-width: 400px;
|
|
max-width: 650px;
|
|
}
|
|
}
|