You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

252 lines
6.8 KiB

  1. /*******************************
  2. Search Module
  3. *******************************/
  4. .search.module {
  5. position: relative;
  6. }
  7. .search.module .prompt {
  8. opacity: 0.8;
  9. background: #fafafa url(/images/modules/search-icon.png) no-repeat 10px 7px;
  10. padding: 5px 30px;
  11. font-size: 14px;
  12. border: 1px solid #CCCCCC;
  13. color: #777777;
  14. -webkit-border-radius: 15px;
  15. -moz-border-radius: 15px;
  16. border-radius: 15px;
  17. -webkit-transition: opacity 0.3s;
  18. -moz-transition: opacity 0.3s;
  19. -o-transition: opacity 0.3s;
  20. -ms-transition: opacity 0.3s;
  21. transition: opacity 0.3s;
  22. }
  23. .search.module .search.button {
  24. position: relative;
  25. z-index: 2;
  26. float: right;
  27. margin: 0px 0px 0px -15px;
  28. padding: 6px 15px 7px;
  29. -webkit-border-radius: 0px 15px 15px 0px;
  30. -moz-border-radius: 0px 15px 15px 0px;
  31. border-radius: 0px 15px 15px 0px;
  32. -webkit-box-shadow: none;
  33. -moz-box-shadow: none;
  34. box-shadow: none;
  35. }
  36. .search.module.hover .prompt,
  37. .search.module.focus .prompt,
  38. .search.module.active .prompt {
  39. opacity: 1;
  40. background-color: #FFFFFF;
  41. -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
  42. -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
  43. box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2) inset;
  44. background-position: 10px -43px;
  45. color: #482A5C;
  46. }
  47. .search.module .prompt.filled {
  48. opacity: 1;
  49. color: #222222;
  50. }
  51. .search.module .results {
  52. display: none;
  53. position: absolute;
  54. z-index: 999;
  55. top: 25px;
  56. left: 0px;
  57. overflow: hidden;
  58. width: 300px;
  59. border: 1px solid #EEEEEE;
  60. background-color: #FFFFFF;
  61. background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  62. background-image: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  63. background-image: -o-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  64. background-image: -ms-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  65. background-image: linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
  66. color: #555555;
  67. font-size: 12px;
  68. text-shadow: none;
  69. -webkit-border-radius: 0px 0px 5px 5px;
  70. -moz-border-radius: 0px 0px 5px 5px;
  71. border-radius: 0px 0px 5px 5px;
  72. -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  73. -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  74. box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
  75. }
  76. /* All Results */
  77. .search.module .results ul {
  78. overflow: hidden;
  79. background-color: #FFFFFF;
  80. }
  81. .search.module .results li {
  82. cursor: pointer;
  83. overflow: hidden;
  84. line-height: 1.2;
  85. padding: 9px 11px;
  86. border-top: 1px solid #EEEEEE;
  87. }
  88. .search.module .results li:first-child {
  89. border-top: none;
  90. }
  91. .search.module .results li .image {
  92. background: #f0f0f0 url(../images/placeholder-subtle.png) no-repeat center center;
  93. margin-right: 10px;
  94. float: left;
  95. overflow: hidden;
  96. -webkit-border-radius: 3px;
  97. -moz-border-radius: 3px;
  98. border-radius: 3px;
  99. width: 38px;
  100. height: 38px;
  101. }
  102. .search.module .results li .image img {
  103. display: block;
  104. width: 38px;
  105. height: 38px;
  106. }
  107. .search.module .results li .info {
  108. float: left;
  109. }
  110. .search.module .results li .indented.info {
  111. float: none;
  112. margin-left: 50px;
  113. }
  114. .search.module .results li .title {
  115. font-weight: bold;
  116. color: #442359;
  117. }
  118. .search.module .results li .description {
  119. color: #777777;
  120. }
  121. .search.module .results li .price {
  122. float: right;
  123. color: #999999;
  124. font-weight: bold;
  125. }
  126. /* Hover Style */
  127. .search.module .results li:hover {
  128. background-color: #F8F8F8;
  129. }
  130. .search.module .results li.active {
  131. background-color: #F0F0F0;
  132. }
  133. .search.module .results li.active .image {
  134. background: #efefef url(../images/placeholder-tiny.png) no-repeat center center;
  135. }
  136. .search.module .results li.active .title {
  137. color: #000000;
  138. }
  139. .search.module .results li.active .description {
  140. color: #555555;
  141. }
  142. /* Simple Theme */
  143. .search.module .results > ul {
  144. margin: 0px;
  145. -webkit-border-radius: 0px 0px 5px 5px;
  146. -moz-border-radius: 0px 0px 5px 5px;
  147. border-radius: 0px 0px 5px 5px;
  148. }
  149. /* Category Theme */
  150. .search.module .results .category {
  151. overflow: hidden;
  152. background-color: #E4E4E4;
  153. border-top: 1px solid rgba(0, 0, 0, 0.08);
  154. -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
  155. -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
  156. box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1);
  157. -webkit-transition: background 0.2s ease-in;
  158. -moz-transition: background 0.2s ease-in;
  159. -o-transition: background 0.2s ease-in;
  160. -ms-transition: background 0.2s ease-in;
  161. transition: background 0.2s ease-in;
  162. }
  163. .search.module .results .category > .name {
  164. float: left;
  165. padding: 12px 0px 0px 8px;
  166. font-weight: bold;
  167. color: #777777;
  168. text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8);
  169. }
  170. .search.module .results .category ul {
  171. overflow: hidden;
  172. margin-left: 75px;
  173. border-left: 1px solid rgba(0, 0, 0, 0.3);
  174. -webkit-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.15);
  175. -moz-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.15);
  176. box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.15);
  177. -webkit-transition: box-shadow 0.2s ease-in;
  178. -moz-transition: box-shadow 0.2s ease-in;
  179. -o-transition: box-shadow 0.2s ease-in;
  180. -ms-transition: box-shadow 0.2s ease-in;
  181. transition: box-shadow 0.2s ease-in;
  182. }
  183. .search.module .results .category.active {
  184. background-color: #DCDCDC;
  185. }
  186. .search.module .results .category.active .name {
  187. color: #555555;
  188. }
  189. .search.module .results .category.active ul {
  190. -webkit-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);
  191. -moz-box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);
  192. box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.4);
  193. }
  194. /* View All Results */
  195. .search.module .result-page {
  196. display: block;
  197. height: 35px;
  198. background-color: #FAFAFA;
  199. line-height: 35px;
  200. font-weight: bold;
  201. text-align: center;
  202. color: #555555;
  203. border-top: 1px solid #DDDDDD;
  204. -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  205. -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  206. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  207. }
  208. .search.module .result-page:hover {
  209. background-color: #F0F0F0;
  210. }
  211. /* Big Theme */
  212. .search.module .big.results li .image {
  213. background-image: url(../images/placeholder-subtle.png);
  214. }
  215. .search.module .big.results li .image,
  216. .search.module .big.results li .image img {
  217. width: 50px;
  218. height: 50px;
  219. }
  220. .search.module .big.results .indented.info {
  221. margin-left: 65px;
  222. }
  223. .search.module .big.results .info .title {
  224. font-size: 16px;
  225. }
  226. .search.module .big.results .info .description {
  227. font-size: 11px;
  228. }
  229. /* Message */
  230. .search.module .message {
  231. background-color: #FFFFFF;
  232. overflow: hidden;
  233. padding: 10px 25px;
  234. -webkit-border-radius: 0px 0px 5px 5px;
  235. -moz-border-radius: 0px 0px 5px 5px;
  236. border-radius: 0px 0px 5px 5px;
  237. }
  238. .search.module .message .text h2 {
  239. font-size: 14px;
  240. font-weight: bold;
  241. color: #555555;
  242. }
  243. .search.module .message .text p {
  244. font-size: 12px;
  245. color: #777777;
  246. }
  247. /* Loading */
  248. .search.module.loading .prompt {
  249. background-image: url(/images/modules/search-throbber.gif);
  250. background-repeat: no-repeat;
  251. background-position: 8px 5px;
  252. }