odoo/addons/website/static/src/css/editor.sass

@import "common"

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

.cke_editable .css_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_or
    color: white
    padding: 0 0 0 1em
.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)

// }}}

/* ---- 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-image
    width: 80%

.modal .existing-attachments
    .pager
        margin: 0

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

.modal-footer
    text-align: left

.modal.nosave .modal-footer
    button.save
        display: none
    button.wait
        display: inline-block !important
        visibility: visible !important

.existing-attachments .pager .disabled
    display: none

// wrapper positioned relatively for drag&drop widget which is disabled below.
// Breaks completely horribly crazy products listing page, so take it out.
.cke_widget_wrapper
    position: static !important

// prevent inline widgets from entirely disappearing when their (textual)
// content is removed
.cke_widget_editable
    // basic config
    &:empty:after
        opacity: 0.3
        white-space: pre-wrap
    // no @placeholder -> just add some padding
    &:not([placeholder]):empty::after
        content: " "
    // with placeholder and when not (yet) focused -> display placeholder
    &[placeholder]:not(:focus):empty::after
        content: attr(placeholder)

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

.hover-edition-button
    position: absolute
    top: 0
    left: 0
    // This z-index is due to .navbar of bootstrap
    z-index: 1000

// }}}

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

#oe_snippets
    position: fixed
    left: 0px
    right: 0px
    // top property is set programmatically
    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: none
    .nav
        display: inline-block
        border-bottom: none !important
        vertical-align: middle
        min-width: 120px
        > li
            display: block
            float: none
            &.active
                background: black !important
            > a
                padding: 2px 10px !important
                width: 100%
                display: block
                border: 0
        z-index: 1
    .pill-content
        border: 0
    .tab-content
        display: inline-block
        white-space: nowrap
        background: black
        > div
            background: rgb(0,0,0)
            label
                width: 44px
                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
    float: left
    vertical-align: top
    width: 93px
    margin-left: 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
        &:hover
            .oe_snippet_thumbnail_img
                @include transform( scale(.95,.95))
        .oe_snippet_thumbnail_title
            font-size: 12px
            display: block
            +text-shadow(0 0 2px rgb(0,0,0))
        .oe_snippet_thumbnail_img
            height: 74px
            @include transition(all 150ms linear)
            +box-shadow(inset 0px 0px 0px 3px #333333)
            @include transform( scale(1,1))
        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
        +border-radius(3px)
        //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
        //background-size: 100px 100px
        background: rgba(153, 0, 255,.5)

.oe_drop_zone, .oe_drop_zone_style
    border: none
    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.1) ,rgba(255,255,255,.1) 35px, rgba(0,0,0,.1) 35px, rgba(0,0,0,.1) 75px))
    //background-size: 100px 100px
    background: rgba(153, 0, 255, .3)
    +border-radius(4px)
    &.oe_hover
        background: rgba(0, 255, 133, .3)
        z-index: 1001

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

// }}}

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

.resize_editor_busy
    background-color: rgba(0,0,0,0.3)
.oe_overlay
    display: none
    position: absolute
    background: transparent
    //@include background-image( repeating-linear-gradient(45deg, rgba(255,255,255,.02) ,rgba(255,255,255,.02) 35px, rgba(0,0,0,.02) 35px, rgba(0,0,0,.02) 75px))
    +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(0, 0, 0, 0.5)
    .oe_handle
        display: block !important
        pointer-events: auto
        position: absolute
        top: 50%
        left: 50%
        +box-sizing(border-box)
        width: 12px
        height: 12px
        margin: -2px
        &:before
            position: relative
            top: 50%
            left: 50%
            display: block
            background: rgba(255, 255, 255, 1)
            border: solid 1px rgba(0, 0, 0, .2)
            +border-radius(5px)
            width: 18px
            height: 18px
            margin: -9px
            padding-left: 1px
            font-size: 14px
            line-height: 14px
            font-family: FontAwesome
            color: rgba(0,0,0,.5)
            @include transition(background 100ms linear)
        &:hover:before
            background: rgba(0, 0, 0, .5)
            color: #fff
            +box-shadow(0 0 5px 3px rgba(255,255,255,.7))
    .oe_handle.e
        left: auto
        top: 2px
        height: 100%
        right: -4px
        cursor: w-resize
        &:before
            content: "\F061"
    .oe_handle.s, .oe_handle.size
        top: auto
        left: 2px
        width: 100%
        bottom: -4px
        cursor: n-resize
        &:before
            content: "\F063"
    .oe_handle.size
        border-style: dashed
        border-width: 0 0 1px 0
        border-color: rgba(0, 0, 0, 0.5)
        &:before
            content: "Resize"
            width: 64px
            text-align: center
            margin-left: -32px
            margin-top: -4px
    .oe_handle.w
        top: 2px
        height: 100%
        left: -4px
        cursor: e-resize
        &:before
            content: "\F060"
    .oe_handle.n
        left: 2px
        width: 100%
        top: -4px
        cursor: s-resize
        &:before
            content: "\F062"

    .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

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

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

.oe_ace_view_editor
    position: fixed
    // top property is set programmatically
    right: 0
    z-index: 1000
    height: 100%
    .oe_ace_view_editor_title
        width: 100%
        padding-top: 0
        padding-left: 0
        height: $editorbar_height
        background: #2F3129
        .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
        right: 0
        // bottom property is set programmatically
        left: 0
        .ace_gutter
            cursor: ew-resize
    &.oe_ace_open
        +opacity(0.97)
    &.oe_ace_closed
        z-index: -1000
        +opacity(0)

// }}}

/* ---- EDITOR TOUR ---- {{{ */

div.tour-backdrop
    z-index: 2009
.popover.tour
    z-index: 2010
.popover.fixed
    position: fixed

// }}}

// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: