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.

224 lines
4.2 KiB

  1. /*******************************
  2. UI Popup (Tooltip/ Popover)
  3. *******************************/
  4. .ui.popup {
  5. display: none;
  6. position: absolute;
  7. top: 57px;
  8. right: 0px;
  9. z-index: 900;
  10. max-width: 250px;
  11. background-color: #FAFAFA;
  12. padding: 6px 8px;
  13. border: 1px solid #DFDFDF;
  14. border: 1px solid rgba(0, 0, 0, 0.12);
  15. font-size: 11px;
  16. -webkit-border-radius: 5px;
  17. -moz-border-radius: 5px;
  18. border-radius: 5px;
  19. -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  20. -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  21. box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  22. }
  23. /* Default Interactions */
  24. .ui.popup .ui.button,
  25. .ui.popup form.ui input .ui.popup form.ui textarea {
  26. width: 100%;
  27. -webkit-box-sizing: border-box;
  28. -moz-box-sizing: border-box;
  29. -ms-box-sizing: border-box;
  30. box-sizing: border-box;
  31. }
  32. /*--------------
  33. Pointer
  34. ---------------*/
  35. .ui.popup:after {
  36. font-family: Arial, "Helevetica Neue", sans-serif;
  37. display: block;
  38. position: absolute;
  39. font-size: 14px;
  40. color: #FAFAFA;
  41. text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  42. }
  43. /* Arrow UTF Style */
  44. .ui.popup:after,
  45. .ui.popup.top.left:after,
  46. .ui.popup.top.center:after,
  47. .ui.popup.top.right:after {
  48. content: '\25BC';
  49. }
  50. .ui.popup.bottom:after,
  51. .ui.popup.bottom.left:after,
  52. .ui.popup.bottom.right:after,
  53. .ui.popup.bottom.center:after {
  54. content: '\25B2';
  55. }
  56. .ui.popup.left:after {
  57. content: '\25B6';
  58. }
  59. .ui.popup.right:after {
  60. content: '\25C0';
  61. }
  62. /* Position */
  63. .ui.popup {
  64. margin: 0px;
  65. }
  66. .ui.popup.bottom {
  67. margin: 9px 0px 0px;
  68. }
  69. .ui.popup.top {
  70. margin: 0px 0px 9px;
  71. }
  72. .ui.popup.top.left,
  73. .ui.popup.bottom.left {
  74. margin-left: -12px;
  75. }
  76. .ui.popup.top.right,
  77. .ui.popup.bottom.right {
  78. margin-right: -12px;
  79. }
  80. .ui.popup.left.center {
  81. margin: 0px 9px 0px 0px;
  82. }
  83. .ui.popup.right.center {
  84. margin: 0px 0px 0px 10px;
  85. }
  86. /* Arrow Offset */
  87. .ui.popup:after {
  88. line-height: 1;
  89. bottom: -10px;
  90. left: 50%;
  91. }
  92. .ui.popup.bottom:after {
  93. top: -11px;
  94. right: 18px;
  95. text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.3);
  96. }
  97. .ui.popup.top.right:after,
  98. .ui.popup.bottom.right:after {
  99. left: auto;
  100. right: 8px;
  101. }
  102. .ui.popup.top.left:after,
  103. .ui.popup.bottom.left:after {
  104. right: auto;
  105. left: 8px;
  106. }
  107. .ui.popup.left.center:after {
  108. left: auto;
  109. right: -10px;
  110. top: 50%;
  111. margin-top: -7px;
  112. text-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
  113. }
  114. .ui.popup.right.center:after {
  115. left: -10px;
  116. right: auto;
  117. top: 50%;
  118. margin-top: -7px;
  119. text-shadow: -2px 0 2px rgba(0, 0, 0, 0.3);
  120. }
  121. .ui.popup.top.center:after,
  122. .ui.popup.bottom.center:after {
  123. margin-left: -7px;
  124. left: 50%;
  125. right: auto;
  126. }
  127. /*--------------
  128. States
  129. ---------------*/
  130. .ui.popup.loading {
  131. display: block;
  132. visibility: hidden;
  133. }
  134. .ui.popup.active {
  135. display: block;
  136. }
  137. /*--------------
  138. Sizes
  139. ---------------*/
  140. .ui.large.popup {
  141. padding: 10px;
  142. }
  143. .ui.large.popup .content {
  144. font-size: 13px;
  145. }
  146. /* popup offset */
  147. .ui.large.popup.bottom {
  148. margin: 11px 0px 0px;
  149. }
  150. .ui.large.popup.top {
  151. margin: 0px 0px 11px;
  152. }
  153. .ui.large.popup.top.left,
  154. .ui.large.popup.bottom.left {
  155. margin-left: -12px;
  156. }
  157. .ui.large.popup.top.right,
  158. .ui.large.popup.bottom.right {
  159. margin-right: -12px;
  160. }
  161. .ui.large.popup.left.center {
  162. margin: 0px 12px 0px 0px;
  163. }
  164. .ui.large.popup.right.center {
  165. margin: 0px 0px 0px 12px;
  166. }
  167. /* arrow offset */
  168. .ui.large.popup:after {
  169. bottom: -13px;
  170. font-size: 18px;
  171. }
  172. .ui.popup.large.bottom:after {
  173. top: -15px;
  174. }
  175. .ui.popup.large.left.center:after {
  176. right: -13px;
  177. margin-top: -9px;
  178. }
  179. .ui.popup.large.right.center:after {
  180. left: -13px;
  181. margin-top: -9px;
  182. }
  183. /*--------------
  184. Themes
  185. ---------------*/
  186. /* Standard */
  187. .ui.popup h2 {
  188. font-size: 14px;
  189. font-weight: bold;
  190. color: #603E72;
  191. margin-bottom: 5px;
  192. }
  193. .ui.popup .content {
  194. font-size: 12px;
  195. font-weight: normal;
  196. line-height: 1.33;
  197. color: #666666;
  198. padding: 0px;
  199. }
  200. .ui.popup .content p {
  201. margin-top: 5px;
  202. }
  203. .ui.popup .content p b {
  204. color: #603E72;
  205. }
  206. .ui.popup .content p:first-child {
  207. margin-top: 0px;
  208. }
  209. /* Slightly Transparent */
  210. .ui.popup.transparent,
  211. .ui.popup.transparent:after {
  212. background-color: rgba(250, 250, 250, 0.9);
  213. }
  214. /* Black Styling */
  215. .ui.black.popup {
  216. background-color: #000000;
  217. border: none;
  218. }
  219. .ui.black.popup:after {
  220. color: #000000;
  221. }
  222. .ui.black.popup .content {
  223. color: #FFFFFF;
  224. }