@charset "utf-8"

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

.navbar.navbar-inverse .cke_chrome
    border: none

.navbar.navbar-inverse .cke_inner
    background: transparent

.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: 10000
    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.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

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

#oe_snippets
    position: fixed
    left: 0px
    right: 0px
    bottom: 0px
    max-height: 280px
    min-height: 140px
    background: rgb(40,40,40)
    box-shadow: 0px 10px 10px -10px black inset
    overflow-y: auto
    z-index: 100
    .nav-pills
        padding: 3px 8px
        background: #444444
        > li > a
            padding: 2px 10px !important
    .pill-content
        height: 140px

.oe_snippet
    display: inline-block
    vertical-align: top
    background: white
    width: 120px
    height: 120px
    border-radius: 3px
    margin: 10px
    margin-right: 0px
    position: relative
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
    overflow: hidden
    -webkit-user-select: none
    user-select: none
    cursor: move

    .oe_snippet_thumbnail.oe_label
        text-align: center
        background: rgb(116, 116, 116)
        background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
        height: 100%
        line-height: 120px
        color: white
        text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset

    .oe_snippet_body
        display: none
    & > *
        pointer-events: none
    & > :not(.oe_snippet_body):not(.oe_snippet_thumbnail)
        display: none !important

    & > *:first-child:not(.oe_snippet_thumbnail)
        display: block
        -webkit-transform-origin-x: 5px
        -webkit-transform-origin-y: 10px
        -webkit-transform: scale(0.095)


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


.oe_drop_zone.oe_insert
    display: block
    height: 32px
    margin: -16px 0px
    -webkit-transition: margin 250ms linear
    &:first-child:not(:last-child)
        margin-top: -8px
        margin-bottom: -24px
    &:last-child:not(:first-child)
        margin-top: -24px
        margin-bottom: -8px
    &:before
        content: ""
        display: block
        border-top: dashed 2px rgba(209, 178, 255, 0.72)
        position: relative
        top: 16px
    &:first-child:not(:last-child):before
        top: 8px
    &:last-child:not(:first-child):before
        top: 24px
    &.oe_hover:before
        border-top: dashed 2px rgba(116, 255, 161, 0.72)

.oe_drop_zone.oe_overlay
    position: absolute
    background: rgba(153, 0, 255, 0.17)
    border-radius: 3px

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

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

.oe_overlay
    display: block
    position: absolute
    background: transparent //rgba(153, 0, 255, 0.05)
    border-radius: 3px
    opacity: 0
    transition: opacity 100ms linear
    box-sizing: border-box
    pointer-events: none
    .oe_handle
        display: none !important
    &.oe_hover
        opacity: 1
        cursor: pointer
    &.oe_selected, &.oe_active
        opacity: 1
        background: transparent
        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_active
        border-color: rgba(153, 0, 255, 0.5)
        .oe_handle
            display: block !important
            pointer-events: auto

    .oe_overlay_options
        display: none
        z-index: 99
        .oe_option
            pointer-events: auto
            position: absolute
            &.n
                top: 0px
            &.e
                right: 0px
            &.s
                bottom: 0px
            &.w
                left: 0px
    &.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


/* ---- 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
.oe_seo_configuration
    .modal-dialog
        width: 80%
    .oe_remove
        color: $remove_color
    .oe_seo_suggestion
        cursor: pointer

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