API tools faq
paste
simkoG

shoprenter-css

simkoG
Sep 15th, 2020
228
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.32 KB | None | 0 0
raw download clone embed print report
  1. /***
  2.  * FOR ALL
  3.  ***/
  4.  
  5. @-webkit-keyframes colorPopUp {
  6.    0% {
  7.       -webkit-transform: translate(-50%, -5px);
  8.       transform: translate(-50%, -5px);
  9.       opacity: 0;
  10.    }
  11.    100% {
  12.       -webkit-transform: translate(-50%, 0);
  13.       transform: translate(-50%, 0);
  14.       opacity: 1;
  15.    }
  16. }
  17.  
  18. @keyframes colorPopUp {
  19.    0% {
  20.       -webkit-transform: translate(-50%, -5px);
  21.       transform: translate(-50%, -5px);
  22.       opacity: 0;
  23.    }
  24.    100% {
  25.       -webkit-transform: translate(-50%, 0);
  26.       transform: translate(-50%, 0);
  27.       opacity: 1;
  28.    }
  29. }
  30.  
  31. @-webkit-keyframes pulse {
  32.    from {
  33.       -webkit-transform: scale3d(1, 1, 1);
  34.       transform: scale3d(1, 1, 1);
  35.    }
  36.    50% {
  37.       -webkit-transform: scale3d(1.05, 1.05, 1.05);
  38.       transform: scale3d(1.05, 1.05, 1.05);
  39.    }
  40.    to {
  41.       -webkit-transform: scale3d(1, 1, 1);
  42.       transform: scale3d(1, 1, 1);
  43.    }
  44. }
  45.  
  46. @keyframes pulse {
  47.    from {
  48.       -webkit-transform: scale3d(1, 1, 1);
  49.       transform: scale3d(1, 1, 1);
  50.    }
  51.    50% {
  52.       -webkit-transform: scale3d(1.05, 1.05, 1.05);
  53.       transform: scale3d(1.05, 1.05, 1.05);
  54.    }
  55.    to {
  56.       -webkit-transform: scale3d(1, 1, 1);
  57.       transform: scale3d(1, 1, 1);
  58.    }
  59. }
  60.  
  61. html,
  62. body {
  63.    -webkit-font-smoothing: antialiased;
  64.    -moz-osx-font-smoothing: grayscale;
  65. }
  66.  
  67. ::-webkit-input-placeholder {
  68.    color: #666;
  69. }
  70.  
  71. ::-moz-placeholder {
  72.    color: #666;
  73. }
  74.  
  75. :-ms-input-placeholder {
  76.    color: #666;
  77. }
  78.  
  79. ::-ms-input-placeholder {
  80.    color: #666;
  81. }
  82.  
  83. ::placeholder {
  84.    color: #666;
  85. }
  86.  
  87. :-ms-input-placeholder {
  88.    color: #666;
  89. }
  90.  
  91. ::-ms-input-placeholder {
  92.    color: #666;
  93. }
  94.  
  95.  
  96. /***
  97.  * HEADER
  98.  ***/
  99.  
  100. header .navbar-brand {
  101.    padding: 0;
  102.    font-size: 0;
  103.    text-indent: -9999px;
  104.    width: 300px;
  105.    height: 100px;
  106.    background-image: url('https://trendland223.trendland.hu/custom/trendland/image/data/branding/trendland-logo.svg');
  107.    background-repeat: no-repeat;
  108.    background-position: left center;
  109.    background-size: contain;
  110. }
  111.  
  112. .nanobar-text-cookies,
  113. .nanobar-cookies .form-check-label {
  114.    color: #151E26;
  115. }
  116.  
  117. .header-top-line a:not(.edit-link) {
  118.    font-size: .95rem;
  119. }
  120.  
  121.  
  122. /***
  123.  * BREADCRUMBS
  124.  ***/
  125.  
  126. .breadcrumb {
  127.    font-size: 0.875rem;
  128. }
  129.  
  130. .breadcrumb-item a,
  131. .breadcrumb-item.active {
  132.    color: #151E26;
  133. }
  134.  
  135. .breadcrumb-item.active {
  136.    font-weight: bold;
  137. }
  138.  
  139.  
  140. /***
  141.  * SIDEBAR
  142.  ***/
  143.  
  144. .column-left #customcontent {
  145.    background: #302F34;
  146.    -webkit-box-shadow: none;
  147.    box-shadow: none;
  148.    padding: 0;
  149. }
  150.  
  151. .column-left #customcontent .module-head {
  152.    padding: 25px 20px 20px 20px;
  153. }
  154.  
  155. .column-left #customcontent .module-head .module-head-title {
  156.    color: #ffffff;
  157. }
  158.  
  159. .column-left #customcontent .module-head .module-head-title:before {
  160.    content: url("data:image/svg+xml,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='%23fff'%3E%3Cdefs/%3E%3Cpath d='M22 2.8a.8.8 0 00-.9-1H8.2a.9.9 0 100 1.8h13a.8.8 0 00.8-.9zM4.5 2.8a.9.9 0 00-.8-1H.9a.9.9 0 000 1.8h2.8a.9.9 0 00.8-.9zM22 8.3a.8.8 0 00-.9-1H8.2a.9.9 0 000 1.8h13a.8.8 0 00.8-.8zM4.5 8.3a.9.9 0 00-.8-1H.9a.9.9 0 100 1.8h2.8a.9.9 0 00.8-.8zM22 13.8a.8.8 0 00-.9-1H8.2a.9.9 0 100 1.8h13a.8.8 0 00.8-.8zM4.5 13.8a.9.9 0 00-.8-1H.9a.9.9 0 100 1.8h2.8a.9.9 0 00.8-.8zM22 19.3a.8.8 0 00-.9-1H8.2a.9.9 0 100 1.8h13a.8.8 0 00.8-.9zM4.5 19.3a.9.9 0 00-.8-1H.9a.9.9 0 100 1.8h2.8a.9.9 0 00.8-.9z'/%3E%3C/svg%3E");
  161.    display: inline-block;
  162.    vertical-align: middle;
  163.    width: 22px;
  164.    height: 22px;
  165.    margin-right: 13px;
  166. }
  167.  
  168. .column-left #customcontent .module-body {
  169.    padding: 25px 20px;
  170. }
  171.  
  172. #customcontent .category-menu-custom {
  173.    margin: 0;
  174.    padding: 0;
  175.    list-style: none;
  176. }
  177.  
  178. #customcontent .category-menu-custom .nav-item:not(:last-of-type) {
  179.    border-bottom: 1px solid rgba(255, 255, 255, .1);
  180. }
  181.  
  182. #customcontent .category-menu-custom .nav-link {
  183.    padding: 0.5rem 0;
  184.    color: #fff;
  185.    font-size: 1rem;
  186. }
  187.  
  188. #customcontent .category-menu-custom>.nav-item>.nav-link {
  189.    display: -webkit-box;
  190.    display: -ms-flexbox;
  191.    display: flex;
  192.    -webkit-box-align: center;
  193.    -ms-flex-align: center;
  194.    align-items: center;
  195. }
  196.  
  197. #customcontent .category-menu-custom>.nav-item>.nav-link:before {
  198.    content: '';
  199.    display: inline-block;
  200.    width: 4px;
  201.    height: 4px;
  202.    background-color: #9E9E9E;
  203.    margin-right: 13px;
  204. }
  205.  
  206. #customcontent .category-menu-custom .nav-link:hover {
  207.    color: #FFC700;
  208. }
  209.  
  210. #customcontent .category-menu-custom .children {
  211.    margin: 0;
  212.    padding: 0;
  213.    list-style: none;
  214.    background-color: unset;
  215.    -webkit-box-shadow: none;
  216.    box-shadow: none;
  217. }
  218.  
  219. #customcontent .category-menu-custom .children .nav-item {
  220.    border: none;
  221. }
  222.  
  223. #customcontent .category-menu-custom .children .nav-link {
  224.    font-size: 0.8125rem;
  225.    color: #9E9E9E;
  226.    padding: 0.25rem 0;
  227. }
  228.  
  229. #customcontent .category-menu-custom .children .nav-link:last-of-type {
  230.    padding-bottom: 0.5rem;
  231. }
  232.  
  233. #customcontent .category-menu-custom .children .nav-link:hover {
  234.    color: #FFC700;
  235. }
  236.  
  237.  
  238. /***
  239.  * HOME PAGE
  240.  ***/
  241.  
  242. .slider-box h2 {
  243.    color: #333;
  244. }
  245.  
  246. .news-pretext {
  247.    color: #666;
  248. }
  249.  
  250. .newsletter-subscribe-module .newsletter-home-left {
  251.    -ms-flex-preferred-size: 50%;
  252.    flex-basis: 50%;
  253.    background-image: url(https://trendland223.trendland.hu/custom/trendland/catalog/view/theme/helsinki_global/image/newsletter_bg.jpg);
  254.    background-position: center;
  255.    background-size: cover;
  256.    background-repeat: no-repeat;
  257. }
  258.  
  259. .newsletter-subscribe-module .newsletter-home-left>img {
  260.    visibility: hidden;
  261. }
  262.  
  263. .newsletter-subscribe-module .newsletter-home-right {
  264.    -ms-flex-preferred-size: 50%;
  265.    flex-basis: 50%;
  266.    display: -webkit-box;
  267.    display: -ms-flexbox;
  268.    display: flex;
  269.    -webkit-box-orient: vertical;
  270.    -webkit-box-direction: normal;
  271.    -ms-flex-direction: column;
  272.    flex-direction: column;
  273.    -webkit-box-pack: center;
  274.    -ms-flex-pack: center;
  275.    justify-content: center;
  276. }
  277.  
  278. .newsletter-subscribe-module .newsletter-home-right a {
  279.    color: #302f34;
  280.    font-weight: bold;
  281.    text-decoration: underline;
  282. }
  283.  
  284. .newsletter-subscribe-module .newsletter-home-right a:hover {
  285.    text-decoration: none;
  286. }
  287.  
  288. .newsletter-subscribe-module .form-submit {
  289.    margin: 0 !important;
  290. }
  291.  
  292.  
  293. /***
  294.  * PRODUCT LOOP
  295.  ***/
  296.  
  297. .sortbar .sort-label {
  298.    color: #fff;
  299.    height: 35px;
  300.    display: block;
  301.    line-height: 35px;
  302.    background: rgba(48, 47, 52, .5);
  303.    margin: 0 !important;
  304.    padding: 0 1.2rem;
  305. }
  306.  
  307. .sortbar .sort .sort-select select.form-control {
  308.    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 451.8 257.6'%3E%3Cdefs/%3E%3Cpath fill='%23fff' d='M203.6 248.3L9.3 54A31.6 31.6 0 1154 9.3l172 171.9 171.8-172A31.6 31.6 0 01442.6 54L248.3 248.3a31.5 31.5 0 01-44.7 0z'/%3E%3C/svg%3E");
  309.    background-color: #302f34;
  310.    border: 1px solid #302f34;
  311.    color: #fff;
  312.    border-radius: 0;
  313. }
  314.  
  315. .product-snapshot .badgeitemid_10 {
  316.    width: 35px !important;
  317.    height: 35px !important;
  318. }
  319.  
  320. .product-snapshot .badgeitemid_10 .badgeitem-text {
  321.    font-size: 12px;
  322. }
  323.  
  324.  
  325. /***
  326.  * PRODUCT PAGE
  327.  ***/
  328.  
  329. .product-image .product_badges {
  330.    top: 10px;
  331.    left: 10px;
  332. }
  333.  
  334. .badgeitemid_10 {
  335.    background: #D02D54 !important;
  336.    border-radius: 100%;
  337. }
  338.  
  339. .badgeitemid_10 .badgeitem-text {
  340.    font-weight: 700;
  341.    font-size: 20px;
  342. }
  343.  
  344. .product-parameters {
  345.    color: #333;
  346. }
  347.  
  348. .product-desc {
  349.    font-size: 16px;
  350.    line-height: 1.58em;
  351. }
  352.  
  353. @media screen and (min-width: 992px) {
  354.    .product-desc {
  355.       display: block;
  356.       font-size: 18px;
  357.       padding: 0 15%;
  358.    }
  359. }
  360.  
  361. .social-share-module {
  362.    display: -webkit-box;
  363.    display: -ms-flexbox;
  364.    display: flex;
  365.    -webkit-box-pack: center;
  366.    -ms-flex-pack: center;
  367.    justify-content: center;
  368. }
  369.  
  370. .social-share-module>[class^=fb]:hover {
  371.    opacity: .8;
  372. }
  373.  
  374. .social-share-module>.fb-like {
  375.    -webkit-box-ordinal-group: 2;
  376.    -ms-flex-order: 1;
  377.    order: 1;
  378. }
  379.  
  380. .social-share-module>.fb-share-button {
  381.    -webkit-box-ordinal-group: 3;
  382.    -ms-flex-order: 2;
  383.    order: 2;
  384. }
  385.  
  386. .social-share-module>.twitter {
  387.    -webkit-box-ordinal-group: 4;
  388.    -ms-flex-order: 3;
  389.    order: 3;
  390.    height: 20px;
  391.    -webkit-box-sizing: border-box;
  392.    box-sizing: border-box;
  393.    padding: 1px 8px 1px 6px;
  394.    background-color: #1b95e0;
  395.    color: #fff;
  396.    border-radius: 3px;
  397.    cursor: pointer;
  398.    width: unset;
  399.    background-size: 14px;
  400.    background-position: 6px center;
  401.    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
  402. }
  403.  
  404. .social-share-module>.twitter:after {
  405.    content: 'Tweet';
  406.    font: bold normal normal 11px/18px 'Helvetica Neue', Arial, sans-serif;
  407.    padding-left: 17px;
  408.    line-height: 20px;
  409.    position: relative;
  410.    top: -1px;
  411. }
  412.  
  413. .social-share-module>.twitter:hover {
  414.    background-color: #0c7abf;
  415. }
  416.  
  417. .variable {
  418.    position: relative;
  419. }
  420.  
  421. .variable .icon {
  422.    border-radius: 2px;
  423. }
  424.  
  425. .variable:hover .icon:after,
  426. .variable:hover .icon:before {
  427.    -webkit-animation: colorPopUp ease .2s forwards;
  428.    animation: colorPopUp ease .2s forwards;
  429. }
  430.  
  431. .variable:hover .icon:after {
  432.    white-space: nowrap;
  433.    content: attr(title);
  434.    position: absolute;
  435.    top: -23px;
  436.    left: 50%;
  437.    background: #302F34;
  438.    padding: 2px 5px;
  439.    color: white;
  440.    font-size: 11px;
  441.    text-transform: uppercase;
  442.    border-radius: 2px;
  443. }
  444.  
  445. .variable:hover .icon:before {
  446.    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'%3E%3Cpolygon points='0 0 4 0 2 3 0 0' fill='%23302f34'/%3E%3C/svg%3E");
  447.    position: absolute;
  448.    top: -17px;
  449.    left: 50%;
  450.    -webkit-transform: translateX(-50%);
  451.    transform: translateX(-50%);
  452.    width: 6px;
  453. }
  454.  
  455. .product-attribute-name {
  456.    font-size: 1.2rem;
  457.    color: #151E26;
  458.    margin-right: .8rem;
  459. }
  460.  
  461.  
  462. /***
  463.  * ADD TO CART POPUP
  464.  ***/
  465.  
  466. .shipping-warning {
  467.    background-color: #D02D53;
  468.    color: #fff;
  469.    font-size: 1rem;
  470.    margin: 20px 0 0 0;
  471.    padding: 20px 10px;
  472. }
  473.  
  474. .shipping-warning-icon {
  475.    width: 100%;
  476.    max-width: 45px;
  477.    padding: 0;
  478.    margin-left: 15px;
  479.    opacity: .35;
  480. }
  481.  
  482. .shipping-warning-icon>img {
  483.    display: block;
  484.    width: 45px;
  485.    -webkit-animation: pulse ease-in-out 2s infinite;
  486.    animation: pulse ease-in-out 2s infinite;
  487. }
  488.  
  489. .shipping-warning-text p {
  490.    margin: 0;
  491. }
  492.  
  493. .shipping-warning-text strong {
  494.    text-decoration: underline;
  495. }
  496.  
  497.  
  498. /***
  499.  * STATIC PAGES
  500.  ***/
  501.  
  502. .download-buttons {
  503.    list-style: none;
  504.    margin: 50px 0;
  505.    padding: 0;
  506.    display: -webkit-box;
  507.    display: -ms-flexbox;
  508.    display: flex;
  509.    -ms-flex-wrap: wrap;
  510.    flex-wrap: wrap;
  511. }
  512.  
  513. .download-buttons__button {
  514.    background-image: url("https://trendland223.trendland.hu/custom/trendland/catalog/view/theme/helsinki_global/image/icon-pdf.svg");
  515.    background-size: 20px;
  516.    background-repeat: no-repeat;
  517.    background-position: 15px center;
  518.    background-color: #FFC700;
  519.    padding: 10px 20px 10px 50px;
  520.    margin-right: 15px;
  521.    margin-bottom: 15px;
  522.    display: block;
  523.    border-radius: 20px;
  524.    color: #151E26;
  525.    text-decoration: none;
  526.    font-size: 14px;
  527.    font-weight: bold;
  528. }
  529.  
  530. .download-buttons__button.doc {
  531.    background-image: url("https://trendland223.trendland.hu/custom/trendland/catalog/view/theme/helsinki_global/image/icon-docx.svg");
  532. }
  533.  
  534. .download-buttons__button:hover {
  535.    color: #fff;
  536. }
  537.  
  538.  
  539. /***
  540.  * CART & CHECKOUT
  541.  ***/
  542.  
  543. #checkout-button-form {
  544.    display: -webkit-box;
  545.    display: -ms-flexbox;
  546.    display: flex;
  547.    -webkit-box-align: baseline;
  548.    -ms-flex-align: baseline;
  549.    align-items: baseline;
  550.    -webkit-box-pack: center;
  551.    -ms-flex-pack: center;
  552.    justify-content: center;
  553. }
  554.  
  555. .quantity-name-text:after {
  556.    content: 'emelet';
  557. }
  558.  
  559. .button-add-to-cart {
  560.    border-radius: 50px;
  561. }
  562.  
  563.  
  564. /***
  565.  * FOOTER
  566.  ***/
  567.  
  568. footer .navbar-brand {
  569.    display: block;
  570.    padding: 0;
  571.    font-size: 0;
  572.    text-indent: -9999px;
  573.    width: 100%;
  574.    height: 40px;
  575.    background-image: url('https://trendland223.trendland.hu/custom/trendland/image/data/branding/trendland-logo-mono-light.svg');
  576.    background-repeat: no-repeat;
  577.    background-position: left center;
  578.    background-size: contain;
  579.    opacity: .5;
  580. }
  581.  
  582. .footer-contact-line {
  583.    display: -webkit-box;
  584.    display: -ms-flexbox;
  585.    display: flex;
  586.    -webkit-box-align: center;
  587.    -ms-flex-align: center;
  588.    align-items: center;
  589. }
Add Comment
Please, Sign In to add comment
Public Pastes
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!