@charset "utf-8"

/* ---- CKEditor Minimal Reset ---- */

.navbar.navbar-inverse .cke_chrome
    border: none

.navbar.navbar-inverse .cke_inner
    background: transparent

.navbar.navbar-inverse
    .cke_toolbar
        position: relative
        top: 1px
    .cke_combo_button
        padding-top: 3px
        padding-bottom: 3px
    .cke_button
        padding-top: 7px
        padding-bottom: 7px

.navbar.navbar-inverse .cke_top
    background: transparent
    border: none
    box-shadow: none
    -webkit-box-shadow: none
    -moz-box-shadow: none

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

.oe_website_editorbar
    position: fixed
    top: 0
    right: 0
    display: block
    width: 100%
    padding: 2px
    margin: 0
    z-index: 20000
    background-color: #414141
    background: -webkit-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_non_editable_mode_hidden
    display: none

.oe_carousel_options
    cursor: pointer
    position: absolute
    white-space: nowrap
    z-index: 1
    display: none
    > *
        display: inline-block !important
        vertical-align: middle !important
        position: relative !important
        top: +2px

/* ---- EDITOR BAR ---- */

table.editorbar-panel
    cursor: pointer
    width: 100%
    td
        border: 1px solid #aaa
    td.selected
        background-color: #b1c9d9

/* ---- RTE ---- */

// bootstrap makes .btn elements unselectable -> RTE double-click can't know
// about them either
.oe_editable .btn
    -webkit-user-select: auto
    -moz-user-select: auto
    -ms-user-select: auto
    -o-user-select: auto
    user-select: auto

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

.modal .existing-attachments
    .pager
        margin: 0

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

/* ---- SNIPPET EDITOR ---- */

#oe_snippets
    position: fixed
    left: 0px
    right: 0px
    top: 50px
    background: rgb(40,40,40)
    box-shadow: 0px 10px 10px -10px black inset
    z-index: 1010
    overflow: hidden
    height: 110px
    &:hover
        height: auto
    .scroll
        white-space: nowrap
        overflow-y: auto
    .nav
        padding: 3px 15px
        width: 162px
        background: #444444
        > li
            display: block
            float: none
            > a
                padding: 2px 10px !important
                width: 100%
                display: block
        position: fixed
        z-index: 1
        height: 108px
    .pill-content
        display: inline-block
        height: 110px
        white-space: nowrap
        padding-left: 166px
        > div
            display: inline-block
            label
                width: 44px
                height: 100%
                color: #fff
                padding-left: 10px
                div
                    width: 100px
                    text-align: center
                    -webkit-transform: translate(-39px, 44px) rotate(-90deg)
                    -moz-transform: translate(-39px, 44px) rotate(-90deg)
                    -o-transform: translate(-39px, 44px) rotate(-90deg)
                    transform: translate(-39px, 44px) rotate(-90deg)
                    -webkit-transform-origin: 50% 50%
                    -moz-transform-origin: 50% 50%
                    -ms-transform-origin: 50% 50%
                    -o-transform-origin: 50% 50%
                    transform-origin: 50% 50%

.oe_snippet
    display: inline-block
    vertical-align: top
    width: 108px
    height: 108px
    border-radius: 3px
    margin: 1px
    margin-top: 0px
    position: relative
    overflow: hidden
    -webkit-user-select: none
    user-select: none
    cursor: move
    pointer-events: none

    .oe_snippet_thumbnail
        pointer-events: auto
        text-align: center
        height: 100%
        background: transparent
        color: white
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
        position: relative
        span, div
            line-height: 18px
    & > :not(.oe_snippet_thumbnail)
        display: none !important

#oe_snippets .oe_snippet_thumbnail
    background: rgb(116, 116, 116)
    background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset

/* ---- SNIPPETS DROP ZONES ---- */


.col-md-12
    float: left
.oe_drop_zone.oe_insert
    display: block
    height: 48px
    margin: 0px
    margin-bottom: -48px
    -webkit-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_overlay
        background: rgba(153, 0, 255, 0.17)
        border-radius: 3px

.oe_drop_zone, .oe_drop_zone_style
    background: rgba(153, 0, 255, 0.17)
    border-radius: 3px
    &.oe_hover
        background: rgba(0, 255, 133, 0.22)
        z-index: 1001

.oe_drop_zone_style
    color: white
    height: 48px
    margin-bottom: 32px

/* ---- SNIPPET MANIPULATOR ---- */

.oe_overlay
    display: block
    position: absolute
    background: transparent
    border-radius: 3px
    opacity: 0
    transition: opacity 100ms linear
    box-sizing: border-box
    pointer-events: none
    &.oe_hover
        opacity: 1
        cursor: pointer
    &.oe_selected, &.oe_active
        opacity: 1
        border-style: dashed
        border-width: 1px
        box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
    &.oe_selected
        border-color: rgba(0, 153, 255, 0.5)
    .oe_handle
        display: none !important
    &.oe_active
        border-color: rgba(153, 0, 255, 0.5)
        .oe_handle
            display: block !important
            pointer-events: auto
            &:before
                position: relative
                top: 50%
                left: 50%
                display: block
                background: rgba(255, 255, 255, 1)
                border: solid 1px rgba(153, 0, 255, 1)
                border-radius: 8px
                width: 16px
                height: 16px
                margin: -8px
                padding-left: 1px
                font-size: 14px
                line-height: 14px
                color: rgba(153, 0, 255, 1)
                -webkit-transition: background 100ms linear
            &:hover:before
                background: rgba(153, 0, 255, 1)
                color: #fff
        .oe_handle.e:before
            content: "⇨"
        .oe_handle.s:before
            content: "⇩"
        .oe_handle.w:before
            content: "⇦"
        .oe_handle.n:before
            content: "⇧"

    .icon.btn
        display: inline-block

    .oe_overlay_options
        position: absolute
        width: 100%
        text-align: center
        top: -11px
        display: none
        z-index: 1002
        > *
            margin: 0 -2px 0 -3px
            display: inline-block
        *
            border-radius: 0
        .btn, a
            pointer-events: auto
            cursor: pointer
        .dropdown-menu
            text-align: left
            min-width: 180px
        .oe_label
            position: absolute
            top: 3px
            right: 6px
            background: #fff
            font-size: 75%
            color: rgba(153, 0, 255, 0.5)
            padding: 0 5px
        .dropdown-menu select,.dropdown-menu input
            display: block
    &.oe_active .oe_overlay_options
        display: block

.oe_handle
    pointer-events: auto
    position: absolute
    top: 50%
    left: 50%
    display: block
    box-sizing: border-box
    width: 8px
    height: 8px
    margin: -4px

.oe_handle.n
    left: 2px
    width: 100%
    top: 0px
    cursor: s-resize
.oe_handle.e
    left: auto
    top: 2px
    height: 100%
    right: 0px
    cursor: w-resize
.oe_handle.s
    top: auto
    left: 2px
    width: 100%
    bottom: 0px
    cursor: n-resize
.oe_handle.w
    top: 2px
    height: 100%
    left: 0px
    cursor: e-resize

.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


/* ---- 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
        border-radius: 10px
        border-color: $mobile_preview_border
        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
    .keyword-in-title
        background-color: $in_title_color
        color: $highlighted_text_color
    .keyword-in-description
        background-color: $in_description_color
        color: $highlighted_text_color
    .keyword-in-body
        background-color: $in_body_color
        color: $highlighted_text_color

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

$ace_width: 720px
$editorbar_height: 40px
// TODO Fix => might break with themes
$navbar_height: 51px

.oe_ace_view_editor
    transition: all 0.2s ease-in
    -webkit-transition: all 0.2s ease-in
    -ms-transition: all 0.2s ease-in
    -o-transition: all 0.2s ease-in
    -moz-transition: all 0.2s ease-in
    opacity: 0.3
    position: fixed
    top: $navbar_height
    right: 0
    z-index: 1000
    height: 100%
    .oe_ace_view_editor_title
        width: 100%
        padding-top: 4px
        padding-left: 4px
        height: $editorbar_height
        background: #2F3129
        .oe_view_list
            width: 50%
            height: $editorbar_height - 8px
        .btn
            height: $editorbar_height - 8px
            padding: 0 4px 0 4px
    .ace_editor
        position: absolute
        top: $editorbar_height
        right: 0
        bottom: $navbar_height
        left: 0
        width: $ace_width
    &:hover
        opacity: 1
    &.oe_ace_open
        width: $ace_width
    &.oe_ace_closed
        width: 0
        opacity: 0