@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

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

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

.oe_snippet_manipulator
    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_boxsize, .oe_margin
        position: absolute
        pointer-events: none
    .oe_handle
        display: none
    &.oe_hover
        opacity: 1
        cursor: pointer
    &.oe_selected, &.oe_active, .oe_boxsize, .oe_margin
        opacity: 1
        background: transparent
        border: dashed 1px rgba(153, 0, 255, 0.5)
        box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), 0px 0px 0px 1px rgba(255,255,255,0.3) inset
        .oe_handle
            pointer-events: auto
    .oe_buttons
        display: none
        position: absolute
        right: 16px
        top: 16px
        background: rgb(173, 0, 255)
        color: white
        padding: 0px 2px
        border-radius: 3px
        .oe_icon
            display: inline-block
            padding: 8px
            cursor: pointer
    &.oe_active
        z-index: 100000
        .oe_handle, .oe_buttons
            display: block

.oe_handle
    pointer-events: auto
    position: absolute
    top: 50%
    left: 50%
    display: block
    background: rgba(255, 255, 255, 1)
    border: solid 1px rgba(153, 0, 255, 1)
    box-sizing: border-box
    border-radius: 8px
    width: 16px
    height: 16px
    margin: -8px
    -webkit-transition: background 100ms linear
    &:hover
        background: rgb(153, 0, 255)

.oe_handle.nw,.oe_handle.n,.oe_handle.ne
    top: 0px
.oe_handle.ne,.oe_handle.e,.oe_handle.se
    left: auto
    right: 0px
.oe_handle.sw,.oe_handle.s,.oe_handle.se
    top: auto
    bottom: 0px
.oe_handle.nw,.oe_handle.w,.oe_handle.sw
    left: 0px
.oe_handle.n
    cursor: n-resize
.oe_handle.ne
    cursor: ne-resize
.oe_handle.nw
    cursor: nw-resize
.oe_handle.s
    cursor: s-resize
.oe_handle.se
    cursor: se-resize
.oe_handle.sw
    cursor: sw-resize
.oe_handle.e
    cursor: e-resize
.oe_handle.w
    cursor: w-resize


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