Scrum/css/style.css

@charset "utf-8";

/**
 * File: style.css
 * User: Baoxu
 * Date: 16/3/8
 * Time: 23:55
 * Desc: css样式表
 */

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #f2f2f2 !important;
    margin-bottom: 60px;
}

.container {
    min-width: 970px;
    width: 90%;
    margin: 0 auto;
}

/************************************/
/*****         页头导航区域       *****/
/************************************/
#header {
    height: 40px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    line-height: 40px;
    background-color: #0b1721;
    box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
}

/*LOGO的特殊字体*/
@font-face {
    font-family: logoFont;
    src: url('ANASTAS.TTF')
}

#logo {
    font-family: logoFont, Georgia, "Times New Roman", Times, serif;
    font-size: 32px !important;
    line-height: 40px;
    margin: 0 20px 0 5px;
    float: left;
    color: #ffffff;
}

/*导航条*/
nav {

}

.nav-item {
    float: left;
    position: relative;
    display: inline-block;
    padding: 15px 12px 5px;
    line-height: 20px;
    font-weight: lighter;
    color: #cdddeb;
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
}

a.nav-item:hover {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

nav a.active {
    color: #ffffff;
}

nav a.active:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -5px;
    vertical-align: middle;
    content: " ";
    border-right: 5px solid transparent;
    border-bottom: 5px solid;
    border-left: 5px solid transparent;
}

/************************************/
/*****      任务表格区域的范围     *****/
/************************************/
#task {
    margin: 20px auto 80px;
}

/*任务表格样式*/
#task table {
    width: 100%;
    border-collapse: inherit;
    border-spacing: 6px 0;
}

#task table td {
    width: 30%;
    background-color: #fff;
    color: #333333;
    border-right: solid 1px #dfdfdf;
    border-left: solid 1px #dfdfdf;
}

/*任务表表头，用于显示任务的步骤和分类*/
#task table th {
    border-radius: 5px 5px 0 0;
    background-color: #080808;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
}

/*成员列列头*/
#task table th.th-member {
    background-color: #3b4a5b;
}

/*待办事项列列头*/
#task table th.th-todo {
    background-color: #78CFBF;

}

/*正在进行列列头*/
#task table th.th-doing {
    background-color: #3EC6E0;

}

/*已经完成列列头*/
#task table th.th-done {
    background-color: #E3536C;

}

/*任务表格第一列展示的接收任务的人员，宽度稍窄*/
#task table tr > th:first-child, #task table tr > td:first-child {
    text-align: center;
    width: 10%;
}

/*包含任务列表的td需要垂直方向上向顶部对齐*/
#task table tr.tb-task td {
    vertical-align: top;
    border-bottom: dotted 1px #eeeeee;
}

/*显示人名的td继续保持垂直居中*/
#task table tr.tb-task td:first-child {
    vertical-align: middle;
}

/*任务列表ul的样式*/
#task table tr.tb-task td ul {
    min-height: 100px;
    padding: 0;
    margin: 0;
}

/*每一条任务的样式*/
#task table tr.tb-task td ul li {
    display: block;
    height: 40px;
    margin: 4px 0;
    font-size: 14px;
    line-height: 20px;
}

/*任务条的三部分，最左侧的拖拽组件、任务名称、任务说明*/
.task-head, .task-name, .task-more {
    float: left;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    vertical-align: middle;
}

.task-head {
    width: 10px;
}

.task-head:hover {
    cursor: move;
}

.task-name {
    border-bottom: dotted 1px #e7e7e7;
    border-top: dotted 1px #e7e7e7;
    background-color: #f5f5f5;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    width: calc(100% - 10px - 40px);
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}

.task-name:hover {
    cursor: move;
}

.task-more {
    border-bottom: dotted 1px #e7e7e7;
    border-top: dotted 1px #e7e7e7;
    width: 40px;
    background-color: #e7e7e7;
    font-size: 12px;
    text-align: center;
    color: #777777;
}

.task-more:hover {
    cursor: context-menu;
    color: #333333;
}

.task-more:hover:after {
    content: "修改";
}

/*任务的不同进度显示不同的颜色和样式*/
.task-todo .task-head {
    background-color: #82DACA;
}

.task-doing .task-head {
    background-color: #53CFE9;
}

.task-done .task-head {
    background-color: #EB6379;
}

/*任务表有一行用于新增成员*/
.add-task td {
    border-bottom: dotted 1px #eeeeee;
    height: 50px;
}

.add-task td .dropdown ul{
    max-height: 200px;
    overflow: auto;
}

.add-task td .dropdown ul li{
    margin: 0 auto;
}

/*任务表格的最后一行用于添加新成员及任务的占位*/
.tf-task td {
    border-bottom: solid 1px #dfdfdf;
    height: 50px;
}

.tf-task a {
    display: block;
    width: 90%;
    height: 30px;
    margin: 0 auto;
    line-height: 28px;
    color: #888888;
    border: solid 1px #eeeeee;
    border-radius: 3px;
}

.tf-task a:after{
    content: '+';
}

.tf-task a:hover {
    background: #eeeeee;
    border: solid 1px #dddddd;
    color: #222222;
    text-decoration: none;
    cursor: pointer;
}

.tf-task a:hover:after{
    content: '添加成员任务';
    font-size: 12px;
}

/*元素被拖动时，待接收位置形成的占位符的样式*/
#task table tr td ul li.sortable-placeholder {
    border: #eeeeee dashed 1px;
    background: #ffffff;
    margin: 2px;
    font-size: 14px;
    line-height: 40px;
    color: #dddddd;
    text-align: center;
}

#task table td ul li.sortable-placeholder:after {
    content: "move here";
}

/*元素被拖动时，产生的被拖动helper的样式*/
#task table tr td ul li.ui-sortable-helper {
    transform: rotate(2deg);
    box-shadow: 2px 2px 5px #cccccc;
}

/************************************/
/*****        页面尾部区域        *****/
/************************************/
#footer {
    padding: 20px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#footer p {
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 0;
}

#footer p a:hover{
    text-decoration: none;
}

/************************************/
/*****       其他公共样式        *****/
/************************************/

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width:8px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    /*-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius:10px;
    background:rgba(0,0,0,0.1);
    /*-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);*/
}
::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(255,0,0,0.4);
}