dashboard.less 4.7 KB

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