ui-dialog.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. /*!
  2. * ui-dialog.css
  3. * Date: 2014-07-03
  4. * https://github.com/aui/artDialog
  5. * (c) 2009-2014 TangBin, http://www.planeArt.cn
  6. *
  7. * This is licensed under the GNU LGPL, version 2.1 or later.
  8. * For details, see: http://www.gnu.org/licenses/lgpl-2.1.html
  9. */
  10. .ui-popup-full{
  11. width:100%;
  12. box-sizing: border-box;
  13. -webkit-box-sizing: border-box;
  14. padding:0 15px !important;
  15. left:0 !important;
  16. }
  17. .ui-dialog {
  18. *zoom:1;
  19. _float: left;
  20. position: relative;
  21. background-color: #FFF;
  22. border: 1px solid #999;
  23. border-radius: 6px;
  24. outline: 0;
  25. background-clip: padding-box;
  26. font-family: Helvetica, arial, sans-serif;
  27. font-size: 14px;
  28. line-height: 1.428571429;
  29. color: #333;
  30. opacity: 0;
  31. -webkit-transform: scale(0);
  32. transform: scale(0);
  33. -webkit-transition: -webkit-transform .15s ease-in-out, opacity .15s ease-in-out;
  34. transition: transform .15s ease-in-out, opacity .15s ease-in-out;
  35. padding:0 10px;
  36. }
  37. .ui-popup-show .ui-dialog {
  38. opacity: 1;
  39. -webkit-transform: scale(1);
  40. transform: scale(1);
  41. }
  42. .ui-popup-focus .ui-dialog {
  43. box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  44. }
  45. .ui-popup-modal .ui-dialog {
  46. box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 0 256px rgba(255, 255, 255, .3);
  47. }
  48. .ui-dialog-grid {
  49. width: 100%;
  50. margin: 0;
  51. border: 0 none;
  52. border-collapse:collapse;
  53. border-spacing: 0;
  54. background: transparent;
  55. }
  56. .ui-dialog-header,
  57. .ui-dialog-body,
  58. .ui-dialog-footer {
  59. padding: 0;
  60. border: 0 none;
  61. text-align: left;
  62. background: transparent;
  63. }
  64. .ui-dialog-header {
  65. white-space: nowrap;
  66. border-bottom: 1px solid #E5E5E5;
  67. }
  68. .ui-dialog-close {
  69. position: relative;
  70. _position: absolute;
  71. float: right;
  72. top: 13px;
  73. right: 13px;
  74. _height: 26px;
  75. padding: 0 4px;
  76. font-size: 21px;
  77. font-weight: bold;
  78. line-height: 1;
  79. color: #000;
  80. text-shadow: 0 1px 0 #FFF;
  81. opacity: .2;
  82. filter: alpha(opacity=20);
  83. cursor: pointer;
  84. background: transparent;
  85. _background: #FFF;
  86. border: 0;
  87. -webkit-appearance: none;
  88. }
  89. .ui-dialog-close:hover,
  90. .ui-dialog-close:focus {
  91. color: #000000;
  92. text-decoration: none;
  93. cursor: pointer;
  94. outline: 0;
  95. opacity: 0.5;
  96. filter: alpha(opacity=50);
  97. }
  98. .ui-dialog-title {
  99. margin: 0;
  100. line-height: 1.428571429;
  101. min-height: 16.428571429px;
  102. padding: 15px;
  103. overflow:hidden;
  104. white-space: nowrap;
  105. text-overflow: ellipsis;
  106. font-weight: bold;
  107. cursor: default;
  108. }
  109. .ui-dialog-body {
  110. padding: 20px;
  111. text-align: center;
  112. }
  113. .ui-dialog-content {
  114. display: inline-block;
  115. position: relative;
  116. vertical-align: middle;
  117. *zoom: 1;
  118. *display: inline;
  119. text-align: left;
  120. }
  121. .ui-dialog-footer {
  122. padding: 0 20px 20px 20px;
  123. }
  124. .ui-dialog-statusbar {
  125. float: left;
  126. margin-right: 20px;
  127. padding: 6px 0;
  128. line-height: 1.428571429;
  129. font-size: 14px;
  130. color: #888;
  131. white-space: nowrap;
  132. }
  133. .ui-dialog-statusbar label:hover {
  134. color: #333;
  135. }
  136. .ui-dialog-statusbar input,
  137. .ui-dialog-statusbar .label {
  138. vertical-align: middle;
  139. }
  140. .ui-dialog-button {
  141. float: right;
  142. white-space: nowrap;
  143. }
  144. .ui-dialog-footer button+button {
  145. margin-bottom: 0;
  146. margin-left: 5px;
  147. }
  148. .ui-dialog-footer button {
  149. width:auto;
  150. overflow:visible;
  151. display: inline-block;
  152. padding: 6px 12px;
  153. _margin-left: 5px;
  154. margin-bottom: 0;
  155. font-size: 14px;
  156. font-weight: normal;
  157. line-height: 1.428571429;
  158. text-align: center;
  159. white-space: nowrap;
  160. vertical-align: middle;
  161. cursor: pointer;
  162. background-image: none;
  163. border: 1px solid transparent;
  164. border-radius: 4px;
  165. -webkit-user-select: none;
  166. -moz-user-select: none;
  167. -ms-user-select: none;
  168. -o-user-select: none;
  169. user-select: none;
  170. }
  171. .ui-dialog-footer button:focus {
  172. outline: thin dotted #333;
  173. outline: 5px auto -webkit-focus-ring-color;
  174. outline-offset: -2px;
  175. }
  176. .ui-dialog-footer button:hover,
  177. .ui-dialog-footer button:focus {
  178. color: #333333;
  179. text-decoration: none;
  180. }
  181. .ui-dialog-footer button:active {
  182. background-image: none;
  183. outline: 0;
  184. -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  185. box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  186. }
  187. .ui-dialog-footer button[disabled] {
  188. pointer-events: none;
  189. cursor: not-allowed;
  190. opacity: 0.65;
  191. filter: alpha(opacity=65);
  192. -webkit-box-shadow: none;
  193. box-shadow: none;
  194. }
  195. .ui-dialog-footer button {
  196. color: #333333;
  197. background-color: #ffffff;
  198. border-color: #cccccc;
  199. }
  200. .ui-dialog-footer button:hover,
  201. .ui-dialog-footer button:focus,
  202. .ui-dialog-footer button:active {
  203. color: #333333;
  204. background-color: #ebebeb;
  205. border-color: #adadad;
  206. }
  207. .ui-dialog-footer button:active{
  208. background-image: none;
  209. }
  210. .ui-dialog-footer button[disabled],
  211. .ui-dialog-footer button[disabled]:hover,
  212. .ui-dialog-footer button[disabled]:focus,
  213. .ui-dialog-footer button[disabled]:active {
  214. background-color: #ffffff;
  215. border-color: #cccccc;
  216. }
  217. .ui-dialog-footer button.ui-dialog-autofocus {
  218. color: #ffffff;
  219. background-color: #428bca;
  220. border-color: #357ebd;
  221. }
  222. .ui-dialog-footer button.ui-dialog-autofocus:hover,
  223. .ui-dialog-footer button.ui-dialog-autofocus:focus,
  224. .ui-dialog-footer button.ui-dialog-autofocus:active {
  225. color: #ffffff;
  226. background-color: #3276b1;
  227. border-color: #285e8e;
  228. }
  229. .ui-dialog-footer button.ui-dialog-autofocus:active {
  230. background-image: none;
  231. }
  232. .ui-popup-top-left .ui-dialog,
  233. .ui-popup-top .ui-dialog,
  234. .ui-popup-top-right .ui-dialog {
  235. top: -8px;
  236. }
  237. .ui-popup-bottom-left .ui-dialog,
  238. .ui-popup-bottom .ui-dialog,
  239. .ui-popup-bottom-right .ui-dialog {
  240. top: 8px;
  241. }
  242. .ui-popup-left-top .ui-dialog,
  243. .ui-popup-left .ui-dialog,
  244. .ui-popup-left-bottom .ui-dialog {
  245. left: -8px;
  246. }
  247. .ui-popup-right-top .ui-dialog,
  248. .ui-popup-right .ui-dialog,
  249. .ui-popup-right-bottom .ui-dialog {
  250. left: 8px;
  251. }
  252. .ui-dialog-arrow-a,
  253. .ui-dialog-arrow-b {
  254. position: absolute;
  255. display: none;
  256. width: 0;
  257. height: 0;
  258. overflow:hidden;
  259. _color:#FF3FFF;
  260. _filter:chroma(color=#FF3FFF);
  261. border:8px dashed transparent;
  262. }
  263. .ui-popup-follow .ui-dialog-arrow-a,
  264. .ui-popup-follow .ui-dialog-arrow-b{
  265. display: block;
  266. }
  267. .ui-popup-top-left .ui-dialog-arrow-a,
  268. .ui-popup-top .ui-dialog-arrow-a,
  269. .ui-popup-top-right .ui-dialog-arrow-a {
  270. bottom: -16px;
  271. border-top:8px solid #7C7C7C;
  272. }
  273. .ui-popup-top-left .ui-dialog-arrow-b,
  274. .ui-popup-top .ui-dialog-arrow-b,
  275. .ui-popup-top-right .ui-dialog-arrow-b {
  276. bottom: -15px;
  277. border-top:8px solid #fff;
  278. }
  279. .ui-popup-top-left .ui-dialog-arrow-a,
  280. .ui-popup-top-left .ui-dialog-arrow-b {
  281. left: 15px;
  282. }
  283. .ui-popup-top .ui-dialog-arrow-a,
  284. .ui-popup-top .ui-dialog-arrow-b {
  285. left: 50%;
  286. margin-left: -8px;
  287. }
  288. .ui-popup-top-right .ui-dialog-arrow-a,
  289. .ui-popup-top-right .ui-dialog-arrow-b {
  290. right: 15px;
  291. }
  292. .ui-popup-bottom-left .ui-dialog-arrow-a,
  293. .ui-popup-bottom .ui-dialog-arrow-a,
  294. .ui-popup-bottom-right .ui-dialog-arrow-a {
  295. top: -16px;
  296. border-bottom:8px solid #7C7C7C;
  297. }
  298. .ui-popup-bottom-left .ui-dialog-arrow-b,
  299. .ui-popup-bottom .ui-dialog-arrow-b,
  300. .ui-popup-bottom-right .ui-dialog-arrow-b {
  301. top: -15px;
  302. border-bottom:8px solid #fff;
  303. }
  304. .ui-popup-bottom-left .ui-dialog-arrow-a,
  305. .ui-popup-bottom-left .ui-dialog-arrow-b {
  306. left: 15px;
  307. }
  308. .ui-popup-bottom .ui-dialog-arrow-a,
  309. .ui-popup-bottom .ui-dialog-arrow-b {
  310. margin-left: -8px;
  311. left: 50%;
  312. }
  313. .ui-popup-bottom-right .ui-dialog-arrow-a,
  314. .ui-popup-bottom-right .ui-dialog-arrow-b {
  315. right: 15px;
  316. }
  317. .ui-popup-left-top .ui-dialog-arrow-a,
  318. .ui-popup-left .ui-dialog-arrow-a,
  319. .ui-popup-left-bottom .ui-dialog-arrow-a {
  320. right: -16px;
  321. border-left:8px solid #7C7C7C;
  322. }
  323. .ui-popup-left-top .ui-dialog-arrow-b,
  324. .ui-popup-left .ui-dialog-arrow-b,
  325. .ui-popup-left-bottom .ui-dialog-arrow-b {
  326. right: -15px;
  327. border-left:8px solid #fff;
  328. }
  329. .ui-popup-left-top .ui-dialog-arrow-a,
  330. .ui-popup-left-top .ui-dialog-arrow-b {
  331. top: 15px;
  332. }
  333. .ui-popup-left .ui-dialog-arrow-a,
  334. .ui-popup-left .ui-dialog-arrow-b {
  335. margin-top: -8px;
  336. top: 50%;
  337. }
  338. .ui-popup-left-bottom .ui-dialog-arrow-a,
  339. .ui-popup-left-bottom .ui-dialog-arrow-b {
  340. bottom: 15px;
  341. }
  342. .ui-popup-right-top .ui-dialog-arrow-a,
  343. .ui-popup-right .ui-dialog-arrow-a,
  344. .ui-popup-right-bottom .ui-dialog-arrow-a {
  345. left: -16px;
  346. border-right:8px solid #7C7C7C;
  347. }
  348. .ui-popup-right-top .ui-dialog-arrow-b,
  349. .ui-popup-right .ui-dialog-arrow-b,
  350. .ui-popup-right-bottom .ui-dialog-arrow-b {
  351. left: -15px;
  352. border-right:8px solid #fff;
  353. }
  354. .ui-popup-right-top .ui-dialog-arrow-a,
  355. .ui-popup-right-top .ui-dialog-arrow-b {
  356. top: 15px;
  357. }
  358. .ui-popup-right .ui-dialog-arrow-a,
  359. .ui-popup-right .ui-dialog-arrow-b {
  360. margin-top: -8px;
  361. top: 50%;
  362. }
  363. .ui-popup-right-bottom .ui-dialog-arrow-a,
  364. .ui-popup-right-bottom .ui-dialog-arrow-b {
  365. bottom: 15px;
  366. }
  367. @-webkit-keyframes ui-dialog-loading {
  368. 0% {
  369. -webkit-transform: rotate(0deg);
  370. }
  371. 100% {
  372. -webkit-transform: rotate(360deg);
  373. }
  374. }
  375. @keyframes ui-dialog-loading {
  376. 0% {
  377. transform: rotate(0deg);
  378. }
  379. 100% {
  380. transform: rotate(360deg);
  381. }
  382. }
  383. .ui-dialog-loading {
  384. vertical-align: middle;
  385. position: relative;
  386. display: block;
  387. *zoom: 1;
  388. *display: inline;
  389. overflow: hidden;
  390. width: 32px;
  391. height: 32px;
  392. top: 50%;
  393. margin: -16px auto 0 auto;
  394. font-size: 0;
  395. text-indent: -999em;
  396. color: #666;
  397. }
  398. .ui-dialog-loading {
  399. width: 100%\9;
  400. text-indent: 0\9;
  401. line-height: 32px\9;
  402. text-align: center\9;
  403. font-size: 12px\9;
  404. }
  405. .ui-dialog-loading::after {
  406. position: absolute;
  407. content: '';
  408. width: 3px;
  409. height: 3px;
  410. margin: 14.5px 0 0 14.5px;
  411. border-radius: 100%;
  412. box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
  413. -webkit-transform: rotate(360deg);
  414. -webkit-animation: ui-dialog-loading 1.5s infinite linear;
  415. transform: rotate(360deg);
  416. animation: ui-dialog-loading 1.5s infinite linear;
  417. display: none\9;
  418. }