﻿@import "../all-color.less";
@shadow:2px 2px 5px rgba(0,0,0,0.3);
@shadow-sm:1px 1px 2px rgba(0, 0, 0, 0.2);

body{overflow:hidden; overscroll-behavior-x: contain;}

.board .message{margin-top:-4px !important; margin-bottom:-20px !important; width:~"calc(100% - 20px)";}

.drag-delete{position:absolute; width:100%; text-align:center;}
.drag-delete .delete-area{border:2px solid rgba(255,255,255,0.3); padding:7px 100px; display:inline-block; position:relative; top:-5px;
    span{display:inline-block; font-size:17px; font-weight:400; text-align:center; padding-left:5px; position:relative; top:-5px;}
}
.drag-delete.hovering .delete-area{background-color:rgba(255,255,255,0.3);}

/* toolbar /////////////////////////////////////// */
.kanban > .toolbar{flex-direction:row; align-content:stretch; display:flex;
    .col.msg{flex-grow:1;}
}

/* lists ///////////////////////////////////////// */
.kanban {overflow:hidden;
    & > .scroller .scrollbar{overscroll-behavior-x: contain;}
    .lists .columns{white-space:nowrap;
        & > .col{min-width:238px; border-radius:4px; margin-right:7px; margin-bottom:30px; height:auto;
            &.bg{box-shadow:@shadow;}
        }
        & > .add-list{
            a{width:100%; box-sizing:border-box; font-weight:400;}
        }
    }

    .list { position:relative; background-color:#e9e9e9; 
        .items{float:left; position:relative; padding:0 4px;
            .drag{position:relative;}
            &.hovering{height:40px;}
        }
        .item{width:213px; box-shadow:@shadow-sm; border-radius:4px; background-color:#ffffff; padding:8px; margin:7px 0; overflow:hidden; cursor:pointer;
            .title{font-size:15px; font-weight:400; line-height:1.5; white-space:normal; width: 100%; display: inline-block;}
            &.dragging{transform:rotate(7deg); z-index:100; box-shadow:@shadow;}
            &.separator{
                &:before{border-top:1px solid rgba(0, 0, 0, 0.2); content:'';width:~"calc(100% + 24px)";display:block; margin-left:-12px;}
                &:hover:before{border-top:1px solid rgba(0, 0, 0, 0.2);}
                &:hover{background-color:rgba(0,0,0,0.1) !important;}
            }
            &.separator, &.header{box-shadow:none !important; background-color:transparent !important;}
            &.header{margin:0; padding:0;}
            &.header:hover{background-color:rgba(0,0,0,0.1) !important;}
            .checkmark{display:inline-block; padding:0 5px 0 0; position:relative; top:2px;
                svg{width:16px; height:16px;}
            }
            .board-color{width:7px; height:44px; border-radius:5px; float:left; margin:0 10px 0 0;}
        }
        .list-items{position:relative;}
        .movable{position:relative; max-width:224px;}
        .movable:after{content:'';display:block;clear:both;}
        .scroller{position:relative; float:right; background-color:rgba(0,0,0,0.05); width:10px; height:100%; overflow:hidden; border-radius:10px; margin-top:7px;}
        .scrollbar{position:relative; background-color:rgba(0,0,0,0.1); width:10px; min-height:20px; overflow:hidden; border-radius:10px;}
        .scrollable{overflow:hidden; max-width:224px;
            .scroller{display:none;}
            &:after{content:' '; display:block; clear:both; height:0; overflow:hidden;}
            &.scroll{ max-width:234px;
                .items{float:left; width:224px;}
                .item{padding-right:8px;}
                .scroller{display:block;} 
            }
        }
        &.hovering{
            &.rightside{margin-right:262px;}
            &.leftside{margin-left:262px;}
        }
        &.dragging{transform:rotate(7deg); z-index:100; position:relative;}
    }
    .drag{
        &.hovering.upward{padding-top:50px !important;}
        &.hovering.downward{padding-bottom:50px !important;}
    }
}

/* list used for cloning card while dragging */
.kanban > .list{position:absolute;width:0;height:0;}

.kanban {
    & > .scroller{position:relative; background-color:rgba(0,0,0,0.05); top: -21px; left:10px; width:~"calc(100% - 20px)"; height:13px; overflow:hidden; border-radius:10px;
        .scrollbar{position:relative; left:0px; background-color:rgba(0,0,0,0.1); min-width:20px; height:13px; overflow:hidden; border-radius:10px;}
    }
}


.board .list-head{line-height:1.5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; display: inline-block;
    .more{float:right; opacity:0.5; margin-right:3px; padding:0 5px; height:25px; border-radius:4px;
        &:hover{background-color:rgba(0,0,0,0.2);}
        svg{width:16px; cursor:pointer;}
    }
}

.box > .list-menu{position:absolute; top:100px; left:0; max-width:250px; height:auto; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.3); border-radius:3px;
    .menu-header span{opacity:0.5;}
    li{ list-style:none; padding:10px; font-weight:bold;
        &.item{cursor:pointer;}
        &.disabled{opacity:0.3; cursor:default;}
        &.separator:after{content:''; width:100%; border-bottom:1px solid rgba(0,0,0,0.1); height:1px; display:block;}
    }
}

/* card details popup /////////////////////////// */
.box .popup{
    & > div > .title{max-width:~"calc(100% - 30px)";}
    .card-sub-title{margin-top:-10px; min-height:65px;
        .board-color{width:10px; height:18px; margin:0 0 0 5px; display:inline-block; position:relative; top:3px; border-radius:4px;}
        .button{display:inline-block; margin:15px 0 -9px 5px; cursor:pointer;
            svg{width:12px; height:12px;}
        }
    }
    .card-field-title{position:absolute; top:9px; left:9px; width:~"calc(100% - 48px)";
        textarea{font-size:1.3rem !important; line-height:1.25; overflow:hidden;}
        .textarea-clone{opacity:0; position:absolute; z-index:-1; width:100%; height:0px; top:0;
            & > div{position:absolute; width:100%; min-height:38px; padding:11px; font-size:1.3rem !important; white-space:normal; line-height:1.25; box-sizing:border-box; border-width:1px; box-sizing:border-box;}
        }
    }
}
.popup-card-details{min-height:450px;}
.card-details{min-height:220px; margin-left:-10px; width:~"calc(100% + 20px)" !important;
    .new-description{border-radius:4px; margin-bottom:20px; padding:10px;}
    .new-description, .description-title{opacity:0.7;}
    .markdown{line-height:1.5; font-weight:400; padding:10px;
        ul{padding:0 0 10px 10px;}
        li{padding:3px 0;}
        p{display:block; padding:0 0 10px 0; line-height:1.5; }
    }
    .description-title{padding-bottom:10px;}
    .accordion{margin-top:20px;}
    .temp{position:absolute; width:100%; min-height:75px; top:-10000px; left:-10000px; opacity:0;
        line-height:1.5; font-weight:400; padding:10px;
        ul{padding:0 0 10px 10px;}
        li{padding:3px 0;}
        p{display:block; padding:0 0 10px 0; line-height:1.5; }
    }
    .card-checklist{
        .contents{position:relative; margin-top:5px;}
        .clone{position:absolute; transform:rotate(-4deg); z-index:10000;}
    }
    .checklist-item{
        .input.expand{width:~"calc(100% - 70px)" !important;}
        .icon-close{margin:13px 0 0 0;
            svg{width:16px;}
        }
    }
    .drag{
        &.hovering.upward .hovering{padding-top:50px !important;}
        &.hovering.downward .hovering{padding-bottom:50px !important;}
        .clone{border-style:solid; border-width:2px; border-radius:4px;}
        &.dragging *{cursor:move !important;}
    }
}
.attachments {
    &.layout-gallery {
        .attachment .row.hover{width:210px; padding:30px 30px 10px 30px; margin:13px;}
        .attachment{
            .icon-close{position:absolute; right:10px; top:5px;
                svg{width:16px;}
            }
            .icon{width:150px; height:115px; text-align:center; padding-top:10px;
                svg{width:80px !important; height:80px !important; position:relative; display:inline-block;}
                img{width:auto; max-height:100px; max-width:150px; margin:0 auto;}
            }
        }
        .filename{padding:0; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
        &:after{content:''; clear:both; display:block; height:0;}
    }
    &.layout-list{
        .attachment{
            .icon-close{margin:13px 0 0 0;
                svg{width:16px;}
            }
            .icon{width:32px;}
            .filename{width:~"calc(100% - 70px)" !important;}
        }
    }
}

#card_description, #newcomment{line-height:1.5; overflow-y:hidden; height:45px;} 
.card-comments > .title > .icon svg{width:18px;}

.comments{padding-top:10px;
    .comment{border-radius:6px; box-shadow:1px 1px 5px rgba(0,0,0,0.125); padding:10px 5px 10px 5px; margin:5px 0; width:100%;
        &:after{clear:both; display:block; content:'';}
    }
    .photo{display:inline-block; width:55px; padding-right:10px;}
    h5{font-size:14px;
        a{font-weight:bold;}
        a:link, a:visited{text-decoration:none;}
        a:hover, a:active{text-decoration:underline;}
    }
    .comment-body{display:inline-block; width:~"calc(100% - 60px)"; line-height:1.5;}
    .comment-title{padding-bottom:5px;}
    .comment-date{opacity:0.7; font-size:0.8rem; padding-top:2px;}
    .comment-edit{padding-right:10px;}
    .comment-delete{padding-right:15px;}
    .comment-flag, .comment-flagged{padding-right:15px;}
    svg.no-photo{background-color:#bbe3ff; border-radius:50px; width:50px; height:50px; padding:7px;}
}
#newcomment{min-height:45px;}

.card-modals{position:absolute; left:0; width:100%; text-align:center; z-index:1005;
    & > div{border-radius:5px; text-align:left;}
}
.card-modal-bg{background-color:rgba(0,0,0,0.5); position:fixed; z-index:1000; top:0; right:0; bottom:0; left:0;}

.popup .icon-share{
    position:absolute; top:50px; right:10px; z-index:1;
    svg{width:20px; height:20px;}
}
.popup .icon-dots{
    position:absolute; top:90px; right:10px; z-index:1;
    svg{width:20px; height:20px;}
    .menu{position:absolute; right:46px; top:-5px; border-radius:5px; box-shadow:2px 2px 8px rgba(0,0,0,0.15); padding:10px 0; z-index:5;
        svg{width:16px; height:16px; margin-right:7px; position:relative; top:3px;}
        hr{opacity:0.3;}
    }
    ul{list-style:none;}
    li{white-space:nowrap; cursor:default;
       & > .row.hover{padding:6px 16px;}
    }
    .layouts{padding-left:3px;
        .row.hover{padding:2px 0 2px 5px; margin:0 2px; width:26px; height:26px; line-height:1;}
    }
}

.share-form{ max-width:100%; width: 450px !important;
    .url{
        div {display:inline-block; padding-right:8px;
             svg{width:18px; height:18px;}
        }
        a{width:~"calc(100% - 26px)"; text-overflow:ellipsis; overflow:hidden;}
    }
}
.share-title{
    h6{width:~"calc(100% - 30px)"; text-align:left;}
}

.search{position:relative;
    input[type="text"]{position:relative; z-index:10;}
}
.search-results{position:absolute; z-index:100; top:38px; width:~"calc(100% - 10px)"; padding:7px 10px;  
    border-radius:5px; box-shadow:1px 1px 7px rgba(0,0,0,0.15);
    .result{padding:7px; cursor:pointer;}
    .no-results{padding:15px 30px; font-size:14px; opacity:0.7;}
}
.share-form .invited {padding:6px;
    .row {border-width:3px; border-style:solid; padding:10px 12px; overflow:hidden; }
    span{display:inline-block; white-space:nowrap; text-overflow:ellipsis; width:100%; overflow:hidden;}
}

@media(max-width:500px){
    .box .popup{
        .card-details{width:100% !important;}
        .card-menu{width:100% !important; text-align:center;
            & > div{display:inline-block; padding:20px 5px 0 5px; text-align:left; width:135px;}
        }
    }
}

/* card details layouts //////////////////////////*/
body.card-leftside{
    .body{margin-left:699px !important;}
    .for-popup.disabled{ width:0; left:0; bottom:unset; right:unset !important; overflow:visible;}
    .popup-card-details{ top:44px !important; left:0 !important; bottom:0px; max-width:700px !important; width:100% !important;}
    &.boards-menu-leftside{
        .body{margin-left:940px !important;}
        .popup-card-details{ left:240px !important;}
    }
}
body.card-rightside{
    .for-popup.disabled{ width:100%; max-width:700px; right:0; bottom:0; left:unset !important;  overflow:visible; }
    .popup-card-details{ top:44px !important; left:auto !important; bottom:0px; right:0px; max-width:700px !important; width:100% !important;}
    .kanban{max-width:~"calc(100% - 700px)"}
}
body.card-fullscreen{
    .for-popup.disabled{ width:100%; max-width:unset !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;  overflow:visible; }
    .popup-card-details{top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; max-width:unset !important; width:100% !important; max-height:unset !important;}
}



/* new list ///////////////////////////////////// */
@newlist-height:84px;

.form-new-list{ 
    z-index:10; box-shadow: @shadow; border-radius:4px; overflow:hidden; position:absolute;
    &.hide{height:45px;}
    &.cancel{opacity:0; animation:cancelnewlist 0.3s ease-in-out; -webkit-animation:cancelnewlist 0.3s ease-in-out; height:45px;}
    &.show{animation:newlist 0.3s ease-in-out; -webkit-animation:newlist 0.3s ease-in-out; height:@newlist-height;}
    input[type="text"]{padding:0 10px !important; font-weight:bold;}
}

@keyframes newlist {
    from { height: 45px; opacity:0 }
    to { height: @newlist-height; opacity:1 }
}
@-moz-keyframes newlist {
    from { height: 45px; opacity:0 }
    to { height: @newlist-height; opacity:1 }
}
@-webkit-keyframes newlist {
    from { height: 45px; opacity:0 }
    to { height: @newlist-height; opacity:1 }
}

@keyframes cancelnewlist {
}
@-moz-keyframes cancelnewlist {
    from { height: @newlist-height; opacity:1;}
    to { height: 45px; opacity:0; }
}
@-webkit-keyframes cancelnewlist {
    from { height: @newlist-height; opacity:1;}
    to { height: 45px; opacity:0; }
}

/* new card ///////////////////////////////////// */
@newcard-height:85px;

.box .form-new-card{ 
    z-index:10; overflow:hidden; padding:4px;
    .text-field input{border:0 transparent !important; box-shadow:@shadow-sm !important; border-radius:4px !important; background-color:#fffff; padding:7px 7px 25px 7px !important;
                &:focus{border:0 transparent !important; outline:0 transparent !important;}
    }
    &.hide{min-height:45px;}
    &.cancel{opacity:0; animation:cancelnewcard 0.3s ease-in-out; -webkit-animation:cancelnewcard 0.3s ease-in-out; min-height:0px;}
    &.show{animation:newcard 0.3s ease-in-out; -webkit-animation:newcard 0.3s ease-in-out; min-height:@newcard-height;}
    textarea{overflow:hidden; height:42px; resize:none; font-weight:400; padding:10px; line-height:1.5;}
    .textarea-clone{opacity:0; position:absolute; z-index:-1; width:100%; height:0px; top:0;
        & > div{position:absolute; width:100%; min-height:30px; font-size:15px; font-weight:400; padding:10px; white-space:normal; line-height:1.5; box-sizing:border-box; border-width:1px; box-sizing:border-box;}
    }
}

/* upload modal ///////////////////////////////////// */
.upload-bg{position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.9); padding-top:7%; z-index:10000;}
.row.upload-modal{margin:0 auto; max-width:550px; color:#eee; padding:0 20px;
    .icon-close{float:right;}
    p{padding-top:25px;}
    & > .icon-close{margin:13px 0 0 0;
        svg{width:25px;}
    }
    button.apply{margin-left:7px;}
    #uploadfiles{opacity:0; width:170px; height:31px; position:absolute;}
}


@keyframes newcard {
    from { min-height: 0px; opacity:0 }
    to { min-height: @newcard-height; opacity:1 }
}
@-moz-keyframes newcard {
    from { min-height: 0px; opacity:0 }
    to { min-height: @newcard-height; opacity:1 }
}
@-webkit-keyframes newcard {
    from { min-height: 0px; opacity:0 }
    to { min-height: @newcard-height; opacity:1 }
}

@keyframes cancelnewcard {
}
@-moz-keyframes cancelnewcard {
    from { min-height: @newcard-height; opacity:1;}
    to { min-height: 0px; opacity:0; }
}
@-webkit-keyframes cancelnewcard {
    from { min-height: @newcard-height; opacity:1;}
    to { min-height: 0px; opacity:0; }
}