style.sass 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. $indicator-color: red
  2. $hour-width: 200px
  3. $channel-height: 34px
  4. html, body
  5. width: 100%
  6. height: 100%
  7. overflow: hidden
  8. margin: 0
  9. padding: 0
  10. .navbar
  11. background-color: #232323
  12. width: 100%
  13. position: fixed
  14. top: 0
  15. .navitem
  16. color: #9a9a9a
  17. text-decoration: none
  18. font: normal 13px/18px Helvetica
  19. display: inline-block
  20. padding: 10px 20px
  21. &:hover
  22. color: #bcbcbc
  23. &.active
  24. color: #fff
  25. background-color: #1a1a1a
  26. .guide
  27. width: 100%
  28. height: 100%
  29. overflow-x: scroll
  30. position: relative
  31. .timeline-bg
  32. width: 100%
  33. height: 21px
  34. top: 38px
  35. position: fixed
  36. background-color: #fdfdfd
  37. .timeline
  38. width: 24 * $hour-width
  39. height: 26px
  40. position: absolute
  41. top: 38px
  42. background-color: #fdfdfd
  43. .hour
  44. font: normal 13px Helvetica
  45. float: left
  46. width: $hour-width - 7px
  47. border-left: 1px solid #444
  48. padding: 5px 0 0 6px
  49. height: 21px
  50. //.label
  51. // width: 50px
  52. // margin-left: -25px
  53. // text-align: center
  54. .channels
  55. margin-top: 66px
  56. width: 24 * $hour-width
  57. overflow: hidden
  58. .channel
  59. position: relative
  60. height: $channel-height
  61. .program
  62. position: absolute
  63. white-space: nowrap
  64. height: $channel-height - 10px
  65. padding: 8px 0 0 8px
  66. border-left: 2px solid white
  67. background-color: #eee
  68. font: normal 13px/15px Helvetica
  69. overflow: hidden
  70. color: #555
  71. &.past
  72. background-color: #ececec
  73. color: #aaa
  74. &.current
  75. background-color: #ddd
  76. color: #444
  77. .indicator
  78. position: absolute
  79. width: 1px
  80. height: 100%
  81. top: 66px
  82. background-color: $indicator-color