hades.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. /*-----------------------------------------------------------------------------
  2. - Revolution Slider 5.0 Navigatin Skin Style -
  3. HADES SKIN
  4. author: ThemePunch
  5. email: info@themepunch.com
  6. website: http://www.themepunch.com
  7. -----------------------------------------------------------------------------*/
  8. /* ARROWS */
  9. .hades.tparrows {
  10. cursor:pointer;
  11. background:#000;
  12. background:rgba(0,0,0,0.15);
  13. width:100px;
  14. height:100px;
  15. position:absolute;
  16. display:block;
  17. z-index:100;
  18. }
  19. .hades.tparrows:before {
  20. font-family: "revicons";
  21. font-size:30px;
  22. color:#fff;
  23. display:block;
  24. line-height: 100px;
  25. text-align: center;
  26. transition: background 0.3s, color 0.3s;
  27. }
  28. .hades.tparrows.tp-leftarrow:before {
  29. content: "\e824";
  30. }
  31. .hades.tparrows.tp-rightarrow:before {
  32. content: "\e825";
  33. }
  34. .hades.tparrows:hover:before {
  35. color:#aaa;
  36. background:#fff;
  37. background:rgba(255,255,255,1);
  38. }
  39. .hades .tp-arr-allwrapper {
  40. position:absolute;
  41. left:100%;
  42. top:0px;
  43. background:#888;
  44. width:100px;height:100px;
  45. -webkit-transition: all 0.3s;
  46. transition: all 0.3s;
  47. -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=0)";
  48. filter: alpha(opacity=0);
  49. -moz-opacity: 0.0;
  50. -khtml-opacity: 0.0;
  51. opacity: 0.0;
  52. -webkit-transform: rotatey(-90deg);
  53. transform: rotatey(-90deg);
  54. -webkit-transform-origin: 0% 50%;
  55. transform-origin: 0% 50%;
  56. }
  57. .hades.tp-rightarrow .tp-arr-allwrapper {
  58. left:auto;
  59. right:100%;
  60. -webkit-transform-origin: 100% 50%;
  61. transform-origin: 100% 50%;
  62. -webkit-transform: rotatey(90deg);
  63. transform: rotatey(90deg);
  64. }
  65. .hades:hover .tp-arr-allwrapper {
  66. -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)";
  67. filter: alpha(opacity=100);
  68. -moz-opacity: 1;
  69. -khtml-opacity: 1;
  70. opacity: 1;
  71. -webkit-transform: rotatey(0deg);
  72. transform: rotatey(0deg);
  73. }
  74. .hades .tp-arr-iwrapper {
  75. }
  76. .hades .tp-arr-imgholder {
  77. background-size:cover;
  78. position:absolute;
  79. top:0px;left:0px;
  80. width:100%;height:100%;
  81. }
  82. .hades .tp-arr-titleholder {
  83. }
  84. .hades .tp-arr-subtitleholder {
  85. }
  86. /* BULLETS */
  87. .hades.tp-bullets {
  88. }
  89. .hades.tp-bullets:before {
  90. content:" ";
  91. position:absolute;
  92. width:100%;
  93. height:100%;
  94. background:transparent;
  95. padding:10px;
  96. margin-left:-10px;margin-top:-10px;
  97. box-sizing:content-box;
  98. }
  99. .hades .tp-bullet {
  100. width:3px;
  101. height:3px;
  102. position:absolute;
  103. background:#888;
  104. cursor: pointer;
  105. border:5px solid #fff;
  106. box-sizing:content-box;
  107. box-shadow:0px 0px 3px 1px rgba(0,0,0,0.2);
  108. -webkit-perspective:400;
  109. perspective:400;
  110. -webkit-transform:translatez(0.01px);
  111. transform:translatez(0.01px);
  112. }
  113. .hades .tp-bullet:hover,
  114. .hades .tp-bullet.selected {
  115. background:#555;
  116. }
  117. .hades .tp-bullet-image {
  118. position:absolute;top:-80px; left:-60px;width:120px;height:60px;
  119. background-position:center center;
  120. background-size:cover;
  121. visibility:hidden;
  122. opacity:0;
  123. transition:all 0.3s;
  124. -webkit-transform-style:flat;
  125. transform-style:flat;
  126. perspective:600;
  127. -webkit-perspective:600;
  128. transform: rotatex(-90deg);
  129. -webkit-transform: rotatex(-90deg);
  130. box-shadow:0px 0px 3px 1px rgba(0,0,0,0.2);
  131. transform-origin:50% 100%;
  132. -webkit-transform-origin:50% 100%;
  133. }
  134. .hades .tp-bullet:hover .tp-bullet-image {
  135. display:block;
  136. opacity:1;
  137. transform: rotatex(0deg);
  138. -webkit-transform: rotatex(0deg);
  139. visibility:visible;
  140. }
  141. .hades .tp-bullet-title {
  142. }
  143. /* THUMBS */
  144. .hades .tp-thumb {
  145. opacity:1
  146. }
  147. .hades .tp-thumb-img-wrap {
  148. border-radius:50%;
  149. padding:3px;
  150. display:inline-block;
  151. background:#000;
  152. background-color:rgba(0,0,0,0.25);
  153. width:100%;
  154. height:100%;
  155. position:relative;
  156. margin:0px;
  157. box-sizing:border-box;
  158. transition:all 0.3s;
  159. -webkit-transition:all 0.3s;
  160. }
  161. .hades .tp-thumb-image {
  162. padding:3px;
  163. border-radius:50%;
  164. display:block;
  165. box-sizing:border-box;
  166. position:relative;
  167. -webkit-box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  168. -moz-box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  169. box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  170. }
  171. .hades .tp-thumb:hover .tp-thumb-img-wrap,
  172. .hades .tp-thumb.selected .tp-thumb-img-wrap {
  173. background: rgba(255,255,255,1);
  174. background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  175. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(119,119,119,1)));
  176. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  177. background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  178. background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  179. background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  180. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#777777", GradientType=0 );
  181. }
  182. .hades .tp-thumb-title:after {
  183. content:" ";
  184. position:absolute;
  185. left:50%;
  186. margin-left:-8px;
  187. width: 0;
  188. height: 0;
  189. border-style: solid;
  190. border-width: 8px 8px 0 8px;
  191. border-color: rgba(0,0,0,0.75) transparent transparent transparent;
  192. bottom:-8px;
  193. }
  194. /* TABS */
  195. .hades .tp-tab {
  196. opacity:1;
  197. }
  198. .hades .tp-tab-title
  199. {
  200. display:block;
  201. color:#333;
  202. font-weight:600;
  203. font-size:18px;
  204. text-align:center;
  205. line-height:25px;
  206. }
  207. .hades .tp-tab-price
  208. {
  209. display:block;
  210. text-align:center;
  211. color:#999;
  212. font-size:16px;
  213. margin-top:10px;
  214. line-height:20px
  215. }
  216. .hades .tp-tab-button {
  217. display:inline-block;
  218. margin-top:15px;
  219. text-align:center;
  220. padding:5px 15px;
  221. color:#fff;
  222. font-size:14px;
  223. background:#219bd7;
  224. border-radius:4px;
  225. font-weight:400;
  226. }
  227. .hades .tp-tab-inner {
  228. text-align:center;
  229. }