dashboard.less 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. @import "../ui/var";
  2. /*
  3. The dashboard page style
  4. */
  5. @dashboardHeaderBorderColor: #D6D6D6;
  6. @dashboardHeaderLinkColor: #444;
  7. @dashboardHeaderLinkHoverColor: #D9453D;
  8. @dashboardSwitchMenuHoverBgColor: @linkColor;
  9. @dashboardSwitchMenuHoverFontColor: #FFF;
  10. // dashboard header, contains dashboard selection menu and nav of Feed/PR/Issues.
  11. #dashboard-header {
  12. border-bottom: 1px solid @dashboardHeaderBorderColor;
  13. height: 69px;
  14. > .menu-line {
  15. > li {
  16. padding: 12px 6px;
  17. }
  18. > li.right {
  19. > a {
  20. font-size: 1.2em;
  21. color: @dashboardHeaderLinkColor;
  22. padding: .4em .8em;
  23. &:hover {
  24. background-color: transparent;
  25. color: @dashboardHeaderLinkHoverColor;
  26. }
  27. .octicon {
  28. margin-right: 6px;
  29. }
  30. }
  31. .current {
  32. border-bottom: 2px solid #D26911;
  33. }
  34. }
  35. }
  36. }
  37. // dashboard context switch selection
  38. #dashboard-selection-menu {
  39. a img {
  40. margin: -4px 10px 0 0;
  41. }
  42. }
  43. #dashboard {
  44. padding: 24px 0;
  45. }
  46. // dashboard sidebar contains contributed repositories panel,
  47. // and my repositories panel
  48. #dashboard-sidebar {
  49. .panel-header h4 {
  50. margin: 0;
  51. }
  52. > .panel {
  53. margin-bottom: 24px;
  54. border-bottom-left-radius: .3em;
  55. border-bottom-right-radius: .3em;
  56. }
  57. }
  58. #dashboard-sidebar-menu {
  59. border-top-left-radius: .3em;
  60. border-top-right-radius: .3em;
  61. > li {
  62. border: 1px solid #d6d6d6;
  63. float: left;
  64. margin-right: -1px;
  65. border-bottom: none;
  66. > a {
  67. padding-top: .3em;
  68. padding-bottom: .3em;
  69. }
  70. }
  71. > li.first {
  72. border-top-left-radius: .3em;
  73. > a {
  74. border-top-left-radius: .3em;
  75. }
  76. }
  77. > li.drop {
  78. border: none;
  79. float: right;
  80. }
  81. width: 100%;
  82. height: 32px;
  83. > li.js-tab-nav-show {
  84. background-color: #EEEEEE;
  85. }
  86. > li.last {
  87. border-top-right-radius: .3em;
  88. > a {
  89. border-top-right-radius: .3em;
  90. }
  91. }
  92. }
  93. #dashboard-my-mirror,
  94. #dashboard-my-org,
  95. #dashboard-my-repo {
  96. li {
  97. &.private {
  98. background-color: #fcf8e9;
  99. }
  100. border-bottom: 1px solid #EAEAEA;
  101. &:last-child {
  102. border-bottom: none;
  103. }
  104. a {
  105. padding: 6px 1.2em;
  106. display: block;
  107. .octicon {
  108. margin-right: 6px;
  109. color: #888;
  110. }
  111. &:hover {
  112. .repo-name {
  113. text-decoration: underline;
  114. }
  115. }
  116. }
  117. }
  118. .repo-name {
  119. font-size: 1.1em;
  120. }
  121. .repo-star {
  122. color: #888;
  123. }
  124. .repo-contrib-header {
  125. border-top: 1px solid #d6d6d6;
  126. }
  127. }
  128. #dashboard-my-repo {
  129. .panel-header {
  130. .octicon {
  131. margin-right: 6px;
  132. font-size: 12px;
  133. }
  134. }
  135. .repo-count {
  136. margin-left: 4px;
  137. font-size: .8em;
  138. }
  139. }
  140. #dashboard-my-org,
  141. #dashboard-my-mirror {
  142. display: none;
  143. }
  144. // the button of new repository in my repositories panel
  145. #dashboard-new-repo {
  146. width: 50px;
  147. height: 33px;
  148. padding-top: 6px;
  149. margin-right: 1px;
  150. .octicon {
  151. font-size: 2em;
  152. }
  153. border-top-left-radius: .3em;
  154. border-top-right-radius: .3em;
  155. }
  156. // the drop-down menu of #dashboard-new-repo
  157. #dashboard-new-repo-menu {
  158. top: 35px;
  159. width: 180px;
  160. background-color: #FFF;
  161. left: -132px;
  162. .octicon {
  163. margin-right: 6px;
  164. font-size: 1.1em;
  165. }
  166. }
  167. #dashboard-selection-menu {
  168. width: auto;
  169. max-width: 300px;
  170. > .drop-down {
  171. top: 56px;
  172. }
  173. li {
  174. white-space: nowrap;
  175. &.checked {
  176. .octicon {
  177. opacity: 1;
  178. }
  179. }
  180. a {
  181. text-overflow: ellipsis;
  182. -o-text-overflow: ellipsis;
  183. overflow: hidden;
  184. }
  185. }
  186. }
  187. // the drop-down menu of #dashboard-selection-menu
  188. #dashboard-switch-menu {
  189. > li {
  190. > a {
  191. img {
  192. margin-top: 0;
  193. }
  194. .octicon {
  195. margin-right: 12px;
  196. }
  197. }
  198. &:last-child {
  199. > a {
  200. border-bottom-left-radius: .3em;
  201. border-bottom-right-radius: .3em;
  202. }
  203. }
  204. }
  205. > li.org > a {
  206. .octicon {
  207. opacity: 0;
  208. }
  209. }
  210. > li.checked > a {
  211. .octicon {
  212. opacity: 1;
  213. }
  214. font-weight: bold;
  215. }
  216. border-bottom-left-radius: .3em;
  217. border-bottom-right-radius: .3em;
  218. }
  219. #dashboard-news {
  220. padding-bottom: 60px;
  221. .news {
  222. margin-right: 2.4em;
  223. .mega-octicon {
  224. color: #CCC;
  225. }
  226. .avatar {
  227. margin: 0 1.2em;
  228. }
  229. .news-content,
  230. .news-time {
  231. color: #888;
  232. }
  233. padding-bottom: 1em;
  234. margin-bottom: 1em;
  235. border-bottom: 1px solid #E6E6E6;
  236. min-height: 30px;
  237. }
  238. .push-news {
  239. .news-content li {
  240. margin-left: 1em;
  241. img {
  242. vertical-align: inherit;
  243. margin-bottom: -2px;
  244. }
  245. }
  246. }
  247. }