style.css 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. @charset "utf-8";
  2. /**
  3. * File: style.css
  4. * User: Baoxu
  5. * Date: 16/3/8
  6. * Time: 23:55
  7. * Desc: css样式表
  8. */
  9. html {
  10. position: relative;
  11. min-height: 100%;
  12. }
  13. body {
  14. background-color: #f2f2f2 !important;
  15. margin-bottom: 60px;
  16. }
  17. .container {
  18. min-width: 970px;
  19. width: 90%;
  20. margin: 0 auto;
  21. }
  22. /************************************/
  23. /***** 页头导航区域 *****/
  24. /************************************/
  25. #header {
  26. height: 40px;
  27. width: 100%;
  28. margin: 0 auto;
  29. text-align: center;
  30. line-height: 40px;
  31. background-color: #0b1721;
  32. box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
  33. }
  34. /*LOGO的特殊字体*/
  35. @font-face {
  36. font-family: logoFont;
  37. src: url('ANASTAS.TTF')
  38. }
  39. #logo {
  40. font-family: logoFont, Georgia, "Times New Roman", Times, serif;
  41. font-size: 32px !important;
  42. line-height: 40px;
  43. margin: 0 20px 0 5px;
  44. float: left;
  45. color: #ffffff;
  46. }
  47. /*导航条*/
  48. nav {
  49. }
  50. .nav-item {
  51. float: left;
  52. position: relative;
  53. display: inline-block;
  54. padding: 15px 12px 5px;
  55. line-height: 20px;
  56. font-weight: lighter;
  57. color: #cdddeb;
  58. font-size: 16px;
  59. font-family: Georgia, "Times New Roman", Times, serif;
  60. }
  61. a.nav-item:hover {
  62. color: #ffffff;
  63. text-decoration: none;
  64. cursor: pointer;
  65. }
  66. nav a.active {
  67. color: #ffffff;
  68. }
  69. nav a.active:after {
  70. position: absolute;
  71. bottom: 0;
  72. left: 50%;
  73. width: 0;
  74. height: 0;
  75. margin-left: -5px;
  76. vertical-align: middle;
  77. content: " ";
  78. border-right: 5px solid transparent;
  79. border-bottom: 5px solid;
  80. border-left: 5px solid transparent;
  81. }
  82. /************************************/
  83. /***** 任务表格区域的范围 *****/
  84. /************************************/
  85. #task {
  86. margin: 20px auto 80px;
  87. }
  88. /*任务表格样式*/
  89. #task table {
  90. width: 100%;
  91. border-collapse: inherit;
  92. border-spacing: 6px 0;
  93. }
  94. #task table td {
  95. width: 30%;
  96. background-color: #fff;
  97. color: #333333;
  98. border-right: solid 1px #dfdfdf;
  99. border-left: solid 1px #dfdfdf;
  100. }
  101. /*任务表表头,用于显示任务的步骤和分类*/
  102. #task table th {
  103. border-radius: 5px 5px 0 0;
  104. background-color: #080808;
  105. height: 50px;
  106. line-height: 50px;
  107. font-size: 16px;
  108. font-family: Georgia, "Times New Roman", Times, serif;
  109. font-weight: 100;
  110. color: #ffffff;
  111. text-align: center;
  112. }
  113. /*成员列列头*/
  114. #task table th.th-member {
  115. background-color: #3b4a5b;
  116. }
  117. /*待办事项列列头*/
  118. #task table th.th-todo {
  119. background-color: #78CFBF;
  120. }
  121. /*正在进行列列头*/
  122. #task table th.th-doing {
  123. background-color: #3EC6E0;
  124. }
  125. /*已经完成列列头*/
  126. #task table th.th-done {
  127. background-color: #E3536C;
  128. }
  129. /*任务表格第一列展示的接收任务的人员,宽度稍窄*/
  130. #task table tr > th:first-child, #task table tr > td:first-child {
  131. text-align: center;
  132. width: 10%;
  133. }
  134. /*包含任务列表的td需要垂直方向上向顶部对齐*/
  135. #task table tr.tb-task td {
  136. vertical-align: top;
  137. border-bottom: dotted 1px #eeeeee;
  138. }
  139. /*显示人名的td继续保持垂直居中*/
  140. #task table tr.tb-task td:first-child {
  141. vertical-align: middle;
  142. }
  143. /*任务列表ul的样式*/
  144. #task table tr.tb-task td ul {
  145. min-height: 100px;
  146. padding: 0;
  147. margin: 0;
  148. }
  149. /*每一条任务的样式*/
  150. #task table tr.tb-task td ul li {
  151. display: block;
  152. height: 40px;
  153. margin: 4px 0;
  154. font-size: 14px;
  155. line-height: 20px;
  156. }
  157. /*任务条的三部分,最左侧的拖拽组件、任务名称、任务说明*/
  158. .task-head, .task-name, .task-more {
  159. float: left;
  160. height: 40px;
  161. font-size: 14px;
  162. line-height: 40px;
  163. vertical-align: middle;
  164. }
  165. .task-head {
  166. width: 10px;
  167. }
  168. .task-head:hover {
  169. cursor: move;
  170. }
  171. .task-name {
  172. border-bottom: dotted 1px #e7e7e7;
  173. border-top: dotted 1px #e7e7e7;
  174. background-color: #f5f5f5;
  175. height: 40px;
  176. line-height: 40px;
  177. padding: 0 5px;
  178. width: calc(100% - 10px - 40px);
  179. text-overflow:ellipsis;
  180. white-space:nowrap;
  181. overflow:hidden;
  182. }
  183. .task-name:hover {
  184. cursor: move;
  185. }
  186. .task-more {
  187. border-bottom: dotted 1px #e7e7e7;
  188. border-top: dotted 1px #e7e7e7;
  189. width: 40px;
  190. background-color: #e7e7e7;
  191. font-size: 12px;
  192. text-align: center;
  193. color: #777777;
  194. }
  195. .task-more:hover {
  196. cursor: context-menu;
  197. color: #333333;
  198. }
  199. .task-more:hover:after {
  200. content: "修改";
  201. }
  202. /*任务的不同进度显示不同的颜色和样式*/
  203. .task-todo .task-head {
  204. background-color: #82DACA;
  205. }
  206. .task-doing .task-head {
  207. background-color: #53CFE9;
  208. }
  209. .task-done .task-head {
  210. background-color: #EB6379;
  211. }
  212. /*任务表有一行用于新增成员*/
  213. .add-task td {
  214. border-bottom: dotted 1px #eeeeee;
  215. height: 50px;
  216. }
  217. .add-task td .dropdown ul{
  218. max-height: 200px;
  219. overflow: auto;
  220. }
  221. .add-task td .dropdown ul li{
  222. margin: 0 auto;
  223. }
  224. /*任务表格的最后一行用于添加新成员及任务的占位*/
  225. .tf-task td {
  226. border-bottom: solid 1px #dfdfdf;
  227. height: 50px;
  228. }
  229. .tf-task a {
  230. display: block;
  231. width: 90%;
  232. height: 30px;
  233. margin: 0 auto;
  234. line-height: 28px;
  235. color: #888888;
  236. border: solid 1px #eeeeee;
  237. border-radius: 3px;
  238. }
  239. .tf-task a:after{
  240. content: '+';
  241. }
  242. .tf-task a:hover {
  243. background: #eeeeee;
  244. border: solid 1px #dddddd;
  245. color: #222222;
  246. text-decoration: none;
  247. cursor: pointer;
  248. }
  249. .tf-task a:hover:after{
  250. content: '添加成员任务';
  251. font-size: 12px;
  252. }
  253. /*元素被拖动时,待接收位置形成的占位符的样式*/
  254. #task table tr td ul li.sortable-placeholder {
  255. border: #eeeeee dashed 1px;
  256. background: #ffffff;
  257. margin: 2px;
  258. font-size: 14px;
  259. line-height: 40px;
  260. color: #dddddd;
  261. text-align: center;
  262. }
  263. #task table td ul li.sortable-placeholder:after {
  264. content: "move here";
  265. }
  266. /*元素被拖动时,产生的被拖动helper的样式*/
  267. #task table tr td ul li.ui-sortable-helper {
  268. transform: rotate(2deg);
  269. box-shadow: 2px 2px 5px #cccccc;
  270. }
  271. /************************************/
  272. /***** 页面尾部区域 *****/
  273. /************************************/
  274. #footer {
  275. padding: 20px 0;
  276. color: #999;
  277. text-align: center;
  278. background-color: #f9f9f9;
  279. border-top: 1px solid #e5e5e5;
  280. position: absolute;
  281. bottom: 0;
  282. width: 100%;
  283. }
  284. #footer p {
  285. font-family: Georgia, "Times New Roman", Times, serif;
  286. margin: 0;
  287. }
  288. #footer p a:hover{
  289. text-decoration: none;
  290. }
  291. /************************************/
  292. /***** 其他公共样式 *****/
  293. /************************************/
  294. /* 设置滚动条的样式 */
  295. ::-webkit-scrollbar {
  296. width:8px;
  297. }
  298. /* 滚动槽 */
  299. ::-webkit-scrollbar-track {
  300. /*-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);*/
  301. border-radius:10px;
  302. }
  303. /* 滚动条滑块 */
  304. ::-webkit-scrollbar-thumb {
  305. border-radius:10px;
  306. background:rgba(0,0,0,0.1);
  307. /*-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);*/
  308. }
  309. ::-webkit-scrollbar-thumb:window-inactive {
  310. background:rgba(255,0,0,0.4);
  311. }