style.sass 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. $indicator-color: red
  2. $hour-width: 200px
  3. $channel-height: 34px
  4. $header-height: 64px
  5. $channel-label-width: 180px
  6. html, body
  7. width: 100%
  8. height: 100%
  9. overflow: hidden
  10. margin: 0
  11. padding: 0
  12. .navbar
  13. background-color: #232323
  14. width: 100%
  15. position: fixed
  16. top: 0
  17. .navitem
  18. color: #9a9a9a
  19. text-decoration: none
  20. font: normal 13px/18px Helvetica
  21. display: inline-block
  22. padding: 10px 20px
  23. &:hover
  24. color: #bcbcbc
  25. &.active
  26. color: #fff
  27. background-color: #1a1a1a
  28. &.disabled
  29. color: #676767
  30. cursor: default
  31. .guide
  32. width: 100%
  33. //height: 100%
  34. overflow-x: scroll
  35. position: relative
  36. .timeline-bg
  37. width: 100%
  38. height: 21px
  39. top: 38px
  40. position: fixed
  41. position: fixed
  42. background-color: #fdfdfd
  43. .timeline
  44. width: 24 * $hour-width
  45. height: 26px
  46. position: absolute
  47. top: 38px
  48. background-color: #fdfdfd
  49. margin-left: $channel-label-width - 1px
  50. .hour
  51. font: normal 13px Helvetica
  52. float: left
  53. width: $hour-width - 7px
  54. border-left: 1px solid #444
  55. padding: 5px 0 0 6px
  56. height: 20px
  57. //.label
  58. // width: 50px
  59. // margin-left: -25px
  60. // text-align: center
  61. .channels
  62. margin: $header-height 0 0 ($channel-label-width - 1px)
  63. width: 24 * $hour-width
  64. overflow: hidden
  65. .channel
  66. position: relative
  67. height: $channel-height
  68. .program
  69. position: absolute
  70. white-space: nowrap
  71. height: $channel-height - 10px
  72. padding: 8px 0 0 8px
  73. border-left: 1px solid white
  74. border-right: 1px solid white
  75. background-color: #eee
  76. font: normal 13px/15px Helvetica
  77. overflow: hidden
  78. color: #555
  79. &.past
  80. background-color: #ececec
  81. color: #aaa
  82. &.current
  83. background-color: #ddd
  84. color: #444
  85. .favlink
  86. position: absolute
  87. right: 10px
  88. top: 10px
  89. visibility: hidden
  90. color: #fff
  91. &:hover
  92. color: #bcbcbc
  93. &.favourite
  94. color: orange
  95. visibility: visible
  96. &:hover .favlink
  97. visibility: visible
  98. .indicator
  99. position: absolute
  100. width: 1px
  101. height: 100%
  102. top: $header-height
  103. background-color: $indicator-color
  104. .channel-labels
  105. width: $channel-label-width - 2px
  106. position: fixed
  107. top: $header-height
  108. left: 0
  109. border-right: 2px solid #fff
  110. .label
  111. width: $channel-label-width - 13px
  112. background-color: #e5e5e5
  113. color: #666
  114. font: bold 13px/15px Helvetica
  115. padding: 8px 10px 0 0
  116. text-align: right
  117. height: $channel-height - 10px
  118. margin-bottom: 2px
  119. border-right: 1px solid #bbb
  120. .select-channels
  121. margin-top: 38px
  122. label
  123. padding: 5px
  124. margin: 4px 4px 0 0
  125. display: inline-block
  126. background-color: #f1f1f1
  127. &.disabled
  128. opacity: 0.5
  129. button
  130. margin: 6px 0 6px 6px
  131. $loader-size: 66px
  132. .loading-screen
  133. display: none
  134. position: fixed
  135. width: 100%
  136. height: 100%
  137. top: 0
  138. left: 0
  139. .bg
  140. width: 100%
  141. height: 100%
  142. background-color: #000
  143. opacity: 0.8
  144. .loader
  145. position: absolute
  146. width: $loader-size
  147. height: $loader-size
  148. top: 50%
  149. left: 50%
  150. margin: (-$loader-size / 2) 0 0 (-$loader-size / 2)
  151. background: url("loading.gif") no-repeat left top