Aucune description

um-profile.css 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576
  1. /*
  2. - Profile mode .um alias
  3. */
  4. .um-profile {
  5. box-sizing: border-box;
  6. }
  7. .um-profile .um-cover-overlay {
  8. display: none;
  9. }
  10. .um-profile.um-editing .um-cover.has-cover .um-cover-overlay {
  11. display: block;
  12. }
  13. .um-profile.um-viewing .um-profile-photo-overlay {
  14. display: none;
  15. }
  16. .um-profile img {display: block;overflow:hidden;border-radius:0;margin: 0 !important}
  17. .um-profile a,
  18. .um-profile a:hover {text-decoration:none !important}
  19. .um-profile .um-profile-body {
  20. padding-top: 15px;
  21. padding-bottom: 15px;
  22. max-width: 600px;
  23. margin: auto;
  24. }
  25. .um-profile.um-editing {
  26. padding-bottom: 15px;
  27. }
  28. .um-profile.um-viewing {
  29. padding-bottom: 1px;
  30. }
  31. .um-profile.um-viewing .um-field-label {
  32. display: block;
  33. margin: 0 0 8px 0;
  34. border-bottom: solid 2px #eee;
  35. padding-bottom: 4px;
  36. }
  37. /*
  38. - Profile cover
  39. */
  40. .um-cover {
  41. background-color: #eee;
  42. box-sizing: border-box;
  43. position: relative;
  44. }
  45. .um-cover-add {
  46. color: #aaa;
  47. font-size: 36px;
  48. width: 100%;
  49. display: table;
  50. }
  51. .um-cover-add i {
  52. font-size: 36px;
  53. }
  54. .um-cover-add span {
  55. display: table-cell;
  56. vertical-align: middle;
  57. }
  58. .um-cover-e {
  59. text-align: center;
  60. box-sizing: border-box;
  61. overflow: hidden;
  62. }
  63. .um-cover-e img {width: 100% !important}
  64. .um-cover-overlay {
  65. position: absolute;
  66. top: 0;
  67. left: 0;
  68. background: rgba(0,0,0,.5);
  69. text-align: center;
  70. box-sizing: border-box;
  71. padding: 0 40px;
  72. color: #fff;
  73. text-shadow: 0 1px #666;
  74. cursor: pointer !important;
  75. line-height: 21px;
  76. font-size: 16px;
  77. height: 100%;
  78. width: 100%;
  79. }
  80. .um-cover-overlay:hover {
  81. background: rgba(0,0,0,.55);
  82. }
  83. .um-cover-overlay span.um-cover-overlay-s {
  84. display: table;
  85. height: 100%;
  86. width: 100%;
  87. }
  88. .um-cover-overlay ins {
  89. display: table-cell;
  90. vertical-align: middle;
  91. height: 100%;
  92. text-decoration: none !important;
  93. background: none !important;
  94. color: #fff !important;
  95. border-bottom: none !important;
  96. }
  97. .um-cover-overlay i {
  98. font-size: 46px;
  99. display: block;
  100. margin-bottom: 6px;
  101. }
  102. /*
  103. - Profile header
  104. */
  105. .um-header {
  106. position: relative;
  107. padding: 0 0 25px 0;
  108. border-bottom: solid 2px #eee;
  109. min-height: 85px;
  110. box-sizing: content-box !important;
  111. }
  112. .um-profile-edit {
  113. position: absolute;
  114. top: 15px;
  115. right: 0;
  116. vertical-align: middle;
  117. font-size: 30px;
  118. height: 30px;
  119. line-height: 30px;
  120. z-index: 66;
  121. margin-right: 10px;
  122. }
  123. .um-profile-edit i {
  124. font-size: 30px;
  125. }
  126. /*
  127. - Header without cover enabled
  128. */
  129. .um-header.no-cover .um-profile-meta {
  130. padding-left: 0 !important;
  131. padding-right: 0 !important;
  132. text-align: center !important;
  133. }
  134. .um-header.no-cover .um-name {
  135. float: none !important;
  136. margin-right: 0 !important;
  137. }
  138. .um-header.no-cover .um-profile-photo {
  139. float: none !important;
  140. margin: 0 auto !important;
  141. text-align: center !important;
  142. }
  143. .um-header.no-cover a.um-profile-photo-img {
  144. position: relative !important;
  145. top: auto !important;
  146. left: auto !important;
  147. float: none !important;
  148. display: inline-block !important;
  149. text-align: center !important;
  150. }
  151. .um-header.no-cover .um-main-meta {padding: 0;}
  152. /*
  153. - Profile photo
  154. */
  155. .um-profile .gravatar {
  156. position: static;
  157. }
  158. .um-profile-photo {
  159. float: left;
  160. position: relative;
  161. width:200px;
  162. margin: 0 0 0 30px;
  163. box-sizing: border-box;
  164. }
  165. .um-profile-photo a.um-profile-photo-img {
  166. float: left;
  167. position: absolute;
  168. background: #fff;
  169. border-radius: 100%;
  170. border: 5px solid #fff;
  171. border-bottom: 5px solid #fff !important;/* rewrite ".um-header a" style */
  172. overflow: hidden;
  173. left: 0;
  174. }
  175. .um-profile-photo a.um-profile-photo-img img {
  176. width: 100%;
  177. height: auto;
  178. }
  179. .um-profile-photo-overlay {
  180. position: absolute;
  181. top: 0;
  182. left: 0;
  183. background: rgba(0,0,0,.5);
  184. text-align: center;
  185. box-sizing: border-box;
  186. padding: 0;
  187. color: #fff;
  188. text-shadow: 0 1px #666;
  189. cursor: pointer !important;
  190. line-height: 21px;
  191. font-size: 16px;
  192. height: 100%;
  193. width: 100%;
  194. }
  195. .um-profile-photo-overlay:hover {
  196. background: rgba(0,0,0,.55);
  197. }
  198. .um-profile-photo-overlay span.um-profile-photo-overlay-s {
  199. display: table;
  200. height: 100%;
  201. width: 100%;
  202. }
  203. .um-profile-photo-overlay ins {
  204. display: table-cell;
  205. vertical-align: middle;
  206. height: 100%;
  207. text-decoration: none !important;
  208. background: none !important;
  209. color: #fff !important;
  210. border-bottom: none !important;
  211. }
  212. .um-profile-photo-overlay i {
  213. font-size: 46px;
  214. display: block;
  215. }
  216. /*
  217. - Profile meta
  218. */
  219. .um-profile-meta {
  220. padding-right: 30px;
  221. -ms-word-break: break-all;
  222. word-break: break-word;
  223. word-wrap: break-word;
  224. }
  225. .um-main-meta {
  226. padding: 10px 0 0 0;
  227. }
  228. .um-name {
  229. float: left;
  230. font-size: 24px;
  231. font-weight: bold;
  232. margin-right: 30px;
  233. line-height: 1.7em;
  234. }
  235. .um-name a {
  236. font-size: 24px;
  237. }
  238. .um-meta {
  239. font-size: 15px;
  240. }
  241. .um-meta span a {
  242. font-weight: normal;
  243. }
  244. .um-meta span:first-child {margin: 0 5px 0 0}
  245. .um-meta span {
  246. margin: 0 5px;
  247. font-size: 14px;
  248. display: inline-block;
  249. }
  250. .um-meta span i {
  251. font-size: 16px;
  252. margin: 0 5px 0 0;
  253. }
  254. .um-meta-text {
  255. margin: 6px 0 0 0;
  256. color: #666;
  257. line-height: 1.4em;
  258. font-size: 13px;
  259. }
  260. .um-meta-text p {
  261. margin: 0 0 6px 0 !important;
  262. padding: 0 !important;
  263. }
  264. .um-profile-status {display:none}
  265. .um-profile-status.awaiting_admin_review,
  266. .um-profile-status.inactive,
  267. .um-profile-status.rejected {
  268. display: inline-block;
  269. margin: 6px 0 0 0;
  270. border-left: 3px solid #C74A4A;
  271. padding-left: 10px;
  272. font-size: 14px;
  273. color: #777;
  274. }
  275. /*
  276. - Profile body
  277. */
  278. .um-profile-note {
  279. display: none;
  280. text-align: center !important;
  281. padding-top: 20px;
  282. color: #666;
  283. }
  284. .um-profile-note i {
  285. display: inline-block;
  286. font-size: 70px;
  287. height: 70px;
  288. line-height: 70px;
  289. }
  290. .um-profile-note i.um-faicon-lock{
  291. position: relative;
  292. top: 2px;
  293. display: inline-block;
  294. font-size: 24px;
  295. height: auto;
  296. line-height: 24px;
  297. margin-right: 10px;
  298. }
  299. .um-profile-note span {
  300. margin-top: 10px;
  301. display: block;
  302. font-size: 16px;
  303. color: #888;
  304. }
  305. .um-profile-note a{border:none!important}
  306. .um-profile-note a:hover {
  307. text-decoration: underline !important;
  308. }
  309. /*
  310. - Profile nav-bar
  311. */
  312. .um-profile-nav {
  313. padding: 10px;
  314. background: #444;
  315. text-align: center;
  316. }
  317. .um-profile-nav-item.active a,
  318. .um-profile-nav-item.active a:hover {
  319. color: #FFF!important;
  320. }
  321. .um-profile-nav-item.active a span.count {background: transparent;padding: 4px 0;color: #fff}
  322. .um-profile-nav-item a {
  323. color: #fff!important;
  324. font-size: 14px;
  325. font-weight: 600;
  326. padding: 6px 10px 6px 28px;
  327. display: block;
  328. float: left;
  329. border-radius: 4px;
  330. margin-left: 5px;
  331. position: relative;
  332. border-bottom: 0 !important;
  333. }
  334. .um-profile-nav-item.without-icon a {
  335. padding-left: 10px;
  336. }
  337. .um-profile-nav-item.without-icon span.title {
  338. padding-left: 0;
  339. }
  340. .um-profile-nav-item.without-icon i {
  341. display: none;
  342. }
  343. .um-profile-nav-item a:hover {
  344. background: #555;
  345. }
  346. .um-profile-nav-item i {
  347. font-size: 18px;
  348. height: 18px;
  349. line-height: 18px;
  350. position: absolute;
  351. display: block;
  352. top: 8px;
  353. left: 10px;
  354. }
  355. .um-profile-nav-item span.title {
  356. padding-left: 5px;
  357. }
  358. .um-profile-nav-item span.count {
  359. font-size: 12px;
  360. font-weight: 300;
  361. background: #ddd;
  362. color: #666;
  363. border-radius: 3px;
  364. padding: 4px 8px;
  365. margin-left: 3px;
  366. }
  367. /* Subnav */
  368. .um-profile-subnav {
  369. background: #eee;
  370. padding: 15px;
  371. text-align: center;
  372. }
  373. .um-profile-subnav a {
  374. display: inline-block;
  375. color: #555;
  376. font-size: 15px;
  377. font-weight: 600;
  378. margin: 0 20px;
  379. border-bottom: none !important;
  380. }
  381. .um-profile-subnav a:hover {color: #333}
  382. .um-profile-subnav span {
  383. display: inline-block;
  384. margin: 0 0 0 8px;
  385. background: #ddd;
  386. padding: 1px 8px;
  387. color: #aaa !important;
  388. border-radius: 2px;
  389. }
  390. /*
  391. - Misc.
  392. */
  393. .um-item {
  394. padding: 20px 0;
  395. border-bottom: 1px solid #eee;
  396. position: relative;
  397. }
  398. .um-item-action {
  399. position: absolute;
  400. right: 0;
  401. top: 16px;
  402. width: 20px;
  403. height: 20px;
  404. font-size: 20px;
  405. text-align: center;
  406. }
  407. .um-item-action a {color: #ccc}
  408. .um-item-action a:hover {color: #999}
  409. .um-item-link {padding-right: 40px}
  410. .um-item-link a {
  411. color: #333;
  412. font-size: 16px;
  413. line-height: 20px;
  414. }
  415. .um-item-link a:hover {
  416. text-decoration: underline !important;
  417. }
  418. .um-item-link i {
  419. font-size: 24px;
  420. color: #666;
  421. margin-right: 10px;
  422. position: relative;
  423. top: 3px;
  424. }
  425. .um-item-img {
  426. padding: 10px 0 0 0;
  427. }
  428. .um-item-img a {
  429. display: inline-block;
  430. padding: 8px;
  431. border-radius: 3px;
  432. border: 1px solid #ddd;
  433. }
  434. .um-item-img a:hover {border-color: #bbb}
  435. .um-item-img img {
  436. max-width: 100%;
  437. border-radius: 3px;
  438. }
  439. .um-item-meta {color: #888}
  440. .um-item-meta span {
  441. font-size: 13px;
  442. font-weight: 400;
  443. font-style: italic;
  444. }
  445. .um-item-meta span:not(:last-child):after {
  446. position: relative;
  447. padding: 0 4px 0 7px;
  448. content: "•";
  449. }
  450. .um-item-meta a {font-weight: bold;border-bottom: 1px solid #E0E0E0}
  451. .um-item-meta a:hover {border-bottom-color: #bbb}
  452. .um-load-items {
  453. text-align: center;
  454. margin-top: 12px;
  455. padding-top: 30px;
  456. }
  457. .um-load-items.loading {
  458. background: url(../img/loading-dots.gif) no-repeat top center;
  459. }
  460. .um-load-items a {
  461. max-width: 250px;
  462. display: inline-block;
  463. margin: 0 auto;
  464. }
  465. .um-tab-notifier {
  466. position: absolute;
  467. background: none repeat scroll 0% 0% rgb(198, 81, 81);
  468. width: 18px;
  469. height: 18px;
  470. border-radius: 999px;
  471. line-height: 18px;
  472. top: -3px;
  473. right: -7px;
  474. font-size: 11px;
  475. font-weight: 400;
  476. }
  477. .um-tab-notifier.uimob800-show.uimob500-show.uimob340-show {
  478. top: 2px;
  479. right: 8px;
  480. }
  481. .um-profile.um-viewing .um-field-checkbox, .um-profile.um-viewing .um-field-radio{
  482. cursor: default !important;
  483. }