您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

620 行
12KB

  1. /*!
  2. * # Semantic UI 2.4.0 - Modal
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Modal
  12. *******************************/
  13. .ui.modal {
  14. position: absolute;
  15. display: none;
  16. z-index: 1001;
  17. text-align: left;
  18. background: #FFFFFF;
  19. border: none;
  20. -webkit-box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
  21. box-shadow: 1px 3px 3px 0px rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
  22. -webkit-transform-origin: 50% 25%;
  23. transform-origin: 50% 25%;
  24. -webkit-box-flex: 0;
  25. -ms-flex: 0 0 auto;
  26. flex: 0 0 auto;
  27. border-radius: 0.28571429rem;
  28. -webkit-user-select: text;
  29. -moz-user-select: text;
  30. -ms-user-select: text;
  31. user-select: text;
  32. will-change: top, left, margin, transform, opacity;
  33. }
  34. .ui.modal > :first-child:not(.icon),
  35. .ui.modal > .icon:first-child + * {
  36. border-top-left-radius: 0.28571429rem;
  37. border-top-right-radius: 0.28571429rem;
  38. }
  39. .ui.modal > :last-child {
  40. border-bottom-left-radius: 0.28571429rem;
  41. border-bottom-right-radius: 0.28571429rem;
  42. }
  43. /*******************************
  44. Content
  45. *******************************/
  46. /*--------------
  47. Close
  48. ---------------*/
  49. .ui.modal > .close {
  50. cursor: pointer;
  51. position: absolute;
  52. top: -2.5rem;
  53. right: -2.5rem;
  54. z-index: 1;
  55. opacity: 0.8;
  56. font-size: 1.25em;
  57. color: #FFFFFF;
  58. width: 2.25rem;
  59. height: 2.25rem;
  60. padding: 0.625rem 0rem 0rem 0rem;
  61. }
  62. .ui.modal > .close:hover {
  63. opacity: 1;
  64. }
  65. /*--------------
  66. Header
  67. ---------------*/
  68. .ui.modal > .header {
  69. display: block;
  70. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  71. background: #FFFFFF;
  72. margin: 0em;
  73. padding: 1.25rem 1.5rem;
  74. -webkit-box-shadow: none;
  75. box-shadow: none;
  76. color: rgba(0, 0, 0, 0.85);
  77. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  78. }
  79. .ui.modal > .header:not(.ui) {
  80. font-size: 1.42857143rem;
  81. line-height: 1.28571429em;
  82. font-weight: bold;
  83. }
  84. /*--------------
  85. Content
  86. ---------------*/
  87. .ui.modal > .content {
  88. display: block;
  89. width: 100%;
  90. font-size: 1em;
  91. line-height: 1.4;
  92. padding: 1.5rem;
  93. background: #FFFFFF;
  94. }
  95. .ui.modal > .image.content {
  96. display: -webkit-box;
  97. display: -ms-flexbox;
  98. display: flex;
  99. -webkit-box-orient: horizontal;
  100. -webkit-box-direction: normal;
  101. -ms-flex-direction: row;
  102. flex-direction: row;
  103. }
  104. /* Image */
  105. .ui.modal > .content > .image {
  106. display: block;
  107. -webkit-box-flex: 0;
  108. -ms-flex: 0 1 auto;
  109. flex: 0 1 auto;
  110. width: '';
  111. -ms-flex-item-align: top;
  112. align-self: top;
  113. }
  114. .ui.modal > [class*="top aligned"] {
  115. -ms-flex-item-align: top;
  116. align-self: top;
  117. }
  118. .ui.modal > [class*="middle aligned"] {
  119. -ms-flex-item-align: middle;
  120. align-self: middle;
  121. }
  122. .ui.modal > [class*="stretched"] {
  123. -ms-flex-item-align: stretch;
  124. align-self: stretch;
  125. }
  126. /* Description */
  127. .ui.modal > .content > .description {
  128. display: block;
  129. -webkit-box-flex: 1;
  130. -ms-flex: 1 0 auto;
  131. flex: 1 0 auto;
  132. min-width: 0px;
  133. -ms-flex-item-align: top;
  134. align-self: top;
  135. }
  136. .ui.modal > .content > .icon + .description,
  137. .ui.modal > .content > .image + .description {
  138. -webkit-box-flex: 0;
  139. -ms-flex: 0 1 auto;
  140. flex: 0 1 auto;
  141. min-width: '';
  142. width: auto;
  143. padding-left: 2em;
  144. }
  145. /*rtl:ignore*/
  146. .ui.modal > .content > .image > i.icon {
  147. margin: 0em;
  148. opacity: 1;
  149. width: auto;
  150. line-height: 1;
  151. font-size: 8rem;
  152. }
  153. /*--------------
  154. Actions
  155. ---------------*/
  156. .ui.modal > .actions {
  157. background: #F9FAFB;
  158. padding: 1rem 1rem;
  159. border-top: 1px solid rgba(34, 36, 38, 0.15);
  160. text-align: right;
  161. }
  162. .ui.modal .actions > .button {
  163. margin-left: 0.75em;
  164. }
  165. /*-------------------
  166. Responsive
  167. --------------------*/
  168. /* Modal Width */
  169. @media only screen and (max-width: 767px) {
  170. .ui.modal {
  171. width: 95%;
  172. margin: 0em 0em 0em 0em;
  173. }
  174. }
  175. @media only screen and (min-width: 768px) {
  176. .ui.modal {
  177. width: 88%;
  178. margin: 0em 0em 0em 0em;
  179. }
  180. }
  181. @media only screen and (min-width: 992px) {
  182. .ui.modal {
  183. width: 850px;
  184. margin: 0em 0em 0em 0em;
  185. }
  186. }
  187. @media only screen and (min-width: 1200px) {
  188. .ui.modal {
  189. width: 900px;
  190. margin: 0em 0em 0em 0em;
  191. }
  192. }
  193. @media only screen and (min-width: 1920px) {
  194. .ui.modal {
  195. width: 950px;
  196. margin: 0em 0em 0em 0em;
  197. }
  198. }
  199. /* Tablet and Mobile */
  200. @media only screen and (max-width: 991px) {
  201. .ui.modal > .header {
  202. padding-right: 2.25rem;
  203. }
  204. .ui.modal > .close {
  205. top: 1.0535rem;
  206. right: 1rem;
  207. color: rgba(0, 0, 0, 0.87);
  208. }
  209. }
  210. /* Mobile */
  211. @media only screen and (max-width: 767px) {
  212. .ui.modal > .header {
  213. padding: 0.75rem 1rem !important;
  214. padding-right: 2.25rem !important;
  215. }
  216. .ui.modal > .content {
  217. display: block;
  218. padding: 1rem !important;
  219. }
  220. .ui.modal > .close {
  221. top: 0.5rem !important;
  222. right: 0.5rem !important;
  223. }
  224. /*rtl:ignore*/
  225. .ui.modal .image.content {
  226. -webkit-box-orient: vertical;
  227. -webkit-box-direction: normal;
  228. -ms-flex-direction: column;
  229. flex-direction: column;
  230. }
  231. .ui.modal .content > .image {
  232. display: block;
  233. max-width: 100%;
  234. margin: 0em auto !important;
  235. text-align: center;
  236. padding: 0rem 0rem 1rem !important;
  237. }
  238. .ui.modal > .content > .image > i.icon {
  239. font-size: 5rem;
  240. text-align: center;
  241. }
  242. /*rtl:ignore*/
  243. .ui.modal .content > .description {
  244. display: block;
  245. width: 100% !important;
  246. margin: 0em !important;
  247. padding: 1rem 0rem !important;
  248. -webkit-box-shadow: none;
  249. box-shadow: none;
  250. }
  251. /* Let Buttons Stack */
  252. .ui.modal > .actions {
  253. padding: 1rem 1rem 0rem !important;
  254. }
  255. .ui.modal .actions > .buttons,
  256. .ui.modal .actions > .button {
  257. margin-bottom: 1rem;
  258. }
  259. }
  260. /*--------------
  261. Coupling
  262. ---------------*/
  263. .ui.inverted.dimmer > .ui.modal {
  264. -webkit-box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
  265. box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
  266. }
  267. /*******************************
  268. Types
  269. *******************************/
  270. .ui.basic.modal {
  271. background-color: transparent;
  272. border: none;
  273. border-radius: 0em;
  274. -webkit-box-shadow: none !important;
  275. box-shadow: none !important;
  276. color: #FFFFFF;
  277. }
  278. .ui.basic.modal > .header,
  279. .ui.basic.modal > .content,
  280. .ui.basic.modal > .actions {
  281. background-color: transparent;
  282. }
  283. .ui.basic.modal > .header {
  284. color: #FFFFFF;
  285. }
  286. .ui.basic.modal > .close {
  287. top: 1rem;
  288. right: 1.5rem;
  289. }
  290. .ui.inverted.dimmer > .basic.modal {
  291. color: rgba(0, 0, 0, 0.87);
  292. }
  293. .ui.inverted.dimmer > .ui.basic.modal > .header {
  294. color: rgba(0, 0, 0, 0.85);
  295. }
  296. /* Resort to margin positioning if legacy */
  297. .ui.legacy.modal,
  298. .ui.legacy.page.dimmer > .ui.modal {
  299. top: 50%;
  300. left: 50%;
  301. }
  302. .ui.legacy.page.dimmer > .ui.scrolling.modal,
  303. .ui.page.dimmer > .ui.scrolling.legacy.modal,
  304. .ui.top.aligned.legacy.page.dimmer > .ui.modal,
  305. .ui.top.aligned.dimmer > .ui.legacy.modal {
  306. top: auto;
  307. }
  308. /* Tablet and Mobile */
  309. @media only screen and (max-width: 991px) {
  310. .ui.basic.modal > .close {
  311. color: #FFFFFF;
  312. }
  313. }
  314. /*******************************
  315. States
  316. *******************************/
  317. .ui.loading.modal {
  318. display: block;
  319. visibility: hidden;
  320. z-index: -1;
  321. }
  322. .ui.active.modal {
  323. display: block;
  324. }
  325. /*******************************
  326. Variations
  327. *******************************/
  328. /*--------------
  329. Top Aligned
  330. ---------------*/
  331. /* Top Aligned Modal */
  332. .modals.dimmer[class*="top aligned"] .modal {
  333. margin: 5vh auto;
  334. }
  335. @media only screen and (max-width: 767px) {
  336. .modals.dimmer[class*="top aligned"] .modal {
  337. margin: 1rem auto;
  338. }
  339. }
  340. /* Legacy Top Aligned */
  341. .legacy.modals.dimmer[class*="top aligned"] {
  342. padding-top: 5vh;
  343. }
  344. @media only screen and (max-width: 767px) {
  345. .legacy.modals.dimmer[class*="top aligned"] {
  346. padding-top: 1rem;
  347. }
  348. }
  349. /*--------------
  350. Scrolling
  351. ---------------*/
  352. /* Scrolling Dimmer */
  353. .scrolling.dimmable.dimmed {
  354. overflow: hidden;
  355. }
  356. .scrolling.dimmable > .dimmer {
  357. -webkit-box-pack: start;
  358. -ms-flex-pack: start;
  359. justify-content: flex-start;
  360. }
  361. .scrolling.dimmable.dimmed > .dimmer {
  362. overflow: auto;
  363. -webkit-overflow-scrolling: touch;
  364. }
  365. .scrolling.dimmable > .dimmer {
  366. position: fixed;
  367. }
  368. .modals.dimmer .ui.scrolling.modal {
  369. margin: 1rem auto;
  370. }
  371. /* Undetached Scrolling */
  372. .scrolling.undetached.dimmable.dimmed {
  373. overflow: auto;
  374. -webkit-overflow-scrolling: touch;
  375. }
  376. .scrolling.undetached.dimmable.dimmed > .dimmer {
  377. overflow: hidden;
  378. }
  379. .scrolling.undetached.dimmable .ui.scrolling.modal {
  380. position: absolute;
  381. left: 50%;
  382. margin-top: 1rem !important;
  383. }
  384. /* Scrolling Content */
  385. .ui.modal .scrolling.content {
  386. max-height: calc(70vh);
  387. overflow: auto;
  388. }
  389. /*--------------
  390. Full Screen
  391. ---------------*/
  392. .ui.fullscreen.modal {
  393. width: 95% !important;
  394. left: 0em !important;
  395. margin: 1em auto;
  396. }
  397. .ui.fullscreen.scrolling.modal {
  398. left: 0em !important;
  399. }
  400. .ui.fullscreen.modal > .header {
  401. padding-right: 2.25rem;
  402. }
  403. .ui.fullscreen.modal > .close {
  404. top: 1.0535rem;
  405. right: 1rem;
  406. color: rgba(0, 0, 0, 0.87);
  407. }
  408. /*--------------
  409. Size
  410. ---------------*/
  411. .ui.modal {
  412. font-size: 1rem;
  413. }
  414. /* Mini */
  415. .ui.mini.modal > .header:not(.ui) {
  416. font-size: 1.3em;
  417. }
  418. /* Mini Modal Width */
  419. @media only screen and (max-width: 767px) {
  420. .ui.mini.modal {
  421. width: 95%;
  422. margin: 0em 0em 0em 0em;
  423. }
  424. }
  425. @media only screen and (min-width: 768px) {
  426. .ui.mini.modal {
  427. width: 35.2%;
  428. margin: 0em 0em 0em 0em;
  429. }
  430. }
  431. @media only screen and (min-width: 992px) {
  432. .ui.mini.modal {
  433. width: 340px;
  434. margin: 0em 0em 0em 0em;
  435. }
  436. }
  437. @media only screen and (min-width: 1200px) {
  438. .ui.mini.modal {
  439. width: 360px;
  440. margin: 0em 0em 0em 0em;
  441. }
  442. }
  443. @media only screen and (min-width: 1920px) {
  444. .ui.mini.modal {
  445. width: 380px;
  446. margin: 0em 0em 0em 0em;
  447. }
  448. }
  449. /* mini */
  450. .ui.small.modal > .header:not(.ui) {
  451. font-size: 1.3em;
  452. }
  453. /* Tiny Modal Width */
  454. @media only screen and (max-width: 767px) {
  455. .ui.tiny.modal {
  456. width: 95%;
  457. margin: 0em 0em 0em 0em;
  458. }
  459. }
  460. @media only screen and (min-width: 768px) {
  461. .ui.tiny.modal {
  462. width: 52.8%;
  463. margin: 0em 0em 0em 0em;
  464. }
  465. }
  466. @media only screen and (min-width: 992px) {
  467. .ui.tiny.modal {
  468. width: 510px;
  469. margin: 0em 0em 0em 0em;
  470. }
  471. }
  472. @media only screen and (min-width: 1200px) {
  473. .ui.tiny.modal {
  474. width: 540px;
  475. margin: 0em 0em 0em 0em;
  476. }
  477. }
  478. @media only screen and (min-width: 1920px) {
  479. .ui.tiny.modal {
  480. width: 570px;
  481. margin: 0em 0em 0em 0em;
  482. }
  483. }
  484. /* Small */
  485. .ui.small.modal > .header:not(.ui) {
  486. font-size: 1.3em;
  487. }
  488. /* Small Modal Width */
  489. @media only screen and (max-width: 767px) {
  490. .ui.small.modal {
  491. width: 95%;
  492. margin: 0em 0em 0em 0em;
  493. }
  494. }
  495. @media only screen and (min-width: 768px) {
  496. .ui.small.modal {
  497. width: 70.4%;
  498. margin: 0em 0em 0em 0em;
  499. }
  500. }
  501. @media only screen and (min-width: 992px) {
  502. .ui.small.modal {
  503. width: 680px;
  504. margin: 0em 0em 0em 0em;
  505. }
  506. }
  507. @media only screen and (min-width: 1200px) {
  508. .ui.small.modal {
  509. width: 720px;
  510. margin: 0em 0em 0em 0em;
  511. }
  512. }
  513. @media only screen and (min-width: 1920px) {
  514. .ui.small.modal {
  515. width: 760px;
  516. margin: 0em 0em 0em 0em;
  517. }
  518. }
  519. /* Large Modal Width */
  520. .ui.large.modal > .header {
  521. font-size: 1.6em;
  522. }
  523. @media only screen and (max-width: 767px) {
  524. .ui.large.modal {
  525. width: 95%;
  526. margin: 0em 0em 0em 0em;
  527. }
  528. }
  529. @media only screen and (min-width: 768px) {
  530. .ui.large.modal {
  531. width: 88%;
  532. margin: 0em 0em 0em 0em;
  533. }
  534. }
  535. @media only screen and (min-width: 992px) {
  536. .ui.large.modal {
  537. width: 1020px;
  538. margin: 0em 0em 0em 0em;
  539. }
  540. }
  541. @media only screen and (min-width: 1200px) {
  542. .ui.large.modal {
  543. width: 1080px;
  544. margin: 0em 0em 0em 0em;
  545. }
  546. }
  547. @media only screen and (min-width: 1920px) {
  548. .ui.large.modal {
  549. width: 1140px;
  550. margin: 0em 0em 0em 0em;
  551. }
  552. }
  553. /*******************************
  554. Theme Overrides
  555. *******************************/
  556. /*******************************
  557. Site Overrides
  558. *******************************/