@import "common"

/* ---- SummerNote Minimal Reset ---- {{{ */

.note-popover
    .popover
        position: fixed !important
        top: -9px !important
        right: auto !important
        left: 300px !important
        border: 0
        background: transparent
        box-shadow: none
        -webkit-box-shadow: none
        z-index: 1040
    .popover-content
        padding: 0 !important
        margin: 0 0 0 6px !important
        > div
            padding-top: 0 !important
            margin-top: 0 !important
        > a
            border-radius: 3px
            background-color: #fff
            border-color: #ccc
            padding: 4px 10px
            font-size: 14px
            line-height: 1.5
        .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
        > 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

        .colorpicker
            margin: 0
            td > *
                width: 20px
                height: 20px
                padding: 0
                margin: 0
                border: 1px solid #fff

    .popover .popover-content .dropdown-menu a
        display: block
    .arrow
        display: none

.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
.editor_enable [data-oe-readonly]:hover
    cursor: default

// }}}
/* 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

/* 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

/* ---- OpenERP Style ---- {{{ */

.oe_website_editorbar
    position: fixed
    top: 0
    right: 0
    display: block
    width: 100%
    padding: 2px
    margin: 0
    z-index: 20000
    @include background(#414141, linear-gradient(#646060, #262626))
    +box-sizing(border-box)
    li
        display: inline
        color: #eee
        &:hover
            background: rgba(0,0,0,0.2)
            +text-shadow(black 0px 0px 3px)
            color: white

.oe_website_editorbar .oe_rte_toolbar
    div.dropdown
        display: inline-block
        li
            display: list-item

    button
        font-family: FontAwesome
        font-weight: normal
        font-style: normal
        text-decoration: inherit
        &.oe_button_list
            padding-right: 3px
            &:after
                content: "\F0D7"
                padding-left: 6px

.oe_editable:focus
    outline: none !important

.css_editable_display
    display: block !important

.css_editable_hidden
    display: none !important

.editor_enable .css_editable_mode_hidden
    display: none

.editor_enable .css_non_editable_mode_hidden
    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

.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

#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

.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:before
    content: '' !important

[data-oe-type=html].oe_no_empty:empty
    background-image: none !important
    height: 16px !important

#website-top-edit
    width: 100%
    > ul > li
        margin: 0

#website-top-navbar
    min-height: 34px
    height: 34px
    form
        margin: 0
        button, a
            padding: 4px 8px 4px 8px
            margin-top: 2px
            font-size: 13px

// }}}

/* ---- 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
    .col-sm-2 > *
        line-height: 2em

// }}}

/* ---- MENU ---- {{{ */

div.oe_menu_buttons
    top: -8px
    right: -8px

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

// }}}

/* ---- 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

.modal-dialog.select-media
    width: 80%

.modal .existing-attachments
    .pager
        margin: 0

.modal .image-preview
    margin-bottom: 0.5em

.modal-footer
    text-align: left

.modal.nosave
    .wait
        display: inline-block !important
        visibility: visible !important
    .modal-body
        .filepicker, .image-preview
            display: none
        .wait
            width: 100%
    .modal-footer .save
        display: none

// fontawesome modal
.modal
    .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

.oe_carlos_danger
    outline: 1px solid red !important
    background-color: #ffd9dd !important

.hover-edition
    display: inline-block
    position: absolute
    top: 0
    left: 0
    // This z-index is due to .navbar of bootstrap & jQuery-transfo
    z-index: 1001
.preview-container
    text-align: center
    line-height: 100px
    height: 100px
    > *
        max-height: 100px
        line-height: 100px
        margin: 0 auto
        display: inline-block

// fontawesome
.note-editable .fa
    cursor: pointer

.img-responsive
    text-align: center

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
    min-height: 24px

// }}}

/* ---- MOBILE PREVIEW ---- {{{ */

$mobile_preview_background: #000000
$mobile_preview_border: #1C1F1F
$icon_close: #E00101
.oe_mobile_preview
    &.modal .modal-content
        height: 660px
        background-color: $mobile_preview_background
        border: 2px solid $mobile_preview_border
        +border-radius(10px)
        margin: auto
        top: 0
        left: 0
        bottom: 0
        right: 0
        max-width: 330px
        .modal-header
            background-color: $mobile_preview_background
            border-bottom: 0
            +border-top-left-radius(10px)
            +border-top-right-radius(10px)
            .modal-title
                color: $mobile_preview_border
            .close
                color: lightgrey
                +opacity(1)
            .close:hover
                color: $icon_close
                +opacity(1)
        .modal-body
            background-color: $mobile_preview_background
            max-height: 600px
            padding: 0
            margin: 0
            .oe_mobile_viewport
                width: 320px
                height: 568px
                padding: 5px
                border: none
        .modal-footer
            background-color: $mobile_preview_background

// }}}

/* ---- SEO TOOLS ---- {{{ */

$remove_color: $icon_close
$in_title_color: #5cb85c
$in_description_color: #428bca
$in_body_color: #5bc0de
$highlighted_text_color: #ffffff
.oe_seo_configuration
    .modal-dialog
        width: 80%
    .oe_remove
        color: $remove_color
    .oe_seo_suggestion
        cursor: pointer
    .oe_seo_keyword
        padding: .2em .4em .2em .5em
        +border-radius(.4em)
    li.oe_seo_preview_g
        line-height: 1.2
        list-style: none
        list-style-image: none
        list-style-position: outside
        list-style-type: none
        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: rgb(30, 15, 190)
                text-decoration: underline
                text-transform: none
                em
                    font-style: normal !important
        .s
            color: #444
            max-width: 42em
        .kv,.slp
            display: block
            margin-bottom: 1px
        .f
            color: #666
            margin-bottom: 1px
            cite
                color: #006621
                font-style: normal
                font-size: 14px
        .st
            line-height: 1.24


// }}}

/* ---- ACE EDITOR ---- {{{ */

$editorbar_height: 30px
$infobar_height: 20px
// TODO Fix => might break with themes

.oe_ace_view_editor
    position: fixed
    // top property is set programmatically
    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: $editorbar_height
        .oe_view_list
            width: 50%
            height: $editorbar_height
            @include editor-font
        .btn
            height: $editorbar_height
            padding: 0 4px 0 4px
            @include editor-font
    .ace_editor
        position: absolute
        top: $editorbar_height + $infobar_height
        right: 0
        // bottom property is set programmatically
        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
        display: none

.oe_include_bundles
    font-weight: normal
    padding: 0 8px

// }}}

/* ---- CUSTOMIZE THEME ---- {{{ */
#theme_error
    background: #ffc
#theme_customize_modal
    overflow: auto
    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
        display: block
        text-align: center
        > div, > img
            border: 1px solid #fff
            line-height: 30px
            font-size: 0.9em
            margin: 2px 4px
        &.checked
            > div, > 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