lespoupeesrusses/promethee

.promethee-open
    $real-width: 300px
    $real-height: 500px
    $rendered-width: 1280px
    $rendered-height: $real-height/$real-width*$rendered-width
    $size-ratio: $real-width/$rendered-width

    height: $real-height
    overflow: hidden
    position: relative
    text-align: center
    width: $real-width

    &,
    &::after,
    &__logo,
    &__button,
    &__thumb-preview
        cursor: pointer

    &::after
        border: 1px solid #253742
        box-sizing: border-box
        content: ''
        display: block
        height: 100%
        left: 0
        position: absolute
        top: 0
        width: 100%

    &__logo
        padding: 20px
        svg
            height: 50px
            width: 50px

    &__thumb-preview
        background: $promethee-light-grey
        border: none
        display: block
        height: $rendered-height
        margin-top: 20px
        transform: scale(#{$size-ratio})
        transform-origin: 0 0
        width: $rendered-width

.promethee-edit
    background: white
    bottom: 0
    left: 0
    overflow: hidden
    padding-top: 50px
    position: fixed
    right: 0
    top: 0
    z-index: 10000

    .navbar-nav
        flex-direction: row

    &__navbar
        background: #232323
        border: none
        border-radius: 0
        left: 0
        margin-bottom: 0
        position: fixed
        top: 0
        width: 100%
        z-index: 10000
        ul.nav li
            position: relative
            a
                color: white
                &:hover
                    color: $promethee-light-grey
        .dropdown-menu
            background: #232323
            min-width: 20px
            position: absolute

    &__icon
        svg path
            fill: white

    &__wrapper
        padding: 30px

    .video-neutralizing-overlay
        background: transparent
        bottom: 0
        left: 0
        position: absolute
        right: 0
        top: 0


.promethee_uploader--preview
    margin-top: 5px
    img, video
        display: block
        max-height: 34px
    video
        max-width: 50px
    &__delete
        cursor: pointer
        float: right
        margin-left: 5px


.promethee-edit
    .row
        position: relative
        &__background
            background-repeat: no-repeat
            bottom: 0
            left: 5px
            opacity: .5
            position: absolute
            right: 5px
            top: 0
            z-index: 0
        &__children
            position: relative
            z-index: 10

    &__cover-content
        background-color: rgba(0,0,0,.3)
        background-position: center
        background-repeat: no-repeat
        background-size: cover
        text-align: center

        h1,
        p
            color: white

        p:last-of-type
            margin-bottom: 0

    &__component--blockquote
        text-align: center
        .blockquote
            padding-top: 20px
            &::before, &::after
                display: inline-block
            &::before
                content: '“ '
            &::after
                content: ' ”'
            p
                display: inline
                line-height: 1.4rem
                &:last-child
                    margin-bottom: 0


@media (min-width: 768px)
    .modal-dialog
        // default margin-top is 30px and the modal window is displayed UNDER the topbar
        margin-top: 60px