/*
 * This is a style-sheet that makes Taskboard Lite look pretty.
 * At least I hope it does.
 *
 * I'm really glad that anyone is interested what I've done here :)
 *
 * ====================================================================
 *
 * TABLE OF CONTENTS:
 *
 * -- Generic styles (basic reset)
 *
 * -- Card styles         [section.card]
 * ---- Card colors
 * ---- Special card states
 * ---- Card text
 *
 * -- Tags                [span.tag]
 *
 * -- Action toolbars     [menu]
 * ---- Action icons
 *
 * -- Deck with new cards [aside#deck]
 *
 * -- Footer              [footer]
 *
 */


/*
 * Generic styles (basic reset)
 * ==============================
 */

html, body,
section, aside, menu, footer,
div, h2, p, ul, li,
span, a { margin: 0; padding: 0 }

ul, li { list-style: none }

section, aside, menu, footer { display: block } /* -- make sure HTML5 elements are blocks */

body { font-family: georgia, times, serif; }

a { outline: 0; color: #05C; }


/*
 * Card styles
 * =============
 */

.card {
    position: absolute;
    user-select: none;
    width: 284px;
    min-height: 50px;
    padding: 7px;

    background: #FC3;
    border: 1px solid #FD5;

    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
    border-radius:         5px;

    -moz-box-shadow:    3px 3px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,.2);
    box-shadow:         3px 3px 5px rgba(0,0,0,.2);

    cursor: url(grab.cur);
    cursor: -moz-grab;
}

.edit .card { cursor: default; } /* -- when in edit mode don't show drag & drop cursor */

/* Card colors
   ------------- */

/* .yellow { background: #FC3; border-color: #FD5 } -- yellow is default */
.orange { background: #F91; border-color: #FA3 }
.blue   { background: #0AC; border-color: #0BC }
.red    { background: #E43; border-color: #E54 }
.green  { background: #8C4; border-color: #9D6 }

/*
-- previous colour palettes

-- vivid palette

.yellow { background: #FD6; border-color: #FE7 }
.orange { background: #FA2; border-color: #FB3 }
.blue   { background: #1CD; border-color: #1DD }
.red    { background: #F50; border-color: #F61 }
.green  { background: #4B4; border-color: #4C4 }

-- autumn palette

.yellow { background: #FC3; border-color: #FC3 }
.orange { background: #E83; border-color: #E83 }
.blue   { background: #089; border-color: #089 }
.red    { background: #D44; border-color: #D44 }
.green  { background: #9B4; border-color: #9B4 }

*/


/* -- let's treat white cards a little bit special */
.white {
    background: #FFF;
    border: 1px dashed #DDD;

    -moz-box-shadow:    none;
    -webkit-box-shadow: none;
    box-shadow:         none;
}

.white:hover { border-color: #AAA }

/* Special card states
   --------------------- */

.card:active, .drag {
    cursor: move;
    cursor: url(grabbing.cur);
    cursor: -moz-grabbing;

    opacity: .8;
}

.card:active, .pick {
    z-index: 100;

    -moz-transform:    scale(1.03); /* -- subtle scale... for those supporting it ;) */
    -webkit-transform: scale(1.03);
    transform:         scale(1.03);

    -moz-box-shadow:    8px 8px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 8px 8px 5px rgba(0,0,0,.2);
    box-shadow:         8px 8px 5px rgba(0,0,0,.2);
}

/* -- to focus on selected and edited cards we make others transparent */
.mark .card,       .edit .card      { opacity: .3 }
.mark .card.mark,  .edit .card.edit { opacity:  1 }


/* Card text
   ------------- */

.text {
    overflow: hidden;
    padding: 2px;
    min-height: 1em;
}

.edit > .text {
    background: rgba(255,255,255,.5);
    outline: 1px solid #FFF;
}

.edit.white .text {
    background: #F4F4F4;
    outline-color: #EEE;
}

.text a { text-decoration:none; }

.text a:hover {
    border-bottom: 1px solid;
    background: rgba(255,255,255,.3);
}


/* 
 * Tags
 * ======
 */

.tag {
    background: rgba(255,255,255,.4);
    padding: .1em .3em .1em .2em;
    cursor: pointer;

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); /* -- only -webkit, because of Chrome (see comment for .tag.mark) */
}

/* -- hovered tag */
.tag.hover { background: rgba(255,255,255,.8) }

/* -- selected tag */
.tag.mark {
    background: rgba(255,255,255,.9);

    -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
    -webkit-box-shadow: none; /* inset 1px 1px 1px rgba(100,100,100,.5); -- inset shadow + border radius looks like shit in Chrome */
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.2);
}

/* -- make tags on white cards noticeable */
.white .tag       { background: #EEE }
.white .tag.hover,
.white .tag.mark  { background: #DDD }


/*
 * Action toolbars
 * =======================
 */

body > menu { position: fixed; top: 5px; left: 5px; }      /* -- global actions bar */

.card menu { position: absolute; top: -10px; right: 0; display: none;}  /* -- card actions bar */
.card.edit menu, .drag menu { display: none }             /* -- hide card actions when editing or dragging */
.edit menu.edit { display: block; left: 0; }

.card:hover menu {
    display: flex;
}

/* Action icons
   -------------- */

menu a {
    float: left;
    height: 20px; width: 20px;

    background: url(../img/i.png) no-repeat 2px 0;
}

menu a:hover {
    position: relative; top: -2px; height: 22px;

    /* -- background icons get blurry on scale, so it's not pretty enough
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    */
}

menu a:active { top: -1px; }

/* menu .b { background-position: 0 0 } -- b is default so, again, let's save some bytes */
menu .i { background-position: 2px -20px }
menu .h { background-position: 2px -40px }
menu .p { background-position: 2px -60px }
menu .e { background-position: 2px -80px }
menu .c { background-position: 2px -100px }
menu .r,
menu .d { background-position: 2px -120px }


/*
 * Deck with new cards
 * =====================
 */

#deck {
  position: fixed;
  top: 10px; left: -280px;
}

#deck .white { border-color: #AAA }

/* -- disable deck when cards are selected or edited */
.mark #deck, .edit #deck { opacity: .3 }

.edit #deck .card,
.mark  #deck .card { 
    cursor: default;
    opacity: 1;
}


/*
 * Footer
 * ========
 */

footer {
    position: fixed;
    bottom: 0; right: 0;
    padding: 5px;
    font-size: .7em;
    opacity: .6;
}

footer:hover { opacity: 1 }