API tools faq
paste
Advertisement
Guest User

Untitled

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