/cms/static/cms/sass/cms.pagetree.scss

@charset "utf-8";
/*!
 * @copyright: https://github.com/divio/django-cms
 */

//##############################################################################
// COLORS
// IMPORT SETTINGS
@import "settings/all";

//##############################################################################
// PAGETREE

// colors
$color-font: #666;
$color-border: #dededc;
$color-border-light: #fafafa;
$color-border-medium: #ddd;
$color-background-light: #fefefe;
$color-background-light-hover: #f5f5f5;
$color-background-blue: #f3fbfe;
$color-background-blue-hover: #e6f6fd;

$row-height: 41px;

// pagetree
#sitemap {
    margin: 0;
    margin: 0;
    padding: 0;
    background: $color-background-light;

    a {
        text-decoration: none;
        border: none;
        outline: none;
    }
    a:hover {
        text-decoration: underline;
    }

    li,
    ul {
        list-style-type: none;
    }
    li input.hidden {
        position: absolute;
        left: -9999em;
    }

    // icons
    li a.icon,
    li span.icon,
    li a.preview,
    li a.move,
    li a.copy,
    li a.edit,
    li div.info,
    li div a.addlink,
    li div a.deletelink,
    li div.col-softroot span.icon,
    li div.col-apphook span.icon {
        display: inline-block !important;
        width: 20px;
        height: 20px;
        margin-top: 5px;
        background: url("../img/pagetree/sprite.png") no-repeat 0 0 !important;
    }
    li a.preview {
        margin: 0 2px 0 0;
        background-position: -55px -29px !important;
    }
    li div a.preview-active {
        background-position: -81px -29px !important;
    }
    li a.move {
        margin: 0;
        background-position: -30px -29px !important;
    }
    li a.copy {
        margin: 0;
        background-position: -29px -56px !important;
    }
    li a.edit {
        margin: 0 6px 0 2px;
        background-position: -29px -4px !important;
    }
    li div a.addlink {
        margin: 0;
        padding: 0;
        background-position: -29px -81px !important;
        &:before {
            display: none;
        }
    }
    li div a.deletelink {
        margin: 0;
        padding: 0;
        background-position: -3px -55px !important;
        &:before {
            display: none;
        }
    }
    li div.info {
        margin: 12px 0 0 !important;
        cursor: pointer;
        background-position: -3px -29px !important;
    }
    li a.selector-add {
        margin-top: -1px;
        margin-left: 4px;
        background-position: -20px 0 !important;
    }
    li div .col-softroot span.icon {
        margin: 0 !important;
        background-position: -3px -3px !important;
    }
    li div .col-apphook span.icon {
        margin: 0 !important;
        background-position: -55px -4px !important;
    }

    li a.preview span,
    li a.move span,
    li a.copy span,
    li a.selector-add span,
    li a.addlink span,
    li a.deletelink span,
    li a.edit span,
    li a.advanced-settings span,
    li div.info span,
    .col-navigation input,
    .col-published input {
        display: none;
    }
    // the tree is recalculated once you set the navigation to be
    // shown or hidden. In initialization the calculation is off by
    // 1px so we need to enforce the width for correct placement
    .col-navigation,
    .col-preview {
        width: 26px !important;
    }
    .col-preview a {
        margin: 0 !important;
    }
    .col-actions {
        width: 126px !important;
    }

    // header
    ul.header {
        position: relative;
        top: 1px;
    }
    ul.header,
    ul.header li {
        margin: 0;
        padding: 0;
        border: none;
        background: none;
    }
    ul.header li {
        color: $color-font;
        font-size: 11px;
        font-weight: 400;
        height: 16px;
        padding: 5px 0 4px 5px;
        border-bottom: 1px solid $color-border;
        background: $color-background-light;
        box-sizing: content-box;
    }
    ul.header li .cont {
        height: 15px;
        border: none !important;
        background: none !important;
    }
    ul.header li .col1 {
        font-size: 10px;
    }
    ul.header li .col2 > div {
        font-size: 10px;
        line-height: 14px !important;
        height: auto;
        border: none;
        background: none;
    }

    // row
    li {
        padding-left: 20px;
    }
    li.last {
        background-position: 5px 5px !important;
    }
    li.closed,
    li.open {
        background-position: 0 6px !important;
    }
    li .cont {
        display: block;
        height: $row-height !important;
        overflow: visible !important;
        border-top: 1px solid $color-border !important;
        border-bottom: 1px solid $color-border !important;
        background-color: white;
        margin-top: -1px;
    }
    li.open ul .cont {
        height: $row-height !important;
    }
    .tree-default {
        padding-top: 1px;
        a {
            color: $gray;
            &:hover, &:focus, &:active {
                color: $black !important;
            }
        }
    }
    .tree-default .col-navigation,
    .tree-default .col-published {
        line-height: 30px;
    }
    // add additional border to separate categories
    li.open ul {
        margin-left: 0;
    }

    li .col1 > div {
        text-align: center;
    }
    li .col1 .title {
        white-space: nowrap;
        background: none;
    }
    li .col1 .success {
        color: $color-font;
        padding-left: 10px;
    }
    li .col1 a.changelink {
        display: none;
        line-height: 27px;
        margin: 6px 0 0 10px !important;
    }
    li .col1 .title,
    li .col1 .success {
        display: block;
        line-height: $row-height;
        height: $row-height;
        padding-left: 25px;
    }

    li .move-target-container {
        display: none;
        float: left;
        font-size: 14px;
        line-height: 27px;
    }
    li .move-target-container a:hover {
        text-decoration: none;
    }
    li .move-target {
        display: inline-block;
        padding: 7px 8px;
        border-left: 1px solid $color-border-medium;
    }
    li .move-target:first-child {
        border-left: none;
    }

    li .col2 > div {
        float: left;
        line-height: $row-height !important;
        text-align: center;
        white-space: nowrap;
        width: auto;
        height: $row-height;
        padding: 0 8px;
        border-left: 1px solid $color-border-medium;
        box-sizing: content-box;
    }
    li .col2 > div a,
    li .col2 > div span {
        vertical-align: middle;
    }
    // hide items
    .cont {
        position: relative;
    }
    .col1 {
        display: block;
        float: none !important;
    }
    .col1,
    .col2 {
        position: relative;
        z-index: 10;
    }
    .col2 {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 100;
    }
    .moveable {
        position: relative;
        z-index: 100;
    }
    .moveable.hover,
    .moveable:hover {
        z-index: 1000;
    }
    .moveable.hover .cont,
    .moveable:hover .cont {
        position: relative;
        z-index: 1000;
    }
    .success {
        position: absolute;
        right: 0;
        top: 0;
        padding-right: 10px !important;
        line-height: $row-height;
        height: $row-height;
    }

    // row hover states
    li .cont:hover {
        background: $color-border-light;
    }

    // custom col asignments
    li.moveable .col1 .title {
        background: url("../img/pagetree/tree-li-drag.gif") no-repeat 0 0;
    }
    li .col-language a {
        text-transform: uppercase;
    }

    // edit button
    .cont:hover .col1 a.changelink {
        display: block;
    }

    // active state
    .cont-active {
        background: #f7f7f7;
    }
    .cont-pagetype {
        background: white;
    }

    // drag modus
    li#dragged {
        min-width: 500px;
        z-index: 99999;
        padding-right: 0;
        margin-right: 0;
        background-color: transparent;
        border-right: 1px solid $gray-lighter;
    }
    li#dragged .col2 {
        display: none;
    }

    // info handling
    li .info.hover {
        position: relative;
    }

    // remove backgrounds
    .moveable,
    .tree-default,
    .tree .tree-default ul,
    #dragged {
        background-image: none !important;
    }
    .moveable.open {
        background-image: url("../js/jstree/themes/default/fminus2.gif") !important;
    }
    .moveable.closed {
        background-image: url("../js/jstree/themes/default/fplus2.gif") !important;
    }
    .tree {
        padding-bottom: 4px;
        border-left: 1px solid $white;
        border-bottom: 1px solid $white;
        background: $gray-lightest;
    }

    // additional fixes
    #dragged .removeicon {
        left: 7px !important;
        top: 5px !important;
        z-index: 99 !important;
    }
    #dragged .col2 {
        display: none;
    }

    .title {
        cursor: move;
        &:hover {
            text-decoration: none;
        }
    }
}

// filter button on top right
#changelist-filter-button {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    line-height: 30px;
    width: 150px;
    height: auto;
    margin: 0;
    padding: 0 0 0 10px;
    border: 1px solid $color-border-medium;
    border-top: none;
    border-right: none;
    background: $color-border-light;
}
#changelist-filter {
    top: 30px;
    h2 {
        display: none;
    }
}
#changelist-search {
    margin-top: 35px;
    margin-right: 0;
}
// remove background assigned from django
.change-list .filtered {
    min-height: 0;
    background: white !important;
}

// only visible on multiple sites
#site-selector {
    float: left;
    margin: 9px 18px 0 8px;
}

// loader on top right
#loader-message {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    padding: 4px 8px;
    background: white;
}

#sitemap {
    border: 1px solid $color-border;
    ul.header li .col2 > div {
        padding: 0 8px;
        border-left: 1px solid transparent;
    }
    li .col-language > a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    li .col-language span {
        display: inline-block;
        color: transparent;
        width: 12px !important;
        height: 12px !important;
        margin: 0 !important;
        border: 1px solid transparent;
        border-radius: 7px;
        // colors used within the tree
        &.dirty {
            background-color: #6ba6ff;
            -webkit-animation: pulsate 2.5s ease-out infinite;
               -moz-animation: pulsate 2.5s ease-out infinite;
                    animation: pulsate 2.5s ease-out infinite;
        }
        &.empty {
            border: 1px solid #b3b3b3;
            background-color: transparent;
        }
        &.unpublished {
            background-color: #b3b3b3;
        }
        &.unpublishedparent {
            background-color: #b3b3b3;
        }
        &.published {
            background-color: #65b417;
        }
    }
}

// dropdown for language change
.col-language {
    position: relative;
}
#sitemap .tree li .tooltip {
    display: none;
    position: absolute;
    top: 7px;
    right: 20px;
    z-index: 999999;

    text-align: left;

    border: 1px solid $gray-lighter;
    border-radius: $border-radius-base;
    background-color: $white;

    h3 {
        display: block;
        position: relative;
        z-index: 10;
        color: $gray-light;
        font-size: $font-size-small;
        font-weight: normal;
        text-transform: uppercase;
        padding: 2px 10px;
        margin: 0;
        border-bottom: 1px solid $gray-lighter;
        background: $white;
    }
    a {
        display: block;
        padding: 10px;
        min-width: 100px;
        text-transform: none;
        border-bottom: 1px solid $gray-lighter;
    }
    a:last-child {
        border: none;
    }

    // content
    .inner {
        display: block;
        padding: 10px;
    }
    mark {
        color: $gray-light;
        background: none;
        font-weight: normal;
        font-style: normal;
    }

    // icons
    .icon-publish {
        background: url("../img/pagetree/publish.png") no-repeat 10px 13px;
        padding-left: 30px;
    }
    .icon-unpublish {
        background: url("../img/pagetree/unpublish.png") no-repeat 10px 13px;
        padding-left: 30px;
    }

    // icon on the right
    &:before {
        z-index: 1;
        position: absolute;
        top: 7px;
        content: '';
        left: 100%;
        width: $dropdown-arrow-side;
        height: $dropdown-arrow-side;
        margin-left: -($dropdown-arrow-side / 2);
        transform: rotate(45deg);
        background-color: $submenu-dropdown-bgcolor;
        box-shadow: $dropdown-shadow;
    }

    // special case
    &.info-details {
        top: -4px;
        right: 24px;
    }
}

#marker {
    margin-top: 1px;
}

// animation for publishing
@keyframes pulsate {
    0% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}