jquery.qtip.css 12 KB

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