tutorial / directive

/*!
 * Angular Smilies 1.1.0
 * Copyright 2014 Damien "Mistic" Sorel (http://www.strangeplanet.fr)
 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */
[class*=smiley-]{display:inline-block;background-image:url(./images/angular-smilies.png);background-position:100px 100px;background-repeat:no-repeat;width:18px;height:18px}.smiley-biggrin{background-position:0 0}.smiley-confused{background-position:-18px 0}.smiley-cool{background-position:-36px 0}.smiley-cry{background-position:-54px 0}.smiley-eek{background-position:-72px 0}.smiley-evil{background-position:-90px 0}.smiley-like{background-position:-108px 0}.smiley-lol{background-position:-126px 0}.smiley-love{background-position:-144px 0}.smiley-mad{background-position:-162px 0}.smiley-mrgreen{background-position:-180px 0}.smiley-neutral{background-position:-198px 0}.smiley-question{background-position:-216px 0}.smiley-razz{background-position:-234px 0}.smiley-redface{background-position:-252px 0}.smiley-rolleyes{background-position:-270px 0}.smiley-sad{background-position:-288px 0}.smiley-smile{background-position:-306px 0}.smiley-surprised{background-position:-324px 0}.smiley-thumbdown{background-position:-342px 0}.smiley-thumbup{background-position:-360px 0}.smiley-twisted{background-position:-378px 0}.smiley-wink{background-position:-396px 0}
.smilies-selector-content{margin:0 -6px;width:130px;position: absolute;z-index: 1;border: 1px solid #ccc;padding: 10px; border-radius: 4px;background: #fff;left: -50px;}
.smilies{
    position: relative;
    display: inline-block;
}




/*留言板*/
.xn-comments{


}
.xn-comments-ul{
    padding: 15px 0px ;
}
.xn-comments-ul>li{
    border-top:  1px dotted #ccc;
    padding: 10px 0px;
}
.xn-comments-ul .avatar{
    float: left;
    width: 40px;
    height: 40px;
    display: block;

}
.xn-comments-ul .avatar img{
    border-radius: 50%;
    border: 1px solid #ddd;

}

.xn-comments-ul .userAvatar-default{
    background: url("./images/avatar_default.png") center 50% no-repeat;
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.xn-comments-ul .comment{
    position: relative;
    margin-left:50px;
}
.xn-comments-ul .comment-head{
}
.xn-comments-ul .current .title{
    color: #428bca;
}
.xn-comments-ul .current p{
    margin: 5px 0 10px 20px;
}
.xn-comments-ul .current .blockquote{
    margin-left: 10px;
    margin-top: 5px;
    padding: 5px 5px 0px 9px ;

    border-left:2px solid rgba(181, 212, 206, 0.98);
    border-top:1px solid rgba(187, 215, 208, 0.50);
    border-right:1px solid rgba(187, 215, 208, 0.50);
    font-size: 14px;
    color: #999;
}
.xn-comments-ul .current a{
    padding:0px 5px ;
    border-left: 1px solid #ccc;

}
.xn-comments-ul a:hover{
    text-decoration: none;
}

.xn-reply{
    position: relative;
}
.smiley-list{
    width: 100px;
}
.evaluate-feedBackCode i{
    font-size: 18px;
    margin:0px 5px;
    cursor: pointer;
}

.evaluate-feedBackCode .glyphicon-star{
    color: #ff0000;
}
.evaluate-smiley{
    position: relative;
}
.evaluate-smiley-selector{
    position: absolute;
    left: 0px;
    z-index: 1;
}

.comments-attachment-list{

}


.comments-attachment-list .attachment-item{
    width: 90px;
    height: 90px;
    float: left;
    text-align: center;
    margin-right: 10px;
    margin-top: 20px;
    position: relative;
}
.comments-attachment-list .attachment-item .attachment-img{
    display: inline-block;
    width: 50px;
    height: 50px;
}

.comments-attachment-list .attachment-item a{
    border-left: 1px solid transparent;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    height: 40px;
    line-height: 30px;
    display: block;
}
.comments-attachment-list .attachment-item .xls{
    background: url("./images/comments-attachment-icon.png") -36px -26px no-repeat;
}
.comments-attachment-list .attachment-item .doc{
    background: url("./images/comments-attachment-icon.png") -36px -146px no-repeat;
}
.comments-attachment-list .attachment-item .ppt{
    background: url("./images/comments-attachment-icon.png") -96px -26px no-repeat;
}
.comments-attachment-list .attachment-item .txt{
    background: url("./images/comments-attachment-icon.png") -36px -266px no-repeat;
}
.comments-attachment-list .attachment-item .pdf{
    background: url("./images/comments-attachment-icon.png") -36px -86px no-repeat;
}
.comments-attachment-list .attachment-item .zip{
    background: url("./images/comments-attachment-icon.png") -36px -206px no-repeat;
}
.comments-attachment-list .attachment-item .other{
    background: url("./images/comments-attachment-icon.png") -96px -86px no-repeat;
}
.comments-attachment-list .attachment-item .img{
    background-position:  50% 50%;
    background-repeat: no-repeat;
}
.comments-attachment-list .attachment-item .attachment-add{
    background: url("./images/comments-attachment-icon.png") -96px -206px no-repeat;
    cursor: pointer;
}



/*查看*/
.xn-comments-attachmentView-bj{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index:99;
}
.xn-comments-attachmentView-box{
    position: fixed;
    left: 50%;
    top: 100px;
    z-index:999;
}
.xn-comments-attachmentView-box .xn-attachmentView-box-nr{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: center;
    background: #fff;
    margin-left:-50% ;
    border-radius: 4px;
}
.xn-comments-attachmentView-box .xn-attachmentView-box-nr .icon-close{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 28px;
    height: 28px;
    line-height: 25px;
    font-size: 23px;
    z-index: 3;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #fff;

}
.xn-comments-attachmentView-box .xn-attachmentView-box-nr .xn-attachmentView-box-img{
    max-width:800px;
    min-height: 100px;
    min-width: 80px;
    max-height:600px;
}