[REF] portal, website, web: rename/regroup LESS files
This commit is contained in:
qsm-odoo
@@ -1,6 +1,5 @@
|
||||
///
|
||||
/// This file regroups the general rules for website design. See the website.snippets.less rules for
|
||||
/// snippets-specific rules.
|
||||
/// This file regroups the general rules for website design.
|
||||
///
|
||||
|
||||
// Resize and vertically align navbar’s items relative to @navbar-height
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
<!-- FIXME remove website / portal dependency ..? -->
|
||||
<link href="/portal/static/src/less/website.wrapwrap.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/website/static/src/less/website.snippets.less" rel="stylesheet" type="text/less"/>
|
||||
<link href="/website/static/src/less/website.less" rel="stylesheet" type="text/less"/>
|
||||
|
||||
<!-- TODO: Put in the right report ..? -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Work+Sans:thin,light,regular,medium,bold,semi-bold" rel="stylesheet"/>
|
||||
|
||||
@@ -1,568 +0,0 @@
|
||||
// INPUTS
|
||||
@o-switch-size: 2ex;
|
||||
@o-switch-inactive-color: @gray-lighter;
|
||||
|
||||
.o_switch {
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
+ span {
|
||||
background-color: @o-switch-inactive-color;
|
||||
box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
|
||||
border-radius: 100rem;
|
||||
height: @o-switch-size;
|
||||
width: @o-switch-size * 1.8;
|
||||
margin-right: 0.5em;
|
||||
display: inline-block;
|
||||
.transition(all 0.3s @o-we-md-ease);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: @o-we-color-paper;
|
||||
display: block;
|
||||
width: @o-switch-size - 0.2;
|
||||
height: @o-switch-size - 0.2;
|
||||
margin-top: 0.1ex;
|
||||
margin-left: 0.3ex;
|
||||
border-radius: 100rem;
|
||||
.transition(all 0.3s @o-we-md-ease);
|
||||
box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span {
|
||||
box-shadow: none;
|
||||
.o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
|
||||
|
||||
&:after {
|
||||
margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu label .o_switch {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
// ACE EDITOR
|
||||
.o_ace_view_editor {
|
||||
@o-ace-color: #2F3129;
|
||||
background: @o-ace-color;
|
||||
color: white;
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
opacity: 0.97;
|
||||
|
||||
.o_ace_view_editor_title {
|
||||
.o-flex(0, 0, auto);
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
padding: @grid-gutter-width/4;
|
||||
|
||||
> .o_ace_type_switcher > button::after {
|
||||
.o-caret-down();
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
> * {
|
||||
.o-flex(0, 0, auto);
|
||||
margin: 0 @grid-gutter-width/4;
|
||||
|
||||
&.o_include_option {
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
font-size: 11px;
|
||||
|
||||
> .o_checkbox {
|
||||
margin-right: @grid-gutter-width/4;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_res_list {
|
||||
.o-flex(1, 1, auto);
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#ace-view-id {
|
||||
.o-flex(0, 0, auto);
|
||||
padding: @grid-gutter-width/4 @grid-gutter-width/2;
|
||||
background-color: lighten(@o-ace-color, 10%);
|
||||
}
|
||||
#ace-view-editor {
|
||||
height: 70%; // in case flex is not supported
|
||||
.o-flex(1, 1, auto);
|
||||
.ace_gutter {
|
||||
cursor: ew-resize;
|
||||
|
||||
.ace_gutter-cell.o_error {
|
||||
position: relative;
|
||||
&::after {
|
||||
.o-position-absolute(-100%, 0, -100%, 0);
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ace_resize_bar {
|
||||
.o-position-absolute(@right: 0);
|
||||
width: 25px;
|
||||
height: 100%;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.ace_scroller.o_error::after {
|
||||
.o-position-absolute(0, auto, 0, 0);
|
||||
width: 3px;
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
|
||||
.ace-line-error-mixin() {
|
||||
content: "";
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
background-color: @brand-danger;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_ace_select2_dropdown {
|
||||
width: auto!important;
|
||||
padding-top: 4px;
|
||||
font-family: monospace!important;
|
||||
|
||||
> .select2-results {
|
||||
max-height: none;
|
||||
max-height: 70vh;
|
||||
|
||||
.select2-result-label {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
>.o_ace_select2_result {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODALS
|
||||
body .modal {
|
||||
// SELECT MEDIA
|
||||
.o_select_media_dialog {
|
||||
width: 80%;
|
||||
|
||||
.modal-body {
|
||||
.nav-tabs .active > a[href="#editor-media-icon"] {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
li.search {
|
||||
float: right;
|
||||
|
||||
ul.pager li:last-child{
|
||||
margin-left: 2px;
|
||||
}
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 0 10px 0 0;
|
||||
> input {
|
||||
padding-right: 30px;
|
||||
}
|
||||
> span {
|
||||
.o-position-absolute(7px, 7px);
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.well {
|
||||
border-color: @gray-lighter;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.o_existing_attachment_cell {
|
||||
@odoo-border-image: 1px;
|
||||
.o_existing_attachment_remove {
|
||||
.o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
|
||||
padding: 3px 5px 5px 5px;
|
||||
background-color: fade(white, 80%);
|
||||
text-shadow: 0 0 1px white;
|
||||
border-radius: 0 0 0 2px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: @o-we-color-danger;
|
||||
}
|
||||
}
|
||||
.o_image {
|
||||
border: @odoo-border-image solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&.o_webimage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-image: none!important;
|
||||
}
|
||||
}
|
||||
&.o_selected .o_image {
|
||||
border-color: @odoo-brand-primary;
|
||||
box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
|
||||
}
|
||||
&:hover {
|
||||
.o_existing_attachment_remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.font-icons-icons {
|
||||
padding: 20px 0;
|
||||
|
||||
> span {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
margin: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&.o_selected {
|
||||
cursor: auto;
|
||||
background-color: @o-we-color-paper;
|
||||
box-shadow: 0px 0px 0px 1px @o-we-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#editor-media-image, #editor-media-document {
|
||||
.well {
|
||||
label {
|
||||
margin: auto 10px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// VIDEO TAB
|
||||
#editor-media-video .well {
|
||||
padding: 0;
|
||||
.o-flex-display();
|
||||
.o-flex-flow(row, wrap);
|
||||
|
||||
.o_video_dialog_form {
|
||||
.o-flex(1, 1, auto);
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
|
||||
#o_video_form_group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> textarea {
|
||||
width: 100%;
|
||||
min-height: 95px;
|
||||
padding-bottom: 25px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
> .o_validate_feedback {
|
||||
.o-position-absolute(auto, 10px, 10px);
|
||||
|
||||
> .fa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.has-error > .o_validate_feedback > .fa-exclamation-triangle {
|
||||
display: block;
|
||||
}
|
||||
&.has-success > .o_validate_feedback > .fa-check {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#video-preview {
|
||||
position: relative;
|
||||
.o-flex(1, 0, 50%);
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
.o-justify-content(center);
|
||||
|
||||
.o-we-preview-box(0 19px);
|
||||
border: none;
|
||||
|
||||
.media_iframe_video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.o_video_dialog_iframe {
|
||||
.o-we-preview-content();
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.alert {
|
||||
.o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
.o-we-preview-box();
|
||||
|
||||
h6 {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.o_bg_img_opt_object {
|
||||
position: relative;
|
||||
background: white;
|
||||
min-height: 10px;
|
||||
.o-we-preview-content();
|
||||
|
||||
> 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LINK EDITOR DIALOG COLOR SELECTOR
|
||||
.o_link_dialog {
|
||||
.o_link_dialog_color > .o_link_dialog_color_item {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0; // Important for themes
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
|
||||
input:checked + i::before {
|
||||
content: "\f00c";
|
||||
.o-position-absolute(@top: 6px, @left: 5px);
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
padding: 3px 9px;
|
||||
|
||||
> span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_link_dialog_preview {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
z-index: @zindex-modal + 1;
|
||||
}
|
||||
@@ -1085,3 +1085,572 @@ body.editor_enable {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// INPUTS
|
||||
@o-switch-size: 2ex;
|
||||
@o-switch-inactive-color: @gray-lighter;
|
||||
|
||||
.o_switch {
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
||||
+ span {
|
||||
background-color: @o-switch-inactive-color;
|
||||
box-shadow: inset 0 0 0px 1px darken(@o-switch-inactive-color,10%);
|
||||
border-radius: 100rem;
|
||||
height: @o-switch-size;
|
||||
width: @o-switch-size * 1.8;
|
||||
margin-right: 0.5em;
|
||||
display: inline-block;
|
||||
.transition(all 0.3s @o-we-md-ease);
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
background: @o-we-color-paper;
|
||||
display: block;
|
||||
width: @o-switch-size - 0.2;
|
||||
height: @o-switch-size - 0.2;
|
||||
margin-top: 0.1ex;
|
||||
margin-left: 0.3ex;
|
||||
border-radius: 100rem;
|
||||
.transition(all 0.3s @o-we-md-ease);
|
||||
box-shadow: 0 1px 1px darken(@o-switch-inactive-color,35%), inset 0 0 0 1px lighten(@o-switch-inactive-color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked + span {
|
||||
box-shadow: none;
|
||||
.o-linear-gradient(0deg, @o-we-color-success, darken(@o-we-color-success, 10%));
|
||||
|
||||
&:after {
|
||||
margin-left: (@o-switch-size*1.8 - @o-switch-size) + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu label .o_switch {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
// ACE EDITOR
|
||||
.o_ace_view_editor {
|
||||
@o-ace-color: #2F3129;
|
||||
background: @o-ace-color;
|
||||
color: white;
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
opacity: 0.97;
|
||||
|
||||
.o_ace_view_editor_title {
|
||||
.o-flex(0, 0, auto);
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
padding: @grid-gutter-width/4;
|
||||
|
||||
> .o_ace_type_switcher > button::after {
|
||||
.o-caret-down();
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
> * {
|
||||
.o-flex(0, 0, auto);
|
||||
margin: 0 @grid-gutter-width/4;
|
||||
|
||||
&.o_include_option {
|
||||
.o-flex-display();
|
||||
.o-align-items(center);
|
||||
font-size: 11px;
|
||||
|
||||
> .o_checkbox {
|
||||
margin-right: @grid-gutter-width/4;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_res_list {
|
||||
.o-flex(1, 1, auto);
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#ace-view-id {
|
||||
.o-flex(0, 0, auto);
|
||||
padding: @grid-gutter-width/4 @grid-gutter-width/2;
|
||||
background-color: lighten(@o-ace-color, 10%);
|
||||
}
|
||||
#ace-view-editor {
|
||||
height: 70%; // in case flex is not supported
|
||||
.o-flex(1, 1, auto);
|
||||
.ace_gutter {
|
||||
cursor: ew-resize;
|
||||
|
||||
.ace_gutter-cell.o_error {
|
||||
position: relative;
|
||||
&::after {
|
||||
.o-position-absolute(-100%, 0, -100%, 0);
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ace_resize_bar {
|
||||
.o-position-absolute(@right: 0);
|
||||
width: 25px;
|
||||
height: 100%;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
.ace_scroller.o_error::after {
|
||||
.o-position-absolute(0, auto, 0, 0);
|
||||
width: 3px;
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
|
||||
.ace-line-error-mixin() {
|
||||
content: "";
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
background-color: @brand-danger;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_ace_select2_dropdown {
|
||||
width: auto!important;
|
||||
padding-top: 4px;
|
||||
font-family: monospace!important;
|
||||
|
||||
> .select2-results {
|
||||
max-height: none;
|
||||
max-height: 70vh;
|
||||
|
||||
.select2-result-label {
|
||||
padding-top: 1px;
|
||||
padding-bottom: 2px;
|
||||
|
||||
>.o_ace_select2_result {
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MODALS
|
||||
body .modal {
|
||||
// SELECT MEDIA
|
||||
.o_select_media_dialog {
|
||||
width: 80%;
|
||||
|
||||
.modal-body {
|
||||
.nav-tabs .active > a[href="#editor-media-icon"] {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
li.search {
|
||||
float: right;
|
||||
|
||||
ul.pager li:last-child{
|
||||
margin-left: 2px;
|
||||
}
|
||||
.form-group {
|
||||
position: relative;
|
||||
margin: 0 10px 0 0;
|
||||
> input {
|
||||
padding-right: 30px;
|
||||
}
|
||||
> span {
|
||||
.o-position-absolute(7px, 7px);
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.well {
|
||||
border-color: @gray-lighter;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.o_existing_attachment_cell {
|
||||
@odoo-border-image: 1px;
|
||||
.o_existing_attachment_remove {
|
||||
.o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
|
||||
padding: 3px 5px 5px 5px;
|
||||
background-color: fade(white, 80%);
|
||||
text-shadow: 0 0 1px white;
|
||||
border-radius: 0 0 0 2px;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: @o-we-color-danger;
|
||||
}
|
||||
}
|
||||
.o_image {
|
||||
border: @odoo-border-image solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&.o_webimage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-image: none!important;
|
||||
}
|
||||
}
|
||||
&.o_selected .o_image {
|
||||
border-color: @odoo-brand-primary;
|
||||
box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
|
||||
}
|
||||
&:hover {
|
||||
.o_existing_attachment_remove {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.font-icons-icons {
|
||||
padding: 20px 0;
|
||||
|
||||
> span {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
margin: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
|
||||
&.o_selected {
|
||||
cursor: auto;
|
||||
background-color: @o-we-color-paper;
|
||||
box-shadow: 0px 0px 0px 1px @o-we-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#editor-media-image, #editor-media-document {
|
||||
.well {
|
||||
label {
|
||||
margin: auto 10px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// VIDEO TAB
|
||||
#editor-media-video .well {
|
||||
padding: 0;
|
||||
.o-flex-display();
|
||||
.o-flex-flow(row, wrap);
|
||||
|
||||
.o_video_dialog_form {
|
||||
.o-flex(1, 1, auto);
|
||||
min-width: 0;
|
||||
padding: 20px;
|
||||
|
||||
#o_video_form_group {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> textarea {
|
||||
width: 100%;
|
||||
min-height: 95px;
|
||||
padding-bottom: 25px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
> .o_validate_feedback {
|
||||
.o-position-absolute(auto, 10px, 10px);
|
||||
|
||||
> .fa {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.has-error > .o_validate_feedback > .fa-exclamation-triangle {
|
||||
display: block;
|
||||
}
|
||||
&.has-success > .o_validate_feedback > .fa-check {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#video-preview {
|
||||
position: relative;
|
||||
.o-flex(1, 0, 50%);
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
.o-justify-content(center);
|
||||
|
||||
.o-we-preview-box(0 19px);
|
||||
border: none;
|
||||
|
||||
.media_iframe_video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.o_video_dialog_iframe {
|
||||
.o-we-preview-content();
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&.alert {
|
||||
.o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
.o-we-preview-box();
|
||||
|
||||
h6 {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
.o_bg_img_opt_object {
|
||||
position: relative;
|
||||
background: white;
|
||||
min-height: 10px;
|
||||
.o-we-preview-content();
|
||||
|
||||
> 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LINK EDITOR DIALOG COLOR SELECTOR
|
||||
.o_link_dialog {
|
||||
.o_link_dialog_color > .o_link_dialog_color_item {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0; // Important for themes
|
||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
||||
border-radius: 50%;
|
||||
|
||||
input:checked + i::before {
|
||||
content: "\f00c";
|
||||
.o-position-absolute(@top: 6px, @left: 5px);
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
padding: 3px 9px;
|
||||
|
||||
> span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_link_dialog_preview {
|
||||
border-left: 1px solid @gray-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
z-index: @zindex-modal + 1;
|
||||
}
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</template>
|
||||
|
||||
<template id="less_helpers" inherit_id="web.less_helpers">
|
||||
<xpath expr="." position="inside">
|
||||
<xpath expr="link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.variables.less"/>
|
||||
</xpath>
|
||||
</template>
|
||||
@@ -90,7 +90,6 @@
|
||||
<t t-call="web.less_helpers"/>
|
||||
|
||||
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/web_editor/static/src/less/web_editor.ui.components.less"/>
|
||||
|
||||
<script type="text/javascript" src="/web_editor/static/lib/nearest/jquery.nearest.js"/>
|
||||
<script type="text/javascript" src="/web_editor/static/src/js/editor/editor.js"/>
|
||||
|
||||
@@ -1,484 +0,0 @@
|
||||
///
|
||||
/// This file regroups the style of website UI components (edition modals, forms, ...).
|
||||
///
|
||||
|
||||
.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
|
||||
color: transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
opacity: @opacity;
|
||||
.square(@size);
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
opacity: @opacity-hover;
|
||||
|
||||
&::after, &::before {
|
||||
background: @color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:after, &:before {
|
||||
content: '';
|
||||
margin-top: -1px;
|
||||
background: @color;
|
||||
.size(100%, @thickness);
|
||||
.o-position-absolute(50%, @left:0);
|
||||
.o-transform(rotate(45deg));
|
||||
}
|
||||
|
||||
&:after {
|
||||
.o-transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// MODALS
|
||||
body .modal {
|
||||
&.o_technical_modal {
|
||||
.o-w-preserve-base();
|
||||
.o-w-preserve-headings();
|
||||
.o-w-preserve-forms();
|
||||
.o-w-preserve-links();
|
||||
.o-w-preserve-btn();
|
||||
.o-w-preserve-wells();
|
||||
.o-w-preserve-modals();
|
||||
.o-w-preserve-tabs();
|
||||
|
||||
button.close {
|
||||
.o-w-close-icon(12px);
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
// MOBILE PREVIEW
|
||||
&.oe_mobile_preview {
|
||||
text-align: center;
|
||||
|
||||
.modal-dialog {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
|
||||
.close {
|
||||
color: lightgray;
|
||||
opacity: 1;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: black!important;
|
||||
border: 3px outset gray;
|
||||
border-radius: 20px;
|
||||
|
||||
.modal-header {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: @o-we-font-family;
|
||||
|
||||
h4 {
|
||||
color: lightgray;
|
||||
font-family:inherit;
|
||||
font-weight: normal;
|
||||
|
||||
.fa {
|
||||
margin-left: @grid-gutter-width/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: inherit!important;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
|
||||
@mobile-preview-width: 320px;
|
||||
@mobile-preview-height: 530px;
|
||||
|
||||
.o-flex-display();
|
||||
width: @mobile-preview-width + 15;
|
||||
height: @mobile-preview-height;
|
||||
.o-transition(all, 400ms);
|
||||
|
||||
&.o_invert_orientation {
|
||||
width: @mobile-preview-height + 15;
|
||||
height: @mobile-preview-width;
|
||||
}
|
||||
|
||||
> iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TOP MENU EDITOR
|
||||
.oe_menu_editor {
|
||||
ul {
|
||||
padding-left: 37px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: -1px;
|
||||
|
||||
.input-group-addon {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SEO CONFIGURATION
|
||||
&.oe_seo_configuration {
|
||||
#language-box {
|
||||
padding-right: 25px;
|
||||
background-color: white;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.table {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 15px;
|
||||
border-width: 0;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
> tfoot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.js_seo_has_content {
|
||||
td {
|
||||
&:first-child {
|
||||
width: 55%;
|
||||
padding-right: 15px;
|
||||
border: 1px solid @o-we-color-text-light;
|
||||
text-align: right;
|
||||
background-color: @o-we-color-paper;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
visibility: visible;
|
||||
padding-left: 15px;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
padding: 5px;
|
||||
.o-transition(padding, .3s);
|
||||
|
||||
&:first-child {
|
||||
border-width: 0 1px;
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 35px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
.oe_remove {
|
||||
.o-w-close-icon(10px, white, @o-we-color-danger, 2px);
|
||||
.o-position-absolute(5px, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
.o-animation(fadeInDownSmall, .3s);
|
||||
|
||||
&:first-child {
|
||||
td:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
padding-bottom: 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tfoot {
|
||||
display: table-footer-group;
|
||||
|
||||
hr {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
td, td:first-child {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.oe_seo_preview_g {
|
||||
list-style: none;
|
||||
font-family: arial, sans-serif;
|
||||
|
||||
.r {
|
||||
cursor: pointer;
|
||||
color:#1a0dab;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.s {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #545454;
|
||||
.kv {
|
||||
color: #006621;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.st {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ADD NEW PAGE MODAL
|
||||
#o_new_content_menu_choices {
|
||||
.o-position-absolute(@odoo-navbar-height, 0, 0, 0);
|
||||
position: fixed;
|
||||
.o-flex-display();
|
||||
.o-justify-content(center);
|
||||
.o-align-items(center);
|
||||
font-family: @o-we-font-family;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
.o-position-absolute(0, 0, 0, 0);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-color: black;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
> ul {
|
||||
.o-flex-display();
|
||||
.o-flex-flow(row, wrap);
|
||||
.o-justify-content(space-around);
|
||||
width: auto;
|
||||
max-width: 60%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
.animation(fadeInDownSmall 1s forwards);
|
||||
margin: 2em 32px;
|
||||
padding: 0 15px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LOGIN FORM
|
||||
.oe_login_form, .oe_signup_form, .oe_reset_password_form {
|
||||
max-width: 300px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
// CUSTOMIZE THEME
|
||||
#theme_error {
|
||||
background: #ffc;
|
||||
}
|
||||
#theme_customize_modal {
|
||||
overflow: visible;
|
||||
z-index: 1020;
|
||||
display: block;
|
||||
.modal-dialog {
|
||||
.o-position-absolute(@odoo-navbar-height + 10, 10px);
|
||||
width: auto;
|
||||
margin: 0;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.loading_backdrop {
|
||||
display: none;
|
||||
}
|
||||
&.loading .loading_backdrop {
|
||||
.o-position-absolute(0, 0, 0, 0);
|
||||
display: block;
|
||||
background: black;
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ACE EDITOR
|
||||
.o_ace_view_editor {
|
||||
.o-w-preserve-base();
|
||||
.o-w-preserve-btn();
|
||||
.o-w-preserve-forms();
|
||||
|
||||
.o-position-absolute(@odoo-navbar-height, 0, 0);
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
// POPOVER NAVIGATION
|
||||
.tour .popover-navigation {
|
||||
margin-left: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Do not show path behind the links in browser printing
|
||||
@media print {
|
||||
a[href]:after {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Pages Management
|
||||
.o_page_management_info{
|
||||
.o_switch{
|
||||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
.popover_dep{
|
||||
overflow-x: auto;
|
||||
}
|
||||
#edit_website_pages{
|
||||
.fa-check{
|
||||
color: #00a09d;
|
||||
}
|
||||
.fa-eye-slash{
|
||||
color: #00a09d;
|
||||
}
|
||||
th{
|
||||
background-color: @odoo-brand-primary;
|
||||
color: white;
|
||||
}
|
||||
td{
|
||||
a.fa{
|
||||
color: @odoo-brand-primary;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.text-muted{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
///
|
||||
/// This file regroups main website UI layout rules (when the user is connected).
|
||||
/// This file regroups main website UI layout rules (when the user is connected)
|
||||
/// and the UI components rules.
|
||||
///
|
||||
|
||||
// LAYOUTING
|
||||
@@ -73,3 +74,484 @@ div.o_checkbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.o-w-close-icon(@size:12px, @color:#000, @color-hover:#000, @thickness: 1px, @opacity: 0.7, @opacity-hover: 1) {
|
||||
color: transparent;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
opacity: @opacity;
|
||||
.square(@size);
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
opacity: @opacity-hover;
|
||||
|
||||
&::after, &::before {
|
||||
background: @color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:after, &:before {
|
||||
content: '';
|
||||
margin-top: -1px;
|
||||
background: @color;
|
||||
.size(100%, @thickness);
|
||||
.o-position-absolute(50%, @left:0);
|
||||
.o-transform(rotate(45deg));
|
||||
}
|
||||
|
||||
&:after {
|
||||
.o-transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
||||
// MODALS
|
||||
body .modal {
|
||||
&.o_technical_modal {
|
||||
.o-w-preserve-base();
|
||||
.o-w-preserve-headings();
|
||||
.o-w-preserve-forms();
|
||||
.o-w-preserve-links();
|
||||
.o-w-preserve-btn();
|
||||
.o-w-preserve-wells();
|
||||
.o-w-preserve-modals();
|
||||
.o-w-preserve-tabs();
|
||||
|
||||
button.close {
|
||||
.o-w-close-icon(12px);
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
// MOBILE PREVIEW
|
||||
&.oe_mobile_preview {
|
||||
text-align: center;
|
||||
|
||||
.modal-dialog {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
|
||||
.close {
|
||||
color: lightgray;
|
||||
opacity: 1;
|
||||
font-size: 25px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: black!important;
|
||||
border: 3px outset gray;
|
||||
border-radius: 20px;
|
||||
|
||||
.modal-header {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-family: @o-we-font-family;
|
||||
|
||||
h4 {
|
||||
color: lightgray;
|
||||
font-family:inherit;
|
||||
font-weight: normal;
|
||||
|
||||
.fa {
|
||||
margin-left: @grid-gutter-width/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: inherit!important;
|
||||
border-radius: 20px;
|
||||
padding: 15px;
|
||||
|
||||
@mobile-preview-width: 320px;
|
||||
@mobile-preview-height: 530px;
|
||||
|
||||
.o-flex-display();
|
||||
width: @mobile-preview-width + 15;
|
||||
height: @mobile-preview-height;
|
||||
.o-transition(all, 400ms);
|
||||
|
||||
&.o_invert_orientation {
|
||||
width: @mobile-preview-height + 15;
|
||||
height: @mobile-preview-width;
|
||||
}
|
||||
|
||||
> iframe {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TOP MENU EDITOR
|
||||
.oe_menu_editor {
|
||||
ul {
|
||||
padding-left: 37px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: -1px;
|
||||
|
||||
.input-group-addon {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SEO CONFIGURATION
|
||||
&.oe_seo_configuration {
|
||||
#language-box {
|
||||
padding-right: 25px;
|
||||
background-color: white;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.table {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 15px;
|
||||
border-width: 0;
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
> tfoot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.js_seo_has_content {
|
||||
td {
|
||||
&:first-child {
|
||||
width: 55%;
|
||||
padding-right: 15px;
|
||||
border: 1px solid @o-we-color-text-light;
|
||||
text-align: right;
|
||||
background-color: @o-we-color-paper;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
visibility: visible;
|
||||
padding-left: 15px;
|
||||
|
||||
@media screen and (min-width: @screen-md-min) {
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
padding: 5px;
|
||||
.o-transition(padding, .3s);
|
||||
|
||||
&:first-child {
|
||||
border-width: 0 1px;
|
||||
|
||||
.label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 35px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
|
||||
.oe_remove {
|
||||
.o-w-close-icon(10px, white, @o-we-color-danger, 2px);
|
||||
.o-position-absolute(5px, 5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
opacity: 0.8;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
.o-animation(fadeInDownSmall, .3s);
|
||||
|
||||
&:first-child {
|
||||
td:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
td:first-child {
|
||||
padding-bottom: 10px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tfoot {
|
||||
display: table-footer-group;
|
||||
|
||||
hr {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
td, td:first-child {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.oe_seo_preview_g {
|
||||
list-style: none;
|
||||
font-family: arial, sans-serif;
|
||||
|
||||
.r {
|
||||
cursor: pointer;
|
||||
color:#1a0dab;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.s {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #545454;
|
||||
.kv {
|
||||
color: #006621;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.st {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ADD NEW PAGE MODAL
|
||||
#o_new_content_menu_choices {
|
||||
.o-position-absolute(@odoo-navbar-height, 0, 0, 0);
|
||||
position: fixed;
|
||||
.o-flex-display();
|
||||
.o-justify-content(center);
|
||||
.o-align-items(center);
|
||||
font-family: @o-we-font-family;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
.o-position-absolute(0, 0, 0, 0);
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-color: black;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
> ul {
|
||||
.o-flex-display();
|
||||
.o-flex-flow(row, wrap);
|
||||
.o-justify-content(space-around);
|
||||
width: auto;
|
||||
max-width: 60%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
.animation(fadeInDownSmall 1s forwards);
|
||||
margin: 2em 32px;
|
||||
padding: 0 15px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LOGIN FORM
|
||||
.oe_login_form, .oe_signup_form, .oe_reset_password_form {
|
||||
max-width: 300px;
|
||||
position: relative;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
// CUSTOMIZE THEME
|
||||
#theme_error {
|
||||
background: #ffc;
|
||||
}
|
||||
#theme_customize_modal {
|
||||
overflow: visible;
|
||||
z-index: 1020;
|
||||
display: block;
|
||||
.modal-dialog {
|
||||
.o-position-absolute(@odoo-navbar-height + 10, 10px);
|
||||
width: auto;
|
||||
margin: 0;
|
||||
font-family: Roboto;
|
||||
}
|
||||
.loading_backdrop {
|
||||
display: none;
|
||||
}
|
||||
&.loading .loading_backdrop {
|
||||
.o-position-absolute(0, 0, 0, 0);
|
||||
display: block;
|
||||
background: black;
|
||||
opacity: 0.3;
|
||||
z-index: 1;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ACE EDITOR
|
||||
.o_ace_view_editor {
|
||||
.o-w-preserve-base();
|
||||
.o-w-preserve-btn();
|
||||
.o-w-preserve-forms();
|
||||
|
||||
.o-position-absolute(@odoo-navbar-height, 0, 0);
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
// POPOVER NAVIGATION
|
||||
.tour .popover-navigation {
|
||||
margin-left: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Do not show path behind the links in browser printing
|
||||
@media print {
|
||||
a[href]:after {
|
||||
content: initial;
|
||||
}
|
||||
}
|
||||
|
||||
// Pages Management
|
||||
.o_page_management_info{
|
||||
.o_switch{
|
||||
padding-top: 7px;
|
||||
}
|
||||
}
|
||||
.popover_dep{
|
||||
overflow-x: auto;
|
||||
}
|
||||
#edit_website_pages{
|
||||
.fa-check{
|
||||
color: #00a09d;
|
||||
}
|
||||
.fa-eye-slash{
|
||||
color: #00a09d;
|
||||
}
|
||||
th{
|
||||
background-color: @odoo-brand-primary;
|
||||
color: white;
|
||||
}
|
||||
td{
|
||||
a.fa{
|
||||
color: @odoo-brand-primary;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.text-muted{
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<!-- Assets -->
|
||||
<template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" href="/website/static/src/less/website.backendDashboard.less"/>
|
||||
<link rel="stylesheet" href="/website/static/src/less/website.backend.less"/>
|
||||
</xpath>
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
<script type="text/javascript" src="/website/static/src/js/backend/button.js"/>
|
||||
@@ -20,9 +20,8 @@
|
||||
|
||||
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Website Assets">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/less" href="/website/static/src/less/website.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/website/static/src/less/website.ui.components.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/website/static/src/less/website.snippets.less"/>
|
||||
<link rel="stylesheet" type="text/less" href="/website/static/src/less/website.zoomodoo.less"/>
|
||||
</xpath>
|
||||
<xpath expr="//script[last()]" position="after">
|
||||
|
||||
Reference in New Issue
Block a user