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

@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
    z-index: 10
    display: block
    width: 100%
    padding: 2px
    margin: 0px
    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

.oe_carousel_options
    cursor: pointer
    position: absolute
    white-space: nowrap
    z-index: 1
    display: none

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

    .oe_snippet_body
        display: none
    & > *
        pointer-events: none

    & > *: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: rgba(153, 0, 255, 0.1)
    border-radius: 3px
    border: solid 1px rgba(153, 0, 255, 0.5)
    opacity: 0
    transition: opacity 100ms linear
    & > .oe_handle
        display: none
    &:hover,&.oe_hover
        opacity: 1
        & > .oe_handle
            display: block

.oe_handle
    position: absolute
    top: 50%
    left: 50%
    display: block
    background: rgba(255, 255, 255, 1)
    border: solid 1px rgba(153, 0, 255, 0.5)
    box-sizing: border-box
    border-radius: 2px
    width: 16px
    height: 16px
    margin: -8px
    cursor: move
    -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

/* ---- 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_seo_keywords_list
        &.container
            margin: 0.1em
        .oe_seo_keyword
            float: left
            padding-right: 0.5em
        .oe_remove
            color: $remove_color