﻿/* tapestry theme engine */
@import "../tapestry/theme.less"; 

/* Kandu theme system */
@import '../theme.less';


/* fonts */

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(/fonts/opensans/opensans-lightitalic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(/fonts/opensans/opensans-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(/fonts/opensans/opensans-bolditalic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(/fonts/opensans/opensans-light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/opensans/opensans-regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(/fonts/opensans/opensans-bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body{font-weight:lighter;}
body, h1, h2, h3, h4, h5, h6, span, input, select, textarea{font-family: Open Sans, Arial, Helvetica, sans;}

.box .ui header.row{
    @opacity1:0.15;
    @opacity2:0.25;
    .box(rgba(0,0,0,0.1), transparent, #fff); 
    .links(#fff, #fff, #fff, #fff); 
    .icons(#fff, #fff, #fff, #fff);
    .button(default,  rgba(0,0,0,@opacity1), rgba(0,0,0,@opacity2), rgba(0,0,0,@opacity2), rgba(0,0,0,@opacity2), transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
} 

.box .board{
    .fonts(#fff, fade(#fff, 30%), #fff, #fff, #fff, #fff);
    .row(transparent, rgba(0,0,0,@opacity1), rgba(0,0,0,@opacity2), #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff, #fff);
    @opacity1:0.15;
    @opacity2:0.25;
    .button(default, rgba(0,0,0,@opacity1), rgba(0,0,0,@opacity2), rgba(0,0,0,@opacity2), rgba(0,0,0,@opacity2), transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
}

//board colors
:root {
    .board-color(1, #d33000, #d33000, #d33000, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(2, #df6000, #df6000, #df6000, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(3, #eca731, #eca731, #eca731, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(4, #27a836, #27a836, #27a836, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(5, #00a089, #00a089, #00a089, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(6, #0079d0, #0079d0, #0079d0, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(7, #3399FF, #3399FF, #3399FF, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(8, #604dd7, #604dd7, #604dd7, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(9, #7011ba, #7011ba, #7011ba, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(10, #d027d0, #d027d0, #d027d0, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(11, #535353, #535353, #535353, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(12, #272727, #272727, #272727, #fff, #fff, #00c0ff, #00d1ff);
}

.box, .box .bg{
    .box(#333, transparent, #eee);
    .row(transparent, #555, #274960, #eee, #fff, #fff, #b592ff, #d985ff, #e400ff, #b592ff, #e400ff, #eee, #eee, #eee, #eee);
    .row.no-links, li, .item, .row:hover .item, .row.hover.item, li .row:hover{
        .links(#bbb, #bbb, #bbb, #bbb);
    }
    .links(#b592ff, #d985ff, #e400ff, #b592ff);
    .no-color{
        .links(#eee, #eee, #eee, #eee);
    }
    .fonts(#eee, fade(#eee, 30%), #009B87, #4DA400, #FF2222, #376EB2);
    .input(#444, #eee, #707070, #aaa, #4f4f4f, #efefef, #878787, #4f4f4f, #efefef, #878787, #8c8c8c, #6d43d5 );
    .line(#e6e6e6); 
    .button(default,    #00a0c4, #00cce1, #00cce1, #00cce1, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(apply,      #9f00d2, #c100ff, #c100ff, #ef00ff, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(cancel,     #717171, #858585, #858585, #466cad, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(disabled,   #a9d7ec, #a9d7ec, #a9d7ec, #a9d7ec, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(grey,       #e0e0e0, #bfbfbf, #bfbfbf, #e0e0e0, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #333, #333, #333, #333);
    .button(delete,     #d07d7d, #c95454, #c95454, #c95454, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(red,        #c80c0c, #ff0000, #ff0000, #c80c0c, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(outline,    transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #aeff96, #3aff00, #3aff00, #3aff00, #aeff96, #3aff00, #3aff00, #3aff00);
    .message(default, #637eca, transparent, #fff, #fff);
    .message(error,   #f46f6f, transparent, #fff, #fff);
    .message(alert,   #ffb000, transparent, #fff, #fff); 
    .message(confirm, #7ebd56, transparent, #fff, #fff); 
}

.box .bg.white{
    .box(#222, transparent, #eee);
}

.popup, .popup .bg{
    .box(#333, #333, #eee);
    .menu{
        .row(transparent, #555, #274960, #eee, #fff, #fff, #b592ff, #d985ff, #e400ff, #b592ff, #e400ff, #eee, #eee, #eee, #eee);
    }
}

//lists
.kanban .list {background-color:#333 !important;
    .item{background-color:#444 !important;}
}

//stars
.box .row a:link .icon-star, .box .row a:visited .icon-star{
    .svg(#ffb400, true);
}
.box .row a:hover .icon-star:hover, .box .row a:active .icon-star:hover{
    .svg(#ff7d00, true);
}
.box .row.hover:hover a:link .icon-star, .box .row.hover:hover a:visited .icon-star{
    .svg(#ff7d00, true);
}
.box .row.hover:hover a:hover .icon-star:hover, .box .row.hover:hover a:active .icon-star:hover{
    .svg(#ff5600, true);
}

//close X button
.box .row .icon-close, .box .row .icon-close{
    .svg(#ddd, true);
}
.box .row.hover:hover .icon-close, .box .row.hover:hover .icon-close{
    .svg(#999, true);
}
.box .icon-close:hover, .box .row.hover:hover .icon-close:hover{
    .svg(#ff0000, true);
}
.box .row .btn-close a:hover use{fill:#ff4f3d !important; color:#ff4f3d !important;}

//popup menu arrows
.has-top-arrow:after { border-bottom-color: #444 !important;}
.has-right-arrow:after { border-left-color: #444 !important;}

//separator
.popup .separator{background-color:rgba(255,255,255,0.1) !important;}

//tabs
.box .tabs{background-color:#202020;
    .tab{background-color:#4e4e4e; color:#bbb}
    .tab:hover{background-color:#6900c9; color:#eee; 
        .svg(#fff);
    }
    .tab.selected{background-color:#333333; color:#eee}
    .tab.selected:hover{background-color:#333333; color:#eee; 
        .svg(#fff);
    }
}

//cards in a popup modal
.content-cards.kanban {background:#444;}

//title bar
.title-bar{background-color:#333 !important;}

//tooltip
.tooltip{background-color:#d5f8c9; border-color:#adf296; color:#0e5c00;}
.tooltip:after{border-color: #adf296 transparent; }

//accordion
.accordion{
    .title{background-color:#7d2ab7;
        .row.hover:hover{background-color:#a800ff;}
    }
}

//comments
.popup.box .comment{background-color:#474747;
    svg.no-photo{background-color:#516471; 
        use{color:#5aa8e0 !important;}
    }
    .comment-flagged{color:#ff4f3d;}
}

//search results
.search-results{background-color:#fff;
    .result{background-color:#fff;}
}
.box .invited {
    .row(#e1f8ff, #b1f1ff, #b1f1ff, #333, #333, #333, #333, #333, #333, #333, #333, #333, #333, #333, #333);
    .row{border-color:#72d8ff;
        &.hover:hover{border-color:#40caff}
    }
}

//hover over row that contains an input textbox with class "label"
.row.hover:hover input.label.on-focus.focused:focus, 
.row.hover input.label.on-focus.focused:focus{background-color:#fff !important;}

//card details checklist
.card-checklist .contents {
    &.dragging {
        .row.hover, .row.hover:hover{background:#fafafa !important;}
        .clone{border-color:#adf296;}
        /*&.upward .hovering{border-top:solid 2px #7968ff;}
        &.downward .hovering{border-bottom:solid 2px #7968ff;}
        .row.hover.hovering, .row.hover.hovering:hover{background:#b5d4ec !important;}*/
    }
}

//upload modal
.upload-bg{background-color:rgba(0,0,0,0.9);}
.upload-modal{
    .box(transparent, transparent, #ddd);
    .fonts(#ddd, fade(#ddd, 30%), #009B87, #4DA400, #FF2222, #376EB2);
    .links(#b592ff, #d985ff, #e400ff, #b592ff);
    .button(apply,      #00ab2f, #00d43a, #00d43a, #00d43a, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
}