Nessuna descrizione

um-responsive.css 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. .uimob340-show,
  2. .uimob500-show,
  3. .uimob800-show,
  4. .uimob960-show
  5. {
  6. display: none;
  7. }
  8. .um-profile-nav-item a.uimob340-show,
  9. .um-profile-nav-item a.uimob500-show,
  10. .um-profile-nav-item a.uimob800-show,
  11. .um-profile-nav-item a.uimob960-show
  12. {
  13. display: none;
  14. }
  15. div.uimob340 .uimob340-show,
  16. div.uimob500 .uimob500-show,
  17. div.uimob800 .uimob800-show,
  18. div.uimob960 .uimob960-show
  19. {
  20. display: block;
  21. }
  22. div.uimob340 .uimob340-hide,
  23. div.uimob500 .uimob500-hide,
  24. div.uimob800 .uimob800-hide,
  25. div.uimob960 .uimob960-hide
  26. {
  27. display: none;
  28. }
  29. /**
  30. for 340px and below
  31. **/
  32. /********************************************/
  33. div.uimob340 .um-item-link a {
  34. font-size: 14px;
  35. }
  36. div.uimob340 .um-item-meta span {
  37. font-size: 13px;
  38. }
  39. div.uimob340 .um-load-items a {
  40. width: 100% !important;
  41. max-width: 100% !important;
  42. }
  43. div.uimob340 .um-profile-nav {
  44. padding: 0;
  45. }
  46. div.uimob340 .um-profile-nav-item a {
  47. padding: 10px 16px;
  48. margin-left: 0;
  49. border-radius: 0;
  50. }
  51. div.uimob340 .um-profile-nav-item i{display:block;position: static;top: auto;left: auto}
  52. div.uimob340 .um-profile-subnav {
  53. padding: 8px 15px;
  54. }
  55. div.uimob340 .um-profile-subnav a {
  56. display: block;
  57. text-align: left;
  58. font-size: 13px;
  59. margin: 0;
  60. padding: 6px 0;
  61. }
  62. div.uimob340 .um-profile-subnav span {
  63. font-size: 12px;
  64. padding: 1px 6px;
  65. }
  66. div.uimob340 .um-cover-overlay span.um-cover-overlay-t
  67. {
  68. display: none !important;
  69. }
  70. div.uimob340 .um-cover-overlay
  71. {
  72. padding: 0;
  73. }
  74. div.uimob340 .um-cover-overlay i,
  75. div.uimob340 .um-profile-photo-overlay i
  76. {
  77. margin-bottom: 0;
  78. font-size: 30px;
  79. }
  80. .um-modal.uimob340 {
  81. width: 100% !important;
  82. margin: 0 !important;
  83. left: 0 !important;
  84. height: 100%;
  85. background: #fff;
  86. }
  87. .um-modal.uimob340,
  88. .um-modal.uimob340 .um-modal-body,
  89. .um-modal.uimob340 .um-modal-header {
  90. -moz-border-radius: 0;
  91. -webkit-border-radius: 0;
  92. border-radius: 0;
  93. }
  94. .um-modal.uimob340 .um-modal-header {text-align: center}
  95. .um-modal.uimob340 .um-modal-footer {
  96. position: absolute;
  97. bottom: 0;
  98. left: 0;
  99. width: 100%;
  100. box-sizing: border-box;
  101. padding: 10px;
  102. border-top: 1px solid #ddd;
  103. }
  104. .um-modal.uimob340 .um-modal-right {
  105. width: 100%;
  106. float: none;
  107. }
  108. .um-modal.uimob340 .um-modal-footer a.um-modal-btn {
  109. width: 48%;
  110. margin: 0 1%;
  111. float: left;
  112. display: block;
  113. line-height: 44px !important;
  114. height: 44px;
  115. }
  116. .um-modal.uimob340 .ajax-upload-dragdrop span.icon {
  117. font-size: 40px;
  118. line-height: 40px;
  119. }
  120. div.uimob340 .um-profile-body {
  121. padding-left: 0;
  122. padding-right: 0;
  123. }
  124. div.uimob340 .um-profile-photo {
  125. width: 100% !important;
  126. text-align: center !important;
  127. position: absolute;
  128. top: -40px;
  129. left: 0;
  130. margin: 0;
  131. }
  132. div.uimob340 .um-header.no-cover .um-profile-photo {
  133. position: static;
  134. top: auto;
  135. left: auto;
  136. }
  137. div.uimob340 .um-profile-photo a.um-profile-photo-img {
  138. width: 100px !important;
  139. height: 100px !important;
  140. margin: 0 auto !important;
  141. float: none !important;
  142. display: inline-block !important;
  143. position: relative !important;
  144. top: auto !important;
  145. left: auto !important;
  146. }
  147. div.uimob340 .um-header.no-cover .um-profile-photo a.um-profile-photo-img {
  148. width: 120px !important;
  149. height: 120px !important;
  150. }
  151. div.uimob340 .um-header .um-profile-meta {
  152. padding-left: 0 !important;
  153. padding-right: 0 !important;
  154. text-align: center !important;
  155. padding-top: 60px !important;
  156. }
  157. div.uimob340 .um-header.no-cover .um-profile-meta {padding-top: 0 !important}
  158. div.uimob340 .um-header .um-name {
  159. float: none !important;
  160. margin-right: 0 !important;
  161. font-size: 18px;
  162. }
  163. div.uimob340 .um-header .um-meta-text {
  164. padding: 0 20px;
  165. }
  166. div.uimob340 .um-header .um-meta {padding: 0 10px; display: inline-block;}
  167. /*div.uimob340 .um-header .um-meta span:first-child {display: block}*/
  168. /*div.uimob340 .um-header .um-meta span {display: none}*/
  169. div.uimob340 .um-col-121,
  170. div.uimob340 .um-col-122,
  171. div.uimob340 .um-col-131,
  172. div.uimob340 .um-col-132,
  173. div.uimob340 .um-col-133 {
  174. float: none;
  175. width: 100%;
  176. margin: 0;
  177. }
  178. div.uimob340 .um-field-half {
  179. float: none;
  180. width: 100%;
  181. }
  182. div.uimob340 .um-account-main {
  183. float: none;
  184. width: 100%;
  185. padding: 0;
  186. box-sizing: border-box;
  187. }
  188. div.uimob340 .um-account-tab {
  189. padding-bottom: 20px;
  190. border-bottom: 1px solid #eee;
  191. }
  192. div.uimob340 .um-account-meta {
  193. margin-bottom: 0;
  194. }
  195. .uimob340 .um-half {
  196. float: none;
  197. width: 100%;
  198. margin: 0 0 10px 0;
  199. }
  200. .uimob340 .um-button.um-btn-auto-width {
  201. min-width: auto;
  202. max-width: auto;
  203. width: 100%;
  204. }
  205. .uimob340 .um-col-alt-s {padding-top:0}
  206. /**
  207. for 500px and below
  208. **/
  209. /********************************************/
  210. div.uimob500 .um-profile-nav {
  211. padding: 0;
  212. }
  213. div.uimob500 .um-profile-nav-item a {
  214. padding: 10px 16px;
  215. margin-left: 0;
  216. border-radius: 0;
  217. }
  218. div.uimob500 .um-profile-nav-item i{display:block;position: static;top: auto;left: auto;font-size: 22px;height: 22px;line-height: 22px;}
  219. div.uimob500 .um-profile-subnav {
  220. padding: 8px 15px;
  221. }
  222. div.uimob500 .um-profile-subnav a {
  223. display: block;
  224. text-align: left;
  225. font-size: 13px;
  226. margin: 0;
  227. padding: 6px 0;
  228. }
  229. div.uimob500 .um-profile-subnav span {
  230. font-size: 12px;
  231. padding: 1px 6px;
  232. }
  233. div.uimob500 .um-cover-overlay span.um-cover-overlay-t
  234. {
  235. display: none !important;
  236. }
  237. div.uimob500 .um-cover-overlay
  238. {
  239. padding: 0;
  240. }
  241. div.uimob500 .um-cover-overlay i,
  242. div.uimob500 .um-profile-photo-overlay i
  243. {
  244. margin-bottom: 0;
  245. font-size: 30px;
  246. }
  247. .um-modal.uimob500 {
  248. width: 100% !important;
  249. margin: 0 !important;
  250. left: 0 !important;
  251. height: 100%;
  252. background: #fff;
  253. }
  254. .um-modal.uimob500,
  255. .um-modal.uimob500 .um-modal-body,
  256. .um-modal.uimob500 .um-modal-header {
  257. -moz-border-radius: 0;
  258. -webkit-border-radius: 0;
  259. border-radius: 0;
  260. }
  261. .um-modal.uimob500 .um-modal-header {text-align: center}
  262. .um-modal.uimob500 .um-modal-footer {
  263. position: absolute;
  264. bottom: 0;
  265. left: 0;
  266. width: 100%;
  267. box-sizing: border-box;
  268. padding: 10px;
  269. border-top: 1px solid #ddd;
  270. }
  271. .um-modal.uimob500 .um-modal-right {
  272. width: 100%;
  273. float: none;
  274. }
  275. .um-modal.uimob500 .um-modal-footer a.um-modal-btn {
  276. width: 48%;
  277. margin: 0 1%;
  278. float: left;
  279. display: block;
  280. line-height: 44px !important;
  281. height: 44px;
  282. }
  283. .um-modal.uimob500 .ajax-upload-dragdrop span.icon {
  284. font-size: 40px;
  285. line-height: 40px;
  286. }
  287. div.uimob500 .um-profile-body {
  288. padding-left: 0;
  289. padding-right: 0;
  290. }
  291. div.uimob500 .um-profile-photo {
  292. width: 100% !important;
  293. text-align: center !important;
  294. position: absolute;
  295. top: -40px;
  296. left: 0;
  297. margin: 0;
  298. }
  299. div.uimob500 .um-header.no-cover .um-profile-photo {
  300. position: static;
  301. top: auto;
  302. left: auto;
  303. }
  304. div.uimob500 .um-profile-photo a.um-profile-photo-img {
  305. width: 100px !important;
  306. height: 100px !important;
  307. margin: 0 auto !important;
  308. float: none !important;
  309. display: inline-block !important;
  310. position: relative !important;
  311. top: auto !important;
  312. left: auto !important;
  313. }
  314. div.uimob500 .um-header.no-cover .um-profile-photo a.um-profile-photo-img {
  315. width: 120px !important;
  316. height: 120px !important;
  317. }
  318. div.uimob500 .um-header .um-profile-meta {
  319. padding-left: 0 !important;
  320. padding-right: 0 !important;
  321. text-align: center !important;
  322. padding-top: 60px !important;
  323. }
  324. div.uimob500 .um-header.no-cover .um-profile-meta {padding-top: 0 !important}
  325. div.uimob500 .um-header .um-name {
  326. float: none !important;
  327. margin-right: 0 !important;
  328. font-size: 21px;
  329. }
  330. div.uimob500 .um-header .um-meta-text {
  331. padding: 0 20px;
  332. }
  333. div.uimob500 .um-header .um-meta {padding: 0 20px;display: block;}
  334. /*div.uimob500 .um-header .um-meta span:first-child {display: block}*/
  335. /*div.uimob500 .um-header .um-meta span {display: none}*/
  336. div.uimob500 .um-col-121,
  337. div.uimob500 .um-col-122,
  338. div.uimob500 .um-col-131,
  339. div.uimob500 .um-col-132,
  340. div.uimob500 .um-col-133 {
  341. float: none;
  342. width: 100%;
  343. margin: 0;
  344. }
  345. div.uimob500 .um-field-half {
  346. float: none;
  347. width: 100%;
  348. }
  349. div.uimob500 .um-account-main {
  350. float: none;
  351. width: 100%;
  352. padding: 0;
  353. box-sizing: border-box;
  354. }
  355. div.uimob500 .um-account-tab {
  356. padding-bottom: 20px;
  357. border-bottom: 1px solid #eee;
  358. }
  359. div.uimob500 .um-account-meta {
  360. margin-bottom: 0;
  361. }
  362. /**
  363. for 800px and below
  364. **/
  365. div.uimob800 .um-profile-nav {
  366. padding: 0;
  367. }
  368. div.uimob800 .um-profile-nav-item a {
  369. padding: 10px 20px;
  370. margin-left: 0;
  371. border-radius: 0;
  372. }
  373. div.uimob800 .um-profile-nav-item i{display:block;position: static;top: auto;left: auto;font-size: 26px;height: 26px;line-height: 26px;}
  374. div.uimob800 .um-profile-subnav {
  375. padding: 8px 15px;
  376. }
  377. div.uimob800 .um-profile-subnav a {
  378. display: block;
  379. text-align: left;
  380. font-size: 14px;
  381. margin: 0;
  382. padding: 6px 0;
  383. }
  384. div.uimob800 .um-profile-subnav span {
  385. font-size: 12px;
  386. padding: 2px 8px;
  387. }
  388. div.uimob800 .um-account-main {
  389. width: 90%;
  390. max-width: 450px;
  391. }
  392. div.uimob800 .um-account-side {
  393. padding: 0;
  394. width: 10%;
  395. }
  396. div.uimob800 .um-account-side ul {
  397. border: 1px solid #ddd;
  398. -moz-border-radius: 3px;
  399. -webkit-border-radius: 3px;
  400. border-radius: 3px;
  401. }
  402. div.uimob800 .um-account-side li {margin-bottom: 0 !important;background: transparent;}
  403. div.uimob800 .um-account-side li a{
  404. display: block;
  405. padding: 0 !important;
  406. height: 44px;
  407. line-height: 44px;
  408. color: #666 !important;
  409. text-align: center;
  410. text-decoration: none !important;
  411. background: transparent;
  412. transition: all .2s linear;
  413. }
  414. div.uimob800 .um-account-side li:first-child a {-moz-border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;border-radius: 3px 3px 0 0 }
  415. div.uimob800 .um-account-side li:last-child a {-moz-border-radius: 0 0 3px 3px;-webkit-border-radius: 0 0 3px 3px;border-radius: 0 0 3px 3px}
  416. div.uimob800 .um-account-side li a span.um-account-icontip {
  417. display: block;
  418. float: left;
  419. text-align: center;
  420. width: 100%;
  421. height: 100%;
  422. font-size: 22px;
  423. line-height: 44px;
  424. }
  425. div.uimob800 .um-account-side li a span.um-account-icontip i {
  426. position: relative;
  427. text-align: center;
  428. width: 100%;
  429. }
  430. div.uimob800 .um-account-side li a.current,
  431. div.uimob800 .um-account-side li a.current:hover {
  432. color: #fff !important;
  433. }
  434. div.uimob800 .um-account-meta a {
  435. border: 1px solid #ddd;
  436. }
  437. div.uimob800 .um-account-meta a,
  438. div.uimob800 .um-account-meta img {
  439. display: block;
  440. overflow: hidden;
  441. -moz-border-radius: 3px;
  442. -webkit-border-radius: 3px;
  443. border-radius: 3px;
  444. max-width: 100%;
  445. height: auto;
  446. }
  447. div.uimob800 .um-account-meta img {
  448. width: 100%;
  449. }
  450. div.uimob800 .um-profile-photo {
  451. width: 150px !important;
  452. }
  453. div.uimob800 .um-profile-photo a.um-profile-photo-img {
  454. width: 140px !important;
  455. height: 140px !important;
  456. top: -70px !important;
  457. }
  458. div.uimob800 .um-header.no-cover .um-profile-photo a.um-profile-photo-img {
  459. top: auto !important;
  460. }
  461. div.uimob800 .um-header .um-profile-meta {
  462. padding-left: 200px;
  463. }
  464. div.uimob800 .um-cover-overlay
  465. {
  466. padding: 0;
  467. }
  468. /********************************************/
  469. /**
  470. for 960px and below
  471. **/
  472. /********************************************/
  473. div.uimob960 .um-profile-photo {
  474. width: 200px !important;
  475. }
  476. div.uimob960 .um-profile-photo a.um-profile-photo-img {
  477. width: 140px !important;
  478. height: 140px !important;
  479. top: -70px !important;
  480. }
  481. /************************************************/
  482. @media screen and (max-height: 400px) {
  483. .ajax-upload-dragdrop span.icon {
  484. display: none;
  485. }
  486. .um-modal.no-photo {
  487. width: 100% !important;
  488. margin: 0 !important;
  489. left: 0 !important;
  490. height: 100%;
  491. background: #fff;
  492. }
  493. .um-modal.no-photo,
  494. .um-modal.no-photo .um-modal-body,
  495. .um-modal.no-photo .um-modal-header {
  496. -moz-border-radius: 0;
  497. -webkit-border-radius: 0;
  498. border-radius: 0;
  499. }
  500. .um-modal.no-photo .um-modal-header {text-align: center; font-size: 14px}
  501. .um-modal.no-photo .um-modal-footer {
  502. position: absolute;
  503. bottom: 0;
  504. left: 0;
  505. width: 100%;
  506. box-sizing: border-box;
  507. padding: 10px;
  508. border-top: 1px solid #ddd;
  509. }
  510. .um-modal.no-photo .um-modal-right {
  511. width: 100%;
  512. float: none;
  513. }
  514. .um-modal.no-photo .um-modal-footer a.um-modal-btn {
  515. width: 48%;
  516. margin: 0 1%;
  517. float: left;
  518. display: block;
  519. line-height: 44px !important;
  520. height: 44px;
  521. }
  522. }
  523. @media screen and (max-height: 300px) {
  524. .um-modal.no-photo .um-modal-header {
  525. display: none;
  526. }
  527. .ajax-upload-dragdrop span.icon,
  528. .ajax-upload-dragdrop span.str {
  529. display: none;
  530. }
  531. }
  532. @media screen and (max-width: 600px) {
  533. .um-popup {
  534. width: 96%;
  535. margin-left: 2%;
  536. left: 0;
  537. top: 15px;
  538. }
  539. }