diff --git a/addons/mass_mailing/static/src/css/mass_mailing_editor.css b/addons/mass_mailing/static/src/css/mass_mailing_editor.css deleted file mode 100644 index e2efcf87efa..00000000000 --- a/addons/mass_mailing/static/src/css/mass_mailing_editor.css +++ /dev/null @@ -1,116 +0,0 @@ -#email_theme_list, #email_template_list { - clear: both; - text-align: center; -} - -#email_theme_list > div, #email_template_list > div { - width: 200px; - display: inline-block; - position: relative; -} - -.theme_thumbnail{ - position:inherit; - margin-top:15px; -} -.theme_thumbnail div{ - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} -.theme_thumbnail img.img{ - height: 180px; - width: auto; -} - -.modal-body .theme_thumbnail img.img{ - height: 100px; -} - -.theme_thumbnail div.overlay{ - z-index: 2; - max-height: 135px; - position:absolute; - padding:25% 0; - opacity: 0; - width: 100%; -} -.theme_thumbnail div.overlay p{ - color:#616161; - font-weight:bold; - text-transform: capitalize; -} -.theme_thumbnail:hover>img.img{ - opacity:0.3; -} -.theme_thumbnail:hover>div.overlay{ - opacity: 1; -} - -.email_head { - border-width: 0px 0px 2px 0px; -} -.email_head div{ - font-size:14px; -} -.email_head .popover-title{ - font-weight:bold; -} - -.template_name{ - width: 160px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.email_template *{ - -webkit-transition: opacity 0.5s; - transition: opacity 0.5s; -} -.email_template:hover .template_thumbnail{ - opacity:0.3; -} -.email_template:hover .template_options{ - opacity:1; -} - -/***************************/ - -#templates{ - margin-top: 50px; - width: 98%; -} -#choose_template{ - display: none; - margin: 5px; - position: fixed; - top: 0; - right: 28px; - z-index: 2000; -} -#choose_template span{ - padding: 1px 5px; - height: 24px; -} -#templates .template_preview_border{ - overflow: hidden !important; - border: 2px solid grey; - height: 300px; -} -#email_template_list > div{ - overflow: hidden; - height: 300px; -} -#email_template_list .theme_thumbnail div.overlay{ - max-height: 300px; -} -#templates .template_preview{ - -webkit-transform: scale(.33); - -ms-transform: scale(.33); - transform: scale(.33); - -webkit-transform-origin: 0 0; - -ms-transform-origin: 0 0; - transform-origin: 0 0; -} -.theme_thumbnail:hover>.template_preview{ - opacity:0.3; -} diff --git a/addons/mass_mailing/static/src/less/mass_mailing_editor.less b/addons/mass_mailing/static/src/less/mass_mailing_editor.less new file mode 100644 index 00000000000..e463ec1b6d1 --- /dev/null +++ b/addons/mass_mailing/static/src/less/mass_mailing_editor.less @@ -0,0 +1,121 @@ + +#email_theme_list, #email_template_list { + clear: both; + text-align: center; + + > div { + width: 200px; + display: inline-block; + position: relative; + } +} +.theme_thumbnail { + position: inherit; + margin-top: 15px; + + div { + .o-transition(opacity, 0.5s); + + &.overlay { + z-index: 2; + max-height: 135px; + position:absolute; + padding:25% 0; + opacity: 0; + width: 100%; + + p { + color:#616161; + font-weight:bold; + text-transform: capitalize; + } + } + } + img.img { + width: auto; + height: 180px; + } + + &:hover { + > img.img { + opacity:0.3; + } + > div.overlay { + opacity: 1; + } + > .template_preview { + opacity:0.3; + } + } +} +.modal-body .theme_thumbnail img.img { + height: 100px; +} +.email_head { + border-width: 0px 0px 2px 0px; + div { + font-size:14px; + } + .popover-title { + font-weight:bold; + } +} +.template_name { + width: 160px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.email_template * { + .o-transition(opacity, 0.5s); + &:hover { + .template_thumbnail { + opacity:0.3; + } + .template_options { + opacity:1; + } + } +} +#templates { + margin: -@odoo-navbar-height 0 0 -@o-we-sidebar-width; + padding: 10px @odoo-horizontal-padding; + border: 1px solid @odoo-brand-secondary; + background-color: white; + + .template_preview_border { + overflow: hidden !important; + border: 2px solid grey; + height: 300px; + } + .template_preview { + -webkit-transform: scale(.33); + -ms-transform: scale(.33); + transform: scale(.33); + -webkit-transform-origin: 0 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + } +} +#choose_template { + display: none; + margin: 5px; + position: fixed; + top: 0; + right: 28px; + z-index: 2000; + + span { + padding: 1px 5px; + height: 24px; + } +} +#email_template_list { + > div { + overflow: hidden; + height: 300px; + } + .theme_thumbnail div.overlay { + max-height: 300px; + } +} diff --git a/addons/report/static/src/css/report.editor.css b/addons/report/static/src/css/report.editor.css deleted file mode 100644 index 762cf93ed97..00000000000 --- a/addons/report/static/src/css/report.editor.css +++ /dev/null @@ -1,11 +0,0 @@ -.o_editable:not(:empty)[data-oe-model="ir.ui.view"]:hover, -.o_editable:not(:empty)[data-oe-model="ir.ui.view"] th:hover, -.o_editable:not(:empty)[data-oe-model="ir.ui.view"] td:hover, -.o_editable[data-oe-type][data-oe-model="ir.ui.view"]:hover, -.o_editable[data-oe-type][data-oe-model="ir.ui.view"] th:hover, -.o_editable[data-oe-type][data-oe-model="ir.ui.view"] td:hover { - -moz-box-shadow: #DDCC33 0 0 5px 2px inset; - -webkit-box-shadow: #DDCC33 0 0 5px 2px inset; - box-shadow: #DDCC33 0 0 5px 2px inset; -} - diff --git a/addons/report/static/src/less/report.editor.less b/addons/report/static/src/less/report.editor.less new file mode 100644 index 00000000000..c0384cde103 --- /dev/null +++ b/addons/report/static/src/less/report.editor.less @@ -0,0 +1,17 @@ +.o_editable { + &:not(:empty), &[data-oe-type] { + &[date-oe-model="ir.ui.view"] { + &, th, td { + &:hover { + -moz-box-shadow: #DDCC33 0 0 5px 2px inset; + -webkit-box-shadow: #DDCC33 0 0 5px 2px inset; + box-shadow: #DDCC33 0 0 5px 2px inset; + } + } + } + } +} + +body { + margin-top: 40px!important; +} diff --git a/addons/report/static/src/css/report.css b/addons/report/static/src/less/report.less similarity index 74% rename from addons/report/static/src/css/report.css rename to addons/report/static/src/less/report.less index 5565625b7fc..2382d069799 100644 --- a/addons/report/static/src/css/report.css +++ b/addons/report/static/src/less/report.less @@ -6,11 +6,13 @@ body { border-top: 1px solid black !important; } /* See https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524 */ -.table-condensed > tbody > tr { - page-break-inside: avoid !important; -} -.table-condensed > thead > tr > th { - border-bottom: 1px solid black !important; +.table-condensed { + > thead > tr > th { + border-bottom: 1px solid black !important; + } + > tbody > tr { + page-break-inside: avoid !important; + } } .zero_min_height { min-height: 0px !important; @@ -24,4 +26,3 @@ body { .hidden-print{ display: none; } - diff --git a/addons/theme_default/static/src/less/customize_modal.less b/addons/theme_default/static/src/less/customize_modal.less new file mode 100644 index 00000000000..ce963f659a3 --- /dev/null +++ b/addons/theme_default/static/src/less/customize_modal.less @@ -0,0 +1,18 @@ + +#theme_customize_modal { + .modal-h5 { + color: #ffffff; + font-family: "Lato-Regular"; + font-weight: normal; + text-transform: uppercase; + letter-spacing: normal; + font-size: 14px; + color: white; + padding: 4px 0 4px 4px; + background-color: #bdc3c7; + } + table { + width: 100%; + margin-bottom: 8px; + } +} diff --git a/addons/web/static/src/less/utils.less b/addons/web/static/src/less/utils.less index b62c2aaaf94..302f79edf03 100644 --- a/addons/web/static/src/less/utils.less +++ b/addons/web/static/src/less/utils.less @@ -1,16 +1,3 @@ -// ------------------------------------------------------------------ -// Margin -// ------------------------------------------------------------------ -.utils-margin-loop(@index) when (@index < 256) { - .o-mt@{index} {margin-top: @index px;} - .o-mb@{index} {margin-bottom: @index px;} - .o-mr@{index} {margin-right: @index px;} - .o-ml@{index} {margin-left: @index px;} - - .utils-margin-loop(@index * 2); -} -.utils-margin-loop(2); - // ------------------------------------------------------------------ // Padding // ------------------------------------------------------------------ @@ -122,7 +109,6 @@ } // Background-size -// https://css-tricks.com/perfect-full-page-background-image/ .o-background-size(@size) { -webkit-background-size: @size; -moz-background-size: @size; @@ -130,6 +116,14 @@ background-size: @size; } +// Background gradient +.o-linear-gradient(@deg: 45deg, @start-color: #555, @end-color: #333) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); + background-image: -o-linear-gradient(@deg, @start-color, @end-color); + background-image: linear-gradient(@deg, @start-color, @end-color); +} + // ------------------------------------------------------------------ // Dropdowns // ------------------------------------------------------------------ @@ -196,16 +190,6 @@ transition: @property @duration @timing-function @transition-delay; } -// ------------------------------------------------------------------ -// Animation -// ------------------------------------------------------------------ -.o-animation(@name: none, @duration: 0s, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none, @play-state: running) { - -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - -moz-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - -o-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; - animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode @play-state; -} - // ------------------------------------------------------------------ // Columns // ------------------------------------------------------------------ diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less index 1984696aafb..4bea799e5ec 100644 --- a/addons/web/static/src/less/variables.less +++ b/addons/web/static/src/less/variables.less @@ -1,19 +1,28 @@ +@odoo-font-size-base: 13px; +@odoo-font-size-base-touch: 15px; + +// Colors @odoo-brand-primary: #337ab7; @odoo-brand-optional: @odoo-brand-primary; @odoo-brand-secondary: #8f8f8f; @odoo-brand-lightsecondary: #e2e2e0; -@odoo-list-grey: @odoo-brand-lightsecondary; // FIXME: listview thead background color -@odoo-webclient-background-color: #F0EEEE; + +@odoo-main-color-muted: #a8a8a8; +@odoo-main-text-color: #555555; + @odoo-view-background-color: white; @odoo-shadow-color: #303030; +@odoo-webclient-background-color: #F0EEEE; +@odoo-list-grey: @odoo-brand-lightsecondary; -@odoo-font-size-base: 13px; -@odoo-font-size-base-touch: 15px; -@odoo-main-text-color: #555555; -@odoo-main-color-muted: #a8a8a8; +// Layout +@screen-xs-min: 475px; +@screen-xxs-max: (@screen-xs-min - 1); @odoo-form-group-cols: 12; @odoo-horizontal-padding: 16px; -@screen-xs-min: 475px; -@screen-xxs-max: (@screen-xs-min - 1); +// Compatibility +@odoo-navbar-height: 46px; +@odoo-navbar-inverse-link-hover-bg: darken(@odoo-brand-primary, 10%); +@odoo-dropdown-hpadding: 25px; diff --git a/addons/web_editor/static/lib/summernote/src/less/summernote.less b/addons/web_editor/static/lib/summernote/src/less/summernote.less index caf66215d3f..512216845b2 100644 --- a/addons/web_editor/static/lib/summernote/src/less/summernote.less +++ b/addons/web_editor/static/lib/summernote/src/less/summernote.less @@ -1,31 +1,3 @@ -/* @_import "elements.less"; ODOO: removed call directly */ -/* Mixins */ - -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} -.rounded(@radius: 2px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} -.opacity(@opacity: 0.5) { - -webkit-opacity: @opacity; - -khtml-opacity: @opacity; - -moz-opacity: @opacity; - opacity: @opacity; - @opperc: @opacity * 100; - -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; - filter: ~"alpha(opacity=@{opperc})"; -} -.box-shadow(@arguments) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; -} - /* Theme Variables ------------------------------------------*/ @border-color: #a9a9a9; @@ -128,8 +100,8 @@ resize: none; /* override BS2 default style */ - .box-sizing(border-box); - .rounded(0); + box-sizing: border-box; + border-radius: 0; margin-bottom: 0; } } @@ -250,7 +222,7 @@ margin: 3px; padding: 0 3px; cursor: pointer; - .rounded(5px); + border-radius: 5px; } .note-color-row { @@ -350,12 +322,12 @@ font-size: 12px; color: #ccc; background-color: #222 !important; - .opacity(0.9); + opacity: 0.9; .modal-content { background: transparent; border: 1px solid white; - .box-shadow(none); - .rounded(5px); + box-shadow: none; + border-radius: 5px; } /* BS2's background pacth. */ @@ -429,7 +401,7 @@ width: 100%; height: 100%; background-color: black; - .opacity(0.30) + opacity: 0.3; } .note-control-handle { @@ -488,8 +460,8 @@ color: white; background-color: black; font-size: 12px; - .rounded(5px); - .opacity(0.7); + border-radius: 5px; + opacity: 0.7; } } } diff --git a/addons/web_editor/static/src/css/editor.css b/addons/web_editor/static/src/css/editor.css deleted file mode 100644 index ab39d4e1e37..00000000000 --- a/addons/web_editor/static/src/css/editor.css +++ /dev/null @@ -1,1010 +0,0 @@ -/* ---- EDITOR BAR ---- {{{ */ -.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog { - /* button */ - /* form */ - /* col */ - /* dropdown */ - /* list-group */ - /* tab */ - /* pager */ - /* add submenu css */ - /* global */ -} -.note-popover *, .o_css_editor *, .web_editor-dialog *, .note-image-dialog * { - box-sizing: border-box; -} -.note-popover a, .o_css_editor a, .web_editor-dialog a, .note-image-dialog a { - text-decoration: none; -} -.note-popover ul, .note-popover ol, .o_css_editor ul, .o_css_editor ol, .web_editor-dialog ul, .web_editor-dialog ol, .note-image-dialog ul, .note-image-dialog ol { - margin-top: 0; - margin-bottom: 10px; -} -.note-popover .clearfix:before, .note-popover .clearfix:after, .note-popover .dl-horizontal dd:before, .note-popover .dl-horizontal dd:after, .note-popover .container:before, .note-popover .container:after, .note-popover .container-fluid:before, .note-popover .container-fluid:after, .note-popover .row:before, .note-popover .row:after, .note-popover .form-horizontal .form-group:before, .note-popover .form-horizontal .form-group:after, .note-popover .btn-toolbar:before, .note-popover .btn-toolbar:after, .note-popover .btn-group-vertical > .btn-group:before, .note-popover .btn-group-vertical > .btn-group:after, .note-popover .nav:before, .note-popover .nav:after, .note-popover .navbar:before, .note-popover .navbar:after, .note-popover .navbar-header:before, .note-popover .navbar-header:after, .note-popover .navbar-collapse:before, .note-popover .navbar-collapse:after, .note-popover .pager:before, .note-popover .pager:after, .note-popover .panel-body:before, .note-popover .panel-body:after, .note-popover .modal-footer:before, .note-popover .modal-footer:after, .o_css_editor .clearfix:before, .o_css_editor .clearfix:after, .o_css_editor .dl-horizontal dd:before, .o_css_editor .dl-horizontal dd:after, .o_css_editor .container:before, .o_css_editor .container:after, .o_css_editor .container-fluid:before, .o_css_editor .container-fluid:after, .o_css_editor .row:before, .o_css_editor .row:after, .o_css_editor .form-horizontal .form-group:before, .o_css_editor .form-horizontal .form-group:after, .o_css_editor .btn-toolbar:before, .o_css_editor .btn-toolbar:after, .o_css_editor .btn-group-vertical > .btn-group:before, .o_css_editor .btn-group-vertical > .btn-group:after, .o_css_editor .nav:before, .o_css_editor .nav:after, .o_css_editor .navbar:before, .o_css_editor .navbar:after, .o_css_editor .navbar-header:before, .o_css_editor .navbar-header:after, .o_css_editor .navbar-collapse:before, .o_css_editor .navbar-collapse:after, .o_css_editor .pager:before, .o_css_editor .pager:after, .o_css_editor .panel-body:before, .o_css_editor .panel-body:after, .o_css_editor .modal-footer:before, .o_css_editor .modal-footer:after, .web_editor-dialog .clearfix:before, .web_editor-dialog .clearfix:after, .web_editor-dialog .dl-horizontal dd:before, .web_editor-dialog .dl-horizontal dd:after, .web_editor-dialog .container:before, .web_editor-dialog .container:after, .web_editor-dialog .container-fluid:before, .web_editor-dialog .container-fluid:after, .web_editor-dialog .row:before, .web_editor-dialog .row:after, .web_editor-dialog .form-horizontal .form-group:before, .web_editor-dialog .form-horizontal .form-group:after, .web_editor-dialog .btn-toolbar:before, .web_editor-dialog .btn-toolbar:after, .web_editor-dialog .btn-group-vertical > .btn-group:before, .web_editor-dialog .btn-group-vertical > .btn-group:after, .web_editor-dialog .nav:before, .web_editor-dialog .nav:after, .web_editor-dialog .navbar:before, .web_editor-dialog .navbar:after, .web_editor-dialog .navbar-header:before, .web_editor-dialog .navbar-header:after, .web_editor-dialog .navbar-collapse:before, .web_editor-dialog .navbar-collapse:after, .web_editor-dialog .pager:before, .web_editor-dialog .pager:after, .web_editor-dialog .panel-body:before, .web_editor-dialog .panel-body:after, .web_editor-dialog .modal-footer:before, .web_editor-dialog .modal-footer:after, .note-image-dialog .clearfix:before, .note-image-dialog .clearfix:after, .note-image-dialog .dl-horizontal dd:before, .note-image-dialog .dl-horizontal dd:after, .note-image-dialog .container:before, .note-image-dialog .container:after, .note-image-dialog .container-fluid:before, .note-image-dialog .container-fluid:after, .note-image-dialog .row:before, .note-image-dialog .row:after, .note-image-dialog .form-horizontal .form-group:before, .note-image-dialog .form-horizontal .form-group:after, .note-image-dialog .btn-toolbar:before, .note-image-dialog .btn-toolbar:after, .note-image-dialog .btn-group-vertical > .btn-group:before, .note-image-dialog .btn-group-vertical > .btn-group:after, .note-image-dialog .nav:before, .note-image-dialog .nav:after, .note-image-dialog .navbar:before, .note-image-dialog .navbar:after, .note-image-dialog .navbar-header:before, .note-image-dialog .navbar-header:after, .note-image-dialog .navbar-collapse:before, .note-image-dialog .navbar-collapse:after, .note-image-dialog .pager:before, .note-image-dialog .pager:after, .note-image-dialog .panel-body:before, .note-image-dialog .panel-body:after, .note-image-dialog .modal-footer:before, .note-image-dialog .modal-footer:after { - content: " "; - display: table; - clear: both; -} -.note-popover .caret, .o_css_editor .caret, .web_editor-dialog .caret, .note-image-dialog .caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - border-top: 4px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; -} -.note-popover .btn.dropdown-toggle, .o_css_editor .btn.dropdown-toggle, .web_editor-dialog .btn.dropdown-toggle, .note-image-dialog .btn.dropdown-toggle { - position: relative; - float: left; -} -.note-popover .btn, .o_css_editor .btn, .web_editor-dialog .btn, .note-image-dialog .btn { - display: inline-block; - margin-bottom: 0; - font-weight: 400; - text-align: center; - vertical-align: middle; - cursor: pointer; - background-image: none; - border: 1px solid transparent; - white-space: nowrap; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border-radius: 4px; -} -.note-popover .btn .caret, .o_css_editor .btn .caret, .web_editor-dialog .btn .caret, .note-image-dialog .btn .caret { - margin-left: 0; -} -.note-popover .btn.disabled, .note-popover .btn[disabled], .note-popover .btn.disabled:hover, .note-popover .btn[disabled]:active, .o_css_editor .btn.disabled, .o_css_editor .btn[disabled], .o_css_editor .btn.disabled:hover, .o_css_editor .btn[disabled]:active, .web_editor-dialog .btn.disabled, .web_editor-dialog .btn[disabled], .web_editor-dialog .btn.disabled:hover, .web_editor-dialog .btn[disabled]:active, .note-image-dialog .btn.disabled, .note-image-dialog .btn[disabled], .note-image-dialog .btn.disabled:hover, .note-image-dialog .btn[disabled]:active { - cursor: not-allowed; - pointer-events: none; - opacity: 0.65; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - box-shadow: none; -} -.note-popover .btn-sm, .o_css_editor .btn-sm, .web_editor-dialog .btn-sm, .note-image-dialog .btn-sm { - padding: 5px 10px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; -} -.note-popover .btn-group, .o_css_editor .btn-group, .web_editor-dialog .btn-group, .note-image-dialog .btn-group { - padding-top: 0; - margin-top: 0; - position: relative; - display: inline-block; - vertical-align: middle; -} -.note-popover .btn-group > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .btn-group > .btn { - position: relative; - float: left; -} -.note-popover .btn-group > .btn:first-child, .o_css_editor .btn-group > .btn:first-child, .web_editor-dialog .btn-group > .btn:first-child, .note-image-dialog .btn-group > .btn:first-child { - margin-left: 0; -} -.note-popover .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.note-popover .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .o_css_editor .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .web_editor-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .note-image-dialog .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { - border-radius: 0; -} -.note-popover .btn-group > .btn:last-child:not(:first-child), .note-popover .btn-group > .btn > .dropdown-toggle:not(:first-child), .o_css_editor .btn-group > .btn:last-child:not(:first-child), .o_css_editor .btn-group > .btn > .dropdown-toggle:not(:first-child), .web_editor-dialog .btn-group > .btn:last-child:not(:first-child), .web_editor-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child), .note-image-dialog .btn-group > .btn:last-child:not(:first-child), .note-image-dialog .btn-group > .btn > .dropdown-toggle:not(:first-child) { - border-bottom-left-radius: 0; - border-top-left-radius: 0; -} -.note-popover .btn-group > .btn + .dropdown-toggle, .o_css_editor .btn-group > .btn + .dropdown-toggle, .web_editor-dialog .btn-group > .btn + .dropdown-toggle, .note-image-dialog .btn-group > .btn + .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; -} -.note-popover .btn-group > .btn.active, .o_css_editor .btn-group > .btn.active, .web_editor-dialog .btn-group > .btn.active, .note-image-dialog .btn-group > .btn.active { - color: #333; - background-color: #e6e6e6; - border-color: #adadad; -} -.note-popover .btn-group .btn + .btn, .note-popover .btn-group .btn + .btn-group, .note-popover .btn-group + .btn, .note-popover .btn-group + .btn-group, .o_css_editor .btn-group .btn + .btn, .o_css_editor .btn-group .btn + .btn-group, .o_css_editor .btn-group + .btn, .o_css_editor .btn-group + .btn-group, .web_editor-dialog .btn-group .btn + .btn, .web_editor-dialog .btn-group .btn + .btn-group, .web_editor-dialog .btn-group + .btn, .web_editor-dialog .btn-group + .btn-group, .note-image-dialog .btn-group .btn + .btn, .note-image-dialog .btn-group .btn + .btn-group, .note-image-dialog .btn-group + .btn, .note-image-dialog .btn-group + .btn-group { - margin-left: -1px; -} -.note-popover .btn-link, .o_css_editor .btn-link, .web_editor-dialog .btn-link, .note-image-dialog .btn-link { - border-color: transparent; - color: #428bca; -} -.note-popover .btn-link:hover, .note-popover .btn-link:focus, .o_css_editor .btn-link:hover, .o_css_editor .btn-link:focus, .web_editor-dialog .btn-link:hover, .web_editor-dialog .btn-link:focus, .note-image-dialog .btn-link:hover, .note-image-dialog .btn-link:focus { - color: #2a6496; - text-decoration: underline; - background-color: transparent; -} -.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group { - margin-bottom: 15px; -} -.note-popover .form-control, .o_css_editor .form-control, .web_editor-dialog .form-control, .note-image-dialog .form-control { - display: block; - width: 100%; - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} -.note-popover .form-horizontal .form-group, .o_css_editor .form-horizontal .form-group, .web_editor-dialog .form-horizontal .form-group, .note-image-dialog .form-horizontal .form-group { - margin-left: -15px; - margin-right: -15px; -} -.note-popover .form-group, .o_css_editor .form-group, .web_editor-dialog .form-group, .note-image-dialog .form-group { - margin-bottom: 15px; -} -.note-popover .form-control.select2-container, .o_css_editor .form-control.select2-container, .web_editor-dialog .form-control.select2-container, .note-image-dialog .form-control.select2-container { - height: auto !important; - padding: 0; -} -.note-popover label, .o_css_editor label, .web_editor-dialog label, .note-image-dialog label { - display: inline-block; - max-width: 100%; - margin-bottom: 5px; - font-weight: 700; -} -.note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .note-popover .col-lg-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .o_css_editor .col-lg-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .web_editor-dialog .col-lg-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12, .note-image-dialog .col-lg-12 { - position: relative; - min-height: 1px; - padding-left: 15px; - padding-right: 15px; - width: 100%; -} -.note-popover .dropdown, .o_css_editor .dropdown, .web_editor-dialog .dropdown, .note-image-dialog .dropdown { - position: relative; -} -.note-popover .dropdown > .btn, .note-popover .btn-group > .btn, .o_css_editor .dropdown > .btn, .o_css_editor .btn-group > .btn, .web_editor-dialog .dropdown > .btn, .web_editor-dialog .btn-group > .btn, .note-image-dialog .dropdown > .btn, .note-image-dialog .btn-group > .btn { - color: #333; - background-color: #fff; - border-color: #ccc; - text-decoration: none; -} -.note-popover .dropdown > .btn-primary, .note-popover .btn-group > .btn-primary, .o_css_editor .dropdown > .btn-primary, .o_css_editor .btn-group > .btn-primary, .web_editor-dialog .dropdown > .btn-primary, .web_editor-dialog .btn-group > .btn-primary, .note-image-dialog .dropdown > .btn-primary, .note-image-dialog .btn-group > .btn-primary { - color: #fff; - background-color: #428bca; - border-color: #357ebd; -} -.note-popover .dropdown-menu, .o_css_editor .dropdown-menu, .web_editor-dialog .dropdown-menu, .note-image-dialog .dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - list-style: none; - font-size: 14px; - text-align: left; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); - background-clip: padding-box; -} -.note-popover .dropdown-menu > li > a, .o_css_editor .dropdown-menu > li > a, .web_editor-dialog .dropdown-menu > li > a, .note-image-dialog .dropdown-menu > li > a { - display: block !important; - padding: 3px 20px; - clear: both; - font-weight: normal; - color: #666; - white-space: nowrap; - background: transparent; -} -.note-popover .dropdown-menu > li.active > a, .o_css_editor .dropdown-menu > li.active > a, .web_editor-dialog .dropdown-menu > li.active > a, .note-image-dialog .dropdown-menu > li.active > a { - color: #fff; - text-decoration: none; - background-color: #428bca; - outline: 0; -} -.note-popover .open > .dropdown-menu, .o_css_editor .open > .dropdown-menu, .web_editor-dialog .open > .dropdown-menu, .note-image-dialog .open > .dropdown-menu { - display: block; -} -.note-popover .list-group, .o_css_editor .list-group, .web_editor-dialog .list-group, .note-image-dialog .list-group { - margin-bottom: 20px; - padding-left: 0; -} -.note-popover .list-group-item, .o_css_editor .list-group-item, .web_editor-dialog .list-group-item, .note-image-dialog .list-group-item { - position: relative; - display: block; - padding: 10px 15px; - margin-bottom: -1px; - background-color: #fff; - border: 1px solid #ddd; -} -.note-popover .list-group-item:first-child, .o_css_editor .list-group-item:first-child, .web_editor-dialog .list-group-item:first-child, .note-image-dialog .list-group-item:first-child { - border-top-right-radius: 4px; - border-top-left-radius: 4px; -} -.note-popover .list-group-item:last-child, .o_css_editor .list-group-item:last-child, .web_editor-dialog .list-group-item:last-child, .note-image-dialog .list-group-item:last-child { - margin-bottom: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} -.note-popover .list-group-item-heading, .o_css_editor .list-group-item-heading, .web_editor-dialog .list-group-item-heading, .note-image-dialog .list-group-item-heading { - margin-top: 0; - margin-bottom: 5px; -} -.note-popover .list-group-item.active, .o_css_editor .list-group-item.active, .web_editor-dialog .list-group-item.active, .note-image-dialog .list-group-item.active { - z-index: 2; - color: #fff; - background-color: #428bca; - border-color: #428bca; -} -.note-popover .tab-content > .tab-pane, .o_css_editor .tab-content > .tab-pane, .web_editor-dialog .tab-content > .tab-pane, .note-image-dialog .tab-content > .tab-pane { - display: none; -} -.note-popover .tab-content > .active, .o_css_editor .tab-content > .active, .web_editor-dialog .tab-content > .active, .note-image-dialog .tab-content > .active { - display: block; -} -.note-popover .nav, .o_css_editor .nav, .web_editor-dialog .nav, .note-image-dialog .nav { - margin-bottom: 0; - padding-left: 0; - list-style: none; -} -.note-popover .nav > li, .o_css_editor .nav > li, .web_editor-dialog .nav > li, .note-image-dialog .nav > li { - position: relative; - display: block; -} -.note-popover .nav > li > a, .o_css_editor .nav > li > a, .web_editor-dialog .nav > li > a, .note-image-dialog .nav > li > a { - position: relative; - display: block; - padding: 10px 15px; -} -.note-popover .nav-tabs, .o_css_editor .nav-tabs, .web_editor-dialog .nav-tabs, .note-image-dialog .nav-tabs { - border-bottom: 1px solid #ddd; -} -.note-popover .nav-tabs > li, .o_css_editor .nav-tabs > li, .web_editor-dialog .nav-tabs > li, .note-image-dialog .nav-tabs > li { - float: left; - margin-bottom: -1px; -} -.note-popover .nav-tabs > li > a, .o_css_editor .nav-tabs > li > a, .web_editor-dialog .nav-tabs > li > a, .note-image-dialog .nav-tabs > li > a { - margin-right: 2px; - line-height: 1.42857; - border: 1px solid transparent; - border-radius: 4px 4px 0 0; -} -.note-popover .nav-tabs > li.active > a, .note-popover .nav-tabs > li.active > a:hover, .note-popover .nav-tabs > li.active > a:focus, .o_css_editor .nav-tabs > li.active > a, .o_css_editor .nav-tabs > li.active > a:hover, .o_css_editor .nav-tabs > li.active > a:focus, .web_editor-dialog .nav-tabs > li.active > a, .web_editor-dialog .nav-tabs > li.active > a:hover, .web_editor-dialog .nav-tabs > li.active > a:focus, .note-image-dialog .nav-tabs > li.active > a, .note-image-dialog .nav-tabs > li.active > a:hover, .note-image-dialog .nav-tabs > li.active > a:focus { - color: #8c8c8c; - background-color: #fff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -.note-popover .pager, .o_css_editor .pager, .web_editor-dialog .pager, .note-image-dialog .pager { - padding-left: 0; - margin: 20px 0; - list-style: none; - text-align: center; -} -.note-popover .pager li, .o_css_editor .pager li, .web_editor-dialog .pager li, .note-image-dialog .pager li { - display: inline; -} -.note-popover .pager li > a, .note-popover .pager li > span, .o_css_editor .pager li > a, .o_css_editor .pager li > span, .web_editor-dialog .pager li > a, .web_editor-dialog .pager li > span, .note-image-dialog .pager li > a, .note-image-dialog .pager li > span { - display: inline-block; - padding: 5px 14px; - background-color: #fff; - border: 1px solid #ddd; - border-radius: 15px; -} -.note-popover .pager .previous > a, .note-popover .pager .previous > span, .o_css_editor .pager .previous > a, .o_css_editor .pager .previous > span, .web_editor-dialog .pager .previous > a, .web_editor-dialog .pager .previous > span, .note-image-dialog .pager .previous > a, .note-image-dialog .pager .previous > span { - float: left; -} -.note-popover .pager .disabled > a, .note-popover .pager .disabled > a:hover, .note-popover .pager .disabled > a:focus, .note-popover .pager .disabled > span, .o_css_editor .pager .disabled > a, .o_css_editor .pager .disabled > a:hover, .o_css_editor .pager .disabled > a:focus, .o_css_editor .pager .disabled > span, .web_editor-dialog .pager .disabled > a, .web_editor-dialog .pager .disabled > a:hover, .web_editor-dialog .pager .disabled > a:focus, .web_editor-dialog .pager .disabled > span, .note-image-dialog .pager .disabled > a, .note-image-dialog .pager .disabled > a:hover, .note-image-dialog .pager .disabled > a:focus, .note-image-dialog .pager .disabled > span { - color: #b3b3b3; - background-color: #fff; - cursor: not-allowed; -} -.note-popover .dropdown-submenu, .o_css_editor .dropdown-submenu, .web_editor-dialog .dropdown-submenu, .note-image-dialog .dropdown-submenu { - position: relative; - z-index: 1000; -} -.note-popover .dropdown-submenu > .dropdown-menu, .o_css_editor .dropdown-submenu > .dropdown-menu, .web_editor-dialog .dropdown-submenu > .dropdown-menu, .note-image-dialog .dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; -} -.note-popover .dropdown-submenu:hover > .dropdown-menu, .o_css_editor .dropdown-submenu:hover > .dropdown-menu, .web_editor-dialog .dropdown-submenu:hover > .dropdown-menu, .note-image-dialog .dropdown-submenu:hover > .dropdown-menu { - display: block; -} -.note-popover .dropdown-submenu:hover > a:after, .o_css_editor .dropdown-submenu:hover > a:after, .web_editor-dialog .dropdown-submenu:hover > a:after, .note-image-dialog .dropdown-submenu:hover > a:after { - border-left-color: #ffffff; -} -.note-popover .dropdown-submenu > a:after, .o_css_editor .dropdown-submenu > a:after, .web_editor-dialog .dropdown-submenu > a:after, .note-image-dialog .dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: #cccccc; - margin-top: 5px; - margin-right: -10px; -} -.note-popover .dropdown-submenu.pull-left, .o_css_editor .dropdown-submenu.pull-left, .web_editor-dialog .dropdown-submenu.pull-left, .note-image-dialog .dropdown-submenu.pull-left { - float: none; -} -.note-popover .dropdown-submenu.pull-left > .dropdown-menu, .o_css_editor .dropdown-submenu.pull-left > .dropdown-menu, .web_editor-dialog .dropdown-submenu.pull-left > .dropdown-menu, .note-image-dialog .dropdown-submenu.pull-left > .dropdown-menu { - left: -100%; - margin-left: 10px; - -webkit-border-radius: 6px 0 6px 6px; - -moz-border-radius: 6px 0 6px 6px; - border-radius: 6px 0 6px 6px; -} -.note-popover .hidden, .o_css_editor .hidden, .web_editor-dialog .hidden, .note-image-dialog .hidden { - display: none !important; -} -.note-popover .img-responsive, .o_css_editor .img-responsive, .web_editor-dialog .img-responsive, .note-image-dialog .img-responsive { - display: block; - width: 100% \9; - max-width: 100%; - height: auto; -} -.note-popover .well, .o_css_editor .well, .web_editor-dialog .well, .note-image-dialog .well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #e3e3e3; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.note-popover .sr-only, .o_css_editor .sr-only, .web_editor-dialog .sr-only, .note-image-dialog .sr-only { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} -.note-popover .text-center, .o_css_editor .text-center, .web_editor-dialog .text-center, .note-image-dialog .text-center { - text-align: center; -} -.note-popover .text-muted, .o_css_editor .text-muted, .web_editor-dialog .text-muted, .note-image-dialog .text-muted { - color: #b3b3b3; -} - -.note-popover .btn { - height: 30px; -} - -.note-popover, .o_css_editor { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 1.42857; - color: #666; -} -.note-popover button, .o_css_editor button { - margin: 0; -} -.note-popover a, .o_css_editor a { - color: #428bca; -} -.note-popover a:hover, .note-popover a:focus, .o_css_editor a:hover, .o_css_editor a:focus { - color: #2a6496; - text-decoration: underline; -} -.note-popover .popover, .o_css_editor .popover { - position: fixed !important; - top: 1px !important; - right: auto !important; - left: 300px !important; - margin-top: 0 !important; - border: 0; - background: transparent; - box-shadow: none; - -webkit-box-shadow: none; - z-index: 1040; - padding: 1px; - text-align: left; - white-space: normal; - border-radius: 6px; - max-width: none; -} -.note-popover .popover .popover-content, .o_css_editor .popover .popover-content { - padding: 0; - margin: 0 0 0 6px; -} -.note-popover .popover .popover-content .note-para .dropdown-menu, .o_css_editor .popover .popover-content .note-para .dropdown-menu { - min-width: 148px !important; - padding: 5px 0 5px 5px !important; -} -.note-popover .popover .popover-content .note-ul .dropdown-menu, .o_css_editor .popover .popover-content .note-ul .dropdown-menu { - min-width: 150px !important; - padding: 5px 0 5px 5px !important; -} -.note-popover .popover .popover-content .note-ul .dropdown-menu .note-li, .o_css_editor .popover .popover-content .note-ul .dropdown-menu .note-li { - margin-right: 5px; -} -.note-popover .popover .popover-content .colorpicker, .o_css_editor .popover .popover-content .colorpicker { - margin: 0; -} -.note-popover .popover .popover-content .colorpicker td > *, .o_css_editor .popover .popover-content .colorpicker td > * { - width: 20px; - height: 20px; - padding: 0; - margin: 0; - border: 1px solid #fff; -} -.note-popover .popover .popover-content .btn-group, .o_css_editor .popover .popover-content .btn-group { - margin: 0 5px 0 0; -} -.note-popover .popover .popover-content > a, .o_css_editor .popover .popover-content > a { - border-radius: 3px; - background-color: #fff; - border-color: #ccc; - padding: 4px 10px; - font-size: 14px; - line-height: 1.5; -} -.note-popover .popover .popover-content > span, .o_css_editor .popover .popover-content > span { - display: inline-block; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: middle; - border-radius: 3px; - background-color: white; - border-color: #cccccc; - padding: 4px 10px; - font-size: 14px; - line-height: 1.5; -} -.note-popover .arrow, .o_css_editor .arrow { - display: none; -} - -.note-popover .btn-default, .o_css_editor .btn-default, .web_editor-dialog .modal-footer .btn-default { - color: #333; - background-color: #fff; - border-color: #ccc; -} -.note-popover .btn-primary, .o_css_editor .btn-primary, .web_editor-dialog .modal-footer .btn-primary { - color: #fff; - background-color: #428bca; - border-color: #357ebd; -} - -.web_editor-dialog, .note-image-dialog { - color: #666; - display: none; - overflow: hidden; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; - -webkit-overflow-scrolling: touch; - outline: 0; -} -.web_editor-dialog .btn, .note-image-dialog .btn { - border-color: #ccc; -} -.web_editor-dialog .btn-link, .note-image-dialog .btn-link { - border-color: transparent; -} -.web_editor-dialog .btn-primary, .note-image-dialog .btn-primary { - color: #fff; - background-color: #428bca; - border-color: #357ebd; -} -.web_editor-dialog .btn-danger, .note-image-dialog .btn-danger { - color: #fff; - background-color: #d9534f; - border-color: #d43f3a; -} -.web_editor-dialog .modal-header a, .web_editor-dialog .modal-footer a, .note-image-dialog .modal-header a, .note-image-dialog .modal-footer a { - color: #428bca; -} -.web_editor-dialog .modal-header a:hover, .web_editor-dialog .modal-header a:focus, .web_editor-dialog .modal-footer a:hover, .web_editor-dialog .modal-footer a:focus, .note-image-dialog .modal-header a:hover, .note-image-dialog .modal-header a:focus, .note-image-dialog .modal-footer a:hover, .note-image-dialog .modal-footer a:focus { - color: #2a6496; - text-decoration: underline; -} -.web_editor-dialog .modal-header .btn, .web_editor-dialog .modal-footer .btn, .note-image-dialog .modal-header .btn, .note-image-dialog .modal-footer .btn { - border-color: #ccc; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857; - border-radius: 4px; -} -.web_editor-dialog .link-style .dropdown > .btn, .note-image-dialog .link-style .dropdown > .btn { - min-width: 160px; -} -.web_editor-dialog .link-style li, .note-image-dialog .link-style li { - text-align: center; -} -.web_editor-dialog .link-style li label, .note-image-dialog .link-style li label { - width: 100px; - margin: 0 5px; -} -.web_editor-dialog .link-style li label input.link-style, .note-image-dialog .link-style li label input.link-style { - display: none; -} -.web_editor-dialog .modal-title, .note-image-dialog .modal-title { - margin: 0; - line-height: 1.42857; -} -.web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog { - position: relative; - width: auto; - margin: 10px; -} -.web_editor-dialog .modal-content, .note-image-dialog .modal-content { - position: relative; - background-color: #fff; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, 0.2); - border-radius: 6px; - -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); - box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); - background-clip: padding-box; - outline: 0; -} -.web_editor-dialog .modal-header, .note-image-dialog .modal-header { - padding: 15px; - border-bottom: 1px solid #e5e5e5; - min-height: 16.43px; -} -.web_editor-dialog .modal-header .close, .note-image-dialog .modal-header .close { - margin-top: -2px; -} -.web_editor-dialog .modal-body, .note-image-dialog .modal-body { - position: relative; - padding: 15px; -} -.web_editor-dialog .modal-footer, .note-image-dialog .modal-footer { - text-align: left; - padding: 15px; - border-top: 1px solid #e5e5e5; -} -.web_editor-dialog .close, .note-image-dialog .close { - float: right; - font-size: 21px; - font-weight: 700; - line-height: 1; - color: #000; - text-shadow: 0 1px 0 #fff; - opacity: 0.2; - filter: alpha(opacity=20); -} -.web_editor-dialog button.close, .note-image-dialog button.close { - padding: 0; - cursor: pointer; - background: 0 0; - border: 0; - -webkit-appearance: none; -} - -.note-image-dialog .btn { - height: 34px; - font-size: 14px; -} - -@media (min-width: 768px) { - .web_editor-dialog .modal-dialog, .note-image-dialog .modal-dialog { - width: 600px; - margin: 30px auto; - } - .web_editor-dialog .modal-content, .note-image-dialog .modal-content { - -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); - } - - .note-popover .col-sm-1, .note-popover .col-sm-2, .note-popover .col-sm-3, .note-popover .col-sm-4, .note-popover .col-sm-5, .note-popover .col-sm-6, .note-popover .col-sm-7, .note-popover .col-sm-8, .note-popover .col-sm-9, .note-popover .col-sm-10, .note-popover .col-sm-11, .note-popover .col-sm-12, .o_css_editor .col-sm-1, .o_css_editor .col-sm-2, .o_css_editor .col-sm-3, .o_css_editor .col-sm-4, .o_css_editor .col-sm-5, .o_css_editor .col-sm-6, .o_css_editor .col-sm-7, .o_css_editor .col-sm-8, .o_css_editor .col-sm-9, .o_css_editor .col-sm-10, .o_css_editor .col-sm-11, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-1, .web_editor-dialog .col-sm-2, .web_editor-dialog .col-sm-3, .web_editor-dialog .col-sm-4, .web_editor-dialog .col-sm-5, .web_editor-dialog .col-sm-6, .web_editor-dialog .col-sm-7, .web_editor-dialog .col-sm-8, .web_editor-dialog .col-sm-9, .web_editor-dialog .col-sm-10, .web_editor-dialog .col-sm-11, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-1, .note-image-dialog .col-sm-2, .note-image-dialog .col-sm-3, .note-image-dialog .col-sm-4, .note-image-dialog .col-sm-5, .note-image-dialog .col-sm-6, .note-image-dialog .col-sm-7, .note-image-dialog .col-sm-8, .note-image-dialog .col-sm-9, .note-image-dialog .col-sm-10, .note-image-dialog .col-sm-11, .note-image-dialog .col-sm-12 { - float: left; - } - .note-popover .col-sm-12, .o_css_editor .col-sm-12, .web_editor-dialog .col-sm-12, .note-image-dialog .col-sm-12 { - width: 100%; - } - .note-popover .col-sm-11, .o_css_editor .col-sm-11, .web_editor-dialog .col-sm-11, .note-image-dialog .col-sm-11 { - width: 91.66667%; - } - .note-popover .col-sm-10, .o_css_editor .col-sm-10, .web_editor-dialog .col-sm-10, .note-image-dialog .col-sm-10 { - width: 83.33333%; - } - .note-popover .col-sm-9, .o_css_editor .col-sm-9, .web_editor-dialog .col-sm-9, .note-image-dialog .col-sm-9 { - width: 75%; - } - .note-popover .col-sm-8, .o_css_editor .col-sm-8, .web_editor-dialog .col-sm-8, .note-image-dialog .col-sm-8 { - width: 66.66667%; - } - .note-popover .col-sm-7, .o_css_editor .col-sm-7, .web_editor-dialog .col-sm-7, .note-image-dialog .col-sm-7 { - width: 58.33333%; - } - .note-popover .col-sm-6, .o_css_editor .col-sm-6, .web_editor-dialog .col-sm-6, .note-image-dialog .col-sm-6 { - width: 50%; - } - .note-popover .col-sm-5, .o_css_editor .col-sm-5, .web_editor-dialog .col-sm-5, .note-image-dialog .col-sm-5 { - width: 41.66667%; - } - .note-popover .col-sm-4, .o_css_editor .col-sm-4, .web_editor-dialog .col-sm-4, .note-image-dialog .col-sm-4 { - width: 33.33333%; - } - .note-popover .col-sm-3, .o_css_editor .col-sm-3, .web_editor-dialog .col-sm-3, .note-image-dialog .col-sm-3 { - width: 25%; - } - .note-popover .col-sm-2, .o_css_editor .col-sm-2, .web_editor-dialog .col-sm-2, .note-image-dialog .col-sm-2 { - width: 16.66667%; - } - .note-popover .col-sm-1, .o_css_editor .col-sm-1, .web_editor-dialog .col-sm-1, .note-image-dialog .col-sm-1 { - width: 8.33333%; - } - .note-popover .form-horizontal .control-label, .o_css_editor .form-horizontal .control-label, .web_editor-dialog .form-horizontal .control-label, .note-image-dialog .form-horizontal .control-label { - text-align: right; - margin-bottom: 0; - padding-top: 7px; - } - .note-popover .form-inline .form-group, .o_css_editor .form-inline .form-group, .web_editor-dialog .form-inline .form-group, .note-image-dialog .form-inline .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle; - } -} -.modal-open .web_editor-dialog, .modal-open .note-image-dialog { - overflow-x: hidden; - overflow-y: auto; -} - -.editor_enable .modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1040; - background-color: #000; -} -.editor_enable .modal-backdrop.in { - opacity: 0.5; - filter: alpha(opacity=50); -} - -.note-image-dialog .select-media { - width: 80%; -} -.note-image-dialog .existing-attachments .pager { - margin: 0; -} -.note-image-dialog .existing-attachments .pager .disabled { - display: none; -} -.note-image-dialog .existing-attachments .existing-attachment-cell { - position: relative; -} -.note-image-dialog .existing-attachments .existing-attachment-cell .o_attachment_border { - border: 1px solid #848490; - text-align: center; -} -.note-image-dialog .existing-attachments .existing-attachment-cell .o_image { - max-width: 100%; - padding-top: 80%; - max-height: 100%; - display: inline-block; -} -.note-image-dialog .existing-attachments .existing-attachment-cell .o_image img { - width: 100%; -} -.note-image-dialog .existing-attachments .existing-attachment-cell .o_webimage { - background-image: none; - padding-top: 0; - width: 100%; - height: initial; - vertical-align: middle; -} -.note-image-dialog .existing-attachments .existing-attachment-cell .existing-attachment-remove { - position: absolute; - top: 0; - left: 15px; - z-index: 1; - cursor: pointer; - background: white; - padding: 2px; - border: 1px solid #848490; - border-top: none; - border-left: none; - -moz-border-radius-bottomright: 8px; - -webkit-border-bottom-right-radius: 8px; - border-bottom-right-radius: 8px; -} -.note-image-dialog .existing-attachments .existing-attachment-cell.media_selected > * { - border-width: 5px; - border-color: #00f8f8; -} -.note-image-dialog .image-preview { - margin-bottom: 0.5em; -} -.note-image-dialog .font-icons-icons { - font-size: 2em; - max-height: 9em; - overflow: auto; -} -.note-image-dialog .font-icons-icons .font-icons-icon { - display: inline-block; - width: 2em; - padding: 0.25em; - text-align: center; - cursor: pointer; -} -.note-image-dialog .font-icons { - position: relative; - display: block; -} -.note-image-dialog .font-icons:before { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); - opacity: 0.7; - position: absolute; - top: 2px; - left: 3px; - font-size: 2em; -} -.note-image-dialog #icon-search { - padding-left: 2.5em; -} -.note-image-dialog .font-icons-selected { - background-color: #ddd; -} -.note-image-dialog.nosave .wait { - display: inline-block !important; - visibility: visible !important; -} -.note-image-dialog.nosave .modal-body .filepicker, .note-image-dialog.nosave .modal-body .image-preview { - display: none; -} -.note-image-dialog.nosave .modal-body .wait { - width: 100%; -} -.note-image-dialog.nosave .modal-footer .save { - display: none; -} -.note-image-dialog .preview-container { - text-align: center; - line-height: 100px; - height: 100px; -} -.note-image-dialog .preview-container > * { - max-height: 100px; - line-height: 100px; - margin: 0 auto; - display: inline-block; -} - -/* }}} */ -/* ---- COLOR-PICKER ---- {{{ */ -.colorpicker { - margin: 0 auto; - background: transparent; - border: 0; -} -.colorpicker td { - padding: 0; - background: transparent; -} -.colorpicker td > * { - width: 16px; - height: 16px; - border-radius: 2px; - margin: 3px; - padding: 0; - border-width: 1px; - display: block; -} -.colorpicker .only-text { - display: none; -} -.colorpicker .automatic-color { - background: #fff; - border-left: 7px solid #f33; - border-top: 7px solid #0e0; - border-right: 8px solid #33f; - border-bottom: 8px solid #fe0; - margin: 4px 3px 3px 3px; - width: 0; - height: 0; -} - -/* }}} */ -/* ---- TRANSLATIONS ---- {{{ */ -.oe_translate_examples li { - margin: 10px; - padding: 4px; -} - -html[lang] > body.editor_enable [data-oe-translation-state] { - background: rgba(255, 255, 90, 0.5) !important; -} -html[lang] > body.editor_enable [data-oe-translation-state]:hover { - background: inherit !important; - cursor: text; -} -html[lang] > body.editor_enable [data-oe-translation-state="translated"] { - background: rgba(120, 215, 110, 0.5) !important; -} - -html[data-translatable] .oe_field_translate { - display: block; -} - -html[data-translatable] .oe_field_translate { - display: none; -} - -/* }}} */ -/* ---- editable ---- {{{ */ -.o_editable:not(:empty):not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, .o_editable[data-oe-type]:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { - /* to do change into primary color in less */ - -moz-box-shadow: #3071a9 0 0 5px 2px inset; - -webkit-box-shadow: #3071a9 0 0 5px 2px inset; - box-shadow: #3071a9 0 0 5px 2px inset; -} -.o_editable:focus, .o_editable[data-oe-type] { - min-height: 0.8em; - min-width: 8px; -} -.o_editable.o_is_inline_editable { - display: inline-block; -} -.o_editable:focus { - outline: none !important; -} - -/* Prevent the text contents of draggable elements from being selectable. */ -[draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -.o_editable .btn, .btn.o_editable { - -webkit-user-select: auto; - -moz-user-select: auto; - -ms-user-select: auto; - user-select: auto; - cursor: text !important; -} - -.o_editable .fa { - cursor: pointer; -} - -.css_editable_display { - display: block !important; -} - -.css_editable_hidden { - display: none !important; -} - -.editor_enable [data-oe-readonly]:hover { - cursor: default; -} -.editor_enable .css_editable_mode_hidden { - display: none; -} -.editor_enable .css_non_editable_mode_hidden { - display: block !important; -} -.editor_enable .media_iframe_video .css_editable_mode_display { - display: block !important; -} - -.editor_enable [placeholder]:empty:after { - content: "  " attr(placeholder); - opacity: 0.5; -} -.editor_enable [placeholder]:empty:active:after, [placeholder]:empty:focus:after { - content: none; -} -.editor_enable input[placeholder]:empty:after, .editor_enable textarea[placeholder]:empty:after, .editor_enable select[placeholder]:empty:after { - content: none; -} -.oe_empty[placeholder]:empty { - min-height: 220px !important; - background-repeat: no-repeat; - background-position: center; -} -.oe_empty[placeholder]:empty:not(.o_editable) { - background-image: url("/web_editor/static/src/img/edit_here.png") !important; -} -.oe_empty[placeholder]:empty:after, .oe_empty[placeholder]:empty:before { - opacity: 0.4; - overflow: hidden; - z-index: -1; - min-height: 1em; -} -.oe_empty[placeholder]:empty:after { - text-align: center; - padding-top: 160px; - display: block; - font-size: 24px; -} -.oe_empty[placeholder]:empty.o_no_placeholder_image { - background-image: none; - text-align: left; - padding-top: 0; -} -.oe_empty[placeholder]:empty[data-oe-type=html]:after { - font-size: 16px; -} - -.editor_has_snippets .oe_empty[placeholder]:empty { - background-image: url("/web_editor/static/src/img/drag_here.png") !important; -} - -#web_editor-top-edit { - width: 100%; - min-height: 34px; - height: 34px; - background-color: #222; - border-color: #080808; - border-width: 0 0 1px; - position: fixed; - border-radius: 0; - top: 0; - right: 0; - left: 0; - z-index: 1030; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} -#web_editor-top-edit .btn-link { - color: #b3b3b3; -} -#web_editor-top-edit > ul > li { - margin: 0; -} -#web_editor-top-edit form { - padding: 0 10px 0 15px; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - margin: 0; -} -#web_editor-top-edit form button, #web_editor-top-edit form a { - padding: 4px 8px 4px 8px; - margin-top: 2px; - font-size: 13px; -} - -#editable_area { - margin-top: 34px; -} - -/* }}} */ -/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */ -.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child { - position: static; -} - -.css_editable_display { - display: none; -} - -.oe_carlos_danger { - outline: 1px solid red !important; - background-color: #ffd9dd !important; -} - -/* }}} */ diff --git a/addons/web_editor/static/src/css/editor.sass b/addons/web_editor/static/src/css/editor.sass deleted file mode 100644 index bf929e89002..00000000000 --- a/addons/web_editor/static/src/css/editor.sass +++ /dev/null @@ -1,876 +0,0 @@ -@import "compass/css3" -@import "compass/css3/user-interface" -@import "compass/css3/transition" -@import "compass/support" - - -/* ---- EDITOR BAR ---- {{{ */ - -.note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog - * - box-sizing: border-box - a - text-decoration: none - ul, ol - margin-top: 0 - margin-bottom: 10px - - .clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical>.btn-group:before, .btn-group-vertical>.btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after - content: " " - display: table - clear: both - - .caret - display: inline-block - width: 0 - height: 0 - vertical-align: middle - border-top: 4px solid - border-right: 4px solid transparent - border-left: 4px solid transparent - - /* button */ - - .btn.dropdown-toggle - position: relative - float: left - .btn - display: inline-block - margin-bottom: 0 - font-weight: 400 - text-align: center - vertical-align: middle - cursor: pointer - background-image: none - border: 1px solid transparent - white-space: nowrap - -webkit-user-select: none - -moz-user-select: none - -ms-user-select: none - user-select: none - border-radius: 4px - .caret - margin-left: 0 - &.disabled, &[disabled], &.disabled:hover, &[disabled]:active - cursor: not-allowed - pointer-events: none - opacity: .65 - filter: alpha(opacity=65) - -webkit-box-shadow: none - box-shadow: none - .btn-sm - padding: 5px 10px - font-size: 12px - line-height: 1.5 - border-radius: 3px - .btn-group - padding-top: 0 - margin-top: 0 - position: relative - display: inline-block - vertical-align: middle - > .btn - position: relative - float: left - &:first-child - margin-left: 0 - &:first-child:not(:last-child):not(.dropdown-toggle) - border-top-right-radius: 0 - border-bottom-right-radius: 0 - &:not(:first-child):not(:last-child):not(.dropdown-toggle) - border-radius: 0 - &:last-child:not(:first-child), >.dropdown-toggle:not(:first-child) - border-bottom-left-radius: 0 - border-top-left-radius: 0 - &+.dropdown-toggle - padding-left: 8px - padding-right: 8px - &.active - color: #333 - background-color: #e6e6e6 - border-color: #adadad - .btn+.btn, .btn+.btn-group, +.btn, +.btn-group - margin-left: -1px - .btn-link - border-color: transparent - color: #428bca - &:hover, &:focus - color: #2a6496 - text-decoration: underline - background-color: transparent - - /* form */ - - .form-group - margin-bottom: 15px - .form-control - display: block - width: 100% - height: 34px - padding: 6px 12px - font-size: 14px - line-height: 1.42857143 - color: #555 - background-color: #fff - background-image: none - border: 1px solid #ccc - border-radius: 4px - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) - box-shadow: inset 0 1px 1px rgba(0,0,0,.075) - .form-horizontal .form-group - margin-left: -15px - margin-right: -15px - .form-group - margin-bottom: 15px - .form-control.select2-container - height: auto !important - padding: 0 - label - display: inline-block - max-width: 100% - margin-bottom: 5px - font-weight: 700 - - /* col */ - - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-lg-12 - position: relative - min-height: 1px - padding-left: 15px - padding-right: 15px - width: 100% - - /* dropdown */ - - .dropdown - position: relative - .dropdown, .btn-group - > .btn - color: #333 - background-color: #fff - border-color: #ccc - text-decoration: none - > .btn-primary - color: #fff - background-color: #428bca - border-color: #357ebd - .dropdown-menu - position: absolute - top: 100% - left: 0 - z-index: 1000 - display: none - float: left - min-width: 160px - padding: 5px 0 - margin: 2px 0 0 - list-style: none - font-size: 14px - text-align: left - background-color: #fff - border: 1px solid #ccc - border: 1px solid rgba(0,0,0,.15) - border-radius: 4px - -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175) - box-shadow: 0 6px 12px rgba(0,0,0,.175) - background-clip: padding-box - > li > a - display: block !important - padding: 3px 20px - clear: both - font-weight: normal - color: #666 - white-space: nowrap - background: transparent - > li.active > a - color: #fff - text-decoration: none - background-color: #428bca - outline: 0 - .open > .dropdown-menu - display: block - - /* list-group */ - - .list-group - margin-bottom: 20px - padding-left: 0 - .list-group-item - position: relative - display: block - padding: 10px 15px - margin-bottom: -1px - background-color: #fff - border: 1px solid #ddd - .list-group-item:first-child - border-top-right-radius: 4px - border-top-left-radius: 4px - .list-group-item:last-child - margin-bottom: 0 - border-bottom-right-radius: 4px - border-bottom-left-radius: 4px - .list-group-item-heading - margin-top: 0 - margin-bottom: 5px - .list-group-item.active - z-index: 2 - color: #fff - background-color: #428bca - border-color: #428bca - - /* tab */ - - .tab-content > .tab-pane - display: none - .tab-content > .active - display: block - .nav - margin-bottom: 0 - padding-left: 0 - list-style: none - .nav > li - position: relative - display: block - .nav > li > a - position: relative - display: block - padding: 10px 15px - .nav-tabs - border-bottom: 1px solid #ddd - .nav-tabs > li - float: left - margin-bottom: -1px - .nav-tabs > li > a - margin-right: 2px - line-height: 1.42857143 - border: 1px solid transparent - border-radius: 4px 4px 0 0 - .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus - color: #8c8c8c - background-color: #fff - border: 1px solid #ddd - border-bottom-color: transparent - cursor: default - - /* pager */ - - .pager - padding-left: 0 - margin: 20px 0 - list-style: none - text-align: center - li - display: inline - li > a, li > span - display: inline-block - padding: 5px 14px - background-color: #fff - border: 1px solid #ddd - border-radius: 15px - .previous > a, .previous > span - float: left - .disabled > a, .disabled > a:hover, .disabled > a:focus, .disabled > span - color: #b3b3b3 - background-color: #fff - cursor: not-allowed - - /* add submenu css */ - - .dropdown-submenu - position: relative - z-index: 1000 - .dropdown-submenu - &>.dropdown-menu - top: 0 - left: 100% - margin-top: -6px - margin-left: -1px - -webkit-border-radius: 0 6px 6px 6px - -moz-border-radius: 0 6px 6px 6px - border-radius: 0 6px 6px 6px - &:hover - &>.dropdown-menu - display: block - &>a:after - border-left-color: #ffffff - &>a:after - display: block - content: " " - float: right - width: 0 - height: 0 - border-color: transparent - border-style: solid - border-width: 5px 0 5px 5px - border-left-color: #cccccc - margin-top: 5px - margin-right: -10px - &.pull-left - float: none - &>.dropdown-menu - left: -100% - margin-left: 10px - -webkit-border-radius: 6px 0 6px 6px - -moz-border-radius: 6px 0 6px 6px - border-radius: 6px 0 6px 6px - - /* global */ - - .hidden - display: none !important - .img-responsive - display: block - width: 100% \9 - max-width: 100% - height: auto - .well - min-height: 20px - padding: 19px - margin-bottom: 20px - background-color: #f5f5f5 - border: 1px solid #e3e3e3 - border-radius: 4px - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05) - box-shadow: inset 0 1px 1px rgba(0,0,0,.05) - .sr-only - position: absolute - width: 1px - height: 1px - margin: -1px - padding: 0 - overflow: hidden - clip: rect(0,0,0,0) - border: 0 - .text-center - text-align: center - .text-muted - color: #b3b3b3 - -.note-popover .btn - height: 30px -.note-popover, .o_css_editor - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif - font-size: 14px - line-height: 1.42857143 - color: #666 - button - margin: 0 - a - color: #428bca - &:hover, &:focus - color: #2a6496 - text-decoration: underline - - .popover - position: fixed !important - top: 1px !important - right: auto !important - left: 300px !important - margin-top: 0 !important - border: 0 - background: transparent - box-shadow: none - -webkit-box-shadow: none - z-index: 1040 - padding: 1px - text-align: left - white-space: normal - border-radius: 6px - max-width: none - .popover-content - padding: 0 - margin: 0 0 0 6px - .note-para .dropdown-menu - min-width: 148px !important - padding: 5px 0 5px 5px !important - .note-ul .dropdown-menu - min-width: 150px !important - padding: 5px 0 5px 5px !important - .note-li - margin-right: 5px - .colorpicker - margin: 0 - td > * - width: 20px - height: 20px - padding: 0 - margin: 0 - border: 1px solid #fff - .btn-group - margin: 0 5px 0 0 - > a - border-radius: 3px - background-color: #fff - border-color: #ccc - padding: 4px 10px - font-size: 14px - line-height: 1.5 - > span - display: inline-block - max-width: 200px - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - vertical-align: middle - border-radius: 3px - background-color: white - border-color: #cccccc - padding: 4px 10px - font-size: 14px - line-height: 1.5 - .arrow - display: none - -.note-popover, .o_css_editor, .web_editor-dialog .modal-footer - .btn-default - color: #333 - background-color: #fff - border-color: #ccc - .btn-primary - color: #fff - background-color: #428bca - border-color: #357ebd - -.web_editor-dialog, .note-image-dialog - color: #666 - display: none - overflow: hidden - position: fixed - top: 0 - right: 0 - bottom: 0 - left: 0 - z-index: 1050 - -webkit-overflow-scrolling: touch - outline: 0 - .btn - border-color: #ccc - .btn-link - border-color: transparent - .btn-primary - color: #fff - background-color: #428bca - border-color: #357ebd - .btn-danger - color: #fff - background-color: #d9534f - border-color: #d43f3a - .modal-header, .modal-footer - a - color: #428bca - &:hover, &:focus - color: #2a6496 - text-decoration: underline - .btn - border-color: #ccc - padding: 6px 12px - font-size: 14px - line-height: 1.42857143 - border-radius: 4px - .link-style - .dropdown > .btn - min-width: 160px - li - text-align: center - label - width: 100px - margin: 0 5px - input.link-style - display: none - .modal-title - margin: 0 - line-height: 1.42857143 - .modal-dialog - position: relative - width: auto - margin: 10px - .modal-content - position: relative - background-color: #fff - border: 1px solid #999 - border: 1px solid rgba(0,0,0,.2) - border-radius: 6px - -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5) - box-shadow: 0 3px 9px rgba(0,0,0,.5) - background-clip: padding-box - outline: 0 - .modal-header - padding: 15px - border-bottom: 1px solid #e5e5e5 - min-height: 16.43px - .close - margin-top: -2px - .modal-body - position: relative - padding: 15px - .modal-footer - text-align: left - padding: 15px - border-top: 1px solid #e5e5e5 - .close - float: right - font-size: 21px - font-weight: 700 - line-height: 1 - color: #000 - text-shadow: 0 1px 0 #fff - opacity: .2 - filter: alpha(opacity=20) - button.close - padding: 0 - cursor: pointer - background: 0 0 - border: 0 - -webkit-appearance: none - -.note-image-dialog .btn - height: 34px - font-size: 14px - -@media (min-width: 768px) - .web_editor-dialog, .note-image-dialog - .modal-dialog - width: 600px - margin: 30px auto - .modal-content - -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5) - box-shadow: 0 5px 15px rgba(0,0,0,.5) - .note-popover, .o_css_editor, .web_editor-dialog, .note-image-dialog - .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 - float: left - .col-sm-12 - width: 100% - .col-sm-11 - width: 91.66666667% - .col-sm-10 - width: 83.33333333% - .col-sm-9 - width: 75% - .col-sm-8 - width: 66.66666667% - .col-sm-7 - width: 58.33333333% - .col-sm-6 - width: 50% - .col-sm-5 - width: 41.66666667% - .col-sm-4 - width: 33.33333333% - .col-sm-3 - width: 25% - .col-sm-2 - width: 16.66666667% - .col-sm-1 - width: 8.33333333% - .form-horizontal .control-label - text-align: right - margin-bottom: 0 - padding-top: 7px - .form-inline .form-group - display: inline-block - margin-bottom: 0 - vertical-align: middle - -.modal-open - .web_editor-dialog, .note-image-dialog - overflow-x: hidden - overflow-y: auto -.editor_enable - .modal-backdrop - position: fixed - top: 0 - right: 0 - bottom: 0 - left: 0 - z-index: 1040 - background-color: #000 - .modal-backdrop.in - opacity: .5 - filter: alpha(opacity=50) - -$attachment-border-color: #848490 -.note-image-dialog - .select-media - width: 80% - - .existing-attachments .pager - margin: 0 - .existing-attachments - .pager .disabled - display: none - - .existing-attachment-cell - position: relative - .o_attachment_border - border: 1px solid $attachment-border-color - text-align: center - .o_image - max-width: 100% - padding-top: 80% - max-height: 100% - display: inline-block - img - width: 100% - .o_webimage - background-image: none - padding-top: 0 - width: 100% - height: initial - vertical-align: middle - .existing-attachment-remove - position: absolute - top: 0 - left: 15px // padding-left on col-* - z-index: 1 - cursor: pointer - background: white - padding: 2px - border: 1px solid $attachment-border-color - border-top: none - border-left: none - +border-bottom-right-radius(8px) - &.media_selected - > * - border-width: 5px - border-color: rgb(0, 248, 248) - - .image-preview - margin-bottom: 0.5em - .font-icons-icons - font-size: 2em - max-height: 9em - overflow: auto - .font-icons-icon - display: inline-block - width: 2em - padding: 0.25em - text-align: center - cursor: pointer - .font-icons - position: relative - display: block - - &:before - +opacity(0.7) - position: absolute - top: 2px - left: 3px - font-size: 2em - #icon-search - padding-left: 2.5em - .font-icons-selected - background-color: #ddd - &.nosave - .wait - display: inline-block !important - visibility: visible !important - .modal-body - .filepicker, .image-preview - display: none - .wait - width: 100% - .modal-footer .save - display: none - .preview-container - text-align: center - line-height: 100px - height: 100px - > * - max-height: 100px - line-height: 100px - margin: 0 auto - display: inline-block - -/* }}} */ - -/* ---- COLOR-PICKER ---- {{{ */ - -.colorpicker - margin: 0 auto - background: transparent - border: 0 - td - padding: 0 - background: transparent - > * - width: 16px - height: 16px - border-radius: 2px - margin: 3px - padding: 0 - border-width: 1px - display: block - .only-text - display: none - .automatic-color - background: #fff - border-left: 7px solid #f33 - border-top: 7px solid #0e0 - border-right: 8px solid #33f - border-bottom: 8px solid #fe0 - margin: 4px 3px 3px 3px - width: 0 - height: 0 - -/* }}} */ - -/* ---- TRANSLATIONS ---- {{{ */ - -o_translatable_translated - -.oe_translate_examples li - margin: 10px - padding: 4px -html[lang] > body.editor_enable - [data-oe-translation-state] - background: rgba(255, 255, 90, 0.5) !important - &:hover - background: inherit !important - cursor: text - [data-oe-translation-state="translated"] - background: rgba(120, 215, 110, 0.5) !important -html[data-translatable] .oe_field_translate - display: block -html[data-translatable] .oe_field_translate - display: none - -/* }}} */ - -/* ---- editable ---- {{{ */ - -.o_editable - &:not(:empty),&[data-oe-type] - &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover - /* to do change into primary color in less */ - -moz-box-shadow: #3071a9 0 0 5px 2px inset - -webkit-box-shadow: #3071a9 0 0 5px 2px inset - box-shadow: #3071a9 0 0 5px 2px inset - &:focus,&[data-oe-type] - min-height: 0.8em - min-width: 8px - &.o_is_inline_editable - display: inline-block - &:focus - outline: none !important - -/* Prevent the text contents of draggable elements from being selectable. */ -[draggable] - -moz-user-select: none - -khtml-user-select: none - -webkit-user-select: none - user-select: none - -// bootstrap makes .btn elements unselectable -> RTE double-click can't know -// about them either -.o_editable .btn, .btn.o_editable - -webkit-user-select: auto - -moz-user-select: auto - -ms-user-select: auto - user-select: auto - cursor: text !important -.o_editable .fa - cursor: pointer - -.css_editable_display - display: block !important - -.css_editable_hidden - display: none !important - -.editor_enable - [data-oe-readonly]:hover - cursor: default - .css_editable_mode_hidden - display: none - .css_non_editable_mode_hidden - display: block !important - .media_iframe_video .css_editable_mode_display - display: block !important - - [placeholder]:empty - content: " \00a0 " attr(placeholder) - [placeholder]:empty:active:after, [placeholder]:empty:focus:after - content: none - input, textarea, select - &[placeholder]:empty - content: none - -.oe_empty[placeholder]:empty - min-height: 220px !important - background-repeat: no-repeat - background-position: center - - &:not(.o_editable) - background-image: url('/web_editor/static/src/img/edit_here.png') !important - - &:after, &:before - opacity: 0.4 - overflow: hidden - z-index: -1 - min-height: 1em - - &:after - text-align: center - padding-top: 160px - display: block - font-size: 24px - - &.o_no_placeholder_image - background-image: none - text-align: left - padding-top: 0 - - &[data-oe-type=html] - &:after - font-size: 16px -.editor_has_snippets .oe_empty[placeholder]:empty - background-image: url('/web_editor/static/src/img/drag_here.png') !important - -#web_editor-top-edit - width: 100% - min-height: 34px - height: 34px - background-color: #222 - border-color: #080808 - border-width: 0 0 1px - position: fixed - border-radius: 0 - top: 0 - right: 0 - left: 0 - z-index: 1030 - -webkit-transform: translate3d(0,0,0) - transform: translate3d(0,0,0) - .btn-link - color: #b3b3b3 - > ul > li - margin: 0 - form - padding: 0 10px 0 15px - border-top: 1px solid transparent - border-bottom: 1px solid transparent - margin: 0 - button, a - padding: 4px 8px 4px 8px - margin-top: 2px - font-size: 13px - -#editable_area - margin-top: 34px - -/* }}} */ - - -/* ---- HACK FOR COVERING UP EDITOR BOGUS P INSERTION --- {{{ */ - -.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child - position: static - -.css_editable_display - display: none - -.oe_carlos_danger - outline: 1px solid red !important - background-color: #ffd9dd !important - -/* }}} */ diff --git a/addons/web_editor/static/src/css/snippets.css b/addons/web_editor/static/src/css/snippets.css deleted file mode 100644 index e203e514e87..00000000000 --- a/addons/web_editor/static/src/css/snippets.css +++ /dev/null @@ -1,499 +0,0 @@ -@charset "UTF-8"; -/* ---- SNIPPET EDITOR ---- {{{ */ -#oe_snippets #o_left_bar, #oe_snippets #o_arrow { - position: fixed; - top: 34px; - left: 0px; - bottom: 0; - background: #282828; - -moz-box-shadow: 0px 10px 10px -10px black inset; - -webkit-box-shadow: 0px 10px 10px -10px black inset; - box-shadow: 0px 10px 10px -10px black inset; - font-size: 14px; -} -#oe_snippets #o_left_bar .snippets_loading, #oe_snippets #o_arrow .snippets_loading { - color: white; -} -#oe_snippets #o_arrow { - z-index: 1009; - width: 24px; - opacity: 0.75; -} -#oe_snippets #o_arrow > * { - position: absolute; - color: white; -} -#oe_snippets #o_arrow div { - -moz-transform: translateX(-36%) rotate(-90deg); - -ms-transform: translateX(-36%) rotate(-90deg); - -webkit-transform: translateX(-36%) rotate(-90deg); - transform: translateX(-36%) rotate(-90deg); - top: 50%; - white-space: nowrap; -} -#oe_snippets #o_arrow .fa { - width: 100%; - left: 40%; -} -#oe_snippets #o_left_bar { - left: -228px; - z-index: 1010; - width: 210px; - -moz-transition: all 500ms ease; - -o-transition: all 500ms ease; - -webkit-transition: all 500ms ease; - transition: all 500ms ease; -} -#oe_snippets #o_left_bar ul { - text-align: center; - margin: 0; - padding: 6px 0; - list-style-type: none; -} -#oe_snippets #o_left_bar ul li { - display: inline-block; - padding: 0 3px; -} -#oe_snippets #o_left_bar ul li a { - color: #aaa; -} -#oe_snippets #o_left_bar ul li .fa-stack { - overflow: hidden; -} -#oe_snippets #o_left_bar ul li.active a.fa, #oe_snippets #o_left_bar ul li.active .fa-stack-1x { - color: #428bca; -} -#oe_snippets.o_open #o_left_bar { - left: 0; -} -#oe_snippets .o_panel { - margin: 0; - border: 0; - width: 210px; -} -#oe_snippets .o_panel_header { - background: #dff0d8; - padding: 1px 8px; - color: #414141; - text-align: center; -} -#oe_snippets .o_panel_header .fa-stack { - overflow: hidden; - font-size: 1em; -} -#oe_snippets .o_panel_body { - white-space: normal; - background: black; - padding: 7px 3px; -} -#oe_snippets .o_panel_body > div { - background: black; -} -#oe_snippets .o_panel_body > div label { - width: 44px; - color: #fff; - padding-left: 10px; -} -#oe_snippets .o_panel_body > div label div { - width: 100px; - text-align: center; - -moz-transform: translate(-39px, 44px); - -webkit-transform: translate(-39px, 44px); - transform: translate(-39px, 44px); - -moz-transform-origin: 50% 50%; - -ms-transform-origin: 50% 50%; - -webkit-transform-origin: 50% 50%; - transform-origin: 50% 50%; -} - -.oe_snippet { - display: inline-block; - vertical-align: top; - width: 93px; - margin-left: 3px; - margin-right: 3px; - margin-top: 1px; - position: relative; - overflow: hidden; - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; - cursor: move; -} -.oe_snippet .oe_snippet_thumbnail { - text-align: center; - height: 100%; - background: transparent; - color: white; - position: relative; -} -.oe_snippet .oe_snippet_thumbnail:hover .oe_snippet_thumbnail_img { - -moz-transform: scale(0.95, 0.95); - -ms-transform: scale(0.95, 0.95); - -webkit-transform: scale(0.95, 0.95); - transform: scale(0.95, 0.95); -} -.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_title { - font-size: 12px; - display: block; - text-shadow: 0 0 2px black; -} -.oe_snippet .oe_snippet_thumbnail .oe_snippet_thumbnail_img { - height: 74px; - width: 92px; - background-size: cover; - -moz-transform: scale(1, 1); - -ms-transform: scale(1, 1); - -webkit-transform: scale(1, 1); - transform: scale(1, 1); -} -.oe_snippet .oe_snippet_thumbnail span, .oe_snippet .oe_snippet_thumbnail div { - line-height: 18px; -} -.oe_snippet > :not(.oe_snippet_thumbnail) { - display: none !important; -} -.oe_snippet.disable .oe_snippet_thumbnail { - background-color: rgba(255, 0, 0, 0.75); -} -.oe_snippet.disable .oe_snippet_thumbnail_img { - opacity: 0.8; -} - -#oe_snippets .oe_snippet_thumbnail { - background: #747474, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background: #747474, -moz-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); - background: #747474, -webkit-radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); - background: #747474, radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4)); -} - -/* ---- SNIPPETS DROP ZONES ---- {{{ */ -.oe_drop_zone.oe_insert { - display: block; - height: 48px; - margin: 0px; - margin-top: -4px; - margin-bottom: -44px; - -moz-transition: margin 250ms linear; - -o-transition: margin 250ms linear; - -webkit-transition: margin 250ms linear; - transition: margin 250ms linear; - width: 100%; - position: absolute; - z-index: 1000; -} -.oe_drop_zone.oe_insert:not(.oe_vertical):before { - content: ""; - display: block; - border-top: dashed 2px rgba(209, 178, 255, 0.72); - position: relative; - top: 0px; -} -.oe_drop_zone.oe_insert.oe_hover:before { - border-top: dashed 2px rgba(116, 255, 161, 0.72); -} -.oe_drop_zone.oe_insert.oe_vertical { - width: 48px; - float: left; - position: relative; - margin: 0px -24px !important; -} -.oe_drop_zone.oe_insert.oe_vertical_text { - width: 48px; - float: none; - display: inline-block; - position: relative; - margin: 0px -24px !important; -} -.oe_drop_zone.oe_insert.oe_overlay { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - background: rgba(153, 0, 255, 0.5); -} - -.oe_drop_zone, .oe_drop_zone_style { - border: none; - background: rgba(153, 0, 255, 0.3); - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; -} -.oe_drop_zone.oe_hover, .oe_drop_zone_style.oe_hover { - background: rgba(0, 255, 133, 0.3); - z-index: 1001; -} - -.oe_drop_zone_style { - color: white; - height: 48px; - margin-bottom: 32px; - padding-top: 12px; -} - -/* ---- SNIPPET MANIPULATOR ---- {{{ */ -.resize_editor_busy { - background-color: rgba(0, 0, 0, 0.3); -} - -.oe_overlay { - display: none; - height: 0; - position: absolute; - background: transparent; - z-index: 1001; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - -moz-transition: opacity 100ms linear; - -o-transition: opacity 100ms linear; - -webkit-transition: opacity 100ms linear; - transition: opacity 100ms linear; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} -.oe_overlay.oe_active { - display: block; -} -.oe_overlay .oe_handle { - display: block !important; - position: absolute; - top: 50%; - left: 50%; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: 16px; - height: 16px; - margin: -2px; -} -.oe_overlay .oe_handle > div { - z-index: 1; - position: absolute; - border-style: dashed; - border-width: 1px; - border-color: #666666; - -moz-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; - -webkit-box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.5), 0px 0px 0px 1px rgba(255, 255, 255, 0.5) inset; -} -.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before, .oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before, .oe_overlay .oe_handle.size .oe_handle_button { - z-index: 2; - position: relative; - top: 50%; - left: 50%; - display: block; - background: white; - border: solid 1px rgba(0, 0, 0, 0.2); - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - width: 18px; - height: 18px; - margin: -9px; - padding-left: 1px; - font-size: 14px; - line-height: 14px; - font-family: FontAwesome; - color: rgba(0, 0, 0, 0.5); - -moz-transition: background 100ms linear; - -o-transition: background 100ms linear; - -webkit-transition: background 100ms linear; - transition: background 100ms linear; -} -.oe_overlay .oe_handle.e:hover:before, .oe_overlay .oe_handle.w:hover:before, .oe_overlay .oe_handle.s:hover:before, .oe_overlay .oe_handle.n:hover:before { - background: rgba(0, 0, 0, 0.5); - color: #fff; - -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); - -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); - box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); -} -.oe_overlay .oe_handle.e, .oe_overlay .oe_handle.w { - top: 4px; - height: 100%; -} -.oe_overlay .oe_handle.e:before, .oe_overlay .oe_handle.w:before { - content: ""; - line-height: 16px; -} -.oe_overlay .oe_handle.e > div, .oe_overlay .oe_handle.w > div { - width: 0; - height: 100%; - top: 2px; - left: 8px; -} -.oe_overlay .oe_handle.e { - left: auto; - right: -6px; - cursor: w-resize; -} -.oe_overlay .oe_handle.w { - left: -6px; - cursor: e-resize; -} -.oe_overlay .oe_handle.s, .oe_overlay .oe_handle.n { - left: 2px; - width: 100%; -} -.oe_overlay .oe_handle.s:before, .oe_overlay .oe_handle.n:before { - content: ""; - text-align: center; - padding: 1px; -} -.oe_overlay .oe_handle.s > div, .oe_overlay .oe_handle.n > div { - width: 100%; - height: 0; - top: 7px; - left: 1px; -} -.oe_overlay .oe_handle.s { - top: auto; - cursor: n-resize; -} -.oe_overlay .oe_handle.n { - cursor: s-resize; -} -.oe_overlay .oe_handle.n > div { - top: 5px; -} -.oe_overlay .oe_handle.size { - z-index: 3; - top: auto; - left: 50%; - bottom: -6px; - margin-left: -50px; -} -.oe_overlay .oe_handle.size .oe_handle_button { - position: relative; - z-index: 3; - text-align: center; - margin-left: -52px; - margin-top: -10px; - left: 0px; -} -.oe_overlay .oe_handle.size .oe_handle_button:hover { - background: rgba(30, 30, 30, 0.8); - color: #fff; - -moz-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); - -webkit-box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); - box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7); -} -.oe_overlay .oe_handle.size .size { - position: absolute; - width: 64px; - cursor: row-resize; - top: 9px; - margin-left: 52px; - padding: 0 5px; -} -.oe_overlay .oe_handle.size .auto_size { - position: absolute; - width: 100px; - top: 9px; - cursor: pointer; -} -.oe_overlay .oe_handle.readonly { - cursor: auto !important; -} -.oe_overlay .oe_handle.readonly:before, .oe_overlay .oe_handle.readonly.size { - display: none !important; -} -.oe_overlay .icon.btn { - display: inline-block; -} -.oe_overlay .oe_overlay_options { - position: absolute; - width: 100%; - top: -35px; - z-index: 1002; -} -.oe_overlay .oe_overlay_options > .btn-group { - display: -ms-flexbox; - display: -moz-box; - display: -webkit-box; - display: -webkit-flex; - display: flex; - -moz-justify-content: center; - -webkit-justify-content: center; - justify-content: center; -} -.oe_overlay .oe_overlay_options > .btn-group > * { - cursor: pointer; - -ms-flex: 0 0 auto; - -moz-flex: 0 0 auto; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - flex: 0 0 auto; -} -.oe_overlay .oe_overlay_options .btn, .oe_overlay .oe_overlay_options a { - cursor: pointer; -} -.oe_overlay .oe_overlay_options .dropdown { - display: inline-block; -} -.oe_overlay .oe_overlay_options .dropdown-menu { - text-align: left; - min-width: 180px; -} -.oe_overlay .oe_overlay_options .dropdown-menu select, .oe_overlay .oe_overlay_options .dropdown-menu input { - display: block; -} -.oe_overlay.block-w-left .w:before { - content: "" !important; -} -.oe_overlay.block-w-right .w:before { - content: "" !important; -} -.oe_overlay.block-w-left.block-w-right .w:before { - display: none !important; -} -.oe_overlay.block-e-left .e:before { - content: "" !important; -} -.oe_overlay.block-e-right .e:before { - content: "" !important; -} -.oe_overlay.block-e-left.block-e-right .e:before { - display: none !important; -} -.oe_overlay.block-s-top .s:before { - content: "" !important; -} -.oe_overlay.block-s-bottom .s:before { - content: "" !important; -} -.oe_overlay.block-n-top .n:before { - content: "" !important; -} -.oe_overlay.block-n-bottom .n:before { - content: "" !important; -} -.oe_overlay.o_keypress { - opacity: 0; - -webkit-transition: 0.8s; - -moz-transition: 0.8s; - -o-transition: 0.8s; - -transition: 0.8s; -} - -.s-resize-important, .s-resize-important * { - cursor: s-resize !important; -} - -.n-resize-important, .n-resize-important * { - cursor: n-resize !important; -} - -.e-resize-important, .e-resize-important * { - cursor: e-resize !important; -} - -.w-resize-important, .w-resize-important * { - cursor: w-resize !important; -} - -.move-important, .move-important * { - cursor: move !important; -} diff --git a/addons/web_editor/static/src/css/snippets.sass b/addons/web_editor/static/src/css/snippets.sass deleted file mode 100644 index 710c358a527..00000000000 --- a/addons/web_editor/static/src/css/snippets.sass +++ /dev/null @@ -1,384 +0,0 @@ -@import "compass/css3" -@import "compass/css3/user-interface" -@import "compass/css3/transition" - - -/* ---- SNIPPET EDITOR ---- {{{ */ - -#oe_snippets - #o_left_bar, #o_arrow - position: fixed - top: 34px - left: 0px - bottom: 0 - background: rgb(40,40,40) - +box-shadow(0px 10px 10px -10px black inset) - font-size: 14px - .snippets_loading - color: white - #o_arrow - z-index: 1009 - width: 24px - opacity: 0.75 - > * - position: absolute - color: white - div - @include transform( translateX(-36%) rotate(-90deg) ) - top: 50% - white-space: nowrap - .fa - width: 100% - left: 40% - #o_left_bar - left: -228px - z-index: 1010 - width: 210px - @include transition(all 500ms ease) - ul - text-align: center - margin: 0 - padding: 6px 0 - list-style-type: none - li - display: inline-block - padding: 0 3px - a - color: #aaa - .fa-stack - overflow: hidden - li.active a.fa, li.active .fa-stack-1x - color: #428bca - - &.o_open #o_left_bar - left: 0 - .o_panel - margin: 0 - border: 0 - width: 210px - .o_panel_header - background: #dff0d8 - padding: 1px 8px - color: #414141 - text-align: center - .fa-stack - overflow: hidden - font-size: 1em - .o_panel_body - white-space: normal - background: black - padding: 7px 3px - > div - background: rgb(0,0,0) - label - width: 44px - color: #fff - padding-left: 10px - - div - width: 100px - text-align: center - @include transform( translate(-39px, 44px) , rotate(-90deg) ) - @include transform-origin(50%) - -.oe_snippet - display: inline-block - vertical-align: top - width: 93px - margin-left: 3px - margin-right: 3px - margin-top: 1px - position: relative - overflow: hidden - +user-select(none) - cursor: move - .oe_snippet_thumbnail - text-align: center - height: 100% - background: transparent - color: white - position: relative - &:hover - .oe_snippet_thumbnail_img - @include transform( scale(.95,.95)) - .oe_snippet_thumbnail_title - font-size: 12px - display: block - +text-shadow(0 0 2px rgb(0,0,0)) - .oe_snippet_thumbnail_img - height: 74px - width: 92px - background-size: cover - @include transform( scale(1,1)) - span, div - line-height: 18px - & > :not(.oe_snippet_thumbnail) - display: none !important - &.disable - .oe_snippet_thumbnail - background-color: rgba(255, 0, 0, 0.75) - .oe_snippet_thumbnail_img - opacity: 0.8 -#oe_snippets .oe_snippet_thumbnail - @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))) - -// }}}} - -/* ---- SNIPPETS DROP ZONES ---- {{{ */ - -.oe_drop_zone.oe_insert - display: block - height: 48px - margin: 0px - margin-top: -4px - margin-bottom: -44px - @include transition(margin 250ms linear) - width: 100% - position: absolute - z-index: 1000 - &:not(.oe_vertical):before - content: "" - display: block - border-top: dashed 2px rgba(209, 178, 255, 0.72) - position: relative - top: 0px - &.oe_hover:before - border-top: dashed 2px rgba(116, 255, 161, 0.72) - &.oe_vertical - width: 48px - float: left - position: relative - margin: 0px -24px !important - &.oe_vertical_text - width: 48px - float: none - display: inline-block - position: relative - margin: 0px -24px !important - &.oe_overlay - +border-radius(3px) - //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) - //background-size: 100px 100px - background: rgba(153, 0, 255,.5) - -.oe_drop_zone, .oe_drop_zone_style - border: none - //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px)) - //background-size: 100px 100px - background: rgba(153, 0, 255, .3) - +border-radius(4px) - &.oe_hover - background: rgba(0, 255, 133, .3) - z-index: 1001 - -.oe_drop_zone_style - color: white - height: 48px - margin-bottom: 32px - padding-top: 12px - -// }}} - -/* ---- SNIPPET MANIPULATOR ---- {{{ */ - -.resize_editor_busy - background-color: rgba(0,0,0,0.3) - -.oe_overlay - display: none - height: 0 - position: absolute - background: transparent - z-index: 1001 - //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px)) - +border-radius(3px) - @include transition(opacity 100ms linear) - +box-sizing(border-box) - &.oe_active - display: block - .oe_handle - display: block !important - position: absolute - top: 50% - left: 50% - +box-sizing(border-box) - width: 16px - height: 16px - margin: -2px - > div - z-index: 1 - position: absolute - border-style: dashed - border-width: 1px - border-color: #666666 - +box-shadow(0px 0px 0px 1px rgba(255,255,255,0.5), 0px 0px 0px 1px rgba(255,255,255,0.5) inset) - &.e:before, &.w:before, &.s:before, &.n:before, &.size .oe_handle_button - z-index: 2 - position: relative - top: 50% - left: 50% - display: block - background: rgba(255, 255, 255, 1) - border: solid 1px rgba(0, 0, 0, .2) - +border-radius(5px) - width: 18px - height: 18px - margin: -9px - padding-left: 1px - font-size: 14px - line-height: 14px - font-family: FontAwesome - color: rgba(0,0,0,.5) - @include transition(background 100ms linear) - &.e, &.w, &.s, &.n - &:hover:before - background: rgba(0, 0, 0, .5) - color: #fff - +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) - &.e, &.w - top: 4px - height: 100% - &:before - content: "\f07e" - line-height: 16px - > div - width: 0 - height: 100% - top: 2px - left: 8px - &.e - left: auto - right: -6px - cursor: w-resize - &.w - left: -6px - cursor: e-resize - &.s, &.n - left: 2px - width: 100% - &:before - content: "\f07d" - text-align: center - padding: 1px - > div - width: 100% - height: 0 - top: 7px - left: 1px - &.s - top: auto - cursor: n-resize - &.n - cursor: s-resize - > div - top: 5px - &.size - z-index: 3 - top: auto - left: 50% - bottom: -6px - margin-left: -50px - .oe_handle_button - position: relative - z-index: 3 - text-align: center - margin-left: -52px - margin-top: -10px - left: 0px - &:hover - background: rgba(30, 30, 30, .8) - color: #fff - +box-shadow(0 0 5px 3px rgba(255,255,255,.7)) - .size - position: absolute - width: 64px - cursor: row-resize - top: 9px - margin-left: 52px - padding: 0 5px - .auto_size - position: absolute - width: 100px - top: 9px - cursor: pointer - &.readonly - cursor: auto !important - &:before, &.size - display: none !important - - .icon.btn - display: inline-block - - .oe_overlay_options - position: absolute - width: 100% - top: -35px - z-index: 1002 - > .btn-group - display: -ms-flexbox - display: -moz-box - display: -webkit-box - display: -webkit-flex - display: flex - -moz-justify-content: center - -webkit-justify-content: center - justify-content: center - > * - cursor: pointer - -ms-flex: 0 0 auto - -moz-flex: 0 0 auto - -webkit-box-flex: 0 - -webkit-flex: 0 0 auto - flex: 0 0 auto - .btn, a - cursor: pointer - .dropdown - display: inline-block - .dropdown-menu - text-align: left - min-width: 180px - .dropdown-menu select,.dropdown-menu input - display: block - - &.block-w-left .w:before - content: "\F061" !important - &.block-w-right .w:before - content: "\F060" !important - &.block-w-left.block-w-right .w:before - display: none !important - &.block-e-left .e:before - content: "\F061" !important - &.block-e-right .e:before - content: "\F060" !important - &.block-e-left.block-e-right .e:before - display: none !important - - &.block-s-top .s:before - content: "\F063" !important - &.block-s-bottom .s:before - content: "\f062" !important - &.block-n-top .n:before - content: "\F063" !important - &.block-n-bottom .n:before - content: "\f062" !important - - &.o_keypress - opacity: 0 - -webkit-transition: .8s - -moz-transition: .8s - -o-transition: .8s - -transition: .8s - - -.s-resize-important, .s-resize-important * - cursor: s-resize !important -.n-resize-important, .n-resize-important * - cursor: n-resize !important -.e-resize-important, .e-resize-important * - cursor: e-resize !important -.w-resize-important, .w-resize-important * - cursor: w-resize !important -.move-important, .move-important * - cursor: move !important - -// }}} diff --git a/addons/web_editor/static/src/css/web_editor.iframe.inline.css b/addons/web_editor/static/src/css/web_editor.iframe.inline.css deleted file mode 100644 index cba6343becb..00000000000 --- a/addons/web_editor/static/src/css/web_editor.iframe.inline.css +++ /dev/null @@ -1,265 +0,0 @@ -body { - background-color: #fff; -} -#editable_area p { - margin: initial; -} -#editable_area a { - color: inherit; -} -#editable_area a:hover { - color: inherit; -} -#editable_area { - margin-top: 0 !important; - font: inherit !important; - line-height: inherit !important; - color: inherit !important; -} -#oe_snippets ~ #wrapwrap #editable_area { - margin-bottom: 100px; -} - -#wrapwrap > main > div:first-child { - max-width: 600px; - margin-left: auto; - margin-right: auto; - position: relative; -} - -.editor_enable #wrapwrap > main > div:first-child { - border-top: 1px dashed #888; - margin-top: 50px; -} - -.editor_enable #wrapwrap > main > div:first-child:before, #wrapwrap > main > div:first-child:after { - content: " "; - display: block; - height: 100%; - vertical-align: top; - position: fixed; - top: -4px; - overflow: hidden; - z-index: -1; - margin-top: 54px; -} -.editor_enable #wrapwrap > main > div:first-child[data-oe-placeholder]:empty:before { - content: " \00a0 " attr(data-oe-placeholder); -} - -.editor_enable #wrapwrap > main > div:first-child:before { - border-left: 1px dashed #000; - opacity: 0.4; - margin-left: -5px; -} -.editor_enable #wrapwrap > main > div:first-child:after { - border-left: 1px dashed #000; - opacity: 0.4; - margin-left: 605px; - width: 0; -} - -.note-color-palette .colorpicker { - display: none; -} - -/* ---- Default bootstrap values ---- {{{ */ -.tooltip { - position: absolute; - z-index: 1070; - display: block; - visibility: visible; - font-size: 12px; - line-height: 1.4; - opacity: 0; - filter: alpha(opacity=0); -} -.tooltip.in { - opacity: 0.9; - filter: alpha(opacity=90); -} -.tooltip.bottom { - margin-top: 3px; - padding: 5px 0; -} -.tooltip.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #fff; - text-align: center; - text-decoration: none; - background-color: #000; - border-radius: 4px; -} - -.fade:not(.modal-backdrop) { - opacity: 0; - -webkit-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; -} - -.fade.in:not(.modal-backdrop) { - opacity: 1; -} - -.pull-right { - float: right; -} - -.center-block { - display: block; - margin-left: auto; - margin-right: auto; -} - -.pull-left { - float: left; -} - -.img-responsive { - display: block; - width: 100% \9; - max-width: 100%; - height: auto; -} - -.img-rounded { - border-radius: 6px; -} - -.img-thumbnail { - padding: 4px; - line-height: 1.42857; - background-color: #fff; - border: 1px solid #ddd; - border-radius: 4px; - -webkit-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; - display: inline-block; - width: 100% \9; - max-width: 100%; - height: auto; -} - -.img-circle { - border-radius: 50%; -} - -.img-responsive { - text-align: center; -} - -img.shadow { - -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); -} - -.fa-1x { - font-size: 1em; -} - -.fa-2x { - font-size: 2em; -} - -.fa-3x { - font-size: 3em; -} - -.fa-4x { - font-size: 4em; -} - -.fa-5x { - font-size: 5em; -} - -.fa-6x { - font-size: 6em; -} - -.fa-7x { - font-size: 7em; -} - -.fa-8x { - font-size: 8em; -} - -.fa-9x { - font-size: 9em; -} - -.fa-10x { - font-size: 10em; -} - -.text-primary { - color: #428bca; -} - -.text-success { - color: #3c763d; -} - -.text-info { - color: #31708f; -} - -.text-warning { - color: #8a6d3b; -} - -.text-danger { - color: #a94442; -} - -.bg-primary { - color: #fff; - background-color: #428bca; -} - -.bg-success { - background-color: #dff0d8; -} - -.bg-info { - background-color: #d9edf7; -} - -.bg-warning { - background-color: #fcf8e3; -} - -.bg-danger { - background-color: #f2dede; -} - -.hidden { - display: none; -} - -.img-responsive { - text-align: center; -} - -/* }}} */ \ No newline at end of file diff --git a/addons/web_editor/static/src/img/drag_here.png b/addons/web_editor/static/src/img/drag_here.png deleted file mode 100644 index 335c3a571bb..00000000000 Binary files a/addons/web_editor/static/src/img/drag_here.png and /dev/null differ diff --git a/addons/web_editor/static/src/img/edit_here.png b/addons/web_editor/static/src/img/edit_here.png deleted file mode 100644 index 77beff11c7b..00000000000 Binary files a/addons/web_editor/static/src/img/edit_here.png and /dev/null differ diff --git a/addons/web_editor/static/src/less/web_editor.backend.less b/addons/web_editor/static/src/less/web_editor.backend.less index e9043dc138e..0ff97e327aa 100644 --- a/addons/web_editor/static/src/less/web_editor.backend.less +++ b/addons/web_editor/static/src/less/web_editor.backend.less @@ -1,88 +1,85 @@ .oe_form_field_html_text { - .note-editable { - min-height: 180px; - font: initial !important; - font-family: inherit !important; - line-height: initial !important; - color: initial !important; - p { - margin: initial; + .note-editable { + min-height: 180px; + font: initial !important; + font-family: inherit !important; + line-height: initial !important; + color: initial !important; + p { + margin: initial; + font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif; + -webkit-margin-before: 0; + font-size: 13px; + } + a, a:hover { + color: initial; + } } - a, a:hover { - color: initial; + .o_readonly { + min-height: 1em; + width: 100%; + margin: 0; + padding: 0; + border: 0; } } -.oe_form_field_html_text .o_readonly { - min-height: 1em; - width: 100%; - margin: 0; - padding: 0; - border: 0; -} -.oe_form_field_html_text .note-editable p { - font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif; - -webkit-margin-before: 0; - font-size: 13px; -} - .oe_form_field_html iframe { - display: block; - width: 100%; - border: 0; - padding: 0; - margin: 0; - min-height: 300px; - min-height: -webkit-calc(100vh - 170px); - min-height: calc(100vh - 170px); -} -.o_form_FieldTextHtml_fullscreen{ - .oe_form_field_html.o_form_fullscreen_ancestor iframe { - position: absolute !important; - left: 0 !important; - right: 0 !important; - top: 0 !important; - bottom: 0 !important; - width: 100% !important; - min-height: 100% !important; - z-index: 1001 !important; + display: block; + width: 100%; border: 0; - } - * { - display: none; - } - .o_form_fullscreen_ancestor { - display: block !important; - position: static !important; - top: 0 !important; - left: 0 !important; - overflow: visible !important; - width: auto !important; - overflow: hidden !important; - } + padding: 0; + margin: 0; + min-height: 300px; + min-height: -webkit-calc(100vh - 170px); + min-height: calc(100vh - 170px); +} +.o_form_FieldTextHtml_fullscreen { + .oe_form_field_html.o_form_fullscreen_ancestor iframe { + position: absolute !important; + left: 0 !important; + right: 0 !important; + top: 0 !important; + bottom: 0 !important; + width: 100% !important; + min-height: 100% !important; + z-index: 1001 !important; + border: 0; + } + * { + display: none; + } + .o_form_fullscreen_ancestor { + display: block !important; + position: static !important; + top: 0 !important; + left: 0 !important; + overflow: visible !important; + width: auto !important; + overflow: hidden !important; + } } .openerp .oe_form .oe_form_field_html_translate textarea { - min-width: 60px; - width: 100%; - color: #4c4c4c; - font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; + min-width: 60px; + width: 100%; + color: #4c4c4c; + font: normal 13px "Lucida Grande", Helvetica, Verdana, Arial, sans-serif; } .openerp .oe_form_readonly .oe_form .oe_form_field_html_translate textarea { - border:0; - background: #fff; + border: 0; + background: #fff; } .openerp .oe_form_editable .oe_form .oe_form_field_html_translate { - > button { - float: right; - margin: -6px -3px 0 0; - } - > .note-editable { - border: 1px solid #ccc; - min-height: 22px; - border-radius: 3px; - } -} - -.openerp .oe_form_editable .oe_form .oe_form_field_html_translate .note-editable [contentEditable='true']:hover { - .box-shadow(#DDCC33 0 0 5px 2px inset); + > button { + float: right; + margin: -6px -3px 0 0; + } + > .note-editable { + border: 1px solid #ccc; + min-height: 22px; + border-radius: 3px; + } + .note-editable [contentEditable='true']:hover { + box-shadow: #DDCC33 0 0 5px 2px inset; + } } diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less index f83b5628b4e..a7dc0edb622 100644 --- a/addons/web_editor/static/src/less/web_editor.common.less +++ b/addons/web_editor/static/src/less/web_editor.common.less @@ -1,166 +1,279 @@ +html, body { + width: 100%; + height: 100%; +} + /* ----- EDITOR ----- */ .css_non_editable_mode_hidden { - display: none !important; + display: none !important; } /* ----- Editor (for public user, like forum) ----- */ .note-toolbar { - margin-left: 0 !important; + margin-left: 0 !important; } .note-popover .popover > .arrow { - display: none; + display: none; } /* ----- GENERIC LAYOUTING HELPERS ---- */ -.hidden { - display: none !important; -} - /* table */ -#wrapwrap table.table, .o_editable table.table { - table-layout: fixed; -} -#wrapwrap table.table td, .o_editable table.table td { - min-width: 20px; +#wrapwrap, .o_editable { + table.table { + table-layout: fixed; + td { + min-width: 20px; + } + } } /* Media */ img.shadow { - -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); } img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small { - padding: 4px; + padding: 4px; } img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium { - padding: 8px; + padding: 8px; } img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large { - padding: 16px; + padding: 16px; } img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl { - padding: 32px; + padding: 32px; } -div.media_iframe_video.padding-small iframe { - padding: 4px; -} -div.media_iframe_video.padding-medium iframe { - padding: 8px; -} -div.media_iframe_video.padding-large iframe { - padding: 16px; -} -div.media_iframe_video.padding-xl iframe { - padding: 32px; +div.media_iframe_video { + &.padding-small iframe { + padding: 4px; + } + &.padding-medium iframe { + padding: 8px; + } + &.padding-large iframe { + padding: 16px; + } + &.padding-xl iframe { + padding: 32px; + } } /* font awsome */ .fa-6x { - font-size: 6em; + font-size: 6em; } .fa-7x { - font-size: 7em; + font-size: 7em; } .fa-8x { - font-size: 8em; + font-size: 8em; } .fa-9x { - font-size: 9em; + font-size: 9em; } .fa-10x { - font-size: 10em; + font-size: 10em; } .fa.center-block { - text-align: center; + text-align: center; } /* video */ div.media_iframe_video { - margin: 0 auto; - text-align: center; - position: relative; - overflow: hidden; -} -div.media_iframe_video iframe { - width: 100%; - height: 100%; - top: 0; - position: absolute; - margin: 0 auto; - margin-left: -50%; -} -div.media_iframe_video .media_iframe_video_size { - padding-bottom: 66.5%; - position: relative; - width: 100%; - height: 0; -} -div.media_iframe_video .css_editable_mode_display { - position: absolute; - width: 100%; - height: 100%; - display: none; - z-index: 2; + margin: 0 auto; + text-align: center; + position: relative; + overflow: hidden; + + iframe { + width: 100%; + height: 100%; + .o-position-absolute(@top: 0); + margin: 0 auto; + margin-left: -50%; + } + + .media_iframe_video_size { + padding-bottom: 66.5%; + position: relative; + width: 100%; + height: 0; + } + + .css_editable_mode_display { + .o-position-absolute(); + width: 100%; + height: 100%; + display: none; + z-index: 2; + } } html[data-browser^="msie"] div.media_iframe_video iframe { - margin-left: 0; + margin-left: 0; } /* Mobile view */ -@media (max-width: 768px) { - img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { - -webkit-transform: none !important; - -moz-transform: none !important; - -ms-transform: none !important; - -o-transform: none !important; - transform: none !important; - } +@media (max-width: @screen-xs-max) { + img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important; + } } + /* ---- fields --- */ -address .fa.fa-mobile-phone { - margin: 0 3px 0 2px; -} -address .fa.fa-file-text-o { - margin-right: 1px; +address { + .fa.fa-mobile-phone { + margin: 0 3px 0 2px; + } + .fa.fa-file-text-o { + margin-right: 1px; + } } span[data-oe-type="monetary"] { - white-space: nowrap; + white-space: nowrap; } /* ---- MENU ---- {{{ */ div.oe_menu_buttons { - top: -8px; - right: -8px; + top: -8px; + right: -8px; } -ul.oe_menu_editor .fa-home { - display: none; +ul.oe_menu_editor { + .fa-home { + display: none; + } + > li:first-child > div > span > .fa-home { + display: block; + } + .oe_menu_placeholder { + outline: 1px dashed #4183C4; + } + ul { + list-style: none; + } + li div { + cursor: move; + } + .disclose { + cursor: pointer; + width: 10px; + display: none; + } } -ul.oe_menu_editor > li:first-child > div > span > .fa-home { - display: block; + +// Generate all margins for all sizes +.o-margins-all(@factor: 1) { + // Unfortunately, the margins sizes are not + // mathematically related by a single function + .o-margins(128, @factor); + .o-margins(96, @factor); + .o-margins(92, @factor); + .o-margins(64, @factor); + .o-margins(48, @factor); + .o-margins(32, @factor); + .o-margins(24, @factor); + .o-margins(16, @factor); + .o-margins(8, @factor); + .o-margins(4, @factor); + .o-margins(0, @factor); } -ul.oe_menu_editor .oe_menu_placeholder { - outline: 1px dashed #4183C4; + +// Generate all margins for one size, scalled by a +// given factor (0 <= factor <= 1) +.o-margins(@name, @factor: 1) { + .o-margins-define(@name, @factor * @name); } -ul.oe_menu_editor ul { - list-style: none; + +// Generate all margins for one size, given +// the name of the margin and intended size +.o-margins-define(@name, @size: @name) { + .mt@{name} {margin-top: ~"@{size}px"!important;} + .mb@{name} {margin-bottom: ~"@{size}px"!important;} + .ml@{name} {margin-left: ~"@{size}px"!important;} + .mr@{name} {margin-right: ~"@{size}px"!important;} } -ul.oe_menu_editor li div { - cursor: move; + +// Generate all margins +.o-margins-all(); + +// Possibility to change the margins ratio for small screen sizes, e.g.: +// @media (max-width: 768px) { +// .o-margins-all(0.75); +// } +// Possibility to only redefine single margins for small screen sizes, e.g.: +// @media (max-width: 768px) { +// .o-margins(64, 0.50); +// .o-margins(48, 0.50); +// } +// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.: +// @media (max-width: 768px) { +// .o-margins-define(128, 48); +// .o-margins-define(96, 48); +// .o-margins-define(64, 48); +// } + +a.o_underline { + text-decoration: underline; + &:hover { + text-decoration: underline; + } } -ul.oe_menu_editor .disclose { - cursor: pointer; - width: 10px; - display: none; + +// Colors +@gray-white: #fff; + +@color-alpha: #1cc1a9; +@color-beta: #a24689; +@color-gamma: #BA3C3D; +@color-delta: #0D6759; +@color-epsilon: #0B2E59; + +.o-create-color-classes(@class_name, @color, @complementary: contrast(@color, @text-color, #FFF, 60%)) { + .bg-@{class_name} { + background-color: @color; + color: @complementary; + .text-muted { + color: fade(@complementary, 40%); + } + } + body .text-@{class_name} { // html to make the rules more important that bg-* ones + color: @color; + } } + +// Create classes for theme colors +.o-create-color-classes(alpha, @color-alpha); +.o-create-color-classes(beta, @color-beta); +.o-create-color-classes(gamma, @color-gamma); +.o-create-color-classes(delta, @color-delta); +.o-create-color-classes(epsilon, @color-epsilon); + +// Create classes for UI colors +.o-create-color-classes(primary, @brand-primary); +.o-create-color-classes(success, @brand-success); +.o-create-color-classes(info, @brand-info); +.o-create-color-classes(warning, @brand-warning); +.o-create-color-classes(danger, @brand-danger); + +// Create classes for greyscale colors +.o-create-color-classes(~'black', @gray-base); +.o-create-color-classes(~'gray-darker', @gray-darker); +.o-create-color-classes(~'gray-dark', @gray-dark); +.o-create-color-classes(~'gray', @gray); +.o-create-color-classes(~'gray-light', @gray-light); +.o-create-color-classes(~'gray-lighter', @gray-lighter); +.o-create-color-classes(~'white', @gray-white); diff --git a/addons/web_editor/static/src/less/web_editor.components.less b/addons/web_editor/static/src/less/web_editor.components.less deleted file mode 100644 index d24df7ac99f..00000000000 --- a/addons/web_editor/static/src/less/web_editor.components.less +++ /dev/null @@ -1,276 +0,0 @@ -#web_editor-top-actions { - a { - .transition(all 0.3s); - color: darken(@we_color-primary, 10%); - &:hover, &:active { - text-decoration: none; - color: darken(@we_color-primary, 20%); - } - } - // BUTTONS - // ==================== - .btn { - font-size: 12px; - color: #999999; - font-weight: bold; - text-decoration: none; - .transition(all 0.3s); - &:hover, &:focus { - color: white; - text-decoration: none; - } - &.accent { - .button-variant(white, @we_color-accent, @we_color-accent) - } - &.compl { - .button-variant(white, @we_color-primary, @we_color-primary) - } - &.full { - margin-top: 0; - margin-bottom: 0; - border-radius: 0; - .box-shadow(none); - } - &.btn-primary { - .button-variant(white, @we_color-accent, @we_color-accent); - text-transform: uppercase; - } - &.btn-danger { - .button-variant(white, @we_color-danger, @we_color-danger); - text-transform: uppercase; - } - &.btn-success { - .button-variant(white, @we_color-success, @we_color-success); - text-transform: uppercase; - } - } - .dropdown-toggle { - color: @we_dropdown-toggle-color; - height: @we_editor-bar-height - @we_editor-dropdown-border-height; - line-height: @we_editor-bar-height - @we_editor-dropdown-border-height; - border-top: @we_editor-dropdown-border-height solid transparent; - text-shadow:0 1px 0 @we_dropdown-toggle-shadow-color; - } - .dropdown-menu { - margin: 0; - overflow: hidden; - border-radius: 0; - border: none; - background-color: @we_dropdown-menu-color; - .box-shadow(@we_box-shadow); - li { - a { - color: @we_dropdown-toggle-color; - } - &:hover { - a { - color: @we_dropdown--open-toggle-color; - background: transparent; - } - } - } - li.divider { - margin: 3px 20px; - background-color: @we_color-inactive; - } - } - .open { - > .dropdown-toggle { - background-color: @we_dropdown--open-toggle-bg-color; - color: @we_dropdown--open-toggle-color; - border-top: @we_editor-dropdown-border-height solid white; - text-shadow:0 1px 0 @we_dropdown--open-toggle-shadow-color; - } - } - .dropdown-menu { - position: absolute; - left: auto; - right: 0; - } - - // ICONS - // ====================== - .material-icons { - font-size: 1em; - .translateY(2px); - margin-right: 5px; - } - - // POPOVERS - // ====================== - .popover { - border-radius: 3px; - .popover-title{ - color: @we_color-text-dark - } - } - - // INPUTS - // ====================== - .form-control { - font-weight: bold; - color: @we_color-text-dark; - } - .input-group-addon{ - color: @we_color-text-dark; - font-weight: bold; - } -} - -// INPUTS -// ================== -.switch { - position: relative; - display: inline-block; - box-sizing: border-box; - margin: 0 0.5em; - padding: 0; - height: 1.5em; - cursor: pointer; - .translateY(0.2em); - .switch_track { - background: #bababa; - border-radius: 0.4em; - height: 1em; - width: 2.5em; - display: inline-block; - .transition(all 0.3s @we_md-ease); - &:after { - content: ""; - background: #fafafa; - display: block; - width: 1.5em; - height: 1.5em; - border-radius: 100em; - margin-top: -0.3em; - margin-left: -0.1em; - .transition(all 0.3s @we_md-ease); - .box-shadow(@we_box-shadow); - } - } - .switch_input { - position: absolute; - width: 0; - height: 0; - margin: 0; - padding: 0; - opacity: 0; - -ms-appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - border: none; - } - &.checked { - .switch_track { - background-color: rgb(142, 224, 212); - background-color: transparentize(@we_color-accent, 0.5); - &:after { - background-color: @we_color-accent; - margin-left: 1.1em; - } - } - } - &:hover { - .switch_track { - &:after { - background-color: mix(@we_color-accent, #fafafa); - } - } - } -} - - - -// TEXT INPUT -// ========================== - -//
-// -// -// -// -//
- -.text-input-group { - position:relative; - margin-bottom:45px; - - input{ - font-size:18px; - padding:10px 10px 10px 5px; - display:block; - width:300px; - border:none; - border-bottom:1px solid #757575; - } - input:focus{ outline:none; } - - /* LABEL ======================================= */ - label{ - color:#999; - font-size:18px; - font-weight:normal; - position:absolute; - pointer-events:none; - left:5px; - top:10px; - .transition(0.2s ease all) - } - - /* active state */ - input:focus ~ label, input:valid ~ label{ - top:-20px; - font-size:14px; - color:#5264AE; - } - - /* BOTTOM BARS ================================= */ - .bar { position:relative; display:block; width:300px; } - .bar:before, .bar:after{ - content:''; - height:2px; - width:0; - bottom:1px; - position:absolute; - background:#5264AE; - .transition(0.2s ease all); - } - .bar:before { - left:50%; - } - .bar:after { - right:50%; - } - - /* active state */ - input:focus ~ .bar:before, input:focus ~ .bar:after { - width:50%; - } - - /* HIGHLIGHTER ================================== */ - .highlight { - position:absolute; - height:60%; - width:100px; - top:25%; - left:0; - pointer-events:none; - opacity:0.5; - } - - /* active state */ - input:focus ~ .highlight { - .animation(inputHighlighter 0.3s ease); - } - -} - - -// DRAG&DROP ANIMATIONS -// ========================== - -.oe_snippet_body { - .opacity(0); - .animation(fadeInDownSmall 1s forwards); -} diff --git a/addons/web_editor/static/src/less/web_editor.interactions.less b/addons/web_editor/static/src/less/web_editor.interactions.less deleted file mode 100644 index 20e70c6a095..00000000000 --- a/addons/web_editor/static/src/less/web_editor.interactions.less +++ /dev/null @@ -1,61 +0,0 @@ -// Transitions -// ====================== - -@we_md-ease: cubic-bezier(0.19, 1, 0.22, 1); - -// Animation -// ====================== - -@-webkit-keyframes fadeInDownSmall { - 0% { - opacity: 0; - .translateY(-5px); - } - 100% { - opacity: 1; - .translateY(0); - } -} -@keyframes fadeInDownSmall { - 0% { - opacity: 0; - .translateY(-5px); - } - 100% { - opacity: 1; - .translateY(0); - } -} -@-webkit-keyframes fadeInOut { - 0% { - opacity: 0; - } - 25% { - opacity: 1; - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes fadeInOut { - 0% { - opacity: 0; - } - 25% { - opacity: 1; - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -@keyframes inputHighlighter { - from { background: @we_color-accent; } - to { width:0; background:transparent; } -} diff --git a/addons/web_editor/static/src/less/web_editor.less b/addons/web_editor/static/src/less/web_editor.less deleted file mode 100644 index 760108b9e61..00000000000 --- a/addons/web_editor/static/src/less/web_editor.less +++ /dev/null @@ -1,63 +0,0 @@ -// Generate all margins for all sizes -.o-margins-all(@factor: 1) { - // Unfortunately, the margins sizes are not - // mathematically related by a single function - .o-margins(128, @factor); - .o-margins(96, @factor); - .o-margins(92, @factor); - .o-margins(64, @factor); - .o-margins(48, @factor); - .o-margins(32, @factor); - .o-margins(24, @factor); - .o-margins(16, @factor); - .o-margins(8, @factor); - .o-margins(4, @factor); - .o-margins(0, @factor); -} - -// Generate all margins for one size, scalled by a -// given factor (0 <= factor <= 1) -.o-margins(@name, @factor: 1) { - .o-margins-define(@name, @factor * @name); -} - -// Generate all margins for one size, given -// the name of the margin and intended size -.o-margins-define(@name, @size: @name) { - .mt@{name} {margin-top: ~"@{size}px"!important;} - .mb@{name} {margin-bottom: ~"@{size}px"!important;} - .ml@{name} {margin-left: ~"@{size}px"!important;} - .mr@{name} {margin-right: ~"@{size}px"!important;} -} - -// Generate all margins -.o-margins-all(); - -// It is possible to change the margins ratio for -// small screen sizes using media queries, e.g.: -// @media (max-width: 768px) { -// .o-margins-all(0.75); -// } - -// It is also possible to only redefine single margins -// for small screen sizes using media queries, e.g.: -// @media (max-width: 768px) { -// .o-margins(64, 0.50); -// .o-margins(48, 0.50); -// } - -// It is also possible to directly redefine the size -// of single margins instead of refering to a factor -// for small screen sizes using media queries, e.g.: -// @media (max-width: 768px) { -// .o-margins-define(128, 48); -// .o-margins-define(96, 48); -// .o-margins-define(64, 48); -// } - -a.o_underline { - text-decoration: underline; - &:hover { - text-decoration: underline; - } -} \ No newline at end of file diff --git a/addons/web_editor/static/src/less/web_editor.mixins.less b/addons/web_editor/static/src/less/web_editor.mixins.less deleted file mode 100644 index 2c4c78b4703..00000000000 --- a/addons/web_editor/static/src/less/web_editor.mixins.less +++ /dev/null @@ -1,204 +0,0 @@ -// Button variants -// ======================== -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons - -.button-variant(@color, @background, @border) { - color: @color; - background-color: @background; - border-color: @border; - &:focus, - &.focus { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 25%); - } - &:hover { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 12%); - } - &:active, - &.active, - .open > &.dropdown-toggle { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 12%); - &:hover, - &:focus, - &.focus { - color: @color; - background-color: darken(@background, 17%); - border-color: darken(@border, 25%); - } - } - &:active, - &.active, - .open > &.dropdown-toggle { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background-color: @background; - border-color: @border; - } - } - .badge { - color: @background; - background-color: @color; - } -} - -// Button sizes -.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) { - padding: @padding-vertical @padding-horizontal; - font-size: @font-size; - line-height: @line-height; - border-radius: @border-radius; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity; - // IE8 filter - @opacity-ie: (@opacity * 100); - filter: ~"alpha(opacity=@{opacity-ie})"; -} - -// Transitions -.transition(@transition...) { - -moz-transition: @transition; - -o-transition: @transition; - -webkit-transition: @transition; - transition: @transition; -} - -.transition-property(@property...) { - -moz-transition-property: @property; - -o-transition-property: @property; - -webkit-transition-property: @property; - transition-property: @property; -} - -.transition-duration(@duration...) { - -moz-transition-property: @duration; - -o-transition-property: @duration; - -webkit-transition-property: @duration; - transition-property: @duration; -} - -.transition-timing-function(@timing...) { - -moz-transition-timing-function: @timing; - -o-transition-timing-function: @timing; - -webkit-transition-timing-function: @timing; - transition-timing-function: @timing; -} - -.transition-delay(@delay...) { - -moz-transition-delay: @delay; - -o-transition-delay: @delay; - -webkit-transition-delay: @delay; - transition-delay: @delay; -} - -// ANIMATIONS -// =========================== - -.animation(@str) { - -webkit-animation: @str; - -moz-animation: @str; - -ms-animation: @str; - -o-animation: @str; - animation: @str; -} - - -// BACKGROUND GRADIENT -// ======================= - -.linear-gradient(@start-color: #555; @end-color: #333; @deg: 45deg) { - background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ - background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 - background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ -} - -.box-shadow(@string) { - -webkit-box-shadow: @string; - -moz-box-shadow: @string; - box-shadow: @string; -} - -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// TRANSFORM -// =================================== -.transform(@transforms) { - -moz-transform: @transforms; - -o-transform: @transforms; - -ms-transform: @transforms; - -webkit-transform: @transforms; - transform: @transforms; -} - -// rotate -.rotate(@deg) { - .transform(rotate(@deg)); -} - -// scale -.scale(@scale) { - .transform(scale(@scale)); -} - -// translate -.translate(@x, @y) { - .transform(translate(@x, @y)); -} - -// translate -.translateY(@y) { - .transform(translateY(@y)); -} - -// skew -.skew(@x, @y) { - .transform(skew(@xdeg, @ydeg)); -} - -// transform origin -.transform-origin(@origin) { - moz-transform-origin: @origin; - -o-transform-origin: @origin; - -ms-transform-origin: @origin; - -webkit-transform-origin: @origin; - transform-origin: @origin; -} - -// HELPERS -// ====================================== - -.user-select(@str) { - -moz-user-select: @str; - -webkit-user-select: @str; - -ms-user-select: @str; - user-select: @str; -} - -// Box sizing -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less new file mode 100644 index 00000000000..6cf994e2f03 --- /dev/null +++ b/addons/web_editor/static/src/less/web_editor.ui.components.less @@ -0,0 +1,339 @@ + +// INPUTS +.o_switch { + .o-flex-display(); + .o-align-items(center); + font-weight: normal; + height: 1.5em; + cursor: pointer; + + > input { + display: none; + + + span { + background: #bababa; + border-radius: 0.4em; + height: 1em; + width: 2.5em; + margin-right: 0.5em; + display: inline-block; + .transition(all 0.3s @o-we-md-ease); + &:after { + content: ""; + background: #fafafa; + display: block; + width: 1.5em; + height: 1.5em; + border-radius: 100em; + margin-top: -0.3em; + margin-left: -0.1em; + .transition(all 0.3s @o-we-md-ease); + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); + } + } + + &:checked + span { + background-color: rgb(142, 224, 212); + background-color: transparentize(@odoo-brand-optional, 0.5); + &:after { + background-color: @odoo-brand-optional; + margin-left: 1.1em; + } + } + } + &:hover > input + span:after { + background-color: mix(@odoo-brand-optional, #fafafa); + } +} +.text-input-group { + position: relative; + margin-bottom: 45px; + + input { + font-size: 18px; + padding: 10px 10px 10px 5px; + display: block; + width: 300px; + border: none; + border-bottom: 1px solid #757575; + } + input:focus { outline: none; } + + /* LABEL ======================================= */ + label { + color: #999; + font-size: 18px; + font-weight: normal; + .o-position-absolute(@top: 10px, @left: 5px); + pointer-events: none; + .transition(0.2s ease all) + } + + /* active state */ + input:focus ~ label, input:valid ~ label { + top: -20px; + font-size: 14px; + color: #5264AE; + } + + /* BOTTOM BARS ================================= */ + .bar { position: relative; display: block; width: 300px; } + .bar:before, .bar:after { + content: ''; + height: 2px; + width: 0; + bottom: 1px; + .o-position-absolute(); + background: #5264AE; + .transition(0.2s ease all); + } + .bar:before { + left: 50%; + } + .bar:after { + right: 50%; + } + + /* active state */ + input:focus ~ .bar:before, input:focus ~ .bar:after { + width: 50%; + } + + /* HIGHLIGHTER ================================== */ + .highlight { + .o-position-absolute(@top: 25%, @left: 0); + height: 60%; + width: 100px; + pointer-events: none; + opacity: 0.5; + } + + /* active state */ + input:focus ~ .highlight { + .animation(inputHighlighter 0.3s ease); + } +} + +// DRAG&DROP ANIMATIONS +.oe_snippet_body { + opacity: 0; + .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards); +} + +// MODALS +body .modal { + // SELECT MEDIA + .o_select_media_dialog { + width: 80%; + + .modal-body { + li.search { + float: right; + + ul.pager { + margin: 0; + > li > a { + border-radius: 3px; + margin-left: 2px; + padding: 6px 14px; + } + } + .form-group { + position: relative; + margin: 0 10px 0 0; + > input { + padding-right: 30px; + } + > span { + .o-position-absolute(7px, 7px); + font-size: 1.3em; + } + } + } + .dropdown-toggle { + line-height: 0; + height: 34px; + } + .o_existing_attachment_cell { + @odoo-border-image: 1px; + .o_existing_attachment_remove { + .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image); + padding: 3px 3px 12px 12px; + background-color: white; + border-bottom: 1px solid black; + border-left: 1px solid black; + border-radius: 0 0 0 100%; + opacity: 0.8; + } + .o_image { + border: @odoo-border-image solid transparent; + cursor: pointer; + + &.o_webimage { + width: 100%; + height: auto; + } + } + &.o_selected .o_image { + border-color: @odoo-brand-primary; + box-shadow: 0px 0px 2px 2px @odoo-brand-secondary; + } + } + .font-icons-icons > span { + font-size: 30px; + margin: 5px; + padding: 3px; + cursor: pointer; + + &.o_selected { + box-shadow: 0px 0px 2px 2px @odoo-brand-secondary; + } + } + } + } + + // BACKGROUND IMAGE OPTIONS + .o_bg_img_opt_modal .o_bg_img_opt { + margin: 15px 0; + + .help-control { + .o-position-absolute(15px, 15px); + } + .help { + margin: 15px 0; + + .simulator { + position: relative; + float: left; + margin-right: 15px; + width: 120px; + height: 100px; + .bg { + .o-position-absolute(0, 0, 0, 0); + border: 1px dotted #888787; + background-image: url(/web/image); + background-position: center center; + .o-background-size(cover); + } + .el { + .o-position-absolute(10px, 0, 10px, 0); + border: 1px solid #222; + } + &.contain_bg { + .bg { + .o-position-absolute(0, 12px, 20px, 12px); + } + .el { + .o-position-absolute(0, 0, 20px, 0); + } + } + } + + * { + clear: left; + } + } + + .o_bg_img_opt_cover_edition { + border-top: 1px solid black; + border-bottom: 1px solid white; + padding: 0px 25px 25px 25px; + .o-linear-gradient(-150deg, lighten(#2c2c36, 5%), darken(#2c2c36, 10%)); + h6 { + color: white; + font-weight: bold; + } + .o_bg_img_opt_object { + width: 100%; + background: white; + min-height: 10px; + position: relative; + overflow: hidden; + box-shadow: 0 0 10px #000; + > img { + cursor: crosshair; + border-top: 1px solid #5A5A5A; + border-bottom: 1px solid #111; + } + &:hover .o_focus_point:before { + opacity: 0.5; + } + } + .o_bg_img_opt_ui_info { + .animation(fadeInOut 2s ease forwards); + .o-position-absolute(@bottom: 1px, @right: 0); + display: block; + padding: 3px 13px; + background-color: rgba(255, 255, 255, 0.8); + color: #333; + text-align: center; + font-weight: bold; + pointer-events: none; + span { + font-weight: normal; + } + .o_x { + margin-right: 10px + } + } + .grid { + .o-position-absolute(@top: 33.33%, @left: 0); + display: block; + width: 100%; + height: 1px; + background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%); + pointer-events: none; + &.grid-2 { + top: 66.66% + } + &.grid-3 { + top: 0; + left: 33.33%; + width: 1px; + height: 100% + } + &.grid-4 { + top: 0; + left: 66.66%; + width: 1px; + height: 100% + } + } + .o_focus_point { + .o-position-absolute(@top: 0, @left: 0); + width: 30px; + height: 30px; + border: 2px solid white; + border-radius: 100%; + margin-top: -15px; + margin-left: -15px; + box-shadow: 0 0 1px #333; + pointer-events: none; + &.o_with_transition { + .o-transition(all, 0.2s); + } + &:before { + pointer-events: none; + content: ""; + display: block; + width: 100px; + height: 100px; + margin-top: -37px; + margin-left: -37px; + border: 1px solid #EAEAEA; + background: rgba(247, 76, 76, 0); + border-radius: 100em; + opacity: 1; + box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33); + .o-transition(opacity, 0.2s); + } + } + } + } + + &.web_editor-dialog { + li > label { + width: 96%; + margin: 4px 2% 0; + } + } +} diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less index 75410d27eb0..33edd55dc61 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -1,976 +1,937 @@ - +// TOP BAR (EDIT) #web_editor-top-edit { - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - background-color: @we_color-dark; - height: @we_editor-bar-height; - font-family: @we_font-default; - min-height: initial; - border: none; + .o-position-absolute(0, 0, auto, 0); + position: fixed; + height: @odoo-navbar-height; + z-index: 1003; - form.navbar-form { - margin: 0; - padding: 0; - border: none; - text-align: right; - position: absolute; - height: @we_editor-bar-height; - right: -@we_sidebar-width; - .transition(right 0.4s @we_md-ease); - .full { - margin-top: 0; - margin-bottom: 0; - border-radius: 0; - padding: 0 15px; - height: @we_editor-bar-height; - &.accent { - .button-variant(white, @we_color-accent, @we_color-accent) - } - &.compl { - .button-variant(white, @we_color-primary, @we_color-primary) - } - } - a, button { - font-weight: 600; - font-size: 11px; - } - .btn-group { - button { - height: @we_editor-bar-height; - padding: 0 10px 0 10px; - line-height: 1; - border-radius: 0; + background-color: rgba(0,0,0,0); + .o-transition(background-color, 400ms, @o-we-md-ease); + font-family: Roboto, @font-family-sans-serif; + + form.navbar-form { + height: 100%; margin: 0; - border: none; - .button-variant(white, @we_color-primary, @we_color-primary); - } - } - } -} + padding: 0; + .o-position-absolute(@right: -@o-we-sidebar-width); + .o-transition(right, 0.4s, @o-we-md-ease); -#web_editor_snippets { - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - bottom: 0; - width: @we_sidebar-width; - left: -@we_sidebar-width; - top: 0; - z-index: 1030; - font-family: @we_font-default; - position: fixed; - .transition(left 0.4s @we_md-ease); - #o_left_bar { - top: @we_editor-bar-height; - width: @we_sidebar-width; - left: 0px; - bottom: 0; - .linear-gradient(@we_color-normal, darken(@we_color-normal, 10%)); - .box-shadow(0px 10px 10px -10px black inset); - } -} - -#snippets_menu { - border: 1px solid @we_color-divider; - border-width: 0 1px 1px 0; - background: @we_color-dark; - height: @we_editor-bar-height + 1; - text-align: center; - margin: 0; - padding: 7px 0; - list-style-type: none; - li { - display: inline-block; - padding: 0 9px; - font-size: 0; - a i { - color: #999999; - &:hover{ color: white; } - } - &.structure a i{ - font-size: 25px; - .translateY(3px); - } - &.content a i{ - font-size: 19px; - } - &.feature a i{ - font-size: 19px; - } - &.effect a i{ - font-size: 16px; - .translateY(-3px); - } - } - li.active a { - color: white; - } -} - - -#o_scroll { - .o_panel { - margin: 0; - border: 0; - width: 210px; - } - .o_panel_header { - padding: 1px 8px; - color: #999999; - text-align: center; - } - .o_panel_body { - white-space: normal; - background: transparent; - padding: 7px 3px; - } -} - -.oe_snippet { - display: inline-block; - vertical-align: top; - width: 93px; - margin-left: 3px; - margin-right: 3px; - margin-top: 1px; - position: relative; - overflow: hidden; - .user-select(none); - cursor: move; - cursor: copy; - color: @we_color-text-normal; - font-weight: 600; - margin-bottom: 0.5em; - .oe_snippet_thumbnail { - text-align: center; - height: 100%; - background: transparent; - position: relative; - .oe_snippet_thumbnail_img { - height: 74px; - width: 92px; - background-size: cover; - opacity: 0.9; - } - .oe_snippet_thumbnail_title { - font-size: 12px; - display: block; - text-shadow: none; - color: @we_color-text-normal; - } - &:hover { - .oe_snippet_thumbnail_img { - opacity: 1; - .scale(1); - } - .oe_snippet_thumbnail_title { - color: white; - } - } - } - > :not(.oe_snippet_thumbnail) { - display: none !important; - } - &.disable { - .oe_snippet_thumbnail { - background-color: rgba(255, 0, 0, 0.75); - } - .oe_snippet_thumbnail_img { - opacity: 0.8; - } - } -} - - -.oe_drop_zone.oe_insert{ - display: block; - height: 48px; - margin: 0px; - margin-top: -4px; - margin-bottom: -44px; - width: 100%; - position: absolute; - z-index: 1000; - .transition(margin 250ms linear); - &:not(.oe_vertical):before{ - content: ""; - display: block; - border-top: dashed 2px rgba(209, 178, 255, 0.72); - position: relative; - top: 0px} - &.oe_hover:before{ - border-top: dashed 2px rgba(116, 255, 161, 0.72)} - &.oe_vertical{ - width: 48px; - float: left; - position: relative; - margin: 0px -24px !important} - &.oe_vertical_text{ - width: 48px; - float: none; - display: inline-block; - position: relative; - margin: 0px -24px !important} - &.oe_overlay{ - .border-radius(3px); - background: rgba(153, 0, 255,.5)} -} -.oe_drop_zone, .oe_drop_zone_style{ - border: none; - background: rgba(153, 0, 255, .3); - .border-radius(4px); - &.oe_hover{ - background: rgba(0, 255, 133, .3); - z-index: 1001} -} -.oe_drop_zone_style{ - color: white; - height: 48px; - margin-bottom: 32px; - padding-top: 12px -} - - - - -/* ---- SNIPPET MANIPULATOR ---- {{{ */ - -#oe_manipulators { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.oe_overlay { - display:none; - height:0; - position:absolute; - background:transparent; - z-index:1001; - border-radius:3px; - .transition(opacity 100ms linear); - .box-sizing(border-box); - &.o_keypress { - .transition(0.8s); - } -} - - -/* ---- HANDLES ---- {{{ */ - -.oe_handle { - display:block; - width:16px; - height:16px; - margin:-2px; - .o-position-absolute(50%, auto, auto, 50%); - .box-sizing(border-box); - .opacity(0.6); - .transition(opacity 0.3s ease); - &:hover { - .opacity(0.9); - } - // Orizontal lines - > div { - z-index:1; - position:absolute; - border-style:dashed; - border-width:1px; - border-color:#666666; - .box-shadow(inset 0px 0px 0px 1px rgba(255,255,255,0.5) 0px 0px 0px 1px rgba(255,255,255,0.5)); - } - // Vertical lines - &.e > div, &.w > div { - width:0; - height:100%; - top:2px; - left:8px; - } - &.readonly { - cursor:auto !important; - } - &.readonly:before, &.readonly.size { - display:none !important; - } -} - -.oe_handle.e, .oe_handle.w, .oe_handle.s, .oe_handle.n { - &:before { - z-index:2; - position:relative; - top:50%; - left:50%; - display:block; - border:solid 1px rgba(0,0,0,0.2); - width:18px; - height:18px; - margin:-9px; - font-size:14px; - line-height:16px; - font-family:FontAwesome; - content:""; - text-align:center; - padding:1px; - border-radius: 3px; - background-color: @we_color-light; - color: @we_color-text-light; - .transition(background 100ms linear); - } - &:hover:before{ - background-color: @we_color-dark; - color:#ffffff; - .box-shadow(0 0 5px 3px rgba(255,255,255,0.7)); - } -} - -// SPECIFIC HANDLERS POSITION -// =========================== - -.oe_handle.e { - top:4px; - height:100%; - left:auto; - right:-6px; - cursor:w-resize; -} -.oe_handle.w { - top:4px; - height:100%; - left:-6px; - cursor:e-resize; -} -.oe_handle.s { - left:2px; - width:100%; - top:auto; - cursor:n-resize; - > div { - width:100%; - height:0; - top:7px; - left:1px; - } -} -.oe_handle.n { - left:2px; - width:100%; - cursor:s-resize; - > div { - width:100%; - height:0; - top:5px; - left:1px; - } -} - -// SIZE HANDLERS -// =========================== - -.oe_handle.size { - z-index: 3; - margin-left: -50px; - .auto_size, .size { - font-weight: 600; - font-size: 9px; - line-height: 9px; - text-transform: uppercase; - line-height: 9px; - padding: 4px; - border-radius: 3px; - border: none; - height: 18px; - text-align: center; - margin-top: -10px; - background-color: @we_color-light; - color: @we_color-text-light; - .o-position-absolute(9px); - .box-shadow(none); - &:hover { - background-color: @we_color-dark; - color: white; - } - } - .size { - width:64px; - cursor:row-resize; - margin-left:52px; - margin-left: 60px; - } - .auto_size { - margin-left: -63px; - width:100px; - cursor:pointer; - .transition(all 1s ease); - } -} - - -// HANDLERS ICONS -// =========================== - -.oe_overlay{ - .w:before, .e:before { - content:"\f07e"; - } - .s:before, .n:before { - content:"\f07d"; - } -} - -.oe_overlay.oe_active { - display:block; -} - -.oe_overlay.block-w-left .w:before { - content:"" !important; -} -.oe_overlay.block-w-right .w:before { - content:"" !important; -} -.oe_overlay.block-w-left.block-w-right .w:before { - display:none !important; -} -.oe_overlay.block-e-left .e:before { - content:"" !important; -} -.oe_overlay.block-e-right .e:before { - content:"" !important; -} -.oe_overlay.block-e-left.block-e-right .e:before { - display:none !important; -} -.oe_overlay.block-s-top .s:before { - content:"" !important; -} -.oe_overlay.block-s-bottom .s:before { - content:"" !important; -} -.oe_overlay.block-n-top .n:before { - content:"" !important; -} -.oe_overlay.block-n-bottom .n:before { - content:"" !important; -} - -.s-resize-important { - & * { - cursor:s-resize !important; - } -} -.n-resize-important { - & * { - cursor:n-resize !important; - } -} -.e-resize-important { - & * { - cursor:e-resize !important; - } -} -.w-resize-important { - & * { - cursor:w-resize !important; - } -} -.move-important { - & * { - cursor:move !important; - } -} - -.block-s-top .s:before, -.block-s-bottom .s:before, -.block-n-top .n:before, -.block-n-bottom .n:before, -.block-w-left .w:before, -.block-e-right .e:before { - font-size: 10px; -} - - - - -// OVERLAY OPTIONS -// =========================== - -.oe_overlay_options { - text-align:center; - margin-top: -17px; - z-index:1002; - .o-position-absolute(-20px, auto, auto, 50%); - > .btn-group { - left:-50%; - white-space:nowrap; - // default buttons (not customize) - > a.btn { - cursor:pointer; - display:inline-block; - background-color: @we_color-light; - color: @we_color-text-light; - border: 1px solid lighten(@we_color-dark, 10%); - border-left-width: 0; - border-radius: 0; - margin: 0; - float: left; - font-weight: 600; - .transition(all 0.4s ease); - &:first-child { - border-left-width: 1px; - } - &:hover { - color: white; - background-color: lighten(@we_color-dark, 10%); - } - &.oe_snippet_remove { - color: white; - background-color: @we_color-danger; - border-color: darken(@we_color-danger, 20%); - &:hover{ - background-color: darken(@we_color-danger, 20%); + .btn-group { + height: 100%; + } + + .btn { + height: 100%; + margin: 0; + padding: 10px; + line-height: 1; + font-weight: bold; + + .o-transition(all, 0.3s); + border: none; + border-radius: 0; + + &.btn-primary { + .button-variant(white, @odoo-brand-primary, @odoo-brand-primary); + text-transform: uppercase; + } + &.btn-default { + .button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + text-transform: uppercase; + } + + &:focus, &:active, &:focus:active { + outline: none; + } + } + .dropdown-menu { + left: auto; + right: 0; } - } } - } } -// CUTOMIZE MENU BUTTON -// =========================== +// SNIPPET PANEL +#oe_snippets { + .o-flex-display(); + .o-flex-flow(column, nowrap); + .o-position-absolute(0, auto, 0, -@o-we-sidebar-width); + position: fixed; + width: @o-we-sidebar-width; + z-index: 1003; -.oe_options{ - float: left; - display:inline-block; - .btn.btn-primary { - background-color: @we_color-dark; - border: 1px solid @we_color-dark; - color: @we_color-text-light; - width: 110px; - font-weight: bold; - text-align: left; - text-transform: uppercase; - font-size: 10px; - line-height: 18px; - .transition(all 0.3s ease); - &:hover, &:active, &:focus { - background-color: lighten(@we_color-dark, 5%); - border-color: lighten(@we_color-dark, 10%); - color: white; - outline: none; - .transition(all 0.3s ease); + font-family: Roboto, @font-family-sans-serif; + border-right: 1px solid @o-we-color-divider; + .o-transition(left, 400ms, @o-we-md-ease); + .o-linear-gradient(45deg, @o-we-color-normal, darken(@o-we-color-normal, 10%)); + box-shadow: 0px 10px 10px -10px black inset; + + #snippets_menu { + .o-flex(0, 0, auto); + height: @odoo-navbar-height; + margin: 0; + padding: 0; + background: @o-we-color-dark; + list-style-type: none; + li { + display: block; + float: left; + width: 25%; + height: 100%; + + a { + display: block; + width: 100%; + height: 100%; + .o-flex-display(); + .o-align-items(center); + .o-justify-content(center); + text-decoration: none!important; + + i { + font-size: 20px; + color: #999999; + + i { + color: white; + } + } + } + + &.active, &:hover { + a i { + color: white; + + i { + color: @odoo-brand-primary; + } + } + } + } } - &:before, &:after { - content: ""; - background-color: @we_color-text-light; - border-radius: 5px; - margin-top: -1px; - height: 2px; - width: 7px; - .o-position-absolute(50%); - .transition(all 0.3s); + + #o_scroll { + height: 100%; + overflow: auto; + + .o_panel_header { + color: #999999; + .o-flex-display(); + .o-align-items(center); + .o-justify-content(center); + padding: 3%; + + i { + margin-right: 5px; + } + } + .o_panel_body { + &:after { + content: " "; + display: table; + clear: both; + } + + .oe_snippet { + float: left; + width: 45.5%; + margin: 0 0 3% 3%; + box-shadow: none; + background-color: transparent; + .user-select(none); + + cursor: pointer; + cursor: copy; + cursor: grab; + + .oe_snippet_thumbnail { + .oe_snippet_thumbnail_img { + border: none; + } + .oe_snippet_thumbnail_title { + border: none; + padding: 0px; + } + + &:hover .oe_snippet_thumbnail_img { + .o-transition(transform, 200ms, ease); + .scale(1.05); + } + } + + &.disable { + .oe_snippet_thumbnail { + background-color: rgba(255, 0, 0, 0.75); + } + .oe_snippet_thumbnail_img { + opacity: 0.8; + } + } + } + } } +} +.oe_snippet { // No root because can be drag and drop (and the helper is in the body) + position: relative; + width: 100px; + background-color: @o-we-color-normal; + + > :not(.oe_snippet_thumbnail) { + display: none!important; + } + + .oe_snippet_thumbnail { + width: 100%; + + .oe_snippet_thumbnail_img { + width: 100%; + height: 0; + border: 1px solid @o-we-color-normal; + padding-bottom: 75%; + background-size: cover; + background-position: center center; + text-align: center; + overflow: hidden; + } + img.oe_snippet_thumbnail_img { + height: auto; + padding-bottom: 0; + } + .oe_snippet_thumbnail_title { + display: block; + border: 1px solid @o-we-color-normal; + padding: 5px; + font-size: 12px; + font-weight: 600; + text-shadow: none; + color: @o-we-color-text-normal; + } + &:hover .oe_snippet_thumbnail_title { + color: white; + } + } +} + +// DROPZONES +@-webkit-keyframes dropZoneInsert { + to { + background-color: fade(@odoo-brand-primary, 20%); + } +} +@keyframes dropZoneInsert { + to { + background-color: fade(@odoo-brand-primary, 20%); + } +} +#wrapwrap .oe_drop_zone { + background-color: fade(@odoo-brand-primary, 5%); + .o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate); + + &.oe_insert { + @odoo-dropzone-size: 40px; + @odoo-dropzone-border-width: 2px; + @odoo-dropzone-border: @odoo-dropzone-border-width dashed @odoo-brand-primary; + + z-index: 999; + + border: @odoo-dropzone-border; + border-top: none; + border-bottom: none; + + position: relative; + width: 100%; + height: @odoo-dropzone-size; + margin: -@odoo-dropzone-size/2 0; + + .o-transition(margin, 400ms, linear); + + &:after { + content: ""; + display: block; + width: 100%; + height: 50%; + border-bottom: @odoo-dropzone-border; + box-sizing: content-box; + } + + &.oe_vertical { + border: 2px dashed @odoo-brand-primary; + border-left: none; + border-right: none; + + width: @odoo-dropzone-size; + float: left; + margin: 0 -@odoo-dropzone-size/2; + + &:after { + width: 50%; + height: 100%; + border-bottom: none; + border-right: @odoo-dropzone-border; + } + } + } +} + +// MANIPULATORS +#oe_manipulators { + @odoo-handle-edge-size: 8px; + @odoo-handle-border-width: 3px; + + // SNIPPET MANIPULATORS + .oe_overlay { + .o-position-absolute(); + z-index: 1002; + display: none; + height: 0; + background: transparent; + text-align: center; + .o-transition(opacity, 400ms, linear); + &.o_keypress { + opacity: 0; + } + &.oe_active { + display: block; + } + + // OVERLAY OPTIONS + > .oe_overlay_options { + .o-position-absolute(@bottom: 0, @left: 0); + + > .btn-group { + white-space: nowrap; + + .btn { + @o-overlay-option-size: 25px; + + display: inline-block; + width: @o-overlay-option-size; + height: @o-overlay-option-size; + padding: 0; + border: 1px solid @o-we-color-dark; + line-height: @o-overlay-option-size; + font-size: 11px; + border-radius: 0; + font-weight: 600; + + .o-transition(all, 400ms); + color: @o-we-color-text-light; + background-color: @o-we-color-light; + &:hover { + color: white; + background-color: lighten(@o-we-color-dark, 10%); + } + + &.oe_snippet_remove { + color: white; + background-color: @o-we-color-danger; + border-color: darken(@o-we-color-danger, 20%); + &:hover { + background-color: darken(@o-we-color-danger, 20%); + } + } + } + + // CUSTOMIZE MENU BUTTON + > .oe_options { + .btn { + width: auto; + padding: 0 25px 0 5px; + background-color: @o-we-color-dark; + text-transform: uppercase; + &:hover, &:active, &:focus { + background-color: lighten(@o-we-color-dark, 5%); + border-color: lighten(@o-we-color-dark, 10%); + color: white; + } + &:active, &:focus, &:active:focus { + outline: none; + } + &:before, &:after { + content: ""; + width: 7px; + height: 2px; + background-color: @o-we-color-text-light; + .o-position-absolute(46%); + .o-transition(all, 0.3s); + } + &:before { + right: 9px; + .rotate(45deg); + } + &:after { + right: 5px; + .rotate(-45deg); + } + } + // Open menu + &.open .btn { + background-color: @o-we-color-light; + &:before, &:after { + width: 9px; + } + &:before { + right: 10px; + transform: translateX(5px) rotate(-45deg); + } + &:after { + .rotate(45deg); + } + } + + // CUSTOMIZE MENU + .dropdown-menu { + margin: -1px 0 0 0; + padding: 0; + border: 1px solid @o-we-color-dark; + border-radius: 0; + background-color: @o-we-color-light; + a { + color: @o-we-color-text-light; + font-weight: 600; + font-size: 12px; + padding: 5px 20px; + } + + > li { + position: relative; + &:hover { + background-color: fadeOut(@o-we-color-dark, 50%); + > a { + color: white; + background: transparent; + cursor: pointer; + } + > .dropdown-menu { + display: block; + left: 100%; + top: 0; + } + } + &.dropdown-submenu:before { + .o-position-absolute(@top: 10px, @right: 10px); + .o-caret-right(3px); + border-left-color: @o-we-color-text-light; + } + &.divider { + background-color: @o-we-color-divider; + margin: 0; + } + &.active > a { + color: white; + background-color: fadeOut(@o-we-color-dark, 50%); + &:before { + .o-position-absolute(@top: 5px, @left: 5px); + content: "\f00c"; + font-family: "FontAwesome"; + color: @odoo-brand-optional; + } + } + } + } + } + } + } + + &.o_top_cover > .oe_overlay_options { + bottom: auto; + top: @odoo-handle-border-width; + right: @odoo-handle-border-width; + } + + // HANDLES + > .oe_handles { + @o-handles-offset-to-hide: 10000px; + .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0); + + > .oe_handle { + @o-handle-size: 18px; + + opacity: 0.5; + .o-transition(opacity, 400ms); + &:hover { + opacity: 0.9; + } + border: 0 dashed black; + + &:after { + display: block; + width: @o-handle-size; + height: @o-handle-size; + border: solid 1px rgba(0, 0, 0, 0.2); + line-height: @o-handle-size - 2; + font-size: 14px; + font-family: FontAwesome; + background-color: @o-we-color-light; + color: @o-we-color-text-light; + } + &:hover:after { + background-color: @o-we-color-dark; + color: white; + box-shadow: 0 0 5px 3px rgba(255,255,255,0.7); + } + &.w:after, &.e:after { + content: "\f07e"; + } + &.s:after, &.n:after { + content: "\f07d"; + } + + &.w { + border-left-width: @odoo-handle-border-width; + cursor: e-resize; + width: @odoo-handle-edge-size; + .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0); + + &:after { + .o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width); + margin-top: -@o-handle-size/2; + } + } + &.e { + border-right-width: @odoo-handle-border-width; + cursor: w-resize; + width: @odoo-handle-edge-size; + .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto); + + &:after { + .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width); + margin-top: -@o-handle-size/2; + } + } + &.n { + border-top-width: @odoo-handle-border-width; + cursor: s-resize; + height: @odoo-handle-edge-size; + .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0); + + &:after { + .o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width); + margin-left: -@o-handle-size/2; + } + } + &.s { + border-bottom-width: @odoo-handle-border-width; + cursor: n-resize; + height: @odoo-handle-edge-size; + .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0); + + &:after { + .o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width); + margin-left: -@o-handle-size/2; + } + } + + // SIZE HANDLERS + &.size { + @o-handle-size-height: 15px; + + height: 0; + background: transparent; + .o-position-absolute(@bottom: -@o-handles-offset-to-hide + @o-handle-size-height, @left: 50%); + width: 250px; + margin-left: -125px; + + > .oe_handle_button { + display: block; + width: 100px; + height: @o-handle-size-height; + padding-top: 2px; + font-weight: 600; + font-size: 9px; + text-transform: uppercase; + background-color: @o-we-color-light; + color: @o-we-color-text-light; + &:hover { + background-color: @o-we-color-dark; + color: white; + } + &.auto_size { + cursor: pointer; + float: left; + } + &.size { + cursor: row-resize; + float: right; + } + } + } + + &.readonly { + cursor: auto !important; + + &:after, &.size { + display: none !important; + } + &:hover { + opacity: 0.5; + } + } + } + } + + // HANDLERS ICONS + &.block-w-left .w:after { + content: "" !important; + } + &.block-w-right .w:after { + content: "" !important; + } + &.block-w-left.block-w-right .w:after { + display: none !important; + } + &.block-e-left .e:after { + content: "" !important; + } + &.block-e-right .e:after { + content: "" !important; + } + &.block-e-left.block-e-right .e:after { + display: none !important; + } + &.block-s-top .s:after { + content: "" !important; + } + &.block-s-bottom .s:after { + content: "" !important; + } + &.block-n-top .n:after { + content: "" !important; + } + &.block-n-bottom .n:after { + content: "" !important; + } + } +} + +.s-resize-important * { + cursor: s-resize !important; +} +.n-resize-important * { + cursor: n-resize !important; +} +.e-resize-important * { + cursor: e-resize !important; +} +.w-resize-important * { + cursor: w-resize !important; +} +.move-important * { + cursor: move !important; +} + +.block-s-top .s, +.block-s-bottom .s, +.block-n-top .n, +.block-n-bottom .n, +.block-w-left .w, +.block-e-right .e { &:before { - right: 21px; - .rotate(45deg); + font-size: 10px; } - &:after { - right: 17px; - .rotate(-45deg); - } - } - // Open menu - &.open .btn.btn-primary { - background-color: @we_color-light; - &:before { - right: 22px; - width: 9px; - transform: translateX(5px) rotate(-45deg); - background-color: white; - } - &:after { - width: 9px; - background-color: white; - .rotate(45deg); - } - } } -// CUTOMIZE MENU -// =========================== -.oe_options { - .dropdown-menu { - text-align:left; - background-color: @we_color-light; - min-width: 192px; - .border-radius(0); - margin: -1px 0 0 0; - padding: 0; - border-color: @we_color-light; - border: 1px solid @we_color-dark; - select, input { - display:block; - } - a { - color: @we_color-text-light; - font-weight: 600; - font-size: 12px; - padding: 5px 20px; - } - } -} - -// CUTOMIZE MENU LI -// =========================== - -.oe_options .dropdown-menu li { - background-color: @we_color-light; - position: relative; - a { - cursor: pointer; - background-color: transparent; - } - &:last-child a { - padding-bottom: 8px; - } - &:hover { - background-color: fadeOut(@we_color-dark, 50%); - &.dropdown-submenu:after{ - border-left-color: white; - } - > a { - color: white; - background: transparent; - } - > .dropdown-menu{ - display: block; - left: 100%; - top: 1px; - } - } - &.dropdown-submenu:after{ - content: ""; - .o-position-absolute(10px, 10px); - .o-caret-right(3px); - border-left-color: @we_color-text-light; - } - &.divider { - background-color: @we_color-divider; - margin: -1px 0; - } - &.active { - > a { - color: white; - background-color: fadeOut(@we_color-dark, 50%); - &:after { - content: "\E876"; - font-family: "Material Icons"; - float: right; - color: @we_color-accent; - } - } - } -} - - - // NOTE EDITOR -// ========================= - .note-popover .popover { - height: @we_editor-bar-height; - top: 0 !important; - left: 0 !important; - padding: 0; - margin: 0 0 0 @we_sidebar-width; - background-color: @we_color-dark; - border-radius: 0; - border-width: 0 1px; - width: auto; - text-align: center; - .box-shadow(none); - .popover-content { - height: @we_editor-bar-height; - .btn { - height: @we_editor-bar-height; - border: none; - border-radius: 0; - background-color: @we_color-dark; - color: @we_color-text-normal; - border-top: 2px solid transparent; - .transition(all 0.3s); - &:hover { - border-top: 2px solid @we_color-text-normal; - color: @we_color-text-normal; - } - } - .btn.active { - border-top: 2px solid white; - background-color: @we_color-dark; - color: @we_color-text-light; - .box-shadow(inset 0 3px 10px rgba(0, 0, 0, 0.5)); - } - >.btn-group { - margin-top: -2px - } - .btn-group.open .dropdown-toggle { - border-top: 2px solid white; - background-color: @we_color-darker; - color: white; - .box-shadow(none); - } - .dropdown-menu { - margin: 11px 0 0; - border: 0; - border-top: 7px solid darken(@we_color-accent,10%); - background-color: @we_color-darker; - border-radius: 2px 2px 0 0; - &:before{ - .o-caret-up(8px); - border-bottom-color: darken(@we_color-accent,10%); - .o-position-absolute(-15px, auto, auto, 5px); - } - > li > a { - color: @we_color-text-light; - &:hover { - color: white; + height: @odoo-navbar-height; + top: 0 !important; + left: 0 !important; + padding: 0; + margin: 0 0 0 @o-we-sidebar-width; + background-color: @o-we-color-dark; + border-radius: 0; + border-width: 0 1px; + width: auto; + text-align: center; + box-shadow: none; + .popover-content { + height: @odoo-navbar-height; + .btn { + height: @odoo-navbar-height; + border: none; + border-radius: 0; + background-color: @o-we-color-dark; + color: @o-we-color-text-normal; + border-top: 2px solid transparent; + .o-transition(all, 0.3s); + &:hover { + border-top: 2px solid @o-we-color-text-normal; + color: @o-we-color-text-normal; + } + } + .btn.active { + border-top: 2px solid white; + background-color: @o-we-color-dark; + color: @o-we-color-text-light; + box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5); + } + >.btn-group { + margin-top: -2px + } + .btn-group.open .dropdown-toggle { + border-top: 2px solid white; + background-color: @o-we-color-darker; + color: white; + box-shadow: none; + } + .dropdown-menu { + margin: 0; + border-radius: 0; + background-color: @o-we-color-darker; + > li > a { + width: 100%; + color: @o-we-color-text-light; + &:hover { + background-color: @o-we-tab-active-bg; + color: white; + } + + > i { + visibility: hidden; + } + &.checked > i { + visibility: visible; + } + } + } + #colors_preview { + padding: 4px; + border-radius: 2px; + border: 1px solid #989898; + border-color: fadeOut(@o-we-color-text-normal, 0.5); + } + .note-color-palette td > button, .note-color-palette div .note-color-btn { + border-color: fadeOut(white, 50%); + border-radius: 0; + margin: 1px; + } + + // COLORPICKER + .note-color { + .dropdown-toggle { + width: auto; + } + .o_foreground_toggle > button:before { + font-family: FontAwesome; + content: '\f1fc'; + } + .o_background_toggle > button:before { + font-family: FontAwesome; + content: '\f0c3'; + } + + border: 1px solid @o-we-color-divider; + border-width: 0 1px; + .dropdown-menu { + min-width: 250px!important; + padding: 0!important; + } } - } } - #colors_preview { - padding: 4px; - border-radius: 2px; - border: 1px solid #989898; - border-color:fadeOut(@we_color-text-normal, 0.5); - } - .note-color-palette td > button, .note-color-palette div .note-color-btn { - border-color: fadeOut(white, 50%); - border-radius: 0; - margin: 1px; - } - } } -.foreground_toggle, .background_toggle{ - > button { - width: 30px!important; - text-align: center; - } - > button > .caret { - display: none; - } +table.colorpicker { + width: 100%; + td { + padding: 0 2px 2px 0; + > button { + width: 100%; + border: 1px solid black; + padding: 0; + &::after { + content: "A"; + font-weight: bold; + vertical-align: sub; + } + } + } } -.foreground_toggle > button:before{ - font-family:FontAwesome; - content:'\f1fc'; -} -.background_toggle > button:before{ - font-family:'Material Icons'; - content:'\E23A'; -} -.note-popover .popover-content{ - .note-color{ - border: 1px solid @we_color-divider; - border-width: 0 1px; - .dropdown-menu{ - min-width: 250px!important; - padding: 0!important; - .note-palette-title{ +.colorpicker { + background-color: @o-we-color-dark!important; + + .o_colorpicker_sections { + border: 1px solid darken(@o-we-color-dark, 12%); + border-width: 1px 0 0; + font-size: 14px; + + .o_colorpicker_section_menu { + width: 50px; + height: 100%; + float: left; + margin: 0; + padding: 0; + list-style: none; + text-align: center; + + > li { + display: block; + float: none; + margin: 0; + background-color: transparent; + > a { + display: block; + padding: 5px 10px!important; + border-radius: 0; + background-color: transparent; + color: darken(@o-we-color-text-light, 10%); + > i.fa { + font-size: 20px; + } + + &:focus, &:active, &:focus:active { + outline: none; + } + } + &:hover, &.active { + > a { + color: white; + } + } + &.active > a { + background-color: @o-we-tab-active-bg!important; + } + } + } + .o_colorpicker_section_tabs { + width: 200px; + height: 100%; + margin-left: 50px; + .tab-pane { + padding: 5px 10px; + background-color: @o-we-tab-active-bg; + } + } + } + .o_colorpicker_section { + &:after { + content: ""; + display: table; + clear: both; + } + + > button { + position: relative; + display: block; + width: 100%; + height: 30px; + border: 1px solid @o-we-color-dark; + border-radius: 3px; + margin: 0 0 5px; + padding: 0 20px; + line-height: 28px; + font-size: 12px; + font-weight: bold; + text-align: left; + &:hover, &.selected { + box-shadow: 0px 0px 2px 2px @o-we-color-light; + } + &.selected:before { + content: "\f00c"; + font-family: "FontAwesome"; + color: @odoo-brand-optional; + .o-position-absolute(@top: 0, @left: 3px); + font-size: 13px; + line-height: 28px; + } + + &:after { + content: "A"; + .o-position-absolute(0, 0); + width: 25px; + text-align: center; + line-height: 28px; + font-weight: normal; + } + + &[data-event="foreColor"] { + background-color: @o-we-color-normal; + &:after { + background-color: fade(white, 30%); + } + } + + &.o_small { + float: left; + width: auto; + min-width: 27px; + padding: 0; + margin-right: 5px; + } + } + } + .note-palette-title { padding: 10px 0px 10px 10px; - color: @we_color-text-light; + color: @o-we-color-text-light; font-weight: bold; - position: absolute; - } - .palette-reset{ - text-align: right; - width: 100%; + } + .palette-reset { + .o-position-absolute(0, 0); margin: 0; padding: 5px 10px 0; - .note-color-reset{ - float: right; - margin: 3px 0 0; - padding: 0; - &:hover{ - background: transparent!important; - color: @we_color-danger; - } + .note-color-reset { + font-size: 20px!important; + margin: 3px 0 0; + padding: 0; + &:hover { + background: transparent!important; + color: @o-we-color-danger; + } } - } } - } } - -.note-popover .popover-content .dropdown-menu, #oe_manipulators .snippet-option-colorpicker .dropdown-menu{ - > li{ - background-color: @we_color-darker; - min-width: 250px!important - } - .tabs_container{ - background-color: @we_color-darker; - font-size: 0; - background-color: @we_tab--active-bg; - border: 1px solid darken(@we_tab-bg,10%); - border-width: 1px 0 0; - margin: 5px 0 0; - .tabs_toggles{ - display: table-cell; - font-size: 14px; - width: 50px; - padding:0; - margin: 0; - list-style: none; - height: 100%; - vertical-align: top; - background-color: @we_tab-bg; - li{ - background: transparent; - margin-bottom: 10px; - &:last-child{ - margin-bottom: 0; - } - > a { - padding: 5px 10px; - display: block; - } - > a > i { - visibility: visible; - color: darken(@we_color-text-light, 10%); - } - &:hover, &.active{ - > a > i {color: white} - } - &.active > a{ - background-color: @we_tab--active-bg; - } - } - } - .tabs{ - display: table-cell; - font-size: 14px; - height: 100%; - width: 200px; - } - .tab{ - display: none; - padding: 5px 10px; - background-color: @we_tab--active-bg; - } - .tab.on{ - display: block; - } - } -} - - -// COLORPICKER -// ==================================== - -#oe_manipulators .snippet-option-colorpicker .dropdown-menu{ - - .note-palette-title{ - padding: 10px 0px 10px 10px; - color: @we_color-text-light; - font-weight: bold; - position: absolute; - } - .palette-reset{ - text-align: right; - width: 100%; - margin: 0; - padding: 5px 10px 0; - cursor: pointer; - .note-color-reset{ - float: right; - margin: 3px 0 0; - padding: 0; - &:hover{ - background: transparent!important; - color: @we_color-danger; - } - } - } -} -.popover-content, .dropdown-menu { - .palette_theme, .palette_ui, .palette_grayscale { - button { - display: block; - font-size: 12px; - width: 100%; - max-width: 180px; - padding: 5px 20px; - margin: 0; - position: relative; - text-align: left; - background-color: @we_color-normal; - border: 1px solid @we_color-dark; - height: 30px; - color: @we_color-text-light; - white-space: nowrap; - overflow: auto; - font-weight: 600; - -webkit-font-smoothing: antialiased; - .border-radius(3px); - margin-bottom: 5px; - span { - height: 20px; - width: 25px; - float: right; - display: inline-block; - border: 1px solid #393c44; - .o-position-absolute(4px, 5px); - box-shadow: -10px 0px 10px @we_color-normal; - } - &:hover { - border: 1px solid @we_color-dark; - background: @we_color-light; - color: white; - span { - box-shadow: -10px 0px 10px @we_color-light; - } - } - } - button.selected{ - border: 1px solid @we_color-dark; - background: @we_color-light; - color: white; - span { - box-shadow: -10px 0px 10px @we_color-light; - } - &:before{ - content: "\f00c"; - font-family: "FontAwesome"; - color: @we_color-accent; - position: absolute; - left: 5px; - line-height: 1.7; - font-size: 0.8em; - } - } - } -} - - - - - // ENTER IN EDIT MODE -// ============================================ - body.editor_enable { - #web_editor-top-edit { - background-color: transparent; - } - #web_editor_snippets { - .transition(left 0.4s @we_md-ease); - } + padding-top: @odoo-navbar-height!important; + + #web_editor-top-edit { + background-color: @o-we-color-dark; + form.navbar-form { + right: 0; + } + } + + &.editor_has_snippets { + .o-transition(padding-left, 400ms, @o-we-md-ease); + padding-left: @o-we-sidebar-width!important; + + #oe_snippets { + left: 0; + } + } } -body.editor_enable.editor_has_snippets { - #web_editor-top-edit { - .transition(background 0.4s @we_md-ease); - background-color: @we_color-dark; - .navbar-form { - right: 0; +#web_editor_inside_iframe { + background-color: @odoo-brand-secondary; + + #editable_area { + font: inherit !important; + line-height: inherit !important; + color: inherit !important; + + p { + margin: initial; + } + a, a:hover { + color: inherit; + } + } + &.editor_enable #wrapwrap { + height: 100%; + padding-top: @odoo-navbar-height; + > main { + height: 100%; + #editable_area { + position: relative; + overflow: hidden; + max-width: 600px; + min-height: 100%; + margin: auto; + + background-color: white; + } + } + } + .note-color-palette .colorpicker { + display: none; } - } - #web_editor_snippets { - left: 0; - } } diff --git a/addons/web_editor/static/src/less/web_editor.variables.less b/addons/web_editor/static/src/less/web_editor.variables.less index d72d63931bd..043dd0f404e 100644 --- a/addons/web_editor/static/src/less/web_editor.variables.less +++ b/addons/web_editor/static/src/less/web_editor.variables.less @@ -1,76 +1,77 @@ -// Fonts -// ======================= -@we_font-default : "Roboto", Roboto, sans-serif; -@we_font-size-def : 14px; +@o-we-color-dark: #2c2c36; +@o-we-color-darker: darken(@o-we-color-dark, 2%); +@o-we-color-divider: #33363e; +@o-we-color-light: #4e525b; +@o-we-color-normal: #50545d; +@o-we-color-paper: #fbfbfd; +@o-we-color-text-normal: #999999; +@o-we-color-text-light: #d4d5d7; +@o-we-color-danger: #e6586c; -// COLORS UI -// ======================= -@we_color-dark : #2c2c36; -@we_color-darker : darken(@we_color-dark,2%); -@we_color-divider : #33363e; -@we_color-normal : #50545d; -@we_color-light : #4e525b; +@o-we-sidebar-width: 210px; -@we_color-paper : #fbfbfd; -@we_color-inactive : #646465; +@o-we-tab-active-bg: #3D4048; -@we_color-text-normal : #999999; -@we_color-text-light : #d4d5d7; -@we_color-text-dark : #505050; +// Transitions +@o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1); -@we_color-accent : #1cc1a9; -@we_color-accent-d10 : darken(@we_color-accent, 10%); -@we_color-primary : #b35e9b; -@we_color-primary-d10 : darken(@we_color-primary, 10%); -@we_color-primary-l10 : lighten(@we_color-primary, 10%); -@we_color-primary-hover : #7e376b; +// Animations +@-webkit-keyframes fadeInDownSmall { + 0% { + opacity: 0; + .translate(0, -5px); + } + 100% { + opacity: 1; + .translate(0, 0); + } +} +@keyframes fadeInDownSmall { + 0% { + opacity: 0; + .translate(0, -5px); + } + 100% { + opacity: 1; + .translate(0, 0); + } +} -@we_color-danger : #e6586c; -@we_color-success : #4ab980; +@-webkit-keyframes fadeInOut { + 0% { + opacity: 0; + } + 25% { + opacity: 1; + } + 75% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeInOut { + 0% { + opacity: 0; + } + 25% { + opacity: 1; + } + 75% { + opacity: 1; + } + 100% { + opacity: 0; + } +} - -// LAYOUT -// ======================= -@we_screen_xs : 480px; -@we_screen_sm : 768px; -@we_screen_md : 992px; -@we_screen_lg : 1200px; - - -// TOP BAR -// ======================= -@we_editor-bar-height : 45px; -@we_editor-dropdown-border-height : 2px; -@we_editor-bar-bg : @we_color-primary; -@we_editor-bar-link-color : @we_color-paper; -@we_editor-bar-link-shadow : @we_color-primary-d10; - - -// EDITOR -// ======================= -@we_sidebar-width: 210px; - - -// SHADOWS -// ======================= -@we_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 3px 1px -2px rgba(0, 0, 0, 0.2), - 0 1px 5px 0 rgba(0, 0, 0, 0.12); - - -// DROPDOWNS -// ======================= -@we_dropdown-toggle-color : @we_color-paper; -@we_dropdown-toggle-shadow-color : @we_color-primary-d10; -@we_dropdown-menu-color : @we_color-primary-hover; - // open - @we_dropdown--open-toggle-color : white; - @we_dropdown--open-toggle-bg-color : @we_color-primary-hover; - @we_dropdown--open-toggle-shadow-color : @we_color-primary-hover; - - -// TABS -// ======================= -@we_tab-bg: @we_color-darker; -@we_tab--active-bg: #3D4048; +@-webkit-keyframes inputHighlighter { + from { background: @odoo-brand-optional; } + to { width: 0; background: transparent; } +} +@keyframes inputHighlighter { + from { background: @odoo-brand-optional; } + to { width: 0; background: transparent; } +} diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less index a716f5c420a..abc3d3122f3 100644 --- a/addons/web_planner/static/src/less/web_planner_common.less +++ b/addons/web_planner/static/src/less/web_planner_common.less @@ -48,7 +48,7 @@ } // community -#oe_main_menu_navbar { +#oe_main_menu_navbar:not(.o_main_navbar) { .o_planner_systray { > .progress { margin-top: 10px; diff --git a/addons/website/static/src/css/common.css b/addons/website/static/src/css/common.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css deleted file mode 100644 index c6f9b2d9add..00000000000 --- a/addons/website/static/src/css/website.css +++ /dev/null @@ -1,800 +0,0 @@ -@charset "UTF-8"; -/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY - * - * css for editor buttons, openerp widget included in the website and other - * stuff must go to the editor.css - * - */ -ul { - list-style-type: disc; -} - -li > ul { - list-style-type: circle; -} - -li > * > li > ul { - list-style-type: square; -} - -li > * > li > * > li > ul { - list-style-type: disc; -} - -li > * > li > * > li > * > li > ul { - list-style-type: circle; -} - -li > * > li > * > li > * > li > * > li > ul { - list-style-type: square; -} - -li > * > li > * > li > * > li > * > li > * > li > ul { - list-style-type: disc; -} - -ol { - list-style-type: decimal; -} - -li > ol { - list-style-type: lower-alpha; -} - -li > * > li > ol { - list-style-type: lower-greek; -} - -li > * > li > * > li > ol { - list-style-type: decimal; -} - -li > * > li > * > li > * > li > ol { - list-style-type: lower-alpha; -} - -li > * > li > * > li > * > li > * > li > ol { - list-style-type: lower-greek; -} - -li > * > li > * > li > * > li > * > li > * > li > ol { - list-style-type: decimal; -} - -li > p { - margin: 0; -} - -font[style*='background'], font[class*='bg-'] { - padding: 0 2px; -} - -.o_ul_toggle_self, .o_ul_toggle_next { - display: none; -} - -.o_ul_folded .o_close { - display: none !important; -} -.o_ul_folded .o_ul_toggle_self, .o_ul_folded .o_ul_toggle_next { - display: inline-block; - line-height: inherit; - float: left; - position: relative; - margin-left: -1em; - z-index: 1; - top: -0.15em; - left: 0.2em; - font-size: 1.4em; - text-decoration: none; -} -.o_ul_folded .o_ul_toggle_self:before, .o_ul_folded .o_ul_toggle_next:before { - content: ""; -} -.o_ul_folded .o_ul_toggle_self.o_open, .o_ul_folded .o_ul_toggle_next.o_open { - left: 0em; -} -.o_ul_folded .o_ul_toggle_self.o_open:before, .o_ul_folded .o_ul_toggle_next.o_open:before { - content: ""; -} - -/* Extra Styles */ -h1.text-muted, h2.text-muted, h3.text-muted { - margin-top: 10px; -} - -header a.navbar-brand.logo { - padding: 0 15px; -} -header a.navbar-brand img { - max-height: 50px; -} - -hr { - margin-bottom: 10px; - padding-bottom: 10px; -} - -/* ----- Snippets Styles ----- */ -.para_large { - font-size: 120%; -} - -.jumbotron.para_large p { - font-size: 150%; -} - -.readable { - font-size: 120%; - max-width: 700px; - margin-left: auto; - margin-right: auto; -} - -/* ----- BOOTSTRAP FIX ----- */ -.container .container, .readable .container { - padding-left: 0; - padding-right: 0; - width: auto!important; -} - -/* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */ -.navbar.navbar-static-top { - margin-bottom: 0; -} -.navbar.navbar-static-top ul.nav > li.divider { - margin-top: 15px; - padding-top: 20px; - border-right: 1px solid grey; -} - -/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */ -html, body, #wrapwrap { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - height: 100%; -} - -#wrapwrap { - display: table; - table-layout: fixed; - width: 100%; -} -#wrapwrap > * { - display: table-row; -} -#wrapwrap > main { - height: 100%; -} -#wrapwrap > footer { - height: 100%; - background: rgba(200, 200, 200, 0.1); -} - -body > nav.navbar { - width: 100%; - position: absolute; - z-index: 10000; -} - -@media (min-width: 767px) { - nav.navbar + #wrapwrap { - padding-top: 34px; - } -} -/* ----- BOOTSTRAP FIX ----- */ -@-moz-document url-prefix() { - .table .img-responsive { - width: 100%; - } -} -.navbar .nav > li > p { - margin-bottom: 0px; -} - -/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */ -.nav-hierarchy { - padding-left: 16px; -} - -/* -- Hack for removing double scrollbar from mobile preview -- */ -div#mobile-preview.modal { - overflow: hidden; -} - -ul.nav-stacked > li > a { - padding: 2px 15px; -} - -#customize-menu .dropdown-header { - text-transform: uppercase; -} - -/* ---- PUBLISH ---- */ -.css_published .btn-danger, .css_published .css_publish { - display: none; -} - -.css_unpublished .btn-success, .css_unpublished .css_unpublish { - display: none; -} - -[data-publish='off'] > *:not(.css_options) { - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); - opacity: 0.5; -} - -/* ---- END of PUBLISH ---- */ -::-moz-selection { - background: rgba(150, 150, 220, 0.3); -} - -::selection { - background: rgba(150, 150, 220, 0.3); -} - -.logo-img { - width: 220px; -} - -.o_normalwhitespace { - white-space: normal; -} - -.oe_demo { - position: relative; -} -.oe_demo img { - width: 100%; -} -.oe_demo div { - position: absolute; - left: 0; - background-color: rgba(0, 0, 0, 0.4); - opacity: 0.85; - bottom: 0px; - width: 100%; - padding: 7px; - color: white; - font-weight: bold; -} -.oe_demo div a { - color: white; -} - -/* ---- SNIPPETS --- */ -.oe_img_bg { - background-size: cover; -} - -.carousel, .parallax, .blockquote { - overflow: hidden; -} - -@media (max-width: 400px) { - section, .parallax, .row, .hr, .blockquote { - height: auto !important; - } -} -.carousel-inner { - height: 100%; -} -.carousel-inner .item { - height: 100%; - background-size: cover; -} - -.carousel .carousel-control { - cursor: pointer; -} -.carousel .carousel-control span { - top: 50%; - position: absolute; - margin-top: -8px; -} -.carousel .carousel-control.left { - left: -10px; -} -.carousel .carousel-control.left * { - position: absolute; - top: 50%; - z-index: 5; - right: 50%; -} -.carousel .carousel-control.right { - right: -10px; -} -.carousel .carousel-control.right * { - position: absolute; - top: 50%; - z-index: 5; - left: 50%; -} - -.quotecarousel { - padding-bottom: 16px; -} - -.hr { - padding: 4px 0; -} - -.o_image_floating { - width: 40%; - margin: 4px; -} -.o_image_floating div.o_container { - position: relative; -} -.o_image_floating div.o_container mark { - display: block; - position: absolute; - bottom: 0; - width: 100%; - background-color: rgba(86, 61, 124, 0.25); -} -.o_image_floating div.o_container mark a { - color: white; -} -.o_image_floating.o_hide_link div.o_container mark { - display: none; -} -.o_image_floating.o_margin_s { - margin-bottom: 4px; -} -.o_image_floating.o_margin_s.pull-right { - margin-left: 8px; -} -.o_image_floating.o_margin_s.pull-left { - margin-right: 8px; -} -.o_image_floating.o_margin_m { - margin-bottom: 8px; -} -.o_image_floating.o_margin_m.pull-right { - margin-left: 12px; -} -.o_image_floating.o_margin_m.pull-left { - margin-right: 12px; -} -.o_image_floating.o_margin_l { - margin-bottom: 12px; -} -.o_image_floating.o_margin_l.pull-right { - margin-left: 16px; -} -.o_image_floating.o_margin_l.pull-left { - margin-right: 16px; -} -.o_image_floating.o_margin_xl { - margin-bottom: 24px; -} -.o_image_floating.o_margin_xl.pull-right { - margin-left: 32px; -} -.o_image_floating.o_margin_xl.pull-left { - margin-right: 32px; -} - -/* gallery */ -.o_gallery.o_grid .img, .o_gallery.o_masonry .img { - width: 100%; -} -.o_gallery.o_grid.o_spc-none div.row { - margin: 0; -} -.o_gallery.o_grid.o_spc-none div.row > * { - padding: 0; -} -.o_gallery.o_grid.o_spc-small div.row { - margin: 5px 0; -} -.o_gallery.o_grid.o_spc-small div.row > * { - padding: 0 5px; -} -.o_gallery.o_grid.o_spc-medium div.row { - margin: 10px 0; -} -.o_gallery.o_grid.o_spc-medium div.row > * { - padding: 0 10px; -} -.o_gallery.o_grid.o_spc-big div.row { - margin: 15px 0; -} -.o_gallery.o_grid.o_spc-big div.row > * { - padding: 0 15px; -} -.o_gallery.o_masonry.o_spc-none div.col { - padding: 0; -} -.o_gallery.o_masonry.o_spc-none div.col > img { - margin: 0 !important; -} -.o_gallery.o_masonry.o_spc-small div.col { - padding: 0 5px; -} -.o_gallery.o_masonry.o_spc-small div.col > img { - margin: 5px 0 !important; -} -.o_gallery.o_masonry.o_spc-medium div.col { - padding: 0 10px; -} -.o_gallery.o_masonry.o_spc-medium div.col > img { - margin: 10px 0 !important; -} -.o_gallery.o_masonry.o_spc-big div.col { - padding: 0 15px; -} -.o_gallery.o_masonry.o_spc-big div.col > img { - margin: 15px 0 !important; -} -.o_gallery.o_grid.size-auto .row { - height: auto; -} -.o_gallery.o_grid.size-small .row { - height: 100px; -} -.o_gallery.o_grid.size-medium .row { - height: 250px; -} -.o_gallery.o_grid.size-big .row { - height: 400px; -} -.o_gallery.o_grid.size-small .img, .o_gallery.o_grid.size-medium .img, .o_gallery.o_grid.size-big .img { - height: 100%; -} -.o_gallery.o_nomode.o_spc-none .img { - padding: 0; -} -.o_gallery.o_nomode.o_spc-small .img { - padding: 5px; -} -.o_gallery.o_nomode.o_spc-medium .img { - padding: 10px; -} -.o_gallery.o_nomode.o_spc-big .img { - padding: 15px; -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators li { - border: 1px solid #aaa; -} -.o_gallery .carousel-inner .item img { - max-width: none; -} - -.o_gallery.o_slideshow > .container { - height: 100%; -} - -.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel { - height: 100%; -} -.o_gallery.o_slideshow .carousel .item, .modal-body.o_slideshow .carousel .item { - padding-bottom: 64px; -} -.o_gallery.o_slideshow .carousel img, .modal-body.o_slideshow .carousel img { - max-height: 100%; - max-width: 100%; - margin: auto; - position: relative; - top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators, .modal-body.o_slideshow .carousel ul.carousel-indicators { - display: block; - height: auto; - padding: 0; - border-width: 0; - position: absolute; - bottom: 0; -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators > *, .modal-body.o_slideshow .carousel ul.carousel-indicators > * { - list-style-image: none; - display: inline-block; - width: 40px; - height: 40px; - margin: 0 0px 5px 5px; - padding: 0; - border: 1px solid #aaa; - text-indent: initial; - background-size: cover; - background-color: #fff; - border-radius: 0; -} -.o_gallery.o_slideshow .carousel ul.carousel-indicators > *:not(.active), .modal-body.o_slideshow .carousel ul.carousel-indicators > *:not(.active) { - opacity: 0.8; - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - filter: gray; - filter: url("data:image/svg+xml;utf8,#greyscale"); -} -.o_gallery.o_slideshow .carousel .carousel-control.left, .o_gallery.o_slideshow .carousel .carousel-control.right, .modal-body.o_slideshow .carousel .carousel-control.left, .modal-body.o_slideshow .carousel .carousel-control.right { - background-image: none; - background-color: transparent; -} - -/* Parallax Theme */ -div.carousel .carousel-indicators li { - border: 1px solid grey; -} -div.carousel .carousel-indicators .active { - background-color: grey; -} -div.carousel span.carousel-img img, div.carousel div.carousel-content { - max-height: 95%; - padding: 10px; -} -div.carousel div.carousel-content { - background-color: black; - color: white; - background: rgba(0, 0, 0, 0.3); -} - -.parallax { - background-size: cover; -} -.parallax > div { - position: relative; - display: table; - width: 100%; - min-height: 200px; -} -.parallax > div > div { - display: table-cell; - vertical-align: middle; - padding: 32px 0; -} - -/* Background (kept for 8.0 compatibility) */ -.oe_dark { - background-color: rgba(200, 200, 200, 0.14); -} - -.oe_black { - background-color: rgba(0, 0, 0, 0.9); - color: white; -} - -.oe_green { - background-color: #169C78; - color: white; -} -.oe_green .text-muted { - color: #ddd; -} - -.oe_blue_light { - background-color: #41b6ab; - color: white; -} -.oe_blue_light .text-muted { - color: #ddd; -} - -.oe_blue { - background-color: #34495e; - color: white; -} - -.oe_orange { - background-color: #f05442; - color: white; -} -.oe_orange .text-muted { - color: #ddd; -} - -.oe_purple { - background-color: #b163a3; - color: white; -} -.oe_purple .text-muted { - color: #ddd; -} - -.oe_red { - background-color: #9C1b31; - color: white; -} -.oe_red .text-muted { - color: #ddd; -} - -.oe_none { - background-color: #FFFFFF; -} - -.oe_yellow { - background-color: #A2A51B; -} - -.oe_green { - background-color: #149F2C; -} - -/* Misc */ -.texttop { - vertical-align: top; -} - -table.well tr th { - text-align: right; - padding-right: 10px; -} -table.well tr td { - padding-right: 5px; -} - -.logo-img { - width: 220px; -} - -.oe_demo { - position: relative; -} -.oe_demo img { - width: 100%; -} -.oe_demo div { - position: absolute; - left: 0; - background-color: rgba(0, 0, 0, 0.4); - opacity: 0.85; - bottom: 0px; - width: 100%; - padding: 7px; - color: white; - font-weight: bold; -} -.oe_demo div a { - color: white; -} - -.oe_template_fallback { - -moz-column-count: 3; - -webkit-column-count: 3; - column-count: 3; -} - -.oe_website_login_container { - width: 400px; - margin: 40px auto; -} - -.oe_website_overflow_ellipsis { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.oe_website_spinner { - width: 121px; -} -.oe_website_spinner input { - text-align: center; - min-width: 50px; -} - -div.carousel .container > .carousel-caption { - position: absolute; - right: 50%; - left: 50%; - bottom: 20px; -} -div.carousel .container > .carousel-caption > div { - position: absolute; - text-align: left; - padding: 20px; - background: rgba(0, 0, 0, 0.4); - bottom: 20px; -} -div.carousel .container > .carousel-image { - top: 5%; - bottom: 5%; - position: absolute; - max-height: 90%; - margin: 0 auto; -} -div.carousel .item.text_image .container > .carousel-caption { - left: 10%; -} -div.carousel .item.text_image .container > .carousel-caption > div { - right: 50%; - margin-right: -20%; - max-width: 550px; -} -div.carousel .item.text_image .container > .carousel-image { - right: 10%; - left: 50%; -} -div.carousel .item.image_text .container > .carousel-caption { - right: 10%; -} -div.carousel .item.image_text .container > .carousel-caption > div { - left: 50%; - margin-left: -20%; - max-width: 550px; -} -div.carousel .item.image_text .container > .carousel-image { - right: 50%; - left: 10%; -} -div.carousel .item.text_only .container > .carousel-caption { - left: 10%; - right: 10%; - top: 10%; - bottom: auto; -} -div.carousel .item.text_only .container > .carousel-caption > div { - text-align: center; - background: transparent; - bottom: auto; - width: 100%; -} -div.carousel .item.text_only .container > .carousel-image { - display: none !important; -} - -/* ---- Menu nav bar ---- {{{ */ -#oe_main_menu_navbar { - position: fixed; - min-height: 34px; - z-index: 1001; - -moz-border-radius: 0px; - -webkit-border-radius: 0px; - border-radius: 0px; - margin-bottom: 0px; -} -#oe_main_menu_navbar li a, #oe_main_menu_navbar li button { - padding: 4px 8px 4px 8px; - margin-top: 2px; - font-size: 13px; -} -#oe_main_menu_navbar .navbar-nav.navbar-right:last-child { - margin-right: 0 !important; -} - -/* ---- footer style ---- {{{ */ -#footer div.row { - word-wrap: break-word; -} -.container nav#oe_main_menu_navbar { - position: inherit; -} - -.oe_search_clear { - position: absolute; - display: none; - cursor: pointer; - z-index: 2; - right: 42px; - color: #939393; - padding: 10px 0; - top: 1px; -} - -.oe_search_box { - padding-right: 23px; -} - -.note-editor button { - height: 30px; -} - -.o_hidden { - display: none !important; -} - -#PlannerDialog { - top: 35px; - -webkit-box-shadow: 0 3px 9px #666666; - box-shadow: 0 3px 9px #666666; -} - -.tour .popover-navigation { - margin-left: 13px; - margin-bottom: 8px; -} diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass deleted file mode 100644 index 8b03d1d86cd..00000000000 --- a/addons/website/static/src/css/website.sass +++ /dev/null @@ -1,656 +0,0 @@ -@charset "utf-8" - -@import "common" - -/* - * THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY - * - * css for editor buttons, openerp widget included in the website and other - * stuff must go to the editor.css - * - */ - -ul - list-style-type: disc -li > ul - list-style-type: circle -li > * > li > ul - list-style-type: square -li > * > li > * > li > ul - list-style-type: disc -li > * > li > * > li > * > li > ul - list-style-type: circle -li > * > li > * > li > * > li > * > li > ul - list-style-type: square -li > * > li > * > li > * > li > * > li > * > li > ul - list-style-type: disc - -ol - list-style-type: decimal -li > ol - list-style-type: lower-alpha -li > * > li > ol - list-style-type: lower-greek -li > * > li > * > li > ol - list-style-type: decimal -li > * > li > * > li > * > li > ol - list-style-type: lower-alpha -li > * > li > * > li > * > li > * > li > ol - list-style-type: lower-greek -li > * > li > * > li > * > li > * > li > * > li > ol - list-style-type: decimal - -li > p - margin: 0 - -font[style*='background'], font[class*='bg-'] - padding: 0 2px - -.o_ul_toggle_self, .o_ul_toggle_next - display: none -.o_ul_folded - .o_close - display: none !important - .o_ul_toggle_self, .o_ul_toggle_next - display: inline-block - line-height: inherit - float: left - position: relative - margin-left: -1em - z-index: 1 - top: -0.15em - left: 0.2em - font-size: 1.4em - text-decoration: none - &:before - content: "\f0da" - &.o_open - left: 0em - &:before - content: "\f0d7" - -/* Extra Styles */ - -h1.text-muted, h2.text-muted, h3.text-muted - margin-top: 10px - -header - a.navbar-brand.logo - padding: 0 15px - a.navbar-brand - img - max-height: 50px - -hr - margin-bottom: 10px - padding-bottom: 10px - -/* ----- Snippets Styles ----- */ - -.para_large - font-size: 120% - -.jumbotron.para_large p - font-size: 150% - -.readable - font-size: 120% - max-width: 700px - margin-left: auto - margin-right: auto - -/* ----- BOOTSTRAP FIX ----- */ - -.container, .readable - .container - padding-left: 0 - padding-right: 0 - width: auto!important - -/* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */ - -.navbar.navbar-static-top - margin-bottom: 0 - ul.nav - > li.divider - margin-top: 15px - padding-top: 20px - border-right: 1px solid grey - -/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */ - -html,body, #wrapwrap - +box-sizing(border-box) - height: 100% - -#wrapwrap - display: table - table-layout: fixed - width: 100% - > * - display: table-row - > main - height: 100% - > footer - height: 100% - background: rgba(200, 200, 200, 0.1) -body > nav.navbar - width: 100% - position: absolute - z-index: 10000 -@media (min-width: 767px) - nav.navbar + #wrapwrap - padding-top: 34px - -/* ----- BOOTSTRAP FIX ----- */ - -@-moz-document url-prefix() - .table .img-responsive - width: 100% - -.navbar .nav > li > p - margin-bottom: 0px - -/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */ - -.nav-hierarchy - padding-left: 16px - -/* -- Hack for removing double scrollbar from mobile preview -- */ -div#mobile-preview.modal - overflow: hidden - -ul.nav-stacked > li > a - padding: 2px 15px - -#customize-menu .dropdown-header - text-transform: uppercase - -/* ---- PUBLISH ---- */ -.css_published - .btn-danger, .css_publish - display: none -.css_unpublished - .btn-success, .css_unpublish - display: none - -[data-publish='off']>*:not(.css_options) - +opacity(0.5) - -/* ---- END of PUBLISH ---- */ - -@include selection - background: rgba(150, 150, 220, 0.3) - -.logo-img - width: 220px - -.o_normalwhitespace - white-space: normal - -.oe_demo - position: relative - img - width: 100% - div - position: absolute - left: 0 - background-color: rgba(0,0,0,0.4) - opacity: 0.85 - bottom: 0px - width: 100% - padding: 7px - color: white - font-weight: bold - a - color: white - - -/* ---- SNIPPETS --- */ - -.oe_img_bg - background-size: cover - -.carousel, .parallax, .blockquote - overflow: hidden - -@media (max-width: 400px) - section, .parallax, .row, .hr, .blockquote - height: auto !important - -.carousel-inner - height: 100% - .item - height: 100% - background-size: cover -.carousel - .carousel-control - cursor: pointer - span - top: 50% - position: absolute - margin-top: -8px - &.left - left: -10px - * - position: absolute - top: 50% - z-index: 5 - right: 50% - &.right - right: -10px - * - position: absolute - top: 50% - z-index: 5 - left: 50% - -.quotecarousel - padding-bottom: 16px - -.hr - padding: 4px 0 - - -.o_image_floating - width: 40% - margin: 4px - div.o_container - position: relative - mark - display: block - position: absolute - bottom: 0 - width: 100% - background-color: rgba(86,61,124,.25) - a - color: white - &.o_hide_link div.o_container mark - display: none - &.o_margin_s - margin-bottom: 4px - &.pull-right - margin-left: 8px - &.pull-left - margin-right: 8px - &.o_margin_m - margin-bottom: 8px - &.pull-right - margin-left: 12px - &.pull-left - margin-right: 12px - &.o_margin_l - margin-bottom: 12px - &.pull-right - margin-left: 16px - &.pull-left - margin-right: 16px - &.o_margin_xl - margin-bottom: 24px - &.pull-right - margin-left: 32px - &.pull-left - margin-right: 32px - - -/* gallery */ - -.o_gallery - &.o_grid, &.o_masonry - .img - width: 100% - &.o_grid - &.o_spc-none - div.row - margin: 0 - > * - padding: 0 - &.o_spc-small - div.row - margin: 5px 0 - > * - padding: 0 5px - &.o_spc-medium - div.row - margin: 10px 0 - > * - padding: 0 10px - &.o_spc-big - div.row - margin: 15px 0 - > * - padding: 0 15px - &.o_masonry - &.o_spc-none - div.col - padding: 0 - > img - margin: 0 !important - &.o_spc-small - div.col - padding: 0 5px - > img - margin: 5px 0 !important - &.o_spc-medium - div.col - padding: 0 10px - > img - margin: 10px 0 !important - &.o_spc-big - div.col - padding: 0 15px - > img - margin: 15px 0 !important - &.o_grid - &.size-auto .row - height: auto - &.size-small .row - height: 100px - &.size-medium .row - height: 250px - &.size-big .row - height: 400px - &.size-small, &.size-medium, &.size-big - .img - height: 100% - &.o_nomode - &.o_spc-none - .img - padding: 0 - &.o_spc-small - .img - padding: 5px - &.o_spc-medium - .img - padding: 10px - &.o_spc-big - .img - padding: 15px - - &.o_slideshow .carousel ul.carousel-indicators li - border: 1px solid #aaa - .carousel-inner .item img - max-width: none - -.o_gallery.o_slideshow > .container - height: 100% - -.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel - height: 100% - .item - padding-bottom: 64px - img - max-height: 100% - max-width: 100% - margin: auto - position: relative - top: 50% - -webkit-transform: translateY(-50%) - -ms-transform: translateY(-50%) - transform: translateY(-50%) - ul.carousel-indicators - display: block - height: auto - padding: 0 - border-width: 0 - position: absolute - bottom: 0 - > * - list-style-image: none - display: inline-block - width: 40px - height: 40px - margin: 0 0px 5px 5px - padding: 0 - border: 1px solid #aaa - text-indent: initial - background-size: cover - background-color: #fff - border-radius: 0 - > *:not(.active) - opacity: 0.8 - -webkit-filter: grayscale(100%) - filter: grayscale(100%) - filter: gray - filter: url("data:image/svg+xml;utf8,#greyscale") - .carousel-control.left, .carousel-control.right - background-image: none - background-color: transparent - -/* Parallax Theme */ - -div.carousel - .carousel-indicators - li - border: 1px solid grey - .active - background-color: grey - span.carousel-img img, div.carousel-content - max-height: 95% - padding: 10px - div.carousel-content - background-color: black - color: white - background: rgba(0, 0, 0, 0.3) - -.parallax - background-size: cover - > div - position: relative - display: table - width: 100% - min-height: 200px - > div - display: table-cell - vertical-align: middle - padding: 32px 0 - -/* Background (kept for 8.0 compatibility) */ - -.oe_dark - background-color: rgba(200, 200, 200, 0.14) - -.oe_black - background-color: rgba(0, 0, 0, 0.9) - color: white - -.oe_green - background-color: #169C78 - color: white - .text-muted - color: #ddd - -.oe_blue_light - background-color: #41b6ab - color: white - .text-muted - color: #ddd - -.oe_blue - background-color: #34495e - color: white - -.oe_orange - background-color: #f05442 - color: white - .text-muted - color: #ddd - -.oe_purple - background-color: #b163a3 - color: white - .text-muted - color: #ddd - -.oe_red - background-color: #9C1b31 - color: white - .text-muted - color: #ddd - -.oe_none - background-color: #FFFFFF - -.oe_yellow - background-color: #A2A51B - -.oe_green - background-color: #149F2C - -/* Misc */ - -.texttop - vertical-align: top - -table.well tr - th - text-align: right - padding-right: 10px - td - padding-right: 5px - -.logo-img - width: 220px - -.oe_demo - position: relative - img - width: 100% - div - position: absolute - left: 0 - background-color: rgba(0,0,0,0.4) - opacity: 0.85 - bottom: 0px - width: 100% - padding: 7px - color: white - font-weight: bold - a - color: white - -.oe_template_fallback - @include column-count(3) - -.oe_website_login_container - width: 400px - margin: 40px auto - -.oe_website_overflow_ellipsis - white-space: nowrap - overflow: hidden - text-overflow: ellipsis - -.oe_website_spinner - width: 121px - input - text-align: center - min-width: 50px - -div.carousel - .container - > .carousel-caption - position: absolute - right: 50% - left: 50% - bottom: 20px - > div - position: absolute - text-align: left - padding: 20px - background: rgba(0, 0, 0, 0.4) - bottom: 20px - > .carousel-image - top: 5% - bottom: 5% - position: absolute - max-height: 90% - margin: 0 auto - .item.text_image - .container - > .carousel-caption - left: 10% - > div - right: 50% - margin-right: -20% - max-width: 550px - > .carousel-image - right: 10% - left: 50% - .item.image_text - .container - > .carousel-caption - right: 10% - > div - left: 50% - margin-left: -20% - max-width: 550px - > .carousel-image - right: 50% - left: 10% - .item.text_only - .container - > .carousel-caption - left: 10% - right: 10% - top: 10% - bottom: auto - > div - text-align: center - background: transparent - bottom: auto - width: 100% - > .carousel-image - display: none !important - -/* ---- Menu nav bar ---- {{{ */ - -#oe_main_menu_navbar - position: fixed - min-height: 34px - z-index: 1001 - +border-radius(0px) - margin-bottom: 0px - li a, li button - padding: 4px 8px 4px 8px - margin-top: 2px - font-size: 13px - .navbar-nav.navbar-right:last-child - margin-right: 0 !important - -/* ---- footer style ---- {{{ */ -#footer div.row - word-wrap: break-word - -.container - nav#oe_main_menu_navbar - position: inherit - -.oe_search_clear - position: absolute - display: none - cursor: pointer - z-index: 2 - right: 42px - color: #939393 - padding: 10px 0 - top: 1px - -.oe_search_box - padding-right: 23px - -.note-editor button - height: 30px - -.o_hidden - display: none !important - -#PlannerDialog - top: 35px - -webkit-box-shadow: 0 3px 9px #666666 - box-shadow: 0 3px 9px #666666 - -.tour - .popover-navigation - margin-left: 13px - margin-bottom: 8px diff --git a/addons/website/static/src/less/import_bootstrap.less b/addons/website/static/src/less/import_bootstrap.less deleted file mode 100644 index cbd46a7afcf..00000000000 --- a/addons/website/static/src/less/import_bootstrap.less +++ /dev/null @@ -1 +0,0 @@ -@import "bootstrap"; diff --git a/addons/website/static/src/less/website.edit_mode.less b/addons/website/static/src/less/website.edit_mode.less index 1835f3ff47b..0f3d2e726c6 100644 --- a/addons/website/static/src/less/website.edit_mode.less +++ b/addons/website/static/src/less/website.edit_mode.less @@ -1,153 +1,148 @@ -.o_editable{ - &:not(:empty),&[data-oe-type]{ - &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover{ - /* to do change into primary color in less */; - -moz-box-shadow: #3071a9 0 0 5px 2px inset; - -webkit-box-shadow: #3071a9 0 0 5px 2px inset; - box-shadow: #3071a9 0 0 5px 2px inset; + +@-webkit-keyframes dragAndDrop { + 0% { + top: -10px; + left: -20px; + .rotate(0); + opacity: 0; + } + 50% { + top: -10px; + left: -20px; + .rotate(0); + opacity: 0; + } + 100% { + top: 30px; + left: 20px; + .rotate(45deg); + opacity: 1; } - } - &:focus,&[data-oe-type]{ - min-height: 0.8em; - min-width: 8px; - } - &.o_is_inline_editable{ - display: inline-block; - } } -.editor_enable [data-oe-readonly]:hover{ - cursor: default; +@keyframes dragAndDrop { + 0% { + top: -10px; + left: -20px; + .rotate(0); + opacity: 0; + } + 50% { + top: -10px; + left: -20px; + .rotate(0); + opacity: 0; + } + 100% { + top: 30px; + left: 20px; + .rotate(45deg); + opacity: 1; + } } -/* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */; -.o_editable[placeholder]:empty:not(:focus):before{ - content: attr(placeholder); - opacity: 0.3; +.o_editable { + &:not(:empty), &[data-oe-type] { + &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { + box-shadow: @odoo-brand-primary 0 0 5px 2px inset; + } + } + &:focus, &[data-oe-type] { + min-height: 0.8em; + min-width: 8px; + } + &.o_is_inline_editable { + display: inline-block; + } + .btn, &.btn { + .user-select(auto); + cursor: text!important; + } + /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */ + &[placeholder]:empty:not(:focus):before { + content: attr(placeholder); + opacity: 0.3; + } + + &.oe_structure.oe_empty, &[data-oe-type=html] { + > p:empty:only-child { + color: #aaa; + } + } + &.oe_structure.oe_empty, &[data-oe-type=html] { + &:empty, + > .oe_drop_zone.oe_insert:only-child, + > p:empty:only-child { + position: relative; + &:before { + display: block; + font-family: FontAwesome; + content: "\f061"; + color: @odoo-brand-primary; + font-size: 30px; + + position: absolute; + z-index: 1031; + .o-animation(dragAndDrop, 1s, linear, 0s, infinite, alternate); + } + &:focus:before { display: none; } + } + } +} +.editor_enable [data-oe-readonly]:hover { + cursor: default; } -/* Prevent the text contents of draggable elements from being selectable. */; -[draggable]{ - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -/* Prevent firefox handler. */; -.o_editable .btn{ - -webkit-user-select: auto; - -moz-user-select: auto; - -ms-user-select: auto; - user-select: auto; +/* Prevent the text contents of draggable elements from being selectable. */ +[draggable] { + .user-select(none); } .oe_editable:focus, .css_editable_hidden, -.editor_enable .css_editable_mode_hidden{ - outline: none !important +.editor_enable .css_editable_mode_hidden { + outline: none!important; } .css_editable_display, .editor_enable .css_non_editable_mode_hidden, -.o_editable .media_iframe_video .css_editable_mode_display{ - display: block !important +.o_editable .media_iframe_video .css_editable_mode_display { + display: block!important; } -.oe_structure.oe_empty:empty, -[data-oe-type=html]:empty, -.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, -[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{ - background-image: url('/website/static/src/img/edit_here.png') !important; - &:before{ - content: 'Press The Top-Left Edit Button' !important +[data-oe-type=html].oe_no_empty:empty { + height: 16px!important; + &:before { + content: ''!important; } } -.o_editable{ - &.oe_structure.oe_empty > p:empty:only-child, &[data-oe-type=html] > p:empty:only-child{ - color: #aaa - } - &.oe_structure.oe_empty:empty, - &[data-oe-type=html]:empty, - &.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, - &[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child, - &.oe_structure.oe_empty > p:empty:only-child, - &[data-oe-type=html] > p:empty:only-child{ - background-image: none !important; - &:before { content: 'Write your text here' !important} - &:focus:before { display: none} - } +// EDITOR BAR +table.editorbar-panel { + cursor: pointer; + width: 100%; + td { border: 1px solid #aaa} + td.selected { background-color: #b1c9d9} } -#oe_snippets ~ #wrapwrap{ - .oe_structure.oe_empty:empty, - [data-oe-type=html]:empty, - .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, - [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{ - background-image: url('/website/static/src/img/drag_here.png') !important; - &:before{ - content: 'Drag Building Blocks Here' !important +.link-style { + .dropdown > .btn { + min-width: 160px; } - } -} - -.oe_structure.oe_empty:empty, -[data-oe-type=html]:empty, -.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, -[data-oe-type=html] > .oe_drop_zone.oe_insert:only-child{ - background-image: none; - background-repeat: no-repeat; - background-position: center; - height: 220px !important; -} - -[data-oe-type=html].oe_no_empty:empty{ - background-image: none !important; - height: 16px !important; - &:before{ - content: '' !important - } -} - - - -/* ---- EDITOR BAR ---- {{{ */ - -table.editorbar-panel{ - cursor: pointer; - width: 100%; - td{ border: 1px solid #aaa} - td.selected{ background-color: #b1c9d9} -} -.link-style{ - .dropdown > .btn{ - min-width: 160px; - } - .link-style{ - display: none; - } - li{ - text-align: center; - label{ - width: 100px; - margin: 0 5px; + .link-style { + display: none; + } + li { + text-align: center; + label { + width: 100px; + margin: 0 5px; + } + } + .col-sm-2 > * { + line-height: 2em; } - } - .col-sm-2 > *{ - line-height: 2em; - } -} - -/* ---- RTE ---- {{{ */ - -// bootstrap makes .btn elements unselectable -> RTE double-click can't know -// about them either -.oe_editable .btn, -.btn.oe_editable{ - .user-select(auto); - cursor: text !important; } // fontawesome -.note-editable .fa{ - cursor: pointer; +.note-editable .fa { + cursor: pointer; } diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less index e67201d8bf7..fcca905eeca 100644 --- a/addons/website/static/src/less/website.ui.components.less +++ b/addons/website/static/src/less/website.ui.components.less @@ -1,855 +1,353 @@ - -// COMPONENTS USED BY THE WEBSITE BUILDER USER INTERFACE (menu and modals) - - - -#website_editor_container, body .modal { - a { - .transition(all 0.3s); - color: darken(@wb_color-primary, 10%); - &:hover, &:active { - text-decoration: none; - color: darken(@wb_color-primary, 20%); - } - } - // BUTTONS - // ==================== - .btn { - font-size: 12px; - color: #999999; - font-weight: 800; - text-decoration: none; - .transition(all 0.3s); - &:hover, &:focus { - color: white; - text-decoration: none; - } - &.accent { - .button-variant(white, @wb_color-accent, @wb_color-accent) - } - &.primary { - .button-variant(white, @wb_color-primary, @wb_color-primary) - } - &.full { - margin-top: 0; - margin-bottom: 0; - border-radius: 0; - } - &.btn-primary { - .button-variant(white, @wb_color-accent, @wb_color-accent); - text-transform: uppercase; - box-shadow: @wb_box-shadow; - } - &.btn-danger { - .button-variant(white, @wb_color-danger, @wb_color-danger); - text-transform: uppercase; - box-shadow: @wb_box-shadow; - } - &.btn-success { - .button-variant(white, @wb_color-success, @wb_color-success); - text-transform: uppercase; - box-shadow: @wb_box-shadow; - } - } - - - // ICONS - // ====================== - .material-icons { - font-size: 1em; - .translateY(2px); - margin-right: 5px; - } - - // POPOVERS - // ====================== - .popover { - border-radius: 3px; - .popover-title{ - color: @wb_color-text-dark - } - } - - // INPUTS - // ====================== - .form-control { - font-weight: bold; - color: @wb_color-text-dark; - } - .input-group-addon{ - color: @wb_color-text-dark; - font-weight: bold; - } - -} - -// MODALS, main style -// ================================= -body .modal-backdrop.in { - opacity: 0.6; -} - -body .modal-backdrop.in { - opacity: 0.6; -} - -body .modal.website_modal { - font-family: @wb_font-default; - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - margin: 0 auto ; - .modal-dialog { - margin-top: @wb_modal-margin-top; - border: none; - .box-shadow(none); - .modal-content { - border: none; - background-color: @wb_color-paper; - .box-shadow(none); - - .modal-header { - .border-radius(2px 2px 0 0); - padding: @wb_modal-header-padding; - background: @wb_modal-header-bg; - h1, h2, .h1, .h2, .modal-title { - text-align: center; - margin-top: 0; - font-weight: 600; - color: @wb_modal-header-color; - line-height: @wb_modal-title-line-height; +// MODALS +body .modal { + a { + &:focus, &:active, &:focus:active { + outline: none!important; } - .close { - font-size: 1.2em; - top: 6px; - position: absolute; - right: 8px; - color: @wb_modal-header-color; - font-family: sans-serif; - font-weight: 600; - text-shadow: none; - opacity: 1; + } + + &.o_website_modal { + font-family: "Roboto", Roboto, sans-serif; + + .modal-content { + border-radius: 0; + background-color: @o-we-color-paper; + .modal-header .o_subtitle { + margin-left: 10px; + } + .modal-body { + .o_modal_header { + .o-webclient-padding(@top: 10px, @bottom: 10px); + .clearfix(); + } + } + .modal-footer { + text-align: left; + + .btn { + border-radius: 0; + + &.btn-primary { + .button-variant(white, @odoo-brand-optional, @odoo-brand-optional); + text-transform: uppercase; + } + &.btn-default { + .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + text-transform: uppercase; + } + &.btn-link { + .button-variant(@odoo-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + } + } + } } - } + + @media (min-width: @screen-sm-min) { + .modal-dialog { + height: 100%; + padding: 30px 0; + margin: 0 auto; - .modal-body { - padding: @wb_modal-body-padding; - } + .modal-content { + max-height: 100%; + .o-flex-display(); + .o-flex-flow(column, nowrap); - .modal-footer { - .border-radius(0 0 2px 2px); - padding: @wb_modal-footer-padding; - background: @wb_modal-footer-bg; - } + .modal-header, .modal-footer { + .o-flex(0, 0, auto); + } - } - } -} - -@media (min-width: @wb_screen_sm) { - // Automatically set modal's width for larger viewports - .website_modal { - .modal-dialog { - width: @wb_modal-md; - margin: 30px auto; - } - } - // Modal sizes - .website_modal.modal-sm { - width: @wb_modal-sm; - } - -} - -@media (min-width: @wb_screen_md) { - .website_modal.modal-lg { - width: @wb_modal-lg; - } -} - -// INPUTS -// ================== - -.switch { - position: relative; - display: inline-block; - box-sizing: border-box; - margin: 0 0.5em; - padding: 0; - height: 1.5em; - cursor: pointer; - .translateY(0.2em); - .switch_track { - background: #bababa; - border-radius: 0.4em; - height: 1em; - width: 2.5em; - display: inline-block; - .transition(all 0.3s @wb_md-ease); - &:after { - content: ""; - background: #fafafa; - display: block; - width: 1.5em; - height: 1.5em; - border-radius: 100em; - margin-top: -0.3em; - margin-left: -0.1em; - .transition(all 0.3s @wb_md-ease); - .box-shadow(@wb_box-shadow); - } - } - .switch_input { - position: absolute; - width: 0; - height: 0; - margin: 0; - padding: 0; - opacity: 0; - -ms-appearance: none; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - border: none; - } - &.checked { - .switch_track { - background-color: rgb(142, 224, 212); - background-color: transparentize(@wb_color-accent, 0.5); - &:after { - background-color: @wb_color-accent; - margin-left: 1.1em; - } - } - } - &:hover { - .switch_track { - &:after { - background-color: mix(@wb_color-accent, #fafafa); - } - } - } -} - - - -// TEXT INPUT -// ========================== - -//
-// -// -// -// -//
- -.text-input-group { - position:relative; - margin-bottom:45px; - - input{ - font-size:18px; - padding:10px 10px 10px 5px; - display:block; - width:300px; - border:none; - border-bottom:1px solid #757575; - } - input:focus{ outline:none; } - - /* LABEL ======================================= */ - label{ - color:#999; - font-size:18px; - font-weight:normal; - position:absolute; - pointer-events:none; - left:5px; - top:10px; - .transition(0.2s ease all) - } - - /* active state */ - input:focus ~ label, input:valid ~ label{ - top:-20px; - font-size:14px; - color:#5264AE; - } - - /* BOTTOM BARS ================================= */ - .bar { position:relative; display:block; width:300px; } - .bar:before, .bar:after{ - content:''; - height:2px; - width:0; - bottom:1px; - position:absolute; - background:#5264AE; - .transition(0.2s ease all); - } - .bar:before { - left:50%; - } - .bar:after { - right:50%; - } - - /* active state */ - input:focus ~ .bar:before, input:focus ~ .bar:after { - width:50%; - } - - /* HIGHLIGHTER ================================== */ - .highlight { - position:absolute; - height:60%; - width:100px; - top:25%; - left:0; - pointer-events:none; - opacity:0.5; - } - - /* active state */ - input:focus ~ .highlight { - .animation(inputHighlighter 0.3s ease); - } - -} - - -// DRAG&DROP ANIMATIONS -// ========================== - -// .oe_snippet_body { -// .opacity(0); -// .animation(fadeInDownSmall 1s forwards); -// } - - -// Login form -// ================================= - -.oe_login_form{ - max-width: 300px; - position: relative; - margin: 50px auto; -} - - -// Add new page modal -// ================================= - -#website_addPage_modal { - text-align: center; - - li { - opacity: 0; - list-style: none; - display: inline-block; - margin: 3em; - text-align: center; - .animation(fadeInDownSmall 1s forwards); - &:hover { - cursor: pointer; - i { - border: 3px solid #1cc1a9; - box-shadow: 0 0 10px rgba(28, 193, 169, 0.46); - } - } - p { - color: white; - margin-top: 0.7em; - } - i { - border: 3px solid #2c2c36; - width: 80px; - height: 80px; - font-size: 34px; - color: white; - display: table-cell; - vertical-align: middle; - padding: 20px; - background-color: #2c2c36; - border-radius: 100em; - transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1); - } - } -} - -// Select media -// ========================= - -.select-media { - .modal-body { - li.search { - ul.pager { - margin: 0; - li.previous a, li.next a { - border-radius: 3px; - margin-left: 2px; - padding: 6px 14px; + .modal-body { + overflow: auto; + } + } + } } - } } - .form-group { - margin: 0 10px 0 0; - input { - border-radius: 3px; - box-shadow: none; - } - &:before { - font-size: 1.3em; - top: 8px; - left: 10px; - } - } - .dropdown-toggle { - line-height: 0; - height: 34px; - } - .panel { - // TODO: element to add in xml - padding: 20px; - border: 1px solid #dddddd; - border-top: none; - border-radius: 0; - } - } -} + // MOBILE PREVIEW + &.oe_mobile_preview { + text-align: center; -// oe_mobile_preview -// ========================= + .modal-dialog { + display: inline-block; + width: auto; -body .modal.website_modal.oe_mobile_preview .modal-dialog .modal-content { - .modal-body{ - padding: 0; - } -} + .close { + color: lightgray; + } -// SEO CONFIGURATION -// TODO: adapt to new style -// ================================== + .modal-content { + background-color: black; + color: lightgray; + border: 3px outset gray; + border-radius: 20px; + box-shadow: 0 0 100em 0 white; -.oe_seo_configuration { - .oe_remove { color: #E00101;} - .oe_seo_suggestion { cursor: pointer; } - .oe_seo_keyword { - padding: 0.2em 0.4em 0.2em 0.5em; - .border-radius(0.4em); - } - li.oe_seo_preview_g { - line-height: 1.2; - font-size: small; - font-family: arial, sans-serif; - h3 { font-size: medium} - .r{ - margin: 0; - font-size: 16px; - font-style: normal; - font-weight: normal; - overflow: hidden; - text-overflow: ellipsis; - -webkit-text-overflow: ellipsis; - white-space: nowrap; - a{ - color: #1e0fbe; - text-decoration: underline; - text-transform: none; - em { - font-style: normal !important; + .modal-header { + border: none; + cursor: pointer; + } + + .modal-body { + padding: 15px; + + @mobile-preview-width: 320px; + @mobile-preview-height: 530px; + + > iframe { + display: block; + width: @mobile-preview-width + 15; + height: @mobile-preview-height; + max-height: 100%; + border: none; + + .o-transition(all, 400ms); + } + + &.o_invert_orientation > iframe { + width: @mobile-preview-height + 15; + height: @mobile-preview-width; + } + } + + .modal-footer { + display: none; + } + } } - } } - .s{ - color: #444; - max-width: 42em; + + // ADD NEW PAGE MODAL + &#o_website_add_page_modal { + text-align: center; + line-height: 100%; + + .modal-dialog { + line-height: 100vh; + margin: 0 auto; + ul { + display: inline-block; + width: 100%; + margin: 0; + padding: 0; + vertical-align: middle; + line-height: 1; + list-style: none; + text-align: center; + + li { + opacity: 0; + .animation(fadeInDownSmall 1s forwards); + display: inline-block; + width: 33%; + margin: 2em 0; + padding: 0 15px; + + a { + display: block; + font-size: 34px; + margin: auto; + + i { + width: 110px; + height: 110px; + border: 3px solid lighten(#2C2C36, 10%); + border-radius: 100%; + line-height: 104px; + background-color: #2C2C36; + color: white; + + .o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1)); + } + p { + color: white; + margin-top: 0.7em; + font-size: 0.5em; + } + + &:hover, &:focus { + text-decoration: none; + i { + border-color: #1cc1a9; + box-shadow: 0 0 10px rgba(28, 193, 169, 0.46); + } + } + } + } + } + } + + ~ .modal-backdrop { + opacity: 0.8; + } } - li.oe_seo_preview_g .kv, li.oe_seo_preview_g .slp { - display: block; - margin-bottom: 1px; + + // SEO CONFIGURATION + &.oe_seo_configuration { + li.oe_seo_preview_g { + line-height: 1.2; + font-size: small; + font-family: arial, sans-serif; + h3 { + font-size: medium; + } + .r { + margin: 0; + font-size: 16px; + font-style: normal; + font-weight: normal; + overflow: hidden; + text-overflow: ellipsis; + -webkit-text-overflow: ellipsis; + white-space: nowrap; + a { + color: #1e0fbe; + text-decoration: underline; + text-transform: none; + em { + font-style: normal !important; + } + } + } + .s { + color: #444; + max-width: 42em; + } + li.oe_seo_preview_g { + &, .st { + line-height: 1.24; + } + .kv, .slp { + display: block; + margin-bottom: 1px; + } + .f { + color: #666; + margin-bottom: 1px; + cite { + color: #006621; + font-style: normal; + font-size: 14px; + } + } + } + } } - li.oe_seo_preview_g .f { - color: #666; - margin-bottom: 1px; - cite { - color: #006621; - font-style: normal; - font-size: 14px; - } - } - li.oe_seo_preview_g .st { - line-height: 1.24; - } - } } - -// Background position -// =================================== - -.web_editor-background_position{ - .modal-body { - padding: 0!important; - } - .panel-group { - margin-bottom: -1px; - } - .panel-group .panel{ - border-radius: 0; - margin: 0; - overflow: hidden; - &:first-child{ - border-radius: 2px 2px 0 0; - } - &:last-child{ - border-radius: 0 0 2px 2px; - } - .panel-heading{ - padding: 5px 0 5px 30px; - cursor: pointer; - label.radio { - margin: 0; - } - } - .panel-body{ - position: relative; - } - } - - .help-controll{ - position: absolute; - top: 5px; - right: 2px; - } - - .help.collapse, .help.collapsing{ - width: 100%; - .simulator, .help-text{ - display: inline-block; - width: 30%; - position: relative; - overflow: hidden; - height: 120px; - } - .help-text{ - width: 60%; - height: 100px; - } - } - .simulator{ - .bg{ - position: relative; - height: 100px; - background-color: #A3F1DA; - background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABIAAAAAQAAAEgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAGSgAwAEAAAAAQAAAEIAAAAA/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iDFhJQ0NfUFJPRklMRQABAQAADEhMaW5vAhAAAG1udHJSR0IgWFlaIAfOAAIACQAGADEAAGFjc3BNU0ZUAAAAAElFQyBzUkdCAAAAAAAAAAAAAAAAAAD21gABAAAAANMtSFAgIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEWNwcnQAAAFQAAAAM2Rlc2MAAAGEAAAAbHd0cHQAAAHwAAAAFGJrcHQAAAIEAAAAFHJYWVoAAAIYAAAAFGdYWVoAAAIsAAAAFGJYWVoAAAJAAAAAFGRtbmQAAAJUAAAAcGRtZGQAAALEAAAAiHZ1ZWQAAANMAAAAhnZpZXcAAAPUAAAAJGx1bWkAAAP4AAAAFG1lYXMAAAQMAAAAJHRlY2gAAAQwAAAADHJUUkMAAAQ8AAAIDGdUUkMAAAQ8AAAIDGJUUkMAAAQ8AAAIDHRleHQAAAAAQ29weXJpZ2h0IChjKSAxOTk4IEhld2xldHQtUGFja2FyZCBDb21wYW55AABkZXNjAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAEnNSR0IgSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABYWVogAAAAAAAA81EAAQAAAAEWzFhZWiAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPZGVzYwAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAWSUVDIGh0dHA6Ly93d3cuaWVjLmNoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGRlc2MAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAALklFQyA2MTk2Ni0yLjEgRGVmYXVsdCBSR0IgY29sb3VyIHNwYWNlIC0gc1JHQgAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAACxSZWZlcmVuY2UgVmlld2luZyBDb25kaXRpb24gaW4gSUVDNjE5NjYtMi4xAAAAAAAAAAAAAAAsUmVmZXJlbmNlIFZpZXdpbmcgQ29uZGl0aW9uIGluIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdmlldwAAAAAAE6T+ABRfLgAQzxQAA+3MAAQTCwADXJ4AAAABWFlaIAAAAAAATAlWAFAAAABXH+dtZWFzAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAACjwAAAAJzaWcgAAAAAENSVCBjdXJ2AAAAAAAABAAAAAAFAAoADwAUABkAHgAjACgALQAyADcAOwBAAEUASgBPAFQAWQBeAGMAaABtAHIAdwB8AIEAhgCLAJAAlQCaAJ8ApACpAK4AsgC3ALwAwQDGAMsA0ADVANsA4ADlAOsA8AD2APsBAQEHAQ0BEwEZAR8BJQErATIBOAE+AUUBTAFSAVkBYAFnAW4BdQF8AYMBiwGSAZoBoQGpAbEBuQHBAckB0QHZAeEB6QHyAfoCAwIMAhQCHQImAi8COAJBAksCVAJdAmcCcQJ6AoQCjgKYAqICrAK2AsECywLVAuAC6wL1AwADCwMWAyEDLQM4A0MDTwNaA2YDcgN+A4oDlgOiA64DugPHA9MD4APsA/kEBgQTBCAELQQ7BEgEVQRjBHEEfgSMBJoEqAS2BMQE0wThBPAE/gUNBRwFKwU6BUkFWAVnBXcFhgWWBaYFtQXFBdUF5QX2BgYGFgYnBjcGSAZZBmoGewaMBp0GrwbABtEG4wb1BwcHGQcrBz0HTwdhB3QHhgeZB6wHvwfSB+UH+AgLCB8IMghGCFoIbgiCCJYIqgi+CNII5wj7CRAJJQk6CU8JZAl5CY8JpAm6Cc8J5Qn7ChEKJwo9ClQKagqBCpgKrgrFCtwK8wsLCyILOQtRC2kLgAuYC7ALyAvhC/kMEgwqDEMMXAx1DI4MpwzADNkM8w0NDSYNQA1aDXQNjg2pDcMN3g34DhMOLg5JDmQOfw6bDrYO0g7uDwkPJQ9BD14Peg+WD7MPzw/sEAkQJhBDEGEQfhCbELkQ1xD1ERMRMRFPEW0RjBGqEckR6BIHEiYSRRJkEoQSoxLDEuMTAxMjE0MTYxODE6QTxRPlFAYUJxRJFGoUixStFM4U8BUSFTQVVhV4FZsVvRXgFgMWJhZJFmwWjxayFtYW+hcdF0EXZReJF64X0hf3GBsYQBhlGIoYrxjVGPoZIBlFGWsZkRm3Gd0aBBoqGlEadxqeGsUa7BsUGzsbYxuKG7Ib2hwCHCocUhx7HKMczBz1HR4dRx1wHZkdwx3sHhYeQB5qHpQevh7pHxMfPh9pH5Qfvx/qIBUgQSBsIJggxCDwIRwhSCF1IaEhziH7IiciVSKCIq8i3SMKIzgjZiOUI8Ij8CQfJE0kfCSrJNolCSU4JWgllyXHJfcmJyZXJocmtyboJxgnSSd6J6sn3CgNKD8ocSiiKNQpBik4KWspnSnQKgIqNSpoKpsqzysCKzYraSudK9EsBSw5LG4soizXLQwtQS12Last4S4WLkwugi63Lu4vJC9aL5Evxy/+MDUwbDCkMNsxEjFKMYIxujHyMioyYzKbMtQzDTNGM38zuDPxNCs0ZTSeNNg1EzVNNYc1wjX9Njc2cjauNuk3JDdgN5w31zgUOFA4jDjIOQU5Qjl/Obw5+To2OnQ6sjrvOy07azuqO+g8JzxlPKQ84z0iPWE9oT3gPiA+YD6gPuA/IT9hP6I/4kAjQGRApkDnQSlBakGsQe5CMEJyQrVC90M6Q31DwEQDREdEikTORRJFVUWaRd5GIkZnRqtG8Ec1R3tHwEgFSEtIkUjXSR1JY0mpSfBKN0p9SsRLDEtTS5pL4kwqTHJMuk0CTUpNk03cTiVObk63TwBPSU+TT91QJ1BxULtRBlFQUZtR5lIxUnxSx1MTU19TqlP2VEJUj1TbVShVdVXCVg9WXFapVvdXRFeSV+BYL1h9WMtZGllpWbhaB1pWWqZa9VtFW5Vb5Vw1XIZc1l0nXXhdyV4aXmxevV8PX2Ffs2AFYFdgqmD8YU9homH1YklinGLwY0Njl2PrZEBklGTpZT1lkmXnZj1mkmboZz1nk2fpaD9olmjsaUNpmmnxakhqn2r3a09rp2v/bFdsr20IbWBtuW4SbmtuxG8eb3hv0XArcIZw4HE6cZVx8HJLcqZzAXNdc7h0FHRwdMx1KHWFdeF2Pnabdvh3VnezeBF4bnjMeSp5iXnnekZ6pXsEe2N7wnwhfIF84X1BfaF+AX5ifsJ/I3+Ef+WAR4CogQqBa4HNgjCCkoL0g1eDuoQdhICE44VHhauGDoZyhteHO4efiASIaYjOiTOJmYn+imSKyoswi5aL/IxjjMqNMY2Yjf+OZo7OjzaPnpAGkG6Q1pE/kaiSEZJ6kuOTTZO2lCCUipT0lV+VyZY0lp+XCpd1l+CYTJi4mSSZkJn8mmia1ZtCm6+cHJyJnPedZJ3SnkCerp8dn4uf+qBpoNihR6G2oiailqMGo3aj5qRWpMelOKWpphqmi6b9p26n4KhSqMSpN6mpqhyqj6sCq3Wr6axcrNCtRK24ri2uoa8Wr4uwALB1sOqxYLHWskuywrM4s660JbSctRO1irYBtnm28Ldot+C4WbjRuUq5wro7urW7LrunvCG8m70VvY++Cr6Evv+/er/1wHDA7MFnwePCX8Lbw1jD1MRRxM7FS8XIxkbGw8dBx7/IPci8yTrJuco4yrfLNsu2zDXMtc01zbXONs62zzfPuNA50LrRPNG+0j/SwdNE08bUSdTL1U7V0dZV1tjXXNfg2GTY6Nls2fHadtr724DcBdyK3RDdlt4c3qLfKd+v4DbgveFE4cziU+Lb42Pj6+Rz5PzlhOYN5pbnH+ep6DLovOlG6dDqW+rl63Dr++yG7RHtnO4o7rTvQO/M8Fjw5fFy8f/yjPMZ86f0NPTC9VD13vZt9vv3ivgZ+Kj5OPnH+lf65/t3/Af8mP0p/br+S/7c/23////CABEIAEIAZAMBEgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAADAgQBBQAGBwgJCgv/xADDEAABAwMCBAMEBgQHBgQIBnMBAgADEQQSIQUxEyIQBkFRMhRhcSMHgSCRQhWhUjOxJGIwFsFy0UOSNIII4VNAJWMXNfCTc6JQRLKD8SZUNmSUdMJg0oSjGHDiJ0U3ZbNVdaSVw4Xy00Z2gONHVma0CQoZGigpKjg5OkhJSldYWVpnaGlqd3h5eoaHiImKkJaXmJmaoKWmp6ipqrC1tre4ubrAxMXGx8jJytDU1dbX2Nna4OTl5ufo6erz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAECAAMEBQYHCAkKC//EAMMRAAICAQMDAwIDBQIFAgQEhwEAAhEDEBIhBCAxQRMFMCIyURRABjMjYUIVcVI0gVAkkaFDsRYHYjVT8NElYMFE4XLxF4JjNnAmRVSSJ6LSCAkKGBkaKCkqNzg5OkZHSElKVVZXWFlaZGVmZ2hpanN0dXZ3eHl6gIOEhYaHiImKkJOUlZaXmJmaoKOkpaanqKmqsLKztLW2t7i5usDCw8TFxsfIycrQ09TV1tfY2drg4uPk5ebn6Onq8vP09fb3+Pn6/9sAQwACAQECAQECAgECAgICAgMFAwMDAwMGBAQDBQcGBwcHBgYGBwgLCQcICggGBgkNCQoLCwwMDAcJDQ4NDA4LDAwL/9sAQwECAgIDAgMFAwMFCwgGCAsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsLCwsL/9oADAMBAAIRAxEAAAE1Hwe70/Zex4jj2s4+Kehqfjn3vm6vlj7LF8Q/Rgbw76T0w+OPszox+IfrxG+SfYnVVOund/OPPr9g+rp6byz38fomBRiE0L4O/mea4PRr67h7O982fP6UrvpvmeeIblrt1+dvdnHwL9t8+vdFE7Q6v21SIGbXh7fH7nl7/GOoTqpL3yOr19p9P8zZtOjnWJS3cR817dNLtW2CsYojShSxIm/ifqqv4L7UG8+9E5emwd9nnIcwGakmqHQk7fOYhOrYM2yO3mLbUuRO5Kg0VYA2M7y3/9oACAEBAAEFApZM9m8O+Gk3Isfq5RbXPinwfbpi8TeGk3s58Gpxu702scX1j7za2FjfC3lvpRdS7YeVLsfij9Gx/wBP3u6ptmV9WW5x7m12yZBve3iWO58DC/TZeGbJGzX/ANSO1lPhv6sbSysdw+q+wuHL9UlgB4g+rT3G73faRtW3K3JeVht6PFd54W2eHYbbmabgvJw238VmT176oBPgfdtJ8Si9TRe4WAu0eOPCs67aTw7dIXYWMO2W9sp8zSc5q3KYWkF971cb94osebb7Le+63vvPOguBkVR1E6UrcmywLWkVMWjz0BrN4lg58cG4CG93XxXzleGESqOxz8zapNXR3dvzU3O/G2maS8nlRd2v3i1mmFnPaJh93ilTGvaFcjbVTVfMq8ncbTb3sh0aS6sqe57nLZ2G+7jvt3Hss+42rsCffUTEoQslpDDSk0pqnXt5yJyc1uFLVtaQqGwTDImPFhLAoQAwGWn95+dXCQ/SEM8T+/UKGMuPWRo4f//aAAgBAxEBPwH+ZCN7OHqCZS5eUWCxkD5ZwPpFhil+TkGw8xZbZeUSiE5QGPUW+7J6j5Q/w+nsQ9LZyMzZ0D02IyPDLJKFccOPPXEeXruijmjvj5SK4LScbGG3spAelz+yXPkEwKDvjDiITMSj4eso5jTTTSNvr2wIjyRb7n5Mcpj6s+ruNB47L+t//9oACAECEQE/AZQjI+XDMQhUU5rbBHLLjwwyQ9ZOTqYngFxneOJOOU8fhkJT5LHDfkM+li+1BjiHmXlAA8a9TlERywxxyAkHlzdPfMuHoetlilsn4Qb5dxRlTk3CmkakvU4fdD00PbJ3Fy1lj5dhjK7ejsYRuSW3cmUuwpt2j1ZQjL0f0kd25pppp2/W/9oACAEBAAY/AglWqlAeT5aE1Uf5LCroRkf2WJIUpqn4OumjqkjR8mE8PNmG0nGJFK8vVqVf5FSjUn1ZMYoxQ0dOPbkSErwYEGqkpov4F9TpUsqRJQ1fuwEQqKKVxNfVnHc7gLJ9El4gc+mmRTxf0luB9jOEYdYK4PIallqu4BVMooSxFZpA/r7+mtWvH1YVFUKBYgWrIrL1D6XRXFn3QE/BkGJX4NMNkkIQgUA+4B9jtVWF0I4Iir3iLGvN001cS5ZVRCKXmmn5h6H4OJVuagmoLSpP5hXvSQOuCfuJ+b6R8WpE6FpUUdKqaF8z6WTGsdBH0k/NpVcf8M0V7ko9plEgoQ9PuHHzalSI6mpE6ax5kj8WORoPRxp+37mcyAVfdV7kgySHy9GQn3aL7CWtO5pQrLgUaNAkTU19Xr931evfV8KvQDV6AVPfqHbSn3D2LS099e//xAAzEAEAAwACAgICAgMBAQAAAgsBEQAhMUFRYXGBkaGxwfDREOHxIDBAUGBwgJCgsMDQ4P/aAAgBAQABPyF8WhWoK+cPD3Wyvo1fhauQfV47cax/AbntOIckXmSQyJ8z/VmG9Flb5qBgt5ArCj730P3czWcWGqQib77/AEnV6i+a8KcB1xepFRL2T5ru6lf1CKsJPKA+1XZqo4jRGN6dUEhBzWfJYYcpMzxRovKhy/5wYrk1z99jR8yajUoU8U9VDK8PihUTReMVMBUNz352fFKic0FirWIDtrvYyiqP3kLGPSGGsIyHrSfMn9U1GCzQOpArkf8AkGJmvlp6vOZX9P8AhsfCrHwGvFyWmG/j4p8B24T74mc0Q4now9KktMKfu6f8PwkZ7rGHwjTjgWPObouROTbAeYqClzHjxz8BQzMG5iZR9N9UE8rhkMS+/wDjnGaxsx4ImKxfyVB0ujOqh1F6nclHy2jnMTkWP4qYaoBAXyNmXXZqCnAZFUlsnA0qw7RaswwQvLqrDsPc1d8J6vG/C9+FjbAuuYNvNFSME3IOvMWZkBCvwEcXtWU3C8CuijCHNQUNJZBX9jRMnuhiG1IdeCuTlXqnXzf/2gAMAwEAAhEDEQAAEHQAHieAHJ0h2gsI7APNbifmvugT9LhuU5lJNdWQCBisb//EADMRAQEBAAMAAQIFBQEBAAEBCQEAESExEEFRYSBx8JGBobHRweHxMEBQYHCAkKCwwNDg/9oACAEDEQE/EPmz9WcXBkA6Z8Ji8GzeF/aEKr9n/FxFLqMfgXQOSrM22+CLqB6LX/EsXW2Gtsv5zRV90SOA4PM24Cfokb2QXsg+IFtpMnob825Uuf4/X6+8sNB3wH64sUY/PuKvWHbj64Z4W2j4T2H82/6SRvDPynB1a5J/P/JfotLbYjfW+Y7jr8L3+D//2gAIAQIRAT8Qz7z/ADhWF8icoRVsFyH73An9y5TbLsJ/M9oTDgYAvUDxrM4z8kbg4sJcLFfwhk/Z8ya62px8x7sv6YgB4kumc7n5EwB3DbcGX5+S8I/vfcH339c3Og/l1P5F/r4hkxi0cMEecC0MHI+5/OGxNgQWz5t/X8WZ8PHr178b/9oACAEBAAE/ECv7wCc5+7NjLCh5S8UMCGaDPalk8YhfNARQ4Bw52sYKFJKH9WfkGMfSerwtciOjCCfaqOj0E6VV5VsvvwJDWVoaTDXVsNk7YvB92JhMRw8Tx6qmFg6Mou569U1CEO0RVFYRDwrHcmNJLnp2rWiikZCRLLfXFV54WmOJne2awNhPlnEu+ayNO8xUSBMVQ+WvJUh2u9T27qqOc8iFlQs9dwjKr233dVk0z4spTh7piE+aDkOP0VFu2OeEP82cHU13Q9QUUkC4aJ6paSMzmxuwYOPhR6E2VlM0YGMCKSG9N6qatgpopiXGxXOyCbwkDx1mHiat2o9kHk6HkNzKDREO/wCqBEUfksy0CQb1VXhmlZKfRRF07ssxKW9rgkjMfd3tm+B3XeQYzCCYS2Mk0FqhRozJjCP3DDcrqWhCh8gP7q5ktHgFlgp5qB0pBhOHVQDZFo0wMhyvmlFe3u75gg+6diYfdFZHfPyVwmx8QQAdEAWJTDnORfI/Fh9I4I9IOrNQdE+UrW0jM+OKsg4OeLjyQ77qAYEoKE/7oJlQeGZymhhPxXBOcbk3Q7PweaagCxAwySDXLzA8ooTIiCoiHdVBKefI1TgQRBOYe/5raDgg4PTWUuECx+aryHcuURqXH1cCLIIgh8pSQpJicE+rDksJBZn4rkYrvp6fPdwgcQhmLLlqdAZ8QhYGOcRWThwgXXPdipVZAlDyFNUhiHHz+bgARAdlks4B16XxYH7it+If6qJFURK3M4Ln20zoCEQ02kKBBk0QQRMJ3LWnlkF96UhASXHUgQ15ExMETUCwSc15lgd75q/Ip8Ji/q//2Q=='); - background-size: cover; - margin: 10px auto 10px 0; - width: 120px; - border: 1px dotted #888787; - } - .el{ - position: absolute; - height: 77px; - background-color: rgba(255, 255, 255, 0); - top: 20px; - left: 10px; - width: 100px; - border: 1px solid #222; - box-shadow: 0 0 0 100em rgba(255, 255, 255, 0.66); - } - &.contain_bg{ - .bg{ - height: 77px; - margin: 10px auto 10px 10px; - width: 80px; - } - .el { - top: 10px; - left: 0px; - } - } - } - - .cover_editing_container { - border-top: 1px solid black; - border-bottom: 1px solid white; - padding: 0px 25px 25px 25px; - .linear-gradient(lighten(@wb_color-dark,5%), darken(@wb_color-dark, 10%), -150deg); - h6 { - color: white; - font-weight: bold; - } - .object{ - width: 100%; - background: white; - min-height: 10px; - position:relative; - overflow: hidden; - .box-shadow(0 0 10px #000); - > img{ - cursor: crosshair; - border-top: 1px solid #5A5A5A; - border-bottom: 1px solid #111; - .o_noSelect(); - } - &:hover .focus_point:before{ - opacity: 0.5 - } - } - .ui_info { - .animation(fadeInOut 2s ease forwards); - display: block; - position: absolute; - bottom: 1px; - color: #333; - background-color: rgba(255, 255, 255, 0.8); - right: 0; - padding: 3px 13px; - text-align: center; - font-weight: bold; - pointer-events: none; - span { - font-weight: normal; - } - .x { - margin-right: 10px - } - } - .grid{ - position: absolute; - width: 100%; - height: 1px; - background: fadeOut(lighten(@wb_color-accent, 30%), 50%); - display: block; - top: 33.33%; - left: 0; - .o_noSelect(); - pointer-events: none; - &.grid-2{ - top: 66.66% - } - &.grid-3{ - top: 0; - left: 33.33%; - width: 1px; - height: 100% - } - &.grid-4{ - top: 0; - left: 66.66%; - width: 1px; - height: 100% - } - } - .focus_point{ - position: absolute; - border: 2px solid white; - border-radius: 100em; - width: 30px; - height: 30px; - top: 0; - left: 0; - margin-top: -15px; - margin-left: -15px; - .box-shadow(0 0 1px #333); - pointer-events: none; - .o_noSelect(); - &.ready { - .transition(all 0.2s ease); - } - &:before { - pointer-events: none; - .o_noSelect(); - content: ""; - display: block; - width: 100px; - height: 100px; - margin-top: -37px; - margin-left: -37px; - border: 1px solid #EAEAEA; - background: rgba(247, 76, 76, 0); - border-radius: 100em; - opacity: 1; - .box-shadow(0 0 0 100em rgba(0, 0, 0, 0.33)); - .transition(opacity 0.2s ease); - } - } - } // cover_editing_container - #collapse_custom { - .panel-body{ - padding: 15px 30px; - } - legend{ - margin-bottom: 5px; - } - fieldset { - padding-bottom: 20px; - label.control-label { - font-size: 0.9em; - } - > p { - margin: 0 0 15px; - font-size: 0.9em; - } - } - } +// LOGIN FORM +.oe_login_form { + max-width: 300px; + position: relative; + margin: 50px auto; } // CUSTOMIZE THEME -// TODO: adapt to new style -// ================================== - #theme_error { - background: #ffc; + background: #ffc; } - #theme_customize_modal { - overflow: visible; - z-index: 1020; - background: transparent; - display: block; - .modal-dialog { - top: 75px; - width: auto; - margin: 0; - position: absolute; - right: 10px; - font-family: "Lato-Regular"; - font-weight: normal; - text-transform: capitalize; - letter-spacing: normal; - } - .modal-h5 { - color: #ffffff; - font-family: "Lato-Regular"; - font-weight: normal; - text-transform: uppercase; - letter-spacing: normal; - font-size: 14px; - color: white; - padding: 4px 0 4px 4px; - background-color: #bdc3c7; - } - table { - width: 100%; - margin-bottom: 8px; - } - label { + overflow: visible; + z-index: 1020; display: block; - text-align: center; - > div, > img { - border: 1px solid #fff; - line-height: 30px; - font-size: 0.9em; - margin: 2px 4px; + .modal-dialog { + .o-position-absolute(@odoo-navbar-height + 10, 10px); + width: auto; + margin: 0; + font-family: Roboto; } - &.checked > div, &.checked > img { - box-shadow: 2px 2px 3px #888; - border: 1px solid #666; + .loading_backdrop { + display: none; } - img { - width: 60px; - height: 35px; - margin: 2px; - border: 1px solid rgba(136, 136, 136, 0.5); + &.loading .loading_backdrop { + .o-position-absolute(0, 0, 0, 0); + display: block; + background: black; + opacity: 0.3; + z-index: 1; } - input { - display: none; + label { + display: block; + text-align: center; + > div, > img { + border: 1px solid #fff; + line-height: 30px; + font-size: 0.9em; + margin: 2px 4px; + } + &.checked > div, &.checked > img { + box-shadow: 2px 2px 3px #888; + border: 1px solid #666; + } + img { + width: 60px; + height: 35px; + margin: 2px; + border: 1px solid rgba(136, 136, 136, 0.5); + } + input { + display: none; + } } - } - .loading_backdrop { - display: none; - } - &.loading .loading_backdrop { - display: block; - width: 100%; - height: 100%; - background: #000; - opacity: 0.3; - position: absolute; - z-index: 1; - } -} - -/* ---- force the browse to re-compute the stylesheets ---- */ -body.theme_customize_css_loading { - magin-top: 1px; - #wrapwrap { - magin-top: -1px; - } } // ACE EDITOR -// ================================ .oe_ace_view_editor { - position: fixed; - right: 0; - z-index: 1001; - height: 100%; - background: #2F3129; - color: white; - .oe_ace_view_editor_title { - width: 100%; - padding-top: 0; - padding-left: 0; - height: 30px; - .oe_view_list { - width: 50%; - height: 30px; - font-size: 14px; - font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; - line-height: normal; + .o-position-absolute(@odoo-navbar-height, 0, 0); + position: fixed; + z-index: 1001; + background: #2F3129; + color: white; + .oe_ace_view_editor_title { + width: 100%; + height: 30px; + padding-top: 0; + padding-left: 0; + .oe_view_list, .btn { + font-size: 14px; + font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; + line-height: normal; + } + .oe_view_list { + width: 50%; + height: 30px; + } + .btn { + height: 100%; + padding: 0 4px; + } } - .btn { - height: 30px; - padding: 0 4px 0 4px; - font-size: 14px; - font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace; - line-height: normal; + .ace_editor { + .o-position-absolute(50px, 0, 0, 0); + .ace_gutter { + cursor: ew-resize; + } } - } - .ace_editor { - position: absolute; - top: 50px; - right: 0; - left: 0; - .ace_gutter { - cursor: ew-resize; + #ace-view-id { + padding: 0 1em; + } + &.oe_ace_open { + opacity: 0.97; + } + &.oe_ace_closed { + z-index: -1000; + opacity: 0; + } + .oe_include_bundles { + font-weight: normal; + padding: 0 8px; } - } - #ace-view-id { - padding: 0 1em; - } - &.oe_ace_open { - .opacity(0.97); - } - &.oe_ace_closed { - z-index: -1000; - .opacity(0); - } } -.oe_include_bundles { - font-weight: normal; - padding: 0 8px; -} - - - // PLANNER DIALOG -// ============================== - #PlannerDialog { - top: @wb_editor-bar-height + 10px; - -webkit-box-shadow: 0 3px 9px #666666; - box-shadow: 0 3px 9px #666666; + top: @odoo-navbar-height + 10; + box-shadow: 0 3px 9px #666666; } - -// POPOVER _NAVIGATION -// ============================== +// POPOVER NAVIGATION .tour .popover-navigation { - margin-left: 13px; - margin-bottom: 8px; + margin-left: 13px; + margin-bottom: 8px; } diff --git a/addons/website/static/src/less/website.ui.interactions.less b/addons/website/static/src/less/website.ui.interactions.less deleted file mode 100644 index edab3b4d6ec..00000000000 --- a/addons/website/static/src/less/website.ui.interactions.less +++ /dev/null @@ -1,61 +0,0 @@ -// Transitions -// ====================== - -@wb_md-ease: cubic-bezier(0.19, 1, 0.22, 1); - -// Animation -// ====================== - -@-webkit-keyframes fadeInDownSmall { - 0% { - opacity: 0; - .translateY(-5px); - } - 100% { - opacity: 1; - .translateY(0); - } -} -@keyframes fadeInDownSmall { - 0% { - opacity: 0; - .translateY(-5px); - } - 100% { - opacity: 1; - .translateY(0); - } -} -@-webkit-keyframes fadeInOut { - 0% { - opacity: 0; - } - 25% { - opacity: 1; - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes fadeInOut { - 0% { - opacity: 0; - } - 25% { - opacity: 1; - } - 75% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -@keyframes inputHighlighter { - from { background: @wb_color-accent; } - to { width:0; background:transparent; } -} diff --git a/addons/website/static/src/less/website.ui.less b/addons/website/static/src/less/website.ui.less index a54505f2bf6..4ff9bfce6e3 100644 --- a/addons/website/static/src/less/website.ui.less +++ b/addons/website/static/src/less/website.ui.less @@ -1,334 +1,45 @@ -// Fonts -// ============================ -@import url(https://fonts.googleapis.com/icon?family=Material+Icons); -// Layouting -// ============================ -html, body { - width: 100%; - height: 100%; +// LAYOUTING +body.o_connected_user { + padding-top: @odoo-navbar-height!important; } -#wrapwrap { - width: auto; - min-height: 100%; - overflow-x: hidden; - margin-bottom: -160px; - padding-bottom: 160px; -} - -main { - max-width: 100%; -} - -// Main menu style -// ======================================================== -#website_editor_container { - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - position: relative; - height: @wb_editor-bar-height; - width: 100%; - #website_main_menu_navbar { - background: @wb_editor-bar-bg; - width: 100%; - height: @wb_editor-bar-height; - min-height: @wb_editor-bar-height; - font-family: @wb_font-default; - font-weight: 600; - z-index: 9999; - position: fixed; - color: @wb_color-text-normal; - border: none; +// MAIN MENU STYLE (added above navbar.less) +#oe_main_menu_navbar { + .o-position-absolute(0, 0, auto, 0); position: fixed; z-index: 1001; - .border-radius(0px); - margin-bottom: 0px; - .o-transition(opacity 0.4s @wb_md-ease); - &.editing_mode > ul { - opacity: 0; - } - } -} - -// Applications switcher -// ======================================================== -#website_main_menu_navbar { - .o_menu_toggle { - position: relative; - padding: 10px 15px; - color: white; - text-shadow:0 1px 0 @wb_color-primary-d10; - &:hover{ - background-color: @wb_color-primary-d10; - color: white; - } - } - .o_menu_brand { - .user-select(none); - position: relative; - cursor: default; - margin-right: 25px; - font-size: 22px; - font-weight: 800; - float: left; - padding: 13px 0px; - line-height: 18px; - height: @wb_editor-bar-height; - color: white; - text-shadow:0 1px 0 @wb_color-primary-d10; - } -} - - -// Menu UL -// ======================================================== -#website_main_menu_navbar { - > ul { - height: @wb_editor-bar-height; - display: inline-block; - float: left; - padding: 0 0 0 5px; - opacity: 1; - font-size: 0; // remove default browser margin beetwen inline-block elements - &.right { - float: right; - padding: 0; - } - } -} - - -// General 'li' + animated edit button (.ui-effects-wrapper) -// ========================================================== -#website_main_menu_navbar { - > ul > li, - > ul > .ui-effects-wrapper { - font-size: @wb_font-size-def; // restore default font-size - height: @wb_editor-bar-height; - display: inline-block; - position: relative; - list-style: none; - > a, > button { - color: @wb_editor-bar-link-color; - text-shadow:0 1px 0 @wb_editor-bar-link-shadow; - padding: 0 10px; - font-weight: 600; - height: @wb_editor-bar-height; - line-height: @wb_editor-bar-height - 5px; - display: inline-block; - margin: 0; - font-size: 11px; - text-decoration: none; - text-transform: uppercase; - border: none; - outline: none; - .o-transition(all 0.2s ease); - &.full { - color: white; - } - &.accent{ - text-shadow:0 1px 0 @wb_color-accent-d10; - } - } - &:hover, &:active, &:focus { - > a, > button { - color: white; + font-family: Roboto, @font-family-sans-serif; + font-size: @odoo-font-size-base; + a:hover, a:focus { text-decoration: none; - border: none; - outline: none; - } - } - } -} - - -// Menu dropdowns -// ========================================================== -#website_main_menu_navbar > ul { - > li.dropdown { - font-size: @wb_font-size-def; - position: relative; - > .dropdown-toggle { - color: @wb_dropdown-toggle-color; - height: @wb_editor-bar-height; - line-height: @wb_editor-bar-height - @wb_editor-dropdown-border-height; - border-top: @wb_editor-dropdown-border-height solid transparent; - text-shadow:0 1px 0 @wb_dropdown-toggle-shadow-color; - border-top: @wb_editor-dropdown-border-height solid transparent; - .box-shadow(inset 0 9px 16px -32px transparent); - &:hover, &:focus, &:active { - outline: 0; - } - .caret{} } .dropdown-menu { - position: absolute; - top: 100%; - left: 0; - display: none; // none by default, but block on "open" of the menu - float: left; - min-width: 160px; - padding: @wb_dropdown-menu-padding; - list-style: none; - text-align: left; - background-clip: padding-box; - margin: 0; - overflow: hidden; - border-radius: 0; - border: none; - background-color: @wb_dropdown-menu-color; - .box-shadow(@wb_dropdown-shadow); - li { - display: block; - white-space: nowrap; - > a { - padding: @wb_dropdown-li-padding; - color: @wb_dropdown-li-color; - display: block; + font-size: inherit; + border-radius: 0; + } + + .o_menu_systray { + a[data-action="edit"], a[data-action="translate"] { + background-color: @odoo-brand-optional; + outline: 1px solid @odoo-brand-optional; + &:hover, &:focus { + background-color: darken(@odoo-brand-optional, 10%); + outline-color: darken(@odoo-brand-optional, 10%); + } + + @media (max-width: @screen-xs-max) { + &, &:hover, &:focus { + outline: none; + } + } } - &:hover { - background: @wb_dropdown-li-hover-bg; - > a { - color: @wb_dropdown-li-hover-color; - background: transparent; - } + + .o_mobile_preview a { + width: @odoo-navbar-height - 2; + text-align: center; + font-size: 20px; } - } - li > ul { - background: @wb_dropdown-menu-color; - padding: 2px 0 0 0; - &:before{ - content: ""; - margin: @wb_dropdown-li-padding; - margin-top: 0; - display: block; - background: fadeout(@wb_dropdown-li-color, 50%); - height: 1px; - } - > li > a { - padding: @wb_dropdown-li-wrapped-padding; - } - } - - li.divider { - pointer-events: none; - margin: @wb_dropdown-li-divider-margin; - padding: 0; - background-color: fadeout(@wb_dropdown-li-color, 50%); - } - li.dropdown-header{ - pointer-events: none; - margin: @wb_dropdown-li-divider-margin; - padding: 0; - color: fadeout(@wb_dropdown-li-color, 50%); - &:hover { - background: transparent; - } - } - } // /.wb_dropdown-menu, .dropdown-menu - &.right{ - .dropdown-menu { - position: absolute; - text-align: right; - left: auto; - right: 0; - } } - } -} -// Menu dropdowns OPEN -// ========================================================== -#website_main_menu_navbar > ul { - > li.dropdown.open { - > .dropdown-toggle { - background-color: @wb_dropdown--open-toggle-bg-color; - color: @wb_dropdown--open-toggle-color; - text-shadow:0 1px 0 @wb_dropdown--open-toggle-shadow-color; - border-top: @wb_editor-dropdown-border-height solid white; - .box-shadow(inset 0 9px 16px -12px fadeOut(white, 30%)); - } - > .dropdown-menu{ - display: block; - } - } -} - -// Ripples -// ========================================================== -.ripple { - display: block; - position: absolute; - background: hsl(180, 40%, 80%); - border-radius: 100%; - .scale(0); - &.animate{ - .animation(ripple 0.3s linear); - } -} - -// Child unique elements -// ========================================================== -#website_main_menu_navbar { - #oe_editzone { - padding: 0; - } - #oe_systray { - .transition(opacity 0.3s @wb_md-ease); - .opacity(0); - &.ready{ - .opacity(1); - } - } - .o_planner_systray { - float: right; - width: 45px; - margin-right: 5px; - .progress { - margin: ((@wb_editor-bar-height/2)-3px) 0; - height: 8px; - background-color: @wb_color-primary-d10; - .progress-bar { - box-shadow: none; - background-color: @wb_color-accent; - } - } - } - .o_mobile_preview{ - float: right; - margin: 0 10px 0 20px; - a{ - font-size: 20px; - line-height: @wb_editor-bar-height; - } - } - li.content{ - #website_addPage_list ~ li{ - display: none; - } - } -} - - -// Entering in 'Edit Mode' -// ========================================================== -body.editor_enable { - #wrapwrap { - .o-transition(margin-left 0.4s @wb_md-ease); - } -} - -body.editor_enable.editor_has_snippets { - #wrapwrap { - margin-left: 210px; - } -} - -// UTILITY CLASSES -// ========================================================== -.wb_hidden_xs{ - @media screen and (max-width: @wb_screen_sm){ - display: none; - } } diff --git a/addons/website/static/src/less/website.ui.mixins.less b/addons/website/static/src/less/website.ui.mixins.less deleted file mode 100644 index b8d3890d920..00000000000 --- a/addons/website/static/src/less/website.ui.mixins.less +++ /dev/null @@ -1,190 +0,0 @@ -// Button variants -// ======================== -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons - -.button-variant(@color, @background, @border) { - color: @color; - background-color: @background; - border-color: @border; - &:focus, - &.focus { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 25%); - } - &:hover { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 12%); - } - &:active, - &.active, - .open > &.dropdown-toggle { - color: @color; - background-color: darken(@background, 10%); - border-color: darken(@border, 12%); - &:hover, - &:focus, - &.focus { - color: @color; - background-color: darken(@background, 17%); - border-color: darken(@border, 25%); - } - } - &:active, - &.active, - .open > &.dropdown-toggle { - background-image: none; - } - &.disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background-color: @background; - border-color: @border; - } - } - .badge { - color: @background; - background-color: @color; - } -} - -// Button sizes -.button-size(@padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) { - padding: @padding-vertical @padding-horizontal; - font-size: @font-size; - line-height: @line-height; - border-radius: @border-radius; -} - -// Transitions -.transition(@transition...) { - -moz-transition: @transition; - -o-transition: @transition; - -webkit-transition: @transition; - transition: @transition; -} - -.transition-property(@property...) { - -moz-transition-property: @property; - -o-transition-property: @property; - -webkit-transition-property: @property; - transition-property: @property; -} - -.transition-duration(@duration...) { - -moz-transition-property: @duration; - -o-transition-property: @duration; - -webkit-transition-property: @duration; - transition-property: @duration; -} - -.transition-timing-function(@timing...) { - -moz-transition-timing-function: @timing; - -o-transition-timing-function: @timing; - -webkit-transition-timing-function: @timing; - transition-timing-function: @timing; -} - -.transition-delay(@delay...) { - -moz-transition-delay: @delay; - -o-transition-delay: @delay; - -webkit-transition-delay: @delay; - transition-delay: @delay; -} - -// ANIMATIONS -// =========================== - -.animation(@str) { - -webkit-animation: @str; - -moz-animation: @str; - -ms-animation: @str; - -o-animation: @str; - animation: @str; -} - - -// BACKGROUND GRADIENT -// ======================= - -.linear-gradient(@start-color: #555; @end-color: #333; @deg: 45deg) { - background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ - background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 - background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ -} - - -.box-shadow(@string) { - -webkit-box-shadow: @string; - -moz-box-shadow: @string; - box-shadow: @string; -} - -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// TRANSFORM -// =================================== -.transform(@transforms) { - -moz-transform: @transforms; - -o-transform: @transforms; - -ms-transform: @transforms; - -webkit-transform: @transforms; - transform: @transforms; -} - -// rotate -.rotate(@deg) { - .transform(rotate(@deg)); -} - -// scale -.scale(@scale) { - .transform(scale(@scale)); -} - -// translate -.translate(@x, @y) { - .transform(translate(@x, @y)); -} - -// translate -.translateY(@y) { - .transform(translateY(@y)); -} - -// skew -.skew(@x, @y) { - .transform(skew(@xdeg, @ydeg)); -} - -// transform origin -.transform-origin(@origin) { - moz-transform-origin: @origin; - -o-transform-origin: @origin; - -ms-transform-origin: @origin; - -webkit-transform-origin: @origin; - transform-origin: @origin; -} - -// HELPERS -// ====================================== - -.user-select(@str) { - -moz-user-select: @str; - -webkit-user-select: @str; - -ms-user-select: @str; - user-select: @str; -} diff --git a/addons/website/static/src/less/website.ui.variables.less b/addons/website/static/src/less/website.ui.variables.less deleted file mode 100644 index dc933921b24..00000000000 --- a/addons/website/static/src/less/website.ui.variables.less +++ /dev/null @@ -1,105 +0,0 @@ -body { - visibility: visible; -} - -// Fonts -// ======================= -@wb_font-default : "Roboto", Roboto, sans-serif; -@wb_font-size-def : 12px; - -// COLORS UI -// ======================= -@wb_color-dark : #2c2c36; -@wb_color-darker : darken(#2c2c36,10%); -@wb_color-divider : #33363e; -@wb_color-normal : #50545d; -@wb_color-light : #4e525b; - -@wb_color-paper : #fbfbfd; -@wb_color-inactive : #646465; - -@wb_color-text-normal : #999999; -@wb_color-text-light : #d4d5d7; -@wb_color-text-dark : #505050; - -@wb_color-accent : #1cc1a9; -@wb_color-accent-d10 : darken(@wb_color-accent, 10%); -@wb_color-primary : #a24689; -@wb_color-primary-d5 : darken(@wb_color-primary, 5%); -@wb_color-primary-d10 : darken(@wb_color-primary, 10%); -@wb_color-primary-l10 : lighten(@wb_color-primary, 10%); - -@wb_color-danger : #e6586c; -@wb_color-success : #4ab980; - - -// LAYOUT -// ======================= -@wb_screen_xs : 480px; -@wb_screen_sm : 768px; -@wb_screen_md : 992px; -@wb_screen_lg : 1200px; - - -// TOP BAR -// ======================= -@wb_editor-bar-height : 45px; -@wb_editor-dropdown-border-height : 1px; -@wb_editor-bar-bg : @wb_color-primary; -@wb_editor-bar-link-color : @wb_color-paper; -@wb_editor-bar-link-shadow : @wb_color-primary-d10; - - -// EDITOR -// ======================= -@wb_sidebar-width: 210px; - - -// SHADOWS -// ======================= -@wb_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 3px 1px -2px rgba(0, 0, 0, 0.2), - 0 1px 5px 0 rgba(0, 0, 0, 0.12); - -@wb_dropdown-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), - 0 3px 1px -2px rgba(0, 0, 0, 0.2), - transparent; - - -// DROPDOWNS -// ======================= -@wb_dropdown-toggle-color : @wb_color-paper; -@wb_dropdown-toggle-shadow-color : @wb_color-primary-d10; - // open - @wb_dropdown--open-toggle-color : white; - @wb_dropdown--open-toggle-bg-color : @wb_color-primary-d5; - @wb_dropdown--open-toggle-shadow-color : @wb_color-primary-d10; - // menu - @wb_dropdown-menu-color : @wb_color-primary-d5; - @wb_dropdown-menu-padding : 8px 0 4px; - @wb_dropdown-li-padding : 9px 15px 9px 10px; - @wb_dropdown-li-wrapped-padding : 4px 15px 4px 10px; - @wb_dropdown-li-divider-margin : 5px 15px 3px 10px; - @wb_dropdown-li-color : @wb_color-paper; - @wb_dropdown-li-hover-color : @wb_color-paper; - @wb_dropdown-li-hover-bg : @wb_color-primary; - - -// MODALS -// ======================= -@wb_modal-header-color : @wb_color-text-dark; -@wb_modal-title-line-height : 1.42857143; - -@wb_modal-lg : 900px; -@wb_modal-md : 600px; -@wb_modal-sm : 300px; - -@wb_modal-header-padding : 15px; -@wb_modal-body-padding : 15px; -@wb_modal-footer-padding : 15px; - -@wb_modal-margin-top : @wb_editor-bar-height + (@wb_editor-bar-height / 5); - -@wb_modal-content-bg : @wb_color-paper; -@wb_modal-header-bg : #fff; -@wb_modal-footer-bg : #fff; diff --git a/addons/website/static/src/less/website.wrapwrap.less b/addons/website/static/src/less/website.wrapwrap.less index d9e29f3e935..205d881acc9 100644 --- a/addons/website/static/src/less/website.wrapwrap.less +++ b/addons/website/static/src/less/website.wrapwrap.less @@ -1,454 +1,301 @@ -/* THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY */ - -@footer-bg: lighten(@gray-lighter, 18%); -@footer-border-top: 1px solid lighten(@gray-lighter, 10%); - - -// Default Style -// =========================== - -header { - a.navbar-brand.logo { - padding: 0 15px; - } - a.navbar-brand { - img { - max-height: 50px; - } - } -} - -.logo-img { - width: 220px; -} - #wrapwrap { - .container { - max-width: 100% !important; - } - > footer { - background-color: @footer-bg; - border-top: @footer-border-top; - padding-top: 3em; - } + position: relative; + display: table; + table-layout: fixed; + width: 100%; + height: 100%; + + > * { + display: table-row; + } + > main { + height: 100%; + } +} + +// Default Style +header a.navbar-brand { + &.logo { + padding: 0 15px; + } + img { + max-height: 50px; + } +} +footer { + background-color: #F8F8F8; + + #footer { + padding-top: 32px; + } } // Odoo utility classes -// =========================== - .o_hidden { - display: none!important; -} -.o_noSelect { - &::-moz-selection { - background-color: transparent; - } - &::selection { - background-color: transparent; - } + display: none!important; } // Odoo options classes -// =========================== - .para_large { - font-size: 120%; + font-size: 120%; } - -.jumbotron.para_large p{ - font-size: 150%; +.jumbotron { + margin-bottom: 0; + .para_large p { + font-size: 150%; + } } .readable { - font-size: 120%; - max-width: 700px; - margin-left: auto; - margin-right: auto; + font-size: 120%; + max-width: 700px; + margin-left: auto; + margin-right: auto; } - // Odoo image background classes -// =============================== -.o_bg_img_cover { - background-size: cover; +.oe_img_bg { + background-size: cover; + background-repeat: no-repeat; + + &.o_bg_img_opt_contain { + background-size: contain; + background-position: center center; + } + &.o_bg_img_opt_custom { + background-size: auto; + } + &.o_bg_img_opt_repeat { + background-repeat: repeat; + } + &.o_bg_img_opt_repeat_x { + background-repeat: repeat-x; + } + &.o_bg_img_opt_repeat_y { + background-repeat: repeat-y; + } } -.o_bg_img_contain { - background-size: contain; - &.o_bg_img_no_repeat{ - background-position: center center; - } -} - -.o_bg_img_repeat{ - background-repeat: repeat; -} -.o_bg_img_repeat_x{ - background-repeat: repeat-x; -} -.o_bg_img_repeat_y{ - background-repeat: repeat-y; -} -.o_bg_img_no_repeat{ - background-repeat: no-repeat; -} - - - -// COLORS -// =========================== - -@brand-primary: darken(#428bca, 6.5%); // #337ab7 -@brand-success: #5cb85c; -@brand-info: #5bc0de; -@brand-warning: #f0ad4e; -@brand-danger: #d9534f; - - -@white: #fff; -@black: #000; -@gray-darker: lighten(@gray-base, 13.5%); // #222 -@gray-dark: lighten(@gray-base, 20%); // #333 -@gray: lighten(@gray-base, 33.5%); // #555 -@gray-light: lighten(@gray-base, 46.7%); // #777 -@gray-lighter: lighten(@gray-base, 93.5%); // #eee - -@color-accent : #1cc1a9; -@color-complementary : #a24689; -@color-alpha : #BA3C3D; -@color-beta : #0D6759; -@color-gamma : #0B2E59; - - - // Background (kept for 8.0 compatibility) -// ============================================= - .oe_dark { - background-color: rgba(200, 200, 200, 0.14); + background-color: rgba(200, 200, 200, 0.14); } - .oe_black { - background-color: rgba(0, 0, 0, 0.9); - color: white; + background-color: rgba(0, 0, 0, 0.9); + color: white; } - .oe_green { - background-color: #169C78; - color: white; -} -.oe_green .text-muted { - color: #ddd; -} - -.oe_blue_light { - background-color: #41b6ab; - color: white; -} -.oe_blue_light .text-muted { - color: #ddd; -} - -.oe_blue { - background-color: #34495e; - color: white; -} - -.oe_orange { - background-color: #f05442; - color: white; -} -.oe_orange .text-muted { - color: #ddd; -} - -.oe_purple { - background-color: #b163a3; - color: white; -} -.oe_purple .text-muted { - color: #ddd; -} - -.oe_red { - background-color: #9C1b31; - color: white; -} -.oe_red .text-muted { - color: #ddd; -} - -.oe_none { - background-color: #FFFFFF; -} - -.oe_yellow { - background-color: #A2A51B; -} - -.oe_green { - background-color: #149F2C; -} - - -.createColorClasses(@class_name, @color) { - .text-@{class_name} { - color: @color; - } - .bg-@{class_name} { - background-color: @color - } - .tab .text-@{class_name}, - .tab .bg-@{class_name} { - span{ - background-color: @color + background-color: #169C78; + color: white; + .text-muted { + color: #ddd; } - } } - -// Create classes for theme colors -.createColorClasses(accent, @color-accent); -.createColorClasses(compl, @color-complementary); -.createColorClasses(alpha, @color-alpha); -.createColorClasses(beta, @color-beta); -.createColorClasses(gamma, @color-gamma); - -// Create classes for UI colors -.createColorClasses(primary, @brand-primary); -.createColorClasses(success, @brand-success); -.createColorClasses(info, @brand-info); -.createColorClasses(warning, @brand-warning); -.createColorClasses(danger, @brand-danger); - -// Create classes for greyscale colors -.createColorClasses(white, @white); -.createColorClasses(black, @black); -.createColorClasses(gray_darker, @gray-darker); -.createColorClasses(gray_dark, @gray-dark); -.createColorClasses(gray, @gray); -.createColorClasses(gray_light, @gray-light); -.createColorClasses(gray_lighter, @gray-lighter); - - - +.oe_blue_light { + background-color: #41b6ab; + color: white; + .text-muted { + color: #ddd; + } +} +.oe_blue { + background-color: #34495e; + color: white; +} +.oe_orange { + background-color: #f05442; + color: white; + .text-muted { + color: #ddd; + } +} +.oe_purple { + background-color: #b163a3; + color: white; + .text-muted { + color: #ddd; + } +} +.oe_red { + background-color: #9C1b31; + color: white; + .text-muted { + color: #ddd; + } +} +.oe_none { + background-color: #FFFFFF; +} +.oe_yellow { + background-color: #A2A51B; +} +.oe_green { + background-color: #149F2C; +} // Typography -// =========================== - ul { - list-style-type: disc; + list-style-type: disc; } - li > ul { - list-style-type: circle; + list-style-type: circle; } - li > * > li > ul { - list-style-type: square; + list-style-type: square; } - li > * > li > * > li > ul { - list-style-type: disc; + list-style-type: disc; } - li > * > li > * > li > * > li > ul { - list-style-type: circle; + list-style-type: circle; } - li > * > li > * > li > * > li > * > li > ul { - list-style-type: square; + list-style-type: square; } - li > * > li > * > li > * > li > * > li > * > li > ul { - list-style-type: disc; + list-style-type: disc; } - ol { - list-style-type: decimal; + list-style-type: decimal; } - li > ol { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } - li > * > li > ol { - list-style-type: lower-greek; + list-style-type: lower-greek; } - li > * > li > * > li > ol { - list-style-type: decimal; + list-style-type: decimal; } - li > * > li > * > li > * > li > ol { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } - li > * > li > * > li > * > li > * > li > ol { - list-style-type: lower-greek; + list-style-type: lower-greek; } - li > * > li > * > li > * > li > * > li > * > li > ol { - list-style-type: decimal; + list-style-type: decimal; } - li > p { - margin: 0; + margin: 0; } font[style*='background'], font[class*='bg-'] { - padding: 0 2px; + padding: 0 2px; } - - hr { - padding: 4px 0; + padding: 4px 0; } - // O_UL -// =========================== - .o_ul_toggle_self, .o_ul_toggle_next { - display: none; + display: none; } - -.o_ul_folded .o_close { - display: none !important; -} -.o_ul_folded .o_ul_toggle_self, .o_ul_folded .o_ul_toggle_next { - display: inline-block; - line-height: inherit; - float: left; - position: relative; - margin-left: -1em; - z-index: 1; - top: -0.15em; - left: 0.2em; - font-size: 1.4em; - text-decoration: none; - &.open{ - left: 0em; - &:before{ - content: ""; +.o_ul_folded { + .o_close { + display: none!important; + } + .o_ul_toggle_self, .o_ul_toggle_next { + display: inline-block; + line-height: inherit; + float: left; + position: relative; + margin-left: -1em; + top: -0.15em; + left: 0.2em; + font-size: 1.4em; + text-decoration: none; + &.o_open:before { + content: ""; + } + &:before { + content: ""; + } } - } - &:before{ - content: ""; - } } - -// Bootsrtap hacks -// =========================== - +// Bootstrap hacks +.container { + max-width: 100%; +} // container inside container -.container, .readable{ - .container { - padding-left: 0; - padding-right: 0; - width: auto; - } +.container, .readable { + .container { + padding-left: 0; + padding-right: 0; + width: auto; + } } // HEADER NAV BAR .navbar.navbar-static-top { - margin-bottom: 0; - ul.nav > li.divider { - margin-top: 15px; - padding-top: 20px; - border-right: 1px solid grey; - } + margin-bottom: 0; + ul.nav > li.divider { + margin-top: 15px; + padding-top: 20px; + border-right: 1px solid grey; + } } ul.nav-stacked > li > a { - padding: 2px 15px; + padding: 2px 15px; } // Columns min height [class^="col-md-"] { - min-height: 24px; + min-height: 24px; } - - // PUBLISH -// =========================== - -.css_published .btn-danger, -.css_published .css_publish { - display: none; +.css_published { + .btn-danger, .css_publish { + display: none; + } } - -.css_unpublished .btn-success, -.css_unpublished .css_unpublish { - display: none; +.css_unpublished { + .btn-success, .css_unpublish { + display: none; + } } - [data-publish='off'] > *:not(.css_options) { - .opacity(0.5); + opacity: 0.5; } -// Hack for removing double scrollbar from mobile preview -// TODO: move to website.ui.components.less -// =========================== - -div#mobile-preview.modal { - overflow: hidden; -} -#customize-menu .dropdown-header { - text-transform: uppercase; -} - -// END of PUBLISH -// =========================== - +// Others ::-moz-selection { - background: rgba(150, 150, 220, 0.3); + background: rgba(150, 150, 220, 0.3); } - ::selection { - background: rgba(150, 150, 220, 0.3); -} - -.logo-img { - width: 220px; + background: rgba(150, 150, 220, 0.3); } .oe_demo { - position: relative; - img { - width: 100%; - } - div { - position: absolute; - left: 0; - background-color: rgba(0, 0, 0, 0.4); - opacity: 0.85; - bottom: 0px; - width: 100%; - padding: 7px; - color: white; - font-weight: bold; - a { - color: white; + position: relative; + img { + width: 100%; + } + div { + .o-position-absolute(@left: 0, @bottom: 0); + background-color: rgba(0, 0, 0, 0.4); + opacity: 0.85; + width: 100%; + padding: 7px; + color: white; + font-weight: bold; + a { + color: white; + } } - } -} - -// OE search -// =========================== - -.oe_search_clear { - position: absolute; - display: none; - cursor: pointer; - z-index: 2; - right: 42px; - color: #939393; - padding: 10px 0; - top: 1px; } .oe_search_box { - padding-right: 23px; + padding-right: 23px; +} +.oe_search_clear { + .o-position-absolute(1px, 42px); + z-index: 2; + display: none; + cursor: pointer; + color: #939393; + padding: 10px 0; }