opencart.css (2015B)
1 /* CSS Document */ 2 .swiper-viewport { 3 margin: 0 0 60px; 4 background: #fff; 5 z-index: 1; 6 border: 4px solid #fff; 7 border-radius: 4px; 8 box-shadow: 0 1px 4px rgba(0,0,0,.2); 9 width: 100%; 10 position: relative; 11 overflow: visible; 12 } 13 /* OpenCart Code */ 14 .swiper-container { 15 direction: ltr !important; 16 } 17 .swiper-pager { 18 width: 100%; 19 position: absolute; 20 top: 50%; 21 line-height: 45px; 22 } 23 .swiper-button-prev, .swiper-button-next { 24 color: rgba(0, 0, 0, 0.8); 25 text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); 26 transition: all .3s ease; 27 z-index: 2; 28 background-image: none; 29 } 30 .swiper-viewport .swiper-button-prev { 31 opacity: 0.7; 32 left: 10px; 33 } 34 .swiper-viewport .swiper-button-next { 35 opacity: 0.7; 36 right: 10px; 37 38 } 39 /* Desktop */ 40 @media (min-width: 768px){ 41 .swiper-viewport .swiper-button-prev { 42 opacity: 0; 43 left: -20px; 44 } 45 .swiper-viewport .swiper-button-next { 46 opacity: 0; 47 right: -20px; 48 } 49 .swiper-viewport:hover .swiper-button-prev { 50 opacity: 0.7; 51 left: 10px; 52 53 } 54 .swiper-viewport:hover .swiper-button-next { 55 opacity: 0.7; 56 right: 10px; 57 } 58 } 59 .swiper-button-prev:before { 60 width: 40px; 61 height: 40px; 62 font-family: FontAwesome; 63 content: "\f053"; 64 color: rgba(0,0,0,0.8); 65 font-size: 40px; 66 } 67 .swiper-button-next:before { 68 width: 40px; 69 height: 40px; 70 font-family: FontAwesome; 71 content: "\f054"; 72 color: rgba(0,0,0,0.8); 73 font-size: 40px; 74 } 75 .swiper-pagination { 76 bottom: -40px; 77 left: 0; 78 text-align: center; 79 width: 100%; 80 } 81 .swiper-pagination-bullet { 82 width: 11px; 83 height: 11px; 84 background: rgba(0, 0, 0, 0.5); 85 border-radius: 20px; 86 box-shadow: inset 0 0 3px rgba(0,0,0,0.3); 87 margin: 0 5px; 88 opacity: 1; 89 } 90 .swiper-pagination-bullet:hover { 91 background: rgba(0, 0, 0, 0.7); 92 } 93 .swiper-pagination-bullet-active { 94 background: rgba(0, 0, 0, 0.9); 95 } 96 .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { 97 opacity: 0; 98 cursor: pointer; 99 pointer-events: auto; 100 }