/module/tutorial/css/index.css

https://github.com/easysoft/zentaopms · CSS · 80 lines · 76 code · 4 blank · 0 comment · 0 complexity · 5af35ef43fa09134e4815a749a4c5599 MD5 · raw file 

    

  1. #pageContainer {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;}
    2. 

  2. #iframeWrapper {position: absolute; left: 0; top: 0; bottom: 0; right: 300px; display: block;}
    3. 

  3. #sidebar {position: absolute; right: 0; top: 0; bottom: 0; width: 300px; background: #efefef; overflow-y: auto; padding-top: 56px; border-left: 1px solid #ddd;}
    4. 

  4. #sidebar > header {color: #fff; padding: 10px; position: fixed; top: 0; right: 0; z-index: 10; width: 300px; border-bottom: 1px solid #ddd;}
    5. 

  5. #sidebar > header > h2 {margin: 0 0 0 40px; font-size: 18px; padding: 0; line-height: 36px; color: #fff;}
    6. 

  6. #sidebar > header .start-icon {position: absolute; left: 10px; top: 10px; width: 36px; height: 36px;  text-align: center; margin-right: 5px;}
    7. 

  7. #sidebar > header .start-icon > .icon-front {position: absolute; width: 36px; height: 36px; line-height: 36px; top: 0; left: 1px; font-size: 12px;}
    8. 

  8. #sidebar > header .start-icon > .icon-back {font-size: 22px; color: #fff; line-height: 36px;}
    9. 

  9. #sidebar > header .start-icon > .icon-back:before {content: '\f0a3';}
    10. 

  10. #sidebar > header > .actions {position: absolute; right: 15px; top: 15px;}
    11. 

  11. #sidebar > section {padding: 20px 10px; border-top: 1px solid #ddd;}
    12. 

  12. #sidebar > section > h4 {margin: 0 0 10px 0; font-size: 14px; color: #808080; font-weight: normal;}
    13. 

  13. #task {border: none;}
    14. 

  14. #task > .panel-heading {padding: 10px; color: #fff; font-size: 15px; transition: background .4s;}
    15. 

  15. #task > .panel-heading > .pull-right {margin-top: 3px; opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2);}
    16. 

  16. #task > .panel-body {border: 1px solid #ddd; border-top: none; padding: 0;}
    17. 

  17. #task .panel-body > .btn {padding: 5px 7px;}
    18. 

  18. #task .task-desc > ul, #task .task-desc > p {line-height: 20px;}
    19. 

  19. #task .task-desc {padding: 10px;}
    20. 

  20. #task .task-desc > ul {list-style: none; padding-left: 0; margin: 0;}
    21. 

  21. #task .task-desc > ul > li {position: relative; padding: 2px 0; overflow: hidden; padding-left: 26px; transition: background .5s;}
    22. 

  22. #task .task-desc > ul > li[data-target].finish {color: #999; text-decoration: line-through;}
    23. 

  23. #task .task-desc > ul > li[data-target].finish .task-nav {opacity: .6; text-decoration: line-through;}
    24. 

  24. #task .task-desc > ul > li:before {font-family: ZentaoIcon; font-size: 14px; font-style: normal; font-weight: 400; font-variant: normal; line-height: 1; text-transform: none; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e836'; display: block; width: 26px; height: 20px; line-height: 20px; text-align: center; opacity: .6; color: #808080; position: absolute; top: 2px; left: 0;}
    25. 

  25. #task .task-desc > ul > li[data-target]:after {content: ' '; display: block; position: absolute; left: 0; top: -100%; width: 100%; height: 100%; border: 2px solid #F1A325; transition: top .5s; pointer-events: none; border-radius: 4px;}
    26. 

  26. #task .task-desc > ul > li[data-target]:before {font-family: ZentaoIcon; content: '\e836'; color: #333;}
    27. 

  27. #task .task-desc > ul > li[data-target].finish:after {top: 100%;}
    28. 

  28. #task .task-desc > ul > li[data-target].finish:before {content: '\e92f'; color: #43a047;}
    29. 

  29. #task .task-desc > ul > li[data-target].active {background: #FFF0D5;}
    30. 

  30. #task .task-desc > ul > li[data-target].active:after {top: 0%;}
    31. 

  31. #task .task-desc > ul > li[data-target].active:before {font-family: ZentaoIcon; color: #EA644A; content: '\e92c';}
    32. 

  32. #task .task-desc > ul > li[data-target].wait:before {content: ' '; display: block; width: 12px; height: 12px; border: 1px solid #333; border-radius: 50%; left: 8px; top: 6px}
    33. 

  33. #openTaskPage {display: block; overflow: hidden; position: relative; height: 36px;}
    34. 

  34. #openTaskPage > div {padding: 8px 10px; line-height: 20px; transition: top .4s cubic-bezier(.175,.885,.32,1); position: absolute; left: 0; top: 0; right: 0;}
    35. 

  35. #openTaskPage > div > .icon {display: inline-block; width: 30px; text-align: center;}
    36. 

  36. #openTaskPage:hover {background: #EBF2F9;}
    37. 

  37. #openTaskPage > .normal {top: 0;}
    38. 

  38. #openTaskPage.open {color: #43a047; background: #DDF4DF;}
    39. 

  39. #openTaskPage.open:hover {color: #006af1; background: #EBF2F9;}
    40. 

  40. #openTaskPage > .opened, #openTaskPage > .reload, #openTaskPage.open > .reload {top: 36px;}
    41. 

  41. #openTaskPage.open > .normal, #openTaskPage.open:hover > .opened {top: -36px;}
    42. 

  42. #openTaskPage.open > .opened, #openTaskPage.open:hover > .reload {top: 0;}
    43. 

  43. 

  44. #task.finish > .panel-heading {background: #43a047;}
    45. 

  45. #task.finish > .panel-heading .task-name {text-decoration: line-through;}
    46. 

  46. #task.finish.finish > .panel-heading > .pull-right {opacity: 1; transform: scale(1);}
    47. 

  47. #task .task-nav {color: #006af1; display: inline-block; background: #EBF2F9; padding: 1px 5px 0; transition: all .2s;}
    48. 

  48. #task .task-nav:hover {color: #fff; background: #006af1; cursor: pointer;}
    49. 

  49. #tasksProgress {background: #ddd; position: relative;}
    50. 

  50. #tasksProgress > .progress-bar {background: #006af1; height: 8px; border-radius: 4px; margin-bottom: 15px; transition: background .4s, width .4s;}
    51. 

  51. #tasksProgress.finish > .progress-bar {width: 100% !important; background: #43a047;}
    52. 

  52. #tasksProgress .progress-text {position: absolute; right: 0; top: -25px; font-weight: bold; opacity: 0.7; color: #006af1;}
    53. 

  53. #tasksProgress.finish .progress-text {color: #43a047; opacity: 1;}
    54. 

  54. 

  55. #tasks {background: #fff; box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 2px 6px 0 rgba(0,0,0,0.045); border-radius: 6px;}
    56. 

  56. #tasks > li > a {padding: 8px 8px 8px 12px;}
    57. 

  57. #tasks > li > a > .pull-right {filter: alpha(opacity=0); opacity: 0; transition: opacity .4s, transform .4s; transform: scale(2.5, 2); color: #43a047;}
    58. 

  58. #tasks > li.finish > a, #tasks > li.finish.active > a {box-shadow: inset 4px 0 0 #43a047; border-left-color: #43a047; color: #808080;}
    59. 

  59. #tasks > li.finish > a > .pull-right {filter: alpha(opacity=100); opacity: 1; transform: scale(1);}
    60. 

  60. #tasks > li.finish > a > .task-name {text-decoration: line-through;}
    61. 

  61. #tasks > li.active > a, #tasks > li.active.finish > a {box-shadow: inset 4px 0 0 #006af1; border-color: #ddd; border-left-color: #006af1; color: #006af1; background: #EBF2F9;}
    62. 

  62. #tasks > li.finish > a:hover, #tasks > li.active > a:hover {background-color: #f1f1f1;}
    63. 

  63. 

  64. #taskModalBack {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; transition: opacity .4s; opacity: 0; display: none;}
    65. 

  65. #taskModalBack.in {filter: alpha(opacity=60); opacity: 0.6;}
    66. 

  66. #taskModal {width: 500px; position: absolute; background: #43a047; color: #fff; text-align: center; overflow: hidden; transform: scale(.5) translate(0, 200px) rotateX(120deg); transition: transform .4s, opacity .4s; opacity: 0; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); top: 0; padding: 30px; left: 50%; margin-left: -250px; top: 20%; box-shadow: 0 0 20px 0 rgba(0,0,0,.25); display: none;}
    67. 

  67. #taskModal.in {transform: scale(1) translate(0) rotateX(0); opacity: 1;}
    68. 

  68. #taskModal h3 {margin-bottom: 20px;}
    69. 

  69. #taskModal .start-icon > .icon-spin {-moz-animation: spin 10s infinite linear; -o-animation: spin 10s infinite linear; -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear;}
    70. 

  70. #taskModal .start-icon {width: 60px; height: 60px; text-align: center; margin: 10px auto; position: relative;}
    71. 

  71. #taskModal .start-icon > .icon-front {font-size: 56px; color: #fff; line-height: 60px; width: 60px; height: 60px; position: absolute; left: 0; top: 0;}
    72. 

  72. #taskModal > .close {position: absolute; right: 15px; top: 10px;}
    73. 

  73. #taskModal > .finish-all {display: none;}
    74. 

  74. #taskModal > .finish {display: block;}
    75. 

  75. #taskModal.show-all > .finish-all {display: block;}
    76. 

  76. #taskModal.show-all > .finish {display: none;}
    77. 

  77. #taskModal .btn-outline {background-color: transparent; border: 1px solid #fff; color: #fff}
    78. 

  78. #taskModal .btn-outline:hover {background-color: #fff; color: #43a047}
    79. 

  79. 

  80. .icon-close:before {color: #fff;}
    81.