jquery.webui-popover.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
  1. /*
  2. * webui popover plugin - v1.0.5
  3. * A lightWeight popover plugin with jquery ,enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!
  4. * https://github.com/sandywalker/webui-popover
  5. *
  6. * Made by Sandy Duan
  7. * Under MIT License
  8. */
  9. /* webui popover */
  10. .webui-popover {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. z-index: 1060;
  15. display: none;
  16. width: 276px;
  17. min-height: 50px;
  18. padding: 1px;
  19. text-align: left;
  20. white-space: normal;
  21. background-color: #ffffff;
  22. background-clip: padding-box;
  23. border: 1px solid #cccccc;
  24. border: 1px solid rgba(0, 0, 0, 0.2);
  25. border-radius: 6px;
  26. -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  27. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  28. }
  29. .webui-popover.top,
  30. .webui-popover.top-left,
  31. .webui-popover.top-right {
  32. margin-top: -10px;
  33. }
  34. .webui-popover.right {
  35. margin-left: 10px;
  36. }
  37. .webui-popover.bottom,
  38. .webui-popover.bottom-left,
  39. .webui-popover.bottom-right {
  40. margin-top: 10px;
  41. }
  42. .webui-popover.left {
  43. margin-left: -10px;
  44. }
  45. .webui-popover-inner .close {
  46. font-family: arial;
  47. margin: 5px 10px 0 0;
  48. float: right;
  49. font-size: 20px;
  50. font-weight: bold;
  51. line-height: 20px;
  52. color: #000000;
  53. text-shadow: 0 1px 0 #fff;
  54. opacity: 0.2;
  55. filter: alpha(opacity=20);
  56. text-decoration: none;
  57. }
  58. .webui-popover-inner .close:hover,
  59. .webui-popover-inner .close:focus {
  60. opacity: 0.5;
  61. filter: alpha(opacity=50);
  62. }
  63. .webui-popover-title {
  64. padding: 8px 14px;
  65. margin: 0;
  66. font-size: 14px;
  67. font-weight: normal;
  68. line-height: 18px;
  69. background-color: #f7f7f7;
  70. border-bottom: 1px solid #ebebeb;
  71. border-radius: 5px 5px 0 0;
  72. }
  73. .webui-popover-content {
  74. padding: 9px 14px;
  75. overflow: auto;
  76. }
  77. .webui-popover-inverse {
  78. background-color: #333333;
  79. color: #eeeeee;
  80. }
  81. .webui-popover-inverse .webui-popover-title {
  82. background: #ffffff;
  83. border-bottom: none;
  84. color: #eeeeee;
  85. }
  86. .webui-no-padding .webui-popover-content {
  87. padding: 0;
  88. }
  89. .webui-no-padding .list-group-item {
  90. border-right: none;
  91. border-left: none;
  92. }
  93. .webui-no-padding .list-group-item:first-child {
  94. border-top: 0;
  95. }
  96. .webui-no-padding .list-group-item:last-child {
  97. border-bottom: 0;
  98. }
  99. .webui-popover > .arrow,
  100. .webui-popover > .arrow:after {
  101. position: absolute;
  102. display: block;
  103. width: 0;
  104. height: 0;
  105. border-color: transparent;
  106. border-style: solid;
  107. }
  108. .webui-popover > .arrow {
  109. border-width: 11px;
  110. }
  111. .webui-popover > .arrow:after {
  112. border-width: 10px;
  113. content: "";
  114. }
  115. .webui-popover.top > .arrow,
  116. .webui-popover.top-right > .arrow,
  117. .webui-popover.top-left > .arrow {
  118. bottom: -11px;
  119. left: 50%;
  120. margin-left: -11px;
  121. border-top-color: #999999;
  122. border-top-color: rgba(0, 0, 0, 0.25);
  123. border-bottom-width: 0;
  124. }
  125. .webui-popover.top > .arrow:after,
  126. .webui-popover.top-right > .arrow:after,
  127. .webui-popover.top-left > .arrow:after {
  128. content: " ";
  129. bottom: 1px;
  130. margin-left: -10px;
  131. border-top-color: #ffffff;
  132. border-bottom-width: 0;
  133. }
  134. .webui-popover.right > .arrow {
  135. top: 50%;
  136. left: -11px;
  137. margin-top: -11px;
  138. border-left-width: 0;
  139. border-right-color: #999999;
  140. border-right-color: rgba(0, 0, 0, 0.25);
  141. }
  142. .webui-popover.right > .arrow:after {
  143. content: " ";
  144. left: 1px;
  145. bottom: -10px;
  146. border-left-width: 0;
  147. border-right-color: #ffffff;
  148. }
  149. .webui-popover.bottom > .arrow,
  150. .webui-popover.bottom-right > .arrow,
  151. .webui-popover.bottom-left > .arrow {
  152. top: -11px;
  153. left: 50%;
  154. margin-left: -11px;
  155. border-bottom-color: #999999;
  156. border-bottom-color: rgba(0, 0, 0, 0.25);
  157. border-top-width: 0;
  158. }
  159. .webui-popover.bottom > .arrow:after,
  160. .webui-popover.bottom-right > .arrow:after,
  161. .webui-popover.bottom-left > .arrow:after {
  162. content: " ";
  163. top: 1px;
  164. margin-left: -10px;
  165. border-bottom-color: #ffffff;
  166. border-top-width: 0;
  167. }
  168. .webui-popover.left > .arrow {
  169. top: 50%;
  170. right: -11px;
  171. margin-top: -11px;
  172. border-right-width: 0;
  173. border-left-color: #999999;
  174. border-left-color: rgba(0, 0, 0, 0.25);
  175. }
  176. .webui-popover.left > .arrow:after {
  177. content: " ";
  178. right: 1px;
  179. border-right-width: 0;
  180. border-left-color: #ffffff;
  181. bottom: -10px;
  182. }
  183. .webui-popover-inverse.top > .arrow,
  184. .webui-popover-inverse.top-left > .arrow,
  185. .webui-popover-inverse.top-right > .arrow,
  186. .webui-popover-inverse.top > .arrow:after,
  187. .webui-popover-inverse.top-left > .arrow:after,
  188. .webui-popover-inverse.top-right > .arrow:after {
  189. border-top-color: #333333;
  190. }
  191. .webui-popover-inverse.right > .arrow,
  192. .webui-popover-inverse.right > .arrow:after {
  193. border-right-color: #333333;
  194. }
  195. .webui-popover-inverse.bottom > .arrow,
  196. .webui-popover-inverse.bottom-left > .arrow,
  197. .webui-popover-inverse.bottom-right > .arrow,
  198. .webui-popover-inverse.bottom > .arrow:after,
  199. .webui-popover-inverse.bottom-left > .arrow:after,
  200. .webui-popover-inverse.bottom-right > .arrow:after {
  201. border-bottom-color: #333333;
  202. }
  203. .webui-popover-inverse.left > .arrow,
  204. .webui-popover-inverse.left > .arrow:after {
  205. border-left-color: #333333;
  206. }
  207. .webui-popover i.glyphicon-refresh {
  208. display: block;
  209. margin-left: -15px;
  210. margin-top: -15px;
  211. width: 20px;
  212. height: 20px;
  213. font-size: 20px;
  214. top: 50%;
  215. left: 50%;
  216. position: absolute;
  217. -webkit-animation: rotate 1s linear 0 infinite;
  218. -o-animation: rotate 1s linear 0 infinite;
  219. animation: rotate 1s linear 0 infinite;
  220. }
  221. @-webkit-keyframes rotate {
  222. 100% {
  223. -webkit-transform: rotate(360deg);
  224. }
  225. }
  226. @keyframes rotate {
  227. 100% {
  228. transform: rotate(360deg);
  229. }
  230. }