dashboard.less 4.6 KB

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