jquery.qtip.min.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427
  1. /*
  2. * qTip2 - Pretty powerful tooltips - v2.1.1
  3. * http://qtip2.com
  4. *
  5. * Copyright (c) 2014 Craig Michael Thompson
  6. * Released under the MIT, GPL licenses
  7. * http://jquery.org/license
  8. *
  9. * Date: Fri Jul 26 2014 10:50 UTC+0000
  10. * Plugins: tips viewport svg modal ie6
  11. * Styles: css3
  12. */
  13. .qtip {
  14. position: absolute;
  15. left: -28000px;
  16. top: -28000px;
  17. display: none;
  18. max-width: 280px;
  19. min-width: 50px;
  20. font-size: 10.5px;
  21. line-height: 12px;
  22. direction: ltr;
  23. box-shadow: none;
  24. padding: 0;
  25. }
  26. .qtip-content {
  27. position: relative;
  28. padding: 5px 9px;
  29. overflow: hidden;
  30. text-align: left;
  31. word-wrap: break-word;
  32. box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  33. }
  34. .qtip-titlebar {
  35. position: relative;
  36. padding: 5px 35px 5px 10px;
  37. overflow: hidden;
  38. border-width: 0 0 1px;
  39. font-weight: bold;
  40. }
  41. .qtip-titlebar + .qtip-content {
  42. border-top-width: 0 !important;
  43. }
  44. /* Default close button class */
  45. .qtip-close {
  46. position: absolute;
  47. right: -9px;
  48. top: -9px;
  49. cursor: pointer;
  50. outline: medium none;
  51. border-width: 1px;
  52. border-style: solid;
  53. border-color: transparent;
  54. }
  55. .qtip-titlebar .qtip-close {
  56. right: 4px;
  57. top: 50%;
  58. margin-top: -9px;
  59. }
  60. * html .qtip-titlebar .qtip-close {
  61. top: 16px;
  62. } /* IE fix */
  63. .qtip-titlebar .ui-icon, .qtip-icon .ui-icon {
  64. display: block;
  65. text-indent: -1000em;
  66. direction: ltr;
  67. }
  68. .qtip-icon, .qtip-icon .ui-icon {
  69. -moz-border-radius: 3px;
  70. -webkit-border-radius: 3px;
  71. border-radius: 3px;
  72. text-decoration: none;
  73. }
  74. .qtip-icon .ui-icon {
  75. width: 18px;
  76. height: 14px;
  77. line-height: 14px;
  78. text-align: center;
  79. text-indent: 0;
  80. font: normal bold 10px/13px Tahoma, sans-serif;
  81. color: inherit;
  82. background: transparent none no-repeat -100em -100em;
  83. }
  84. /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
  85. .qtip-focus {
  86. }
  87. /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
  88. .qtip-hover {
  89. }
  90. /* Default tooltip style */
  91. .qtip-default {
  92. border-width: 1px;
  93. border-style: solid;
  94. border-color: #AED2FF;
  95. background-color: #FFF;
  96. color: #555;
  97. }
  98. .qtip-default .qtip-titlebar {
  99. background-color: #FFEF93;
  100. }
  101. .qtip-default .qtip-icon {
  102. border-color: #CCC;
  103. background: #F1F1F1;
  104. color: #777;
  105. }
  106. .qtip-default .qtip-titlebar .qtip-close {
  107. border-color: #AAA;
  108. color: #111;
  109. }
  110. .qtip-shadow {
  111. -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  112. -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  113. box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  114. }
  115. /* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
  116. .qtip-rounded, .qtip-tipsy, .qtip-bootstrap {
  117. -moz-border-radius: 5px;
  118. -webkit-border-radius: 5px;
  119. border-radius: 5px;
  120. }
  121. .qtip-rounded .qtip-titlebar {
  122. -moz-border-radius: 4px 4px 0 0;
  123. -webkit-border-radius: 4px 4px 0 0;
  124. border-radius: 4px 4px 0 0;
  125. }
  126. /* Youtube tooltip style */
  127. .qtip-youtube {
  128. -moz-border-radius: 2px;
  129. -webkit-border-radius: 2px;
  130. border-radius: 2px;
  131. -webkit-box-shadow: 0 0 3px #333;
  132. -moz-box-shadow: 0 0 3px #333;
  133. box-shadow: 0 0 3px #333;
  134. color: white;
  135. border-width: 0;
  136. background: #4A4A4A;
  137. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4A4A4A), color-stop(100%, black));
  138. background-image: -webkit-linear-gradient(top, #4A4A4A 0, black 100%);
  139. background-image: -moz-linear-gradient(top, #4A4A4A 0, black 100%);
  140. background-image: -ms-linear-gradient(top, #4A4A4A 0, black 100%);
  141. background-image: -o-linear-gradient(top, #4A4A4A 0, black 100%);
  142. }
  143. .qtip-youtube .qtip-titlebar {
  144. background-color: #4A4A4A;
  145. background-color: rgba(0,0,0,0);
  146. }
  147. .qtip-youtube .qtip-content {
  148. padding: .75em;
  149. font: 12px arial, sans-serif;
  150. filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);
  151. -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
  152. }
  153. .qtip-youtube .qtip-icon {
  154. border-color: #222;
  155. }
  156. .qtip-youtube .qtip-titlebar .ui-state-hover {
  157. border-color: #303030;
  158. }
  159. /* jQuery TOOLS Tooltip style */
  160. .qtip-jtools {
  161. background: #232323;
  162. background: rgba(0, 0, 0, 0.7);
  163. background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
  164. background-image: -moz-linear-gradient(top, #717171, #232323);
  165. background-image: -webkit-linear-gradient(top, #717171, #232323);
  166. background-image: -ms-linear-gradient(top, #717171, #232323);
  167. background-image: -o-linear-gradient(top, #717171, #232323);
  168. border: 2px solid #ddd;
  169. border: 2px solid rgba(241,241,241,1);
  170. -moz-border-radius: 2px;
  171. -webkit-border-radius: 2px;
  172. border-radius: 2px;
  173. -webkit-box-shadow: 0 0 12px #333;
  174. -moz-box-shadow: 0 0 12px #333;
  175. box-shadow: 0 0 12px #333;
  176. }
  177. /* IE Specific */
  178. .qtip-jtools .qtip-titlebar {
  179. background-color: transparent;
  180. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);
  181. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
  182. }
  183. .qtip-jtools .qtip-content {
  184. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);
  185. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
  186. }
  187. .qtip-jtools .qtip-titlebar, .qtip-jtools .qtip-content {
  188. background: transparent;
  189. color: white;
  190. border: 0 dashed transparent;
  191. }
  192. .qtip-jtools .qtip-icon {
  193. border-color: #555;
  194. }
  195. .qtip-jtools .qtip-titlebar .ui-state-hover {
  196. border-color: #333;
  197. }
  198. /* Cluetip style */
  199. .qtip-cluetip {
  200. -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  201. -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  202. box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
  203. background-color: #D9D9C2;
  204. color: #111;
  205. border: 0 dashed transparent;
  206. }
  207. .qtip-cluetip .qtip-titlebar {
  208. background-color: #87876A;
  209. color: white;
  210. border: 0 dashed transparent;
  211. }
  212. .qtip-cluetip .qtip-icon {
  213. border-color: #808064;
  214. }
  215. .qtip-cluetip .qtip-titlebar .ui-state-hover {
  216. border-color: #696952;
  217. color: #696952;
  218. }
  219. /* Tipsy style */
  220. .qtip-tipsy {
  221. background: black;
  222. background: rgba(0, 0, 0, .87);
  223. color: white;
  224. border: 0 solid transparent;
  225. font-size: 11px;
  226. font-family: 'Lucida Grande', sans-serif;
  227. font-weight: bold;
  228. line-height: 16px;
  229. text-shadow: 0 1px black;
  230. }
  231. .qtip-tipsy .qtip-titlebar {
  232. padding: 6px 35px 0 10px;
  233. background-color: transparent;
  234. }
  235. .qtip-tipsy .qtip-content {
  236. padding: 6px 10px;
  237. }
  238. .qtip-tipsy .qtip-icon {
  239. border-color: #222;
  240. text-shadow: none;
  241. }
  242. .qtip-tipsy .qtip-titlebar .ui-state-hover {
  243. border-color: #303030;
  244. }
  245. /* Tipped style */
  246. .qtip-tipped {
  247. border: 3px solid #959FA9;
  248. -moz-border-radius: 3px;
  249. -webkit-border-radius: 3px;
  250. border-radius: 3px;
  251. background-color: #F9F9F9;
  252. color: #454545;
  253. font-weight: normal;
  254. font-family: serif;
  255. }
  256. .qtip-tipped .qtip-titlebar {
  257. border-bottom-width: 0;
  258. color: white;
  259. background: #3A79B8;
  260. background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
  261. background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
  262. background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
  263. background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
  264. background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
  265. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);
  266. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
  267. }
  268. .qtip-tipped .qtip-icon {
  269. border: 2px solid #285589;
  270. background: #285589;
  271. }
  272. .qtip-tipped .qtip-icon .ui-icon {
  273. background-color: #FBFBFB;
  274. color: #555;
  275. }
  276. /**
  277. * Twitter Bootstrap style.
  278. *
  279. * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
  280. * Does not work with IE 7.
  281. */
  282. .qtip-bootstrap {
  283. /** Taken from Bootstrap body */
  284. font-size: 14px;
  285. line-height: 20px;
  286. color: #333333;
  287. /** Taken from Bootstrap .popover */
  288. padding: 1px;
  289. background-color: #ffffff;
  290. border: 1px solid #ccc;
  291. border: 1px solid rgba(0, 0, 0, 0.2);
  292. -webkit-border-radius: 6px;
  293. -moz-border-radius: 6px;
  294. border-radius: 6px;
  295. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  296. -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  297. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  298. -webkit-background-clip: padding-box;
  299. -moz-background-clip: padding;
  300. background-clip: padding-box;
  301. }
  302. .qtip-bootstrap .qtip-titlebar {
  303. /** Taken from Bootstrap .popover-title */
  304. padding: 8px 14px;
  305. margin: 0;
  306. font-size: 14px;
  307. font-weight: normal;
  308. line-height: 18px;
  309. background-color: #f7f7f7;
  310. border-bottom: 1px solid #ebebeb;
  311. -webkit-border-radius: 5px 5px 0 0;
  312. -moz-border-radius: 5px 5px 0 0;
  313. border-radius: 5px 5px 0 0;
  314. }
  315. .qtip-bootstrap .qtip-titlebar .qtip-close {
  316. /**
  317. * Overrides qTip2:
  318. * .qtip-titlebar .qtip-close{
  319. * [...]
  320. * right: 4px;
  321. * top: 50%;
  322. * [...]
  323. * border-style: solid;
  324. * }
  325. */
  326. right: 11px;
  327. top: 45%;
  328. border-style: none;
  329. }
  330. .qtip-bootstrap .qtip-content {
  331. /** Taken from Bootstrap .popover-content */
  332. padding: 9px 14px;
  333. }
  334. .qtip-bootstrap .qtip-icon {
  335. /**
  336. * Overrides qTip2:
  337. * .qtip-default .qtip-icon {
  338. * border-color: #CCC;
  339. * background: #F1F1F1;
  340. * color: #777;
  341. * }
  342. */
  343. background: transparent;
  344. }
  345. .qtip-bootstrap .qtip-icon .ui-icon {
  346. /**
  347. * Overrides qTip2:
  348. * .qtip-icon .ui-icon{
  349. * width: 18px;
  350. * height: 14px;
  351. * }
  352. */
  353. width: auto;
  354. height: auto;
  355. /* Taken from Bootstrap .close */
  356. float: right;
  357. font-size: 20px;
  358. font-weight: bold;
  359. line-height: 18px;
  360. color: #000000;
  361. text-shadow: 0 1px 0 #ffffff;
  362. opacity: 0.2;
  363. filter: alpha(opacity=20);
  364. }
  365. .qtip-bootstrap .qtip-icon .ui-icon:hover {
  366. /* Taken from Bootstrap .close:hover */
  367. color: #000000;
  368. text-decoration: none;
  369. cursor: pointer;
  370. opacity: 0.4;
  371. filter: alpha(opacity=40);
  372. }
  373. /* IE9 fix - removes all filters */
  374. .qtip:not(.ie9haxors) div.qtip-content, .qtip:not(.ie9haxors) div.qtip-titlebar {
  375. filter: none;
  376. -ms-filter: none;
  377. }
  378. .qtip .qtip-tip {
  379. margin: 0 auto;
  380. overflow: hidden;
  381. z-index: 10;
  382. }
  383. /* Opera bug #357 - Incorrect tip position
  384. https://github.com/Craga89/qTip2/issues/367 */
  385. x:-o-prefocus, .qtip .qtip-tip {
  386. visibility: hidden;
  387. }
  388. .qtip .qtip-tip, .qtip .qtip-tip .qtip-vml, .qtip .qtip-tip canvas {
  389. position: absolute;
  390. color: #123456;
  391. background: transparent;
  392. border: 0 dashed transparent;
  393. }
  394. .qtip .qtip-tip canvas {
  395. top: 0;
  396. left: 0;
  397. }
  398. .qtip .qtip-tip .qtip-vml {
  399. behavior: url(#default#VML);
  400. display: inline-block;
  401. visibility: visible;
  402. }
  403. #qtip-overlay {
  404. position: fixed;
  405. left: -10000em;
  406. top: -10000em;
  407. }
  408. /* Applied to modals with show.modal.blur set to true */
  409. #qtip-overlay.blurs {
  410. cursor: pointer;
  411. }
  412. /* Change opacity of overlay here */
  413. #qtip-overlay div {
  414. position: absolute;
  415. left: 0;
  416. top: 0;
  417. width: 100%;
  418. height: 100%;
  419. background-color: black;
  420. opacity: 0.7;
  421. filter: alpha(opacity=70);
  422. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  423. }
  424. .qtipmodal-ie6fix {
  425. position: absolute !important;
  426. }