@charset "utf-8"

@import "compass/css3"
@import "compass/css3/user-interface"
@import "compass/css3/transition"

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

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

// ---- TRANSLATIONS ---- {{{
.oe_translate_examples li
    margin: 10px
    padding: 4px
.oe_translatable_text
    outline: 1px solid black
.oe_translatable_field
    outline: 1px dashed black
.oe_translatable_text.oe_dirty, .oe_translatable_field.oe_dirty
    outline-color: red
.oe_translatable_text.oe_dirty:empty
    padding: 0 10px
.oe_translatable_todo
    background: rgb(255, 255, 182)
// }}}

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

// bootstrap makes .btn elements unselectable -> RTE double-click can't know
// about them either
.oe_editable .btn
    @include user-select(auto)

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

.modal .existing-attachments
    .pager
        margin: 0

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

// "remove" drag & drop of CKE widgets
.cke_widget_drag_handler_container
    display: none !important

/* ---- 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
    &:hover
        height: auto
    .scroll
        white-space: nowrap
        overflow-y: auto
    .nav
        > li
            display: inline-block
            float: none
            font-size: 13px
            > a
                padding: 2px 10px !important
                width: 100%
                display: block
                border: 0
        position: fixed
        z-index: 1
        border: 0
    .tab-content
        margin-top: 24px
        display: inline-block
        white-space: nowrap
        > div
            background: rgb(0,0,0)
            padding: 5px
            label
                width: 44px
                height: 100%
                color: #fff
                padding-left: 10px
                div
                    width: 100px
                    text-align: center
                    @include transform( translate(-39px, 44px) , rotate(-90deg) ) 
                    @include transform-origin(50% 50%)

.oe_snippet
    display: inline-block
    vertical-align: top
    width: 100px
    height: 100px
    margin: 1px
    margin-top: 0px
    position: relative
    overflow: hidden
    +user-select(none)
    cursor: move
    pointer-events: none
    .oe_snippet_thumbnail
        pointer-events: auto
        text-align: center
        height: 100%
        background: transparent
        color: white
        position: relative
        .oe_snippet_thumbnail_title
            font-size: 12px
            display: block
        .oe_snippet_thumbnail_img
            +box-shadow(inset 0px 0px 0px 3px #333333)
        span, div
            line-height: 18px
    & > :not(.oe_snippet_thumbnail)
        display: none !important

#oe_snippets .oe_snippet_thumbnail
    @include background(#747474, radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4)))

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

.oe_drop_zone.oe_insert
    display: block
    height: 48px
    margin: 0px
    margin-top: -4px
    margin-bottom: -44px
    @include 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
    padding-top: 12px

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

.oe_overlay
    display: none
    position: absolute
    background: transparent
    +border-radius(3px)
    @include transition(opacity 100ms linear)
    +box-sizing(border-box)
    pointer-events: none
    &.oe_active
        display: block
        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)
        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)
                @include 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
        z-index: 1002
        .btn, a
            pointer-events: auto
            cursor: pointer
        .dropdown
            display: inline-block
        .dropdown-menu
            text-align: left
            min-width: 180px
        .dropdown-menu select,.dropdown-menu input
            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 $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)

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

$ace_width: 720px
$editorbar_height: 40px
// TODO Fix => might break with themes
$navbar_height: 51px
@mixin pointer-events($type: none)
    $type: unquote($type)
    @include experimental(pointer-events, $type,-moz, -webkit, not -o, not -ms, -khtml, official)


@mixin editor-font
    font-size: 14px
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace
    line-height: normal
.oe_ace_view_editor
    @include 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
            @include editor-font
        .btn
            height: $editorbar_height - 8px
            padding: 0 4px 0 4px
            @include editor-font
    .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)
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: