summaryrefslogtreecommitdiff
path: root/addons/web_editor/static/src/less/web_editor.ui.less
diff options
context:
space:
mode:
Diffstat (limited to 'addons/web_editor/static/src/less/web_editor.ui.less')
-rw-r--r--addons/web_editor/static/src/less/web_editor.ui.less569
1 files changed, 569 insertions, 0 deletions
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 e7ba19f332d..5e1261a1094 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -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;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-10-23 23:47:04 +0000