gyges.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /*-----------------------------------------------------------------------------
  2. - Revolution Slider 5.0 Navigatin Skin Style -
  3. GYGES SKIN
  4. author: ThemePunch
  5. email: info@themepunch.com
  6. website: http://www.themepunch.com
  7. -----------------------------------------------------------------------------*/
  8. /* ARROWS */
  9. /* BULLETS */
  10. .gyges.tp-bullets {
  11. }
  12. .gyges.tp-bullets:before {
  13. content:" ";
  14. position:absolute;
  15. width:100%;
  16. height:100%;
  17. background: #777777; /* Old browsers */
  18. background: -moz-linear-gradient(top, #777777 0%, #666666 100%);
  19. background: -webkit-gradient(linear, left top, left bottom,
  20. color-stop(0%,#777777), color-stop(100%,#666666));
  21. background: -webkit-linear-gradient(top, #777777 0%,#666666 100%);
  22. background: -o-linear-gradient(top, #777777 0%,#666666 100%);
  23. background: -ms-linear-gradient(top, #777777 0%,#666666 100%);
  24. background: linear-gradient(to bottom, #777777 0%,#666666 100%);
  25. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#777777",
  26. endColorstr="#666666",GradientType=0 );
  27. padding:10px;
  28. margin-left:-10px;margin-top:-10px;
  29. box-sizing:content-box;
  30. border-radius:10px;
  31. }
  32. .gyges .tp-bullet {
  33. width:12px;
  34. height:12px;
  35. position:absolute;
  36. background:#333;
  37. border:3px solid #444;
  38. border-radius:50%;
  39. cursor: pointer;
  40. box-sizing:content-box;
  41. }
  42. .gyges .tp-bullet:hover,
  43. .gyges .tp-bullet.selected {
  44. background: #ffffff; /* Old browsers */
  45. background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%); /* FF3.6+ */
  46. background: -webkit-gradient(linear, left top, left bottom,
  47. color-stop(0%,#ffffff), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
  48. background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
  49. background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%); /* Opera 11.10+ */
  50. background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%); /* IE10+ */
  51. background: linear-gradient(to bottom, #ffffff 0%,#e1e1e1 100%); /* W3C */
  52. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff",
  53. endColorstr="#e1e1e1",GradientType=0 ); /* IE6-9 */
  54. }
  55. .gyges .tp-bullet-image {
  56. }
  57. .gyges .tp-bullet-title {
  58. }
  59. /* THUMBS */
  60. .gyges .tp-thumb {
  61. opacity:1
  62. }
  63. .gyges .tp-thumb-img-wrap {
  64. padding:3px;
  65. background:#000;
  66. background-color:rgba(0,0,0,0.25);
  67. display:inline-block;
  68. width:100%;
  69. height:100%;
  70. position:relative;
  71. margin:0px;
  72. box-sizing:border-box;
  73. transition:all 0.3s;
  74. -webkit-transition:all 0.3s;
  75. }
  76. .gyges .tp-thumb-image {
  77. padding:3px;
  78. display:block;
  79. box-sizing:border-box;
  80. position:relative;
  81. -webkit-box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  82. -moz-box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  83. box-shadow: inset 5px 5px 10px 0px rgba(0,0,0,0.25);
  84. }
  85. .gyges .tp-thumb-title {
  86. position:absolute;
  87. bottom:100%;
  88. display:inline-block;
  89. left:50%;
  90. background:rgba(255,255,255,0.8);
  91. padding:10px 30px;
  92. border-radius:4px;
  93. -webkit-border-radius:4px;
  94. margin-bottom:20px;
  95. opacity:0;
  96. transition:all 0.3s;
  97. -webkit-transition:all 0.3s;
  98. transform: translateZ(0.001px) translateX(-50%) translateY(14px);
  99. transform-origin:50% 100%;
  100. -webkit-transform: translateZ(0.001px) translateX(-50%) translateY(14px);
  101. -webkit-transform-origin:50% 100%;
  102. white-space:nowrap;
  103. }
  104. .gyges .tp-thumb:hover .tp-thumb-title {
  105. transform:rotateX(0deg) translateX(-50%);
  106. -webkit-transform:rotateX(0deg) translateX(-50%);
  107. opacity:1;
  108. }
  109. .gyges .tp-thumb:hover .tp-thumb-img-wrap,
  110. .gyges .tp-thumb.selected .tp-thumb-img-wrap {
  111. background: rgba(255,255,255,1);
  112. background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  113. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(119,119,119,1)));
  114. background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  115. background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  116. background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  117. background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(119,119,119,1) 100%);
  118. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#777777", GradientType=0 );
  119. }
  120. .gyges .tp-thumb-title:after {
  121. content:" ";
  122. position:absolute;
  123. left:50%;
  124. margin-left:-8px;
  125. width: 0;
  126. height: 0;
  127. border-style: solid;
  128. border-width: 8px 8px 0 8px;
  129. border-color: rgba(255,255,255,0.8) transparent transparent transparent;
  130. bottom:-8px;
  131. }
  132. /* TABS */
  133. .gyges .tp-tab {
  134. opacity:1;
  135. padding:10px;
  136. box-sizing:border-box;
  137. font-family: "Roboto", sans-serif;
  138. border-bottom: 1px solid rgba(255,255,255,0.15);
  139. }
  140. .gyges .tp-tab-image
  141. {
  142. width:60px;
  143. height:60px; max-height:100%; max-width:100%;
  144. position:relative;
  145. display:inline-block;
  146. float:left;
  147. }
  148. .gyges .tp-tab-content
  149. {
  150. background:rgba(0,0,0,0);
  151. position:relative;
  152. padding:15px 15px 15px 85px;
  153. left:0px;
  154. overflow:hidden;
  155. margin-top:-15px;
  156. box-sizing:border-box;
  157. color:#333;
  158. display: inline-block;
  159. width:100%;
  160. height:100%;
  161. position:absolute; }
  162. .gyges .tp-tab-date
  163. {
  164. display:block;
  165. color: rgba(255,255,255,0.25);
  166. font-weight:500;
  167. font-size:12px;
  168. margin-bottom:0px;
  169. }
  170. .gyges .tp-tab-title
  171. {
  172. display:block;
  173. text-align:left;
  174. color:#fff;
  175. font-size:14px;
  176. font-weight:500;
  177. text-transform:none;
  178. line-height:17px;
  179. }
  180. .gyges .tp-tab:hover,
  181. .gyges .tp-tab.selected {
  182. background:rgba(0,0,0,0.5);
  183. }
  184. .gyges .tp-tab-mask {
  185. }
  186. /* MEDIA QUERIES */
  187. @media only screen and (max-width: 960px) {
  188. }
  189. @media only screen and (max-width: 768px) {
  190. }