taskeffort.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. #tableContainer {background-color: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,.045); border-radius: 4px;}
  2. #tableHeader {background-color: #fff; border-bottom: 1px solid #eee; height: 70px; position: relative;}
  3. #timeList {position: relative; height: 70px;}
  4. #timeList .day-cell {position: absolute; border-right: 1px solid #eee; height: 70px; font-weight: bold;}
  5. #timeList .day-name {height: 34px; padding: 7px; text-align: center; line-height: 20px; border-bottom: 1px solid #eee;}
  6. #timeList .day-consumed, #timeList .day-left {position: absolute; left: 0; top: 34px; height: 34px; padding: 7px; text-align: center; line-height: 20px; width: 50%;}
  7. #timeList .day-left {left: 50%; border-left: 1px solid #eee;}
  8. #totalDays {position: relative; height: 34px;}
  9. #totalDays .day-cell {position: absolute; border-right: 1px solid #eee; height: 34px; font-weight: bold; text-align: center;}
  10. #totalDays .day-consumed, #totalDays .day-left {position: absolute; width: 50%; left: 0; top: 0; height: 34px; padding: 7px; line-height: 20px;}
  11. #totalDays .day-left {left: 50%; border-left: 1px solid #eee;}
  12. #tableHeader.is-fixed {position: fixed; background-color: #666; color: #fff; z-index: 1000; top: 0;}
  13. #tableHeader.is-fixed .day-left, #tableHeader.is-fixed .day-name, #tableHeader.is-fixed .day-cell, #tableHeader.is-fixed #headerColName, #tableHeader.is-fixed #headerColGroup, #tableFooter.is-fixed #footerTotal, #tableFooter.is-fixed #totalDays .day-cell, #tableFooter.is-fixed #totalDays .day-left {border-color: #aaa;}
  14. #tableFooter.is-fixed {position: fixed; background-color: #666; color: #fff; z-index: 1000; bottom: 0;}
  15. #headerColGroup, #headerColName, #headerTimeline {position: absolute; width: 200px; left: 0; top: 0; bottom: 0;}
  16. #headerColGroup, #headerColName {border-right: 1px solid #eee; padding: 18px 10px;}
  17. #headerColName {left: 200px; line-height: 32px; font-weight: bold; text-align: center;}
  18. #headerTimeline, #totalCells {left: 400px; right: 0; overflow: hidden; width: auto; position: absolute;}
  19. #tableFooter {border-top: 1px solid #eee; height: 34px; position: relative;}
  20. #tableBody {min-height: 34px; position: relative;}
  21. #footerTotal {width: 400px; text-align: center; position: absolute; left: 0; top: 0; bottom: 0; line-height: 32px; border-right: 1px solid #eee;}
  22. #groups {width: 400px; border-right: 1px solid #eee; line-height: 16px;}
  23. #groups > .row-group {display: table;}
  24. #groups > .row-group + .row-group {border-top: 1px solid #eee;}
  25. #groups > .row-group > .cell-group {display: table-cell; width: 200px; vertical-align: middle;}
  26. #groups > .row-group > .group-name {padding: 8px; word-break: break-all;}
  27. #groups > .row-group > .group-tasks {border-left: 1px solid #eee; display: flex; flex-direction: column;}
  28. #groups .group-task {padding: 8px; display: flex; align-items: center; flex: auto; word-break: break-all;}
  29. #groups .group-task + .group-task {border-top: 1px solid #eee;}
  30. #cellsContainer {position: absolute; left: 400px; right: 0; top: 0; bottom: 0; overflow: hidden;}
  31. #cells {position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
  32. #scrollbarContainer {position: absolute; left: 400px; right: 0; top: -12px; overflow: auto; min-height: 1px; opacity: 0; background-color: rgba(220,220,220,.5); transition: opacity .3s; z-index: 10;}
  33. #scrollbar {height: 1px;}
  34. #tableContainer:hover #scrollbarContainer {opacity: 1;}
  35. #cells .data-cell {position: absolute; background-color: #fff; border-right: 1px solid #eee; border-bottom: 1px solid #eee;}
  36. #cells .day-consumed, #cells .day-left {position: absolute; width: 50%; top: 0; left: 0; right: 0; padding: 8px; display: flex; justify-content: center; align-items: center; bottom: 0;}
  37. #cells .day-left {left: 50%; border-left: 1px solid #eee;}
  38. #tableContainer .hover-row, #tableContainer .hover-day {background-color: rgba(0,0,0,.05);}
  39. #tableContainer .hover-day.hover-row {background-color: rgba(0,0,0,.1);}