qtip.css 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*! qTip2 - Pretty powerful tooltips - v2.0.0 - 2012-12-21
  2. * http://craigsworks.com/projects/qtip2/
  3. * Copyright (c) 2012 Craig Michael Thompson; Licensed MIT, GPL */
  4. /* Core qTip styles */
  5. .qtip, .qtip{
  6. position: absolute;
  7. left: -28000px;
  8. top: -28000px;
  9. display: none;
  10. max-width: 280px;
  11. min-width: 50px;
  12. font-size: 10.5px;
  13. line-height: 12px;
  14. direction: ltr;
  15. }
  16. .qtip-content{
  17. position: relative;
  18. padding: 5px 9px;
  19. overflow: hidden;
  20. text-align: left;
  21. word-wrap: break-word;
  22. }
  23. .qtip-titlebar{
  24. position: relative;
  25. padding: 5px 35px 5px 10px;
  26. overflow: hidden;
  27. border-width: 0 0 1px;
  28. font-weight: bold;
  29. }
  30. .qtip-titlebar + .qtip-content{ border-top-width: 0 !important; }
  31. /* Default close button class */
  32. .qtip-close{
  33. position: absolute;
  34. right: -9px; top: -9px;
  35. cursor: pointer;
  36. outline: medium none;
  37. border-width: 1px;
  38. border-style: solid;
  39. border-color: transparent;
  40. }
  41. .qtip-titlebar .qtip-close{
  42. right: 4px; top: 50%;
  43. margin-top: -9px;
  44. }
  45. * html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */
  46. .qtip-titlebar .ui-icon,
  47. .qtip-icon .ui-icon{
  48. display: block;
  49. text-indent: -1000em;
  50. direction: ltr;
  51. vertical-align: middle;
  52. }
  53. .qtip-icon, .qtip-icon .ui-icon{
  54. -moz-border-radius: 3px;
  55. -webkit-border-radius: 3px;
  56. border-radius: 3px;
  57. text-decoration: none;
  58. }
  59. .qtip-icon .ui-icon{
  60. width: 18px;
  61. height: 14px;
  62. text-align: center;
  63. text-indent: 0;
  64. font: normal bold 10px/13px Tahoma,sans-serif;
  65. color: inherit;
  66. background: transparent none no-repeat -100em -100em;
  67. }
  68. /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
  69. .qtip-focus{}
  70. /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
  71. .qtip-hover{}
  72. /* Default tooltip style */
  73. .qtip-default{
  74. border-width: 1px;
  75. border-style: solid;
  76. border-color: #F1D031;
  77. background-color: #FFFFA3;
  78. color: #555;
  79. }
  80. .qtip-default .qtip-titlebar{
  81. background-color: #FFEF93;
  82. }
  83. .qtip-default .qtip-icon{
  84. border-color: #CCC;
  85. background: #F1F1F1;
  86. color: #777;
  87. }
  88. .qtip-default .qtip-titlebar .qtip-close{
  89. border-color: #AAA;
  90. color: #111;
  91. }
  92. /*! Light tooltip style */
  93. .qtip-light{
  94. background-color: white;
  95. border-color: #E2E2E2;
  96. color: #454545;
  97. }
  98. .qtip-light .qtip-titlebar{
  99. background-color: #f1f1f1;
  100. }
  101. /*! Dark tooltip style */
  102. .qtip-dark{
  103. background-color: #505050;
  104. border-color: #303030;
  105. color: #f3f3f3;
  106. }
  107. .qtip-dark .qtip-titlebar{
  108. background-color: #404040;
  109. }
  110. .qtip-dark .qtip-icon{
  111. border-color: #444;
  112. }
  113. .qtip-dark .qtip-titlebar .ui-state-hover{
  114. border-color: #303030;
  115. }
  116. /*! Cream tooltip style */
  117. .qtip-cream{
  118. background-color: #FBF7AA;
  119. border-color: #F9E98E;
  120. color: #A27D35;
  121. }
  122. .qtip-cream .qtip-titlebar{
  123. background-color: #F0DE7D;
  124. }
  125. .qtip-cream .qtip-close .qtip-icon{
  126. background-position: -82px 0;
  127. }
  128. /*! Red tooltip style */
  129. .qtip-red{
  130. background-color: #F78B83;
  131. border-color: #D95252;
  132. color: #912323;
  133. }
  134. .qtip-red .qtip-titlebar{
  135. background-color: #F06D65;
  136. }
  137. .qtip-red .qtip-close .qtip-icon{
  138. background-position: -102px 0;
  139. }
  140. .qtip-red .qtip-icon{
  141. border-color: #D95252;
  142. }
  143. .qtip-red .qtip-titlebar .ui-state-hover{
  144. border-color: #D95252;
  145. }
  146. /*! Green tooltip style */
  147. .qtip-green{
  148. background-color: #CAED9E;
  149. border-color: #90D93F;
  150. color: #3F6219;
  151. }
  152. .qtip-green .qtip-titlebar{
  153. background-color: #B0DE78;
  154. }
  155. .qtip-green .qtip-close .qtip-icon{
  156. background-position: -42px 0;
  157. }
  158. /*! Blue tooltip style */
  159. .qtip-blue{
  160. background-color: #E5F6FE;
  161. border-color: #ADD9ED;
  162. color: #5E99BD;
  163. }
  164. .qtip-blue .qtip-titlebar{
  165. background-color: #D0E9F5;
  166. }
  167. .qtip-blue .qtip-close .qtip-icon{
  168. background-position: -2px 0;
  169. }