Advertisement
LucaMunich

Mudar background

Feb 18th, 2017
129
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.99 KB | None | 0 0
  1. @-webkit-viewport { width: device-width; }
  2. @-moz-viewport { width: device-width; }
  3. @-ms-viewport { width: device-width; }
  4. @-o-viewport { width: device-width; }
  5. @-viewport { width: device-width; }
  6.  
  7. *, .ipsApp input[type="search"] {
  8. -webkit-box-sizing: border-box;
  9. -moz-box-sizing: border-box;
  10. box-sizing: border-box;
  11. }
  12.  
  13. html {
  14. min-height: 100%;
  15. position: relative;
  16. }
  17.  
  18. body {
  19. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  20. font-size: 13px;
  21. line-height: 18px;
  22. color: {theme="text_color"};
  23. height: 100%;
  24. background-color: {theme="page_background"};
  25. background-image: url("https://i.imgur.com/GQf6AzS.jpg");
  26. background-repeat: no-repeat;
  27. background-attachment: fixed;
  28. }
  29.  
  30. main {
  31. display: block;
  32. }
  33.  
  34. .ipsLayout_noBackground {
  35. background: none;
  36. }
  37.  
  38. body.ipsNoScroll {
  39. overflow: hidden;
  40. }
  41.  
  42. a {
  43. color: {theme="link"};
  44. text-decoration: none;
  45. }
  46.  
  47. a:hover {
  48. color: {theme="link_hover"};
  49. }
  50.  
  51. a:active, a:focus, a:hover {
  52. outline: 0 !important;
  53. }
  54.  
  55. img {
  56. vertical-align: middle;
  57. }
  58.  
  59. .ipsApp fieldset {
  60. border: 0;
  61. }
  62.  
  63. /* RTL flip FontAwesome arrows */
  64. html[dir="rtl"] i.fa[class$="-right"],
  65. html[dir="rtl"] i.fa[class$="-left"],
  66. html[dir="rtl"] i.fa[class$="-reply"],
  67. html[dir="rtl"] i.fa[class$="-forward"],
  68. html[dir="rtl"] i.fa[class$="-backward"] {
  69. {prefix="transform" value="scaleX(-1)"}
  70. filter: FlipH;
  71. -ms-filter: "FlipH";
  72. }
  73.  
  74. /* HEADER & MAIN NAV */
  75. #elSiteTitle {
  76. color: #fff;
  77. font-size: 28px;
  78. line-height: 58px;
  79. text-decoration: none;
  80. font-weight: 300;
  81. -webkit-font-smoothing: antialiased;
  82. }
  83.  
  84. #elLogo img {
  85. max-width: 100%;
  86. }
  87.  
  88. #elMobileNav {
  89. background: {theme="main_nav"};
  90. }
  91.  
  92. /*#ipsLayout_mainNav {
  93. margin: 0;
  94. padding: 0;
  95. }
  96.  
  97. #ipsLayout_mainNav > li {
  98. display: inline-block;
  99. float: left;
  100. line-height: 46px;
  101. }*/
  102.  
  103. #ipsLayout_header nav ul li.ipsHide,
  104. #ipsLayout_header #elMobileNav li.ipsHide {
  105. display: none;
  106. }
  107.  
  108. #ipsLayout_mainNav > li > a {
  109. display: block;
  110. position: relative;
  111. font-size: 13px;
  112. color: #fff;
  113. text-decoration: none;
  114. padding: 0 20px;
  115. text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  116. }
  117.  
  118. #ipsLayout_mainNav > li > a .ipsNotificationCount {
  119. top: -3px;
  120. }
  121.  
  122. html[dir="ltr"] #ipsLayout_mainNav > li > a .ipsNotificationCount {
  123. right: -3px;
  124. }
  125. html[dir="rtl"] #ipsLayout_mainNav > li > a .ipsNotificationCount {
  126. left: -3px;
  127. }
  128.  
  129. #ipsLayout_header nav a.ipsNavActive {
  130. color: #fff;
  131. text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
  132. background: rgba(0,0,0,0.3);
  133. font-weight: bold;
  134. opacity: 1;
  135. }
  136.  
  137. #ipsLayout_header nav a.ipsNavActive.ipsNavActive_menu {
  138. background: rgba(0,0,0,0.5);
  139. }
  140.  
  141. #ipsLayout_header header {
  142. padding: 5px 0 130px 0;
  143. margin-bottom: -125px;
  144. }
  145.  
  146. #ipsLayout_header header > .ipsLayout_container {
  147. min-height: 60px;
  148. }
  149.  
  150. #ipsLayout_mainNav > li > a {
  151. opacity: 0.6;
  152. }
  153.  
  154. #ipsLayout_mainNav > li > a:hover {
  155. opacity: 1;
  156. color: #fff;
  157. }
  158.  
  159. #ipsLayout_mobileNav {
  160. display: none;
  161. }
  162.  
  163. #elAjaxLoading {
  164. background: #323232;
  165. width: 150px;
  166. padding: 15px;
  167. color: #fff;
  168. position: fixed;
  169. bottom: 15px;
  170. border-radius: 4px;
  171. font-size: 16px;
  172. text-align: center;
  173. z-index: 15000;
  174. }
  175. html[dir="ltr"] #elAjaxLoading {
  176. left: 50%;
  177. margin-left: -75px;
  178. }
  179. html[dir="rtl"] #elAjaxLoading {
  180. right: 50%;
  181. margin-right: -75px;
  182. }
  183.  
  184. html[dir="ltr"] #elAjaxLoading img {
  185. margin-right: 20px;
  186. }
  187. html[dir="rtl"] #elAjaxLoading img {
  188. margin-left: 20px;
  189. }
  190.  
  191. /* SEARCH */
  192. #elSearch {
  193. border-radius: 20px;
  194. padding: 4px 10px 4px 10px;
  195. background: #fff;
  196. margin: 2px 0;
  197. height: 26px;
  198. width: 170px;
  199. position: relative;
  200. opacity: 0.4;
  201. {prefix="transition" value="0.1s all linear"}
  202. }
  203.  
  204. html[dir="ltr"] #elSearch {
  205. margin-right: 5px;
  206. }
  207. html[dir="rtl"] #elSearch {
  208. margin-left: 5px;
  209. }
  210.  
  211. /* Fix for webkit autocomplete */
  212. #elSearch input:-webkit-autofill {
  213. height: 26px !important;
  214. }
  215.  
  216. .ipsApp_noTouch #elSearch:hover, #elSearch.cSearchExpanded {
  217. opacity: 1;
  218. }
  219.  
  220. #elSearch.cSearchExpanded {
  221. width: 280px;
  222. }
  223.  
  224. #elSearch button {
  225. position: absolute;
  226. top: 0;
  227. border: 0;
  228. background: transparent;
  229. font-size: 17px;
  230. width: 35px;
  231. line-height: 22px;
  232. }
  233. html[dir="ltr"] #elSearch button {
  234. right: 1px;
  235. }
  236. html[dir="rtl"] #elSearch button {
  237. left: 1px;
  238. }
  239.  
  240. #elSearch input[type="search"] {
  241. padding: 0 0 0 2px;
  242. border: 0;
  243. background: transparent;
  244. box-shadow: none;
  245. font-size: 13px;
  246. position: absolute;
  247. top: 0px;
  248. width: 130px;
  249. line-height: 28px;
  250. height: 28px;
  251. }
  252. html[dir="ltr"] #elSearch input[type="search"] {
  253. right: 30px;
  254. }
  255. html[dir="rtl"] #elSearch input[type="search"] {
  256. left: 30px;
  257. }
  258.  
  259. #elSearch #elSearchFilter {
  260. font-size: 11px;
  261. color: #5f5f5f;
  262. opacity: 1;
  263. max-width: 110px;
  264. white-space: nowrap;
  265. text-overflow: ellipsis;
  266. overflow: hidden;
  267. padding: 0 10px;
  268. text-align: center;
  269. position: absolute;
  270. top: 0px;
  271. line-height: 26px;
  272. background: #eeeeee;
  273. width: 110px;
  274. }
  275. html[dir="ltr"] #elSearch #elSearchFilter {
  276. left: 0px;
  277. border-radius: 20px 0 0 20px;
  278. border-right: 1px solid rgba(0,0,0,0.1);
  279. }
  280. html[dir="rtl"] #elSearch #elSearchFilter {
  281. right: 0px;
  282. border-radius: 0px 20px 20px 0px;
  283. border-left: 1px solid rgba(0,0,0,0.1);
  284. }
  285.  
  286. #elSearch #elSearchFilter:hover {
  287. background: #f7f7f7;
  288. }
  289.  
  290. /* USER NAVIGATION */
  291. #elUserNav {
  292. position: absolute;
  293. top: 10px;
  294. line-height: 36px;
  295. text-decoration: none;
  296. }
  297.  
  298. #elUserNav .ipsType_medium {
  299. line-height: inherit;
  300. }
  301.  
  302. html[dir="ltr"] #elUserNav{
  303. right: 20px;
  304. }
  305. html[dir="rtl"] #elUserNav{
  306. left: 20px;
  307. }
  308.  
  309. #elUserNav.cSignedOut {
  310. line-height: 15px;
  311. }
  312.  
  313. #elUserNav > li > a {
  314. color: #fff;
  315. font-size: 13px;
  316. vertical-align: middle;
  317. line-height: 1;
  318. }
  319.  
  320. #elUserNav > li > a .fa,
  321. #elUserNav_mobile > li > a .fa {
  322. font-size: 20px;
  323. }
  324.  
  325. #elUserNav > li > a .fa-caret-down,
  326. #elUserNav > li > a .fa-plus {
  327. font-size: 14px;
  328. }
  329.  
  330. .cUserNav_icon a {
  331. display: block;
  332. position: relative; /* Needed for notification bubbles */
  333. text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
  334. color: #fff;
  335. }
  336.  
  337.  
  338.  
  339. .elUserNav_sep {
  340. border-right: 2px solid rgba(255,255,255,0.1);
  341. height: 36px;
  342. width: 0;
  343. display: block;
  344. }
  345.  
  346. #cUserLink .ipsUserPhoto {
  347. padding: 0;
  348. }
  349. html[dir="ltr"] #cUserLink .ipsUserPhoto {
  350. margin-right: 5px;
  351. }
  352. html[dir="rtl"] #cUserLink .ipsUserPhoto {
  353. margin-left: 5px;
  354. }
  355.  
  356. #cUserLink .ipsUserPhoto img {
  357. width: 26px;
  358. height: 26px;
  359. }
  360.  
  361. #elUserNav_mobile {
  362. text-align: center;
  363. padding: 20px 0;
  364. }
  365.  
  366. html[dir="ltr"] #cRegisterButton {
  367. margin-left: 20px;
  368. }
  369. html[dir="rtl"] #cRegisterButton {
  370. margin-right: 20px;
  371. }
  372.  
  373. #elCart .ipsNotificationCount {
  374. left: 10px;
  375. right: auto;
  376. }
  377.  
  378. /* FLASH MESSAGE */
  379. #elFlashMessage {
  380. background: rgba(0,0,0,0.9);
  381. color: #fff;
  382. position: fixed;
  383. width: 600px;
  384. font-size: 15px;
  385. border-radius: 4px;
  386. text-align: center;
  387. }
  388. #elFlashMessage:not( .ipsPad_half ) {
  389. padding: 15px;
  390. }
  391.  
  392. html[dir="ltr"] #elFlashMessage {
  393. left: 50%;
  394. margin-left: -300px;
  395. }
  396. html[dir="rtl"] #elFlashMessage {
  397. right: 50%;
  398. margin-right: -300px;
  399. }
  400.  
  401. #elFlashMessage.ipsFlashMsg_top {
  402. top: 20px;
  403. }
  404.  
  405. #elFlashMessage.ipsFlashMsg_bottom {
  406. bottom: 20px;
  407. }
  408.  
  409. #elFlashMessage [data-action='dismissFlashMessage'] {
  410. display: none;
  411. }
  412.  
  413. #elFlashMessage.ipsFlashMsg_dismissable [data-action='dismissFlashMessage'] {
  414. display: block;
  415. position: absolute;
  416. top: -10px;
  417. right: -10px;
  418. border-radius: 30px;
  419. width: 30px;
  420. height: 30px;
  421. line-height: 30px;
  422. color: #fff;
  423. background: #000;
  424. font-family: arial, sans-serif;
  425. text-align: center;
  426. font-size: 20px;
  427. border: 0;
  428. }
  429.  
  430. #elFlashMessage a {
  431. color: #fff;
  432. border-bottom: 1px solid rgba(255,255,255,0.6);
  433. }
  434.  
  435. #elFlashMessage a:hover {
  436. color: #fff;
  437. }
  438.  
  439. /* DRAWERS */
  440. .ipsModal.ipsDrawer_modal {
  441. background: rgba(30,30,30,0.4);
  442. overflow: hidden !important;
  443. }
  444.  
  445. .ipsDrawer, .ipsDrawer_menu, .ipsDrawer_content {
  446. overflow: auto;
  447. }
  448.  
  449. .ipsDrawer {
  450. position: fixed;
  451. top: 0;
  452. left: 0;
  453. bottom: 0;
  454. right: 0;
  455. }
  456.  
  457. .ipsDrawer_menu {
  458. position: absolute;
  459. top: 0;
  460. bottom: 0;
  461. width: 280px;
  462. background: #11171c;
  463. box-shadow: 0px 0px 25px rgba(0,0,0,0.2);
  464. }
  465. html[dir="ltr"] .ipsDrawer_menu {
  466. right: 0;
  467. }
  468. html[dir="rtl"] .ipsDrawer_menu {
  469. left: 0;
  470. }
  471.  
  472. .ipsDrawer_content {
  473. position: absolute;
  474. top: 0;
  475. left: 0;
  476. bottom: 0;
  477. right: 0;
  478. }
  479.  
  480. .ipsDrawer_close {
  481. background: #11171c;
  482. width: 40px;
  483. height: 40px;
  484. border-radius: 40px;
  485. color: #fff;
  486. text-align: center;
  487. font-size: 24px;
  488. display: block;
  489. position: absolute;
  490. top: 5px;
  491. z-index: 2000;
  492. }
  493.  
  494. html[dir="ltr"] .ipsDrawer_close {
  495. right: 285px;
  496. }
  497. html[dir="rtl"] .ipsDrawer_close {
  498. left: 285px;
  499. }
  500.  
  501. .ipsDrawer_close > span {
  502. font-family: arial, sans-serif;
  503. line-height: 40px;
  504. }
  505.  
  506. .ipsDrawer_list {
  507. width: 100%;
  508. position: relative;
  509. list-style: none;
  510. padding: 0 0 30px 0; /* Add extra padding at bottom to account for iOS issue */
  511. margin: 0;
  512. }
  513.  
  514. .ipsDrawer_list > li > a:not( .ipsButton ),
  515. .ipsDrawer_list > li:not( .ipsDrawer_itemParent ) > a:not( .ipsButton ) {
  516. color: #fff;
  517. display: block;
  518. padding: 10px 15px;
  519. border-bottom: 1px solid #000;
  520. border-top: 1px solid rgba(255,255,255,0.05);
  521. }
  522.  
  523. .ipsDrawer_list > li > a:active {
  524. background: #000;
  525. }
  526.  
  527. .ipsDrawer_itemParent > .ipsDrawer_list > li > a:not( .ipsButton ) {
  528. padding: 10px 30px;
  529. }
  530.  
  531. .ipsDrawer_section {
  532. color: rgba(255,255,255,0.4);
  533. font-size: 11px;
  534. padding: 15px 30px 5px;
  535. text-transform: uppercase;
  536. }
  537.  
  538. .ipsDrawer_itemParent > h4 {
  539. font-weight: normal;
  540. color: #fff;
  541. padding: 10px 15px;
  542. position: relative;
  543. cursor: pointer;
  544. margin: 0;
  545. border-bottom: 1px solid #000;
  546. border-top: 1px solid rgba(255,255,255,0.05);
  547. }
  548. .ipsDrawer_itemParent > .ipsDrawer_list > .ipsDrawer_itemParent > h4 {
  549. padding: 10px 30px;
  550. }
  551. html[dir="ltr"] .ipsDrawer_itemParent > h4:after {
  552. content: "\f105";
  553. right: 14px;
  554. }
  555. html[dir="rtl"] .ipsDrawer_itemParent > h4:after {
  556. content: "\f104";
  557. left: 14px;
  558. }
  559.  
  560. .ipsDrawer_itemParent > h4 > a {
  561. color: inherit;
  562. display: block;
  563. }
  564.  
  565. .ipsDrawer_list .ipsDrawer_list {
  566. position: absolute;
  567. top: 0;
  568. }
  569. html[dir="ltr"] .ipsDrawer_list .ipsDrawer_list {
  570. left: 100%;
  571. }
  572. html[dir="rtl"] .ipsDrawer_list .ipsDrawer_list {
  573. right: 100%;
  574. }
  575.  
  576. .ipsDrawer_list [data-action="back"] a {
  577. position: relative;
  578. background: #000;
  579. color: #a9a9a9;
  580. }
  581. html[dir="ltr"] .ipsDrawer_list [data-action="back"] a {
  582. padding-left: 30px;
  583. }
  584. html[dir="rtl"] .ipsDrawer_list [data-action="back"] a {
  585. padding-right: 30px;
  586. }
  587.  
  588. html[dir="ltr"] .ipsDrawer_list [data-action="back"] a:before {
  589. content: "\f104";
  590. left: 14px;
  591. }
  592. html[dir="rtl"] .ipsDrawer_list [data-action="back"] a:before {
  593. content: "\f105";
  594. right: 14px;
  595. }
  596.  
  597. .ipsDrawer_itemParent > h4:after,
  598. .ipsDrawer_list [data-action="back"] a:before {
  599. font-family: "FontAwesome";
  600. font-size: 20px;
  601. position: absolute;
  602. top: 50%;
  603. margin-top: -10px;
  604. }
  605.  
  606. .ipsDrawer_listTitle {
  607. font-size: 14px;
  608. background: rgba(255,255,255,0.1);
  609. padding: 10px;
  610. color: #c8c8c8;
  611. margin-top: 10px;
  612. }
  613.  
  614.  
  615.  
  616. /* HIGH RES IMAGES */
  617. @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  618. html[dir="ltr"] .ipsApp .ipsStepBar > .ipsStep > a,
  619. html[dir="ltr"] .ipsApp .ipsStepBar > .ipsStep > span {
  620. background-image: url( "{resource="wizard_step_large@2x.png" app="core" location="front"}" );
  621. }
  622. html[dir="rtl"] .ipsApp .ipsStepBar > .ipsStep > a,
  623. html[dir="rtl"] .ipsApp .ipsStepBar > .ipsStep > span {
  624. background-image: url( "{resource="wizard_step_large_rtl@2x.png" app="core" location="front"}" );
  625. }
  626.  
  627. html[dir="ltr"] .ipsApp .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active:after {
  628. background-image: url( "{resource="wizard_step_extra@2x.png" app="core" location="front"}" );
  629. }
  630. html[dir="rtl"] .ipsApp .ipsStepBar > .ipsStep + .ipsStep.ipsStep_active:after {
  631. background-image: url( "{resource="wizard_step_extra_rtl@2x.png" app="core" location="front"}" );
  632. }
  633.  
  634. html[dir="ltr"] .ipsApp .ipsDataItem_subList {
  635. background-image: url( "{resource="subitem_stem@2x.png" app="core" location="front"}" );
  636. }
  637. html[dir="rtl"] .ipsApp .ipsDataItem_subList {
  638. background-image: url( "{resource="subitem_stem_rtl@2x.png" app="core" location="front"}" );
  639. }
  640. }
  641.  
  642. /* Redirector */
  643. .ipsRedirect {
  644. text-align: center;
  645. }
  646. .ipsRedirect_loading {
  647. height: 100px;
  648. }
  649. .ipsRedirect_progress {
  650. margin-bottom: 20px;
  651. }
  652.  
  653. .ipsRedirectMessage {
  654. margin: 50px;
  655. }
  656.  
  657. .ipsRedirect_manualButton {
  658. margin-top: 20px;
  659. }
  660.  
  661. /* Default responsive styles */
  662. /* DESKTOP/DEFAULT */
  663. .ipsResponsive_showDesktop,
  664. .ipsResponsive_showDesktop.ipsResponsive_inline {
  665. display: inline !important;
  666. }
  667. .ipsResponsive_showDesktop.ipsResponsive_inlineBlock {
  668. display: inline-block !important;
  669. }
  670. .ipsResponsive_showDesktop.ipsResponsive_block {
  671. display: block !important;
  672. }
  673.  
  674. .ipsResponsive_showPhone.ipsResponsive_inline,
  675. .ipsResponsive_showPhone.ipsResponsive_inlineBlock,
  676. .ipsResponsive_showPhone.ipsResponsive_block,
  677. .ipsResponsive_showTablet.ipsResponsive_inline,
  678. .ipsResponsive_showTablet.ipsResponsive_inlineBlock,
  679. .ipsResponsive_showTablet.ipsResponsive_block,
  680. .ipsResponsive_hideDesktop.ipsResponsive_inline,
  681. .ipsResponsive_hideDesktop.ipsResponsive_inlineBlock,
  682. .ipsResponsive_hideDesktop.ipsResponsive_block {
  683. display: none !important;
  684. }
  685.  
  686. #elNavLang_menu li button,
  687. #elNavTheme_menu li button {
  688. text-align: left;
  689. }
  690.  
  691. #elLicenseKey {
  692. margin: 0;
  693. border-radius: 0;
  694. font-size: 14px;
  695. padding-right: 40px;
  696. }
  697.  
  698. #elLicenseKey .ipsList_inline {
  699. margin-top: 15px;
  700. }
  701.  
  702. #elLicenseKey [data-role="closeMessage"] {
  703. display: inline-block;
  704. background: rgba(0,0,0,0.6);
  705. width: 30px;
  706. height: 30px;
  707. border-radius: 30px;
  708. line-height: 28px;
  709. text-align: center;
  710. color: #fff;
  711. border-bottom: 0;
  712. font-size: 18px;
  713. position: absolute;
  714. right: 15px;
  715. top: 15px;
  716. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement