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.

354 lines
7.3 KiB

2 years ago
  1. /* Global */
  2. .jBox-wrapper {
  3. -webkit-font-smoothing: antialiased;
  4. -moz-osx-font-smoothing: grayscale;
  5. }
  6. .jBox-title,
  7. .jBox-content,
  8. .jBox-container {
  9. position: relative;
  10. word-break: break-word;
  11. }
  12. .jBox-container {
  13. background: #fff;
  14. }
  15. .jBox-content {
  16. padding: 8px 10px;
  17. overflow: auto;
  18. }
  19. /* jBox: Tooltip */
  20. .jBox-Tooltip .jBox-container,
  21. .jBox-Mouse .jBox-container {
  22. border-radius: 3px;
  23. box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  24. }
  25. .jBox-Tooltip .jBox-title,
  26. .jBox-Mouse .jBox-title {
  27. padding: 8px 10px 0;
  28. font-weight: bold;
  29. }
  30. .jBox-hasTitle.jBox-Tooltip .jBox-content,
  31. .jBox-hasTitle.jBox-Mouse .jBox-content {
  32. padding-top: 5px;
  33. }
  34. /* Pointer */
  35. .jBox-pointer {
  36. position: absolute;
  37. overflow: hidden;
  38. }
  39. .jBox-pointer-top { top: 0; }
  40. .jBox-pointer-bottom { bottom: 0; }
  41. .jBox-pointer-left { left: 0; }
  42. .jBox-pointer-right { right: 0; }
  43. .jBox-pointer-top,
  44. .jBox-pointer-bottom {
  45. width: 30px;
  46. height: 12px;
  47. }
  48. .jBox-pointer-left,
  49. .jBox-pointer-right {
  50. width: 12px;
  51. height: 30px;
  52. }
  53. .jBox-pointer:after {
  54. content: '';
  55. width: 20px;
  56. height: 20px;
  57. position: absolute;
  58. background: #fff;
  59. -webkit-transform: rotate(45deg);
  60. transform: rotate(45deg);
  61. }
  62. .jBox-pointer-top:after {
  63. left: 5px;
  64. top: 6px;
  65. box-shadow: -1px -1px 4px rgba(0, 0, 0, .2);
  66. }
  67. .jBox-pointer-right:after {
  68. top: 5px;
  69. right: 6px;
  70. box-shadow: 1px -1px 4px rgba(0, 0, 0, .2);
  71. }
  72. .jBox-pointer-bottom:after {
  73. left: 5px;
  74. bottom: 6px;
  75. box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
  76. }
  77. .jBox-pointer-left:after {
  78. top: 5px;
  79. left: 6px;
  80. box-shadow: -1px 1px 4px rgba(0, 0, 0, .2);
  81. }
  82. /* jBox: Modal */
  83. .jBox-Modal .jBox-container {
  84. border-radius: 3px;
  85. box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
  86. }
  87. .jBox-Modal .jBox-content {
  88. padding: 12px 15px;
  89. }
  90. .jBox-Modal .jBox-title {
  91. border-radius: 3px 3px 0 0;
  92. padding: 10px 15px;
  93. background: #f4f5f6;
  94. border-bottom: 1px solid #ddd;
  95. text-shadow: 0 1px 0 #fff;
  96. }
  97. .jBox-Modal.jBox-closeButton-title .jBox-title {
  98. padding-right: 65px;
  99. }
  100. .jBox-Modal.jBox-closeButton-box:before {
  101. box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4);
  102. }
  103. /* jBox: Notice */
  104. .jBox-Notice {
  105. -webkit-transition: margin .2s;
  106. transition: margin .2s;
  107. }
  108. .jBox-Notice .jBox-container {
  109. border-radius: 3px;
  110. box-shadow: 0 0 3px rgba(0, 0, 0, .2);
  111. color: #fff;
  112. text-shadow: 0 -1px 0 #000;
  113. background: #333;
  114. background-image: linear-gradient(to bottom, #444, #222);
  115. }
  116. .jBox-Notice .jBox-content {
  117. border-radius: 3px;
  118. padding: 12px 20px;
  119. }
  120. .jBox-Notice .jBox-title {
  121. padding: 8px 20px 0;
  122. font-weight: bold;
  123. }
  124. .jBox-hasTitle.jBox-Notice .jBox-content {
  125. padding-top: 5px;
  126. }
  127. .jBox-Notice-color .jBox-container {
  128. text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  129. }
  130. .jBox-Notice-gray .jBox-container {
  131. color: #666;
  132. text-shadow: 0 1px 0 #fff;
  133. background: #f4f4f4;
  134. background-image: linear-gradient(to bottom, #fafafa, #f0f0f0);
  135. }
  136. .jBox-Notice-red .jBox-container {
  137. background: #b02222;
  138. background-image: linear-gradient(to bottom, #ee2222, #b02222);
  139. }
  140. .jBox-Notice-green .jBox-container {
  141. background: #70a800;
  142. background-image: linear-gradient(to bottom, #95cc2a, #70a800);
  143. }
  144. .jBox-Notice-blue .jBox-container {
  145. background: #2b91d9;
  146. background-image: linear-gradient(to bottom, #5abaff, #2b91d9);
  147. }
  148. .jBox-Notice-yellow .jBox-container {
  149. color: #744700;
  150. text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  151. background: #ffb11f;
  152. background-image: linear-gradient(to bottom, #ffd665, #ffb11f);
  153. }
  154. /* Close button */
  155. .jBox-closeButton {
  156. cursor: pointer;
  157. position: absolute;
  158. }
  159. .jBox-closeButton:after {
  160. content: '';
  161. position: absolute;
  162. width: 100%;
  163. height: 100%;
  164. background: center center no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPg0KPHBhdGggZD0iTTIyLjIsNGMwLjMsMC4zLDAuMywwLjgsMCwxLjFMMTYsMTEuNGMtMC4zLDAuMy0wLjMsMC44LDAsMS4xbDYuMyw2LjNjMC4zLDAuMywwLjMsMC44LDAsMS4xTDIwLDIyLjMNCgljLTAuMywwLjMtMC44LDAuMy0xLjEsMEwxMi41LDE2Yy0wLjMtMC4zLTAuOC0wLjMtMS4xLDBsLTYuMyw2LjNjLTAuMywwLjMtMC44LDAuMy0xLjEsMEwxLjcsMjBjLTAuMy0wLjMtMC4zLTAuOCwwLTEuMUw4LDEyLjYNCgljMC4zLTAuMywwLjMtMC44LDAtMS4xTDEuNyw1LjFDMS40LDQuOCwxLjQsNC4zLDEuNyw0TDQsMS43YzAuMy0wLjMsMC44LTAuMywxLjEsMEwxMS40LDhjMC4zLDAuMywwLjgsMC4zLDEuMSwwbDYuMy02LjMNCgljMC4zLTAuMywwLjgtMC4zLDEuMSwwTDIyLjIsNHoiLz4NCjwvc3ZnPg==);
  165. opacity: 0.25;
  166. }
  167. .jBox-closeButton-box .jBox-closeButton:after {
  168. background-size: 11px;
  169. }
  170. .jBox-closeButton-title .jBox-closeButton:after {
  171. background-size: 13px;
  172. }
  173. .jBox-closeButton:hover:after {
  174. opacity: 0.4;
  175. }
  176. .jBox-closeButton:active:after {
  177. opacity: 0.6;
  178. }
  179. .jBox-closeButton-box .jBox-closeButton {
  180. top: -8px;
  181. right: -10px;
  182. width: 24px;
  183. height: 24px;
  184. background: #fff;
  185. border-radius: 50%;
  186. }
  187. .jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton {
  188. background: #f4f5f6;
  189. }
  190. .jBox-closeButton-title .jBox-closeButton {
  191. top: 0;
  192. right: 0;
  193. bottom: 0;
  194. width: 50px;
  195. }
  196. .jBox-closeButton-box:before {
  197. content: '';
  198. position: absolute;
  199. top: -8px;
  200. right: -10px;
  201. width: 24px;
  202. height: 24px;
  203. border-radius: 50%;
  204. box-shadow: 0 0 5px rgba(0, 0, 0, .3);
  205. }
  206. .jBox-pointerPosition-top.jBox-closeButton-box:before {
  207. top: 4px;
  208. }
  209. .jBox-pointerPosition-right.jBox-closeButton-box:before {
  210. right: 2px;
  211. }
  212. /* Overlay */
  213. #jBox-overlay {
  214. position: fixed;
  215. top: 0;
  216. left: 0;
  217. width: 100%;
  218. height: 100%;
  219. background: #000;
  220. background-color: rgba(0, 0, 0, .6);
  221. }
  222. /* Block scrolling */
  223. body[class^="jBox-blockScroll-"],
  224. body[class*=" jBox-blockScroll-"] {
  225. overflow: hidden;
  226. }
  227. /* Draggable */
  228. .jBox-draggable {
  229. cursor: move;
  230. }
  231. /* Spinner */
  232. @keyframes jBoxLoading {
  233. from {transform: rotate(0deg);}
  234. to {transform: rotate(360deg);}
  235. }
  236. @-webkit-keyframes jBoxLoading {
  237. from {-webkit-transform: rotate(0deg);}
  238. to {-webkit-transform: rotate(360deg);}
  239. }
  240. .jBox-loading .jBox-content {
  241. min-height: 32px;
  242. min-width: 32px;
  243. }
  244. .jBox-loading .jBox-container:before {
  245. content: 'Loading…';
  246. position: absolute;
  247. top: 50%;
  248. left: 50%;
  249. width: 16px;
  250. height: 16px;
  251. margin-top: -10px;
  252. margin-left: -10px;
  253. text-align: center;
  254. }
  255. .jBox-loading .jBox-container:not(:required):before {
  256. content: '';
  257. border-radius: 50%;
  258. border: 2px solid rgba(0,0,0, 0.3);
  259. border-top-color: rgba(0,0,0, 0.6);
  260. -webkit-animation: jBoxLoading .6s linear infinite;
  261. animation: jBoxLoading .6s linear infinite;
  262. }
  263. /* IE8 fixes */
  264. .jBox-IE8.jBox-Tooltip .jBox-container,
  265. .jBox-IE8.jBox-Mouse .jBox-container {
  266. border: 1px solid #aaa;
  267. }
  268. .jBox-IE8 .jBox-pointer:after {
  269. display: none;
  270. }
  271. .jBox-IE8 .jBox-pointer {
  272. border: 0;
  273. background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNq01l0OwyAIAGAlvY+n8ZJ6Gk/EqqkNtf7ApCQ+LM34iuCmRUQzihjj6FH+kjWL8N4/Ph9GHpiTnC9SwDbhLGyvspSScc71KkOa/HpuuRhIK+psE2pjONouCQg7kBSEXUgC2tHo52mTTBpnaEATWlaYK6MrhIAaceWpOcsCrYp6FV4H/90zTWjUQ/gSevVQq0ecHqoOxWpYoO7p5O9ku2fnVtp7QAik2rsK3fnpWfjynJWpbw+1BkghurrYDjiCptg/4AxaYhJwBbEwDsiB2NgM5EIirAdKIDFGQSmU1+NaIPjJYt2I25vxT4ABAMhWvtle2YvmAAAAAElFTkSuQmCC);
  274. }
  275. .jBox-IE8 .jBox-pointer-top { background-position: center top; }
  276. .jBox-IE8 .jBox-pointer-bottom { background-position: center bottom; }
  277. .jBox-IE8 .jBox-pointer-left { background-position: left center; }
  278. .jBox-IE8 .jBox-pointer-right { background-position: right center; }
  279. .jBox-IE8.jBox-Modal .jBox-container {
  280. border: 3px solid #aaa;
  281. }
  282. .jBox-IE8 .jBox-closeButton:after {
  283. font-family: Verdana, sans-serif;
  284. content: 'x';
  285. text-align: center;
  286. font-size: 18px;
  287. }