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

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

@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, #fe6133, #fe6133, #fe6133, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(2, #f89e3d, #f89e3d, #f89e3d, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(3, #ffd637, #ffd637, #ffd637, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(4, #24c838, #24c838, #24c838, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(5, #1bdbc0, #1bdbc0, #1bdbc0, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(6, #0094ff, #0094ff, #0094ff, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(7, #3399FF, #3399FF, #3399FF, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(8, #6c57f3, #6c57f3, #6c57f3, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(9, #b25ff3, #b25ff3, #b25ff3, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(10, #FF99FF, #FF99FF, #FF99FF, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(11, #9f9f9f, #9f9f9f, #9f9f9f, #fff, #fff, #00c0ff, #00d1ff);
    .board-color(12, #272727, #272727, #272727, #fff, #fff, #00c0ff, #00d1ff);
}

.box, .box .bg{
    .box(#eee, transparent, #555);
    .row(transparent, #eaeaea, #5eceb6, #444, #333, #333, #6200ff, #9100ff, #c000ff, #6200ff, #c000ff, #555, #444, #444, #444);
    .row.no-links, li, .item, .row:hover .item, .row.hover.item, li .row:hover{
        .links(#555, #555, #555, #555);
    }
    .links(#6200ff, #9100ff, #c000ff, #6200ff);
    .no-color{
        .links(#222, #222, #222, #222);
    }
    .fonts(#222, fade(#222, 30%), #009B87, #4DA400, #FF2222, #376EB2);
    .input(#fff, #444, #cccccc, #aaa, #ffffff, #444, #77c8b6, #fff, #444, #b1dcdc, #8c8c8c, #6d43d5 );
    .line(#e6e6e6); 
    .button(default,    #00a0c4, #00cce1, #00cce1, #00cce1, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(apply,      #38acff, #0095ff, #0095ff, #0095ff, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
    .button(cancel,     #b5b4b4, #ff8138, #ffab2d, #ff8138, 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, #38acff, #0095ff, #0095ff, #0095ff, #38acff, #0095ff, #0095ff, #0095ff);
    .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(#fff, transparent, #555);
}

.popup, .popup .bg{
    .box(#fafafa, #dadada, #444);
    .menu{
        .row(transparent, #eaeaea, #5eceb6, #444, #333, #333, #6200ff, #9100ff, #c000ff, #6200ff, #c000ff, #555, #444, #444, #444);
    }
}

//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:#cc0000 !important; color:#cc0000 !important;}

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

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

//tabs
.box .tabs{background-color:#d0d0d0;
    .tab{background-color:#e2e2e2; color:#111}
    .tab:hover{background-color:#7968ff; color:#fff; 
        .svg(#fff);
    }
    .tab.selected{background-color:#fafafa; color:#333}
    .tab.selected:hover{background-color:#fafafa; color:#111; 
        .svg(#fff);
    }
}

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

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

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

//accordion
.accordion{
    .title{background-color:#ececec;
        .row.hover:hover{background-color:#d0d0d0;}
    }
}

//comments
.popup.box .comment{background-color:#fff;
    svg.no-photo{background-color:#bbe3ff; 
        use{color:#0e72b9 !important;}
    }
    .comment-flagged{color:#cc0000;}
}

//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(#6200ff, #9100ff, #c000ff, #6200ff);
    .button(apply,      #00ab2f, #00d43a, #00d43a, #00d43a, transparent, transparent, transparent, transparent, transparent, transparent, transparent, transparent, #fff, #fff, #fff, #fff);
}