dashboard.less 4.5 KB

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