/syte/static/less/profiles.less

https://bitbucket.org/samdunne/syte-rails · LESS · 605 lines · 491 code · 102 blank · 12 comment · 0 complexity · ffa7dc42b1608dec72d0570ff5d5a001 MD5 · raw file

  1. //Profiles
  2. .profile {
  3. background: #E9E9E9 url('/static/imgs/b.png');
  4. }
  5. .profile-info {
  6. position: relative;
  7. padding: 15px;
  8. background: #fff;
  9. .close { line-height: 20px; }
  10. .btn {
  11. position: absolute;
  12. right: 17px;
  13. bottom: 20px;
  14. }
  15. }
  16. .profile-avatar {
  17. display: inline-block;
  18. float: left;
  19. border-bottom: 0;
  20. img {
  21. .square(52px);
  22. border: 2px solid @adjacent-color;
  23. }
  24. }
  25. .profile-avatar:hover {
  26. border-bottom: 0;
  27. }
  28. .profile-name {
  29. display: block;
  30. float: left;
  31. margin: 0 0 10px 10px;
  32. h2 {
  33. font-size: 22px;
  34. line-height: 30px;
  35. & a {
  36. font-weight: 500;
  37. color: @text-color;
  38. border-bottom: 0;
  39. }
  40. }
  41. h3 {
  42. font-size: 16px;
  43. line-height: 20px;
  44. & a {
  45. color: #777;
  46. border-bottom: 0;
  47. }
  48. }
  49. h2 a:hover, h3 a:hover
  50. { color: @adjacent-color; }
  51. }
  52. .profile-description {
  53. clear: left;
  54. font-size: 13px;
  55. line-height: 18px;
  56. font-style: italic;
  57. color: #777;
  58. margin: 0;
  59. padding: 5px 0;
  60. a { border-bottom: 0; }
  61. }
  62. .profile-location-url {
  63. clear: left;
  64. margin: 0;
  65. span {
  66. display: inline-block;
  67. font-size: 13px;
  68. line-height: 18px;
  69. color: #777;
  70. }
  71. .divider {
  72. padding: 0 4px;
  73. color: #ccc;
  74. }
  75. a { border-bottom:0; }
  76. }
  77. .profile-stats {
  78. margin: 0;
  79. list-style: none;
  80. overflow: hidden;
  81. border-top: 1px solid #C2C2C2;
  82. border-bottom: 1px solid #C2C2C2;
  83. background: #fff;
  84. li {
  85. display: inline;
  86. a, span {
  87. float: left;
  88. padding: 7px 15px;
  89. color: #777;
  90. font-size: 10px;
  91. line-height: 16px;
  92. text-transform: uppercase;
  93. border-left: 1px solid #C2C2C2;
  94. border-bottom: 0;
  95. }
  96. strong {
  97. display: block;
  98. color: @text-color;
  99. font-size: 14px;
  100. }
  101. a:hover, a:hover strong {
  102. color: @adjacent-color;
  103. }
  104. }
  105. li:first-child span {
  106. border-left: 0;
  107. }
  108. }
  109. .profile-info-footer {
  110. padding: 10px 15px;
  111. border-bottom: 1px solid #c2c2c2;
  112. }
  113. //Profile Icons
  114. .profile-icons(@bgicon) {
  115. display: inline-block;
  116. background: @bgicon;
  117. margin-left: 10px;
  118. padding-left: 20px;
  119. }
  120. .profile-watchers {
  121. .profile-icons(~"url('/static/imgs/ico-watchers.png') no-repeat");
  122. }
  123. .profile-forks {
  124. .profile-icons(~"url('/static/imgs/ico-forks.png') no-repeat");
  125. }
  126. .profile-comments {
  127. .profile-icons(~"url('/static/imgs/ico-comments.png') no-repeat");
  128. }
  129. .profile-likes {
  130. .profile-icons(~"url('/static/imgs/ico-likes.png') no-repeat");
  131. }
  132. //Twitter Profile
  133. .profile-tweets {
  134. list-style: none;
  135. margin: 0;
  136. background: #fff;
  137. li {
  138. padding: 10px 15px;
  139. border-bottom: 1px solid #C2C2C2
  140. }
  141. }
  142. .tweet-title {
  143. border-bottom: 0;
  144. position: relative;
  145. padding-left: 45px;
  146. img {
  147. position: absolute;
  148. left: 0;
  149. width: 32px;
  150. height: 32px;
  151. border: 2px solid @adjacent-color;
  152. }
  153. span {
  154. color: #777;
  155. font-size: 13px;
  156. padding-left: 3px;
  157. }
  158. }
  159. .tweet-title:hover {
  160. border-bottom: 0;
  161. }
  162. .tweet-text {
  163. color: #777;
  164. margin:0;
  165. padding: 3px 0;
  166. font-size: 13px;
  167. line-height: 18px;
  168. margin-left: 45px;
  169. a { border-bottom: 0; }
  170. }
  171. .tweet-date {
  172. margin: 0;
  173. font-size: 13px;
  174. line-height: 18px;
  175. margin-left: 45px;
  176. color: #999;
  177. }
  178. //Github and Bitbucket Profile
  179. .profile-repos {
  180. list-style: none;
  181. margin: 0;
  182. background: #fff;
  183. li {
  184. padding: 10px 15px;
  185. border-bottom: 1px solid #C2C2C2
  186. }
  187. }
  188. .profile-repo-name {
  189. border-bottom: 0;
  190. font-weight: 500;
  191. }
  192. .profile-repo-name:hover {
  193. border-bottom: 0;
  194. }
  195. .profile-repo-text {
  196. color: #777;
  197. margin:0;
  198. padding: 5px 0;
  199. font-size: 13px;
  200. line-height: 18px;
  201. }
  202. .profile-repo-stats {
  203. list-style: none;
  204. margin: 0;
  205. font-size: 13px;
  206. line-height: 18px;
  207. li {
  208. padding: 0;
  209. border: 0;
  210. display: inline-block;
  211. //ie7 inline-block hack
  212. zoom: 1;
  213. *display: inline;
  214. }
  215. a {
  216. border-bottom: 0;
  217. }
  218. a:hover {
  219. border-bottom: 0;
  220. color: @adjacent-color;
  221. }
  222. }
  223. .profile-repo-fork {
  224. margin: 0;
  225. padding: 0;
  226. font-size: 13px;
  227. line-height: 18px;
  228. a {
  229. border-bottom: 0;
  230. color: #777;
  231. }
  232. a:hover {
  233. border-bottom: 0;
  234. color: @adjacent-color;
  235. }
  236. }
  237. .profile-repo-logo {
  238. float: right;
  239. border-bottom: 0;
  240. img {
  241. width: 32px;
  242. height: 32px;
  243. border: 0;
  244. }
  245. }
  246. .profile-repo-logo:hover {
  247. border-bottom: 0;
  248. }
  249. //Dribbble & Instagram Profiles
  250. .profile-shots {
  251. list-style: none;
  252. margin: 0;
  253. padding: 15px 0;
  254. > li {
  255. float: left;
  256. width: 300px;
  257. padding: 10px;
  258. margin: 0 0px 20px 20px;
  259. background: #fff;
  260. .box-shadow();
  261. }
  262. }
  263. .profile-shot {
  264. border-bottom: 0;
  265. display: block;
  266. img {
  267. width: 300px;
  268. height: 225px;
  269. }
  270. }
  271. .profile-shot:hover {
  272. border-bottom: 0;
  273. }
  274. .profile-shot-title {
  275. display: block;
  276. padding: 5px 0;
  277. font-size: 13px;
  278. line-height: 18px;
  279. color: @alternate-text-color;
  280. overflow: hidden;
  281. text-overflow: ellipsis;
  282. white-space: nowrap;
  283. }
  284. .profile-shot-stats {
  285. list-style: none;
  286. margin: 0;
  287. font-size: 13px;
  288. line-height: 18px;
  289. li {
  290. margin-bottom: 0;
  291. padding: 0;
  292. border: 0;
  293. display: inline-block;
  294. //ie7 inline-block hack
  295. zoom: 1;
  296. *display: inline;
  297. }
  298. li:first-child a, li:first-child span {
  299. margin-left: 0;
  300. }
  301. a {
  302. border-bottom: 0;
  303. }
  304. a:hover {
  305. border-bottom: 0;
  306. color: @adjacent-color;
  307. }
  308. }
  309. .profile-shot-date {
  310. float: right;
  311. color: #999;
  312. }
  313. .instagram .profile-shot img {
  314. width: 300px;
  315. height: 300px;
  316. }
  317. //Lastfm Profile
  318. .profile-tracks {
  319. list-style: none;
  320. margin: 0;
  321. background: #fff;
  322. li {
  323. padding: 10px 15px;
  324. border-bottom: 1px solid #C2C2C2
  325. }
  326. }
  327. .track-image {
  328. border-bottom: 0;
  329. position: relative;
  330. padding-left: 45px;
  331. img {
  332. position: absolute;
  333. left: 0;
  334. width: 32px;
  335. height: 32px;
  336. border: 2px solid @adjacent-color;
  337. }
  338. }
  339. .track-image:hover {
  340. border-bottom: 0;
  341. }
  342. .track-detail {
  343. color: #777;
  344. margin:0;
  345. padding: 0 0 3px 0;
  346. font-size: 14px;
  347. line-height: 18px;
  348. margin-left: 45px;
  349. a {
  350. border-bottom: 0;
  351. font-weight: 500;
  352. }
  353. }
  354. .track-date {
  355. margin: 0;
  356. font-size: 13px;
  357. line-height: 18px;
  358. margin-left: 45px;
  359. color: #999;
  360. }
  361. //Foursquare Profile
  362. .profile-checkins {
  363. list-style: none;
  364. margin: 0;
  365. background: #fff;
  366. li {
  367. padding: 10px 15px;
  368. border-bottom: 1px solid #C2C2C2
  369. }
  370. }
  371. .checkin-title {
  372. border-bottom: 0;
  373. position: relative;
  374. padding-left: 45px;
  375. img {
  376. position: absolute;
  377. left: 0;
  378. width: 32px;
  379. height: 32px;
  380. }
  381. strong {
  382. text-overflow: ellipsis;
  383. white-space: nowrap;
  384. max-width: 250px;
  385. overflow: hidden;
  386. display: inline-block;
  387. }
  388. span {
  389. color: #777;
  390. font-size: 13px;
  391. padding-left: 3px;
  392. }
  393. }
  394. .checkin-title:hover {
  395. border-bottom: 0;
  396. }
  397. .checkin-location {
  398. color: #777;
  399. margin:0;
  400. padding: 3px 0;
  401. font-size: 13px;
  402. line-height: 18px;
  403. margin-left: 45px;
  404. a { border-bottom: 0; }
  405. }
  406. .checkin-date {
  407. margin: 0;
  408. font-size: 13px;
  409. line-height: 18px;
  410. margin-left: 45px;
  411. color: #999;
  412. }
  413. //Steam profile
  414. .profile-games {
  415. list-style: none;
  416. margin: 0;
  417. background: #fff;
  418. li {
  419. padding: 10px 15px;
  420. border-bottom: 1px solid #C2C2C2;
  421. min-height: 80px;
  422. }
  423. strong {
  424. margin-left: 155px;
  425. }
  426. }
  427. .profile-game-title {
  428. border-bottom: 0;
  429. position: relative;
  430. padding-left: 45px;
  431. img {
  432. display: block;
  433. position: absolute;
  434. margin: 5px 15px 5px 0px;
  435. left: 0;
  436. top: 0;
  437. width: 184px;
  438. height: 69px;
  439. border: 2px solid @adjacent-color;
  440. }
  441. span {
  442. color: #777;
  443. font-size: 13px;
  444. padding-left: 3px;
  445. }
  446. }
  447. .profile-game-title:hover {
  448. border-bottom: 0;
  449. }
  450. .profile-game-text {
  451. color: #777;
  452. margin:0;
  453. padding: 3px 0;
  454. font-size: 13px;
  455. line-height: 18px;
  456. margin-left: 200px;
  457. a { border-bottom: 0; }
  458. }
  459. //StackOverflow profile
  460. .profile-stackoverflow {
  461. list-style: none;
  462. margin: 0;
  463. background: #fff;
  464. li {
  465. padding: 10px 15px;
  466. border-bottom: 1px solid #C2C2C2;
  467. }
  468. }
  469. .profile-stackoverflow-name {
  470. border-bottom: 0;
  471. font-weight: 500;
  472. }
  473. .profile-stackoverflow-name:hover {
  474. border-bottom: 0;
  475. }
  476. .profile-stackoverflow-description {
  477. margin:0;
  478. padding: 5px 0;
  479. font-size: 13px;
  480. line-height: 18px;
  481. }
  482. .profile-stackoverflow-details {
  483. color: #777;
  484. list-style: none;
  485. margin: 0;
  486. font-size: 13px;
  487. line-height: 18px;
  488. li {
  489. padding: 0;
  490. border: 0;
  491. display: inline-block;
  492. //ie7 inline-block hack
  493. zoom: 1;
  494. *display: inline;
  495. }
  496. a {
  497. border-bottom: 0;
  498. }
  499. a:hover {
  500. border-bottom: 0;
  501. color: @adjacent-color;
  502. }
  503. }