modal.css 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764
  1. /*!
  2. * # Fomantic-UI - Modal
  3. * http://github.com/fomantic/Fomantic-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 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2);
  21. box-shadow: 1px 3px 3px 0 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):not(.dimmer),
  35. .ui.modal > .icon:first-child + *,
  36. .ui.modal > .dimmer:first-child + *:not(.icon),
  37. .ui.modal > .dimmer:first-child + .icon + * {
  38. border-top-left-radius: 0.28571429rem;
  39. border-top-right-radius: 0.28571429rem;
  40. }
  41. .ui.modal > :last-child {
  42. border-bottom-left-radius: 0.28571429rem;
  43. border-bottom-right-radius: 0.28571429rem;
  44. }
  45. .ui.modal > .ui.dimmer {
  46. border-radius: inherit;
  47. }
  48. /*******************************
  49. Content
  50. *******************************/
  51. /*--------------
  52. Close
  53. ---------------*/
  54. .ui.modal > .close {
  55. cursor: pointer;
  56. position: absolute;
  57. top: -2.5rem;
  58. right: -2.5rem;
  59. z-index: 1;
  60. opacity: 0.8;
  61. font-size: 1.25em;
  62. color: #FFFFFF;
  63. width: 2.25rem;
  64. height: 2.25rem;
  65. padding: 0.625rem 0 0 0;
  66. }
  67. .ui.modal > .close:hover {
  68. opacity: 1;
  69. }
  70. /*--------------
  71. Header
  72. ---------------*/
  73. .ui.modal > .header {
  74. display: block;
  75. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  76. background: #FFFFFF;
  77. margin: 0;
  78. padding: 1.25rem 1.5rem;
  79. -webkit-box-shadow: none;
  80. box-shadow: none;
  81. color: rgba(0, 0, 0, 0.85);
  82. border-bottom: 1px solid rgba(34, 36, 38, 0.15);
  83. }
  84. .ui.modal > .header:not(.ui) {
  85. font-size: 1.42857143rem;
  86. line-height: 1.28571429em;
  87. font-weight: bold;
  88. }
  89. /*--------------
  90. Content
  91. ---------------*/
  92. .ui.modal > .content {
  93. display: block;
  94. width: 100%;
  95. font-size: 1em;
  96. line-height: 1.4;
  97. padding: 1.5rem;
  98. background: #FFFFFF;
  99. }
  100. .ui.modal > .image.content {
  101. display: -webkit-box;
  102. display: -ms-flexbox;
  103. display: flex;
  104. -webkit-box-orient: horizontal;
  105. -webkit-box-direction: normal;
  106. -ms-flex-direction: row;
  107. flex-direction: row;
  108. }
  109. /* Image */
  110. .ui.modal > .content > .image {
  111. display: block;
  112. -webkit-box-flex: 0;
  113. -ms-flex: 0 1 auto;
  114. flex: 0 1 auto;
  115. width: '';
  116. -ms-flex-item-align: start;
  117. align-self: start;
  118. max-width: 100%;
  119. }
  120. .ui.modal > [class*="top aligned"] {
  121. -ms-flex-item-align: start;
  122. align-self: start;
  123. }
  124. .ui.modal > [class*="middle aligned"] {
  125. -ms-flex-item-align: center;
  126. align-self: center;
  127. }
  128. .ui.modal > [class*="stretched"] {
  129. -ms-flex-item-align: stretch;
  130. align-self: stretch;
  131. }
  132. /* Description */
  133. .ui.modal > .content > .description {
  134. display: block;
  135. -webkit-box-flex: 1;
  136. -ms-flex: 1 0 auto;
  137. flex: 1 0 auto;
  138. min-width: 0;
  139. -ms-flex-item-align: start;
  140. align-self: start;
  141. }
  142. .ui.modal > .content > .icon + .description,
  143. .ui.modal > .content > .image + .description {
  144. -webkit-box-flex: 0;
  145. -ms-flex: 0 1 auto;
  146. flex: 0 1 auto;
  147. min-width: '';
  148. width: auto;
  149. padding-left: 2em;
  150. }
  151. /*rtl:ignore*/
  152. .ui.modal > .content > .image > i.icon {
  153. margin: 0;
  154. opacity: 1;
  155. width: auto;
  156. line-height: 1;
  157. font-size: 8rem;
  158. }
  159. /*--------------
  160. Actions
  161. ---------------*/
  162. .ui.modal > .actions {
  163. background: #F9FAFB;
  164. padding: 1rem 1rem;
  165. border-top: 1px solid rgba(34, 36, 38, 0.15);
  166. text-align: right;
  167. }
  168. .ui.modal .actions > .button {
  169. margin-left: 0.75em;
  170. }
  171. .ui.basic.modal > .actions {
  172. border-top: none;
  173. }
  174. /*-------------------
  175. Responsive
  176. --------------------*/
  177. /* Modal Width */
  178. @media only screen and (max-width: 767.98px) {
  179. .ui.modal:not(.fullscreen) {
  180. width: 95%;
  181. margin: 0 0 0 0;
  182. }
  183. }
  184. @media only screen and (min-width: 768px) {
  185. .ui.modal:not(.fullscreen) {
  186. width: 88%;
  187. margin: 0 0 0 0;
  188. }
  189. }
  190. @media only screen and (min-width: 992px) {
  191. .ui.modal:not(.fullscreen) {
  192. width: 850px;
  193. margin: 0 0 0 0;
  194. }
  195. }
  196. @media only screen and (min-width: 1200px) {
  197. .ui.modal:not(.fullscreen) {
  198. width: 900px;
  199. margin: 0 0 0 0;
  200. }
  201. }
  202. @media only screen and (min-width: 1920px) {
  203. .ui.modal:not(.fullscreen) {
  204. width: 950px;
  205. margin: 0 0 0 0;
  206. }
  207. }
  208. /* Tablet and Mobile */
  209. @media only screen and (max-width: 991.98px) {
  210. .ui.modal > .header {
  211. padding-right: 2.25rem;
  212. }
  213. .ui.modal > .close {
  214. top: 1.0535rem;
  215. right: 1rem;
  216. color: rgba(0, 0, 0, 0.87);
  217. }
  218. }
  219. /* Mobile */
  220. @media only screen and (max-width: 767.98px) {
  221. .ui.modal > .header {
  222. padding: 0.75rem 1rem !important;
  223. padding-right: 2.25rem !important;
  224. }
  225. .ui.overlay.fullscreen.modal > .content.content.content {
  226. min-height: calc(100vh - 8.1rem);
  227. }
  228. .ui.overlay.fullscreen.modal > .scrolling.content.content.content {
  229. max-height: calc(100vh - 8.1rem);
  230. }
  231. .ui.modal > .content {
  232. display: block;
  233. padding: 1rem !important;
  234. }
  235. .ui.modal > .close {
  236. top: 0.5rem !important;
  237. right: 0.5rem !important;
  238. }
  239. /*rtl:ignore*/
  240. .ui.modal .image.content {
  241. -webkit-box-orient: vertical;
  242. -webkit-box-direction: normal;
  243. -ms-flex-direction: column;
  244. flex-direction: column;
  245. }
  246. .ui.modal .content > .image {
  247. display: block;
  248. max-width: 100%;
  249. margin: 0 auto !important;
  250. text-align: center;
  251. padding: 0 0 1rem !important;
  252. }
  253. .ui.modal > .content > .image > i.icon {
  254. font-size: 5rem;
  255. text-align: center;
  256. }
  257. /*rtl:ignore*/
  258. .ui.modal .content > .description {
  259. display: block;
  260. width: 100% !important;
  261. margin: 0 !important;
  262. padding: 1rem 0 !important;
  263. -webkit-box-shadow: none;
  264. box-shadow: none;
  265. }
  266. /* Let Buttons Stack */
  267. .ui.modal > .actions {
  268. padding: 1rem 1rem 0rem !important;
  269. }
  270. .ui.modal .actions > .buttons,
  271. .ui.modal .actions > .button {
  272. margin-bottom: 1rem;
  273. }
  274. }
  275. /*--------------
  276. Coupling
  277. ---------------*/
  278. .ui.inverted.dimmer > .ui.modal {
  279. -webkit-box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
  280. box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2);
  281. }
  282. /*******************************
  283. Types
  284. *******************************/
  285. .ui.basic.modal {
  286. background-color: transparent;
  287. border: none;
  288. border-radius: 0;
  289. -webkit-box-shadow: none !important;
  290. box-shadow: none !important;
  291. color: #FFFFFF;
  292. }
  293. .ui.basic.modal > .header,
  294. .ui.basic.modal > .content,
  295. .ui.basic.modal > .actions {
  296. background-color: transparent;
  297. }
  298. .ui.basic.modal > .header {
  299. color: #FFFFFF;
  300. border-bottom: none;
  301. }
  302. .ui.basic.modal > .close {
  303. top: 1rem;
  304. right: 1.5rem;
  305. color: #FFFFFF;
  306. }
  307. .ui.inverted.dimmer > .basic.modal {
  308. color: rgba(0, 0, 0, 0.87);
  309. }
  310. .ui.inverted.dimmer > .ui.basic.modal > .header {
  311. color: rgba(0, 0, 0, 0.85);
  312. }
  313. /* Resort to margin positioning if legacy */
  314. .ui.legacy.legacy.modal,
  315. .ui.legacy.legacy.page.dimmer > .ui.modal {
  316. left: 50% !important;
  317. }
  318. .ui.legacy.legacy.modal:not(.aligned),
  319. .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) {
  320. top: 50%;
  321. }
  322. .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned),
  323. .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned),
  324. .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned),
  325. .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) {
  326. top: auto;
  327. }
  328. .ui.legacy.overlay.fullscreen.modal {
  329. margin-top: -2rem !important;
  330. }
  331. /*******************************
  332. States
  333. *******************************/
  334. .ui.loading.modal {
  335. display: block;
  336. visibility: hidden;
  337. z-index: -1;
  338. }
  339. .ui.active.modal {
  340. display: block;
  341. }
  342. /*******************************
  343. Variations
  344. *******************************/
  345. /*--------------
  346. Aligned
  347. ---------------*/
  348. .modals.dimmer .ui.top.aligned.modal {
  349. top: 5vh;
  350. }
  351. .modals.dimmer .ui.bottom.aligned.modal {
  352. bottom: 5vh;
  353. }
  354. @media only screen and (max-width: 767.98px) {
  355. .modals.dimmer .ui.top.aligned.modal {
  356. top: 1rem;
  357. }
  358. .modals.dimmer .ui.bottom.aligned.modal {
  359. bottom: 1rem;
  360. }
  361. }
  362. /*--------------
  363. Scrolling
  364. ---------------*/
  365. /* Scrolling Dimmer */
  366. .scrolling.dimmable.dimmed {
  367. overflow: hidden;
  368. }
  369. .scrolling.dimmable > .dimmer {
  370. -webkit-box-pack: start;
  371. -ms-flex-pack: start;
  372. justify-content: flex-start;
  373. position: fixed;
  374. }
  375. .scrolling.dimmable.dimmed > .dimmer {
  376. overflow: auto;
  377. -webkit-overflow-scrolling: touch;
  378. }
  379. .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
  380. margin: 2rem auto;
  381. }
  382. /* Fix for Firefox, Edge, IE11 */
  383. .modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after {
  384. content: '\00A0';
  385. position: absolute;
  386. height: 2rem;
  387. }
  388. /* Undetached Scrolling */
  389. .scrolling.undetached.dimmable.dimmed {
  390. overflow: auto;
  391. -webkit-overflow-scrolling: touch;
  392. }
  393. .scrolling.undetached.dimmable.dimmed > .dimmer {
  394. overflow: hidden;
  395. }
  396. .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) {
  397. position: absolute;
  398. left: 50%;
  399. }
  400. /* Scrolling Content */
  401. .ui.modal > .scrolling.content {
  402. max-height: calc(80vh - 10rem);
  403. overflow: auto;
  404. }
  405. .ui.overlay.fullscreen.modal > .content {
  406. min-height: calc(100vh - 9.1rem);
  407. }
  408. .ui.overlay.fullscreen.modal > .scrolling.content {
  409. max-height: calc(100vh - 9.1rem);
  410. }
  411. /*--------------
  412. Full Screen
  413. ---------------*/
  414. .ui.fullscreen.modal {
  415. width: 95%;
  416. left: 2.5%;
  417. margin: 1em auto;
  418. }
  419. .ui.overlay.fullscreen.modal {
  420. width: 100%;
  421. left: 0;
  422. margin: 0 auto;
  423. top: 0;
  424. border-radius: 0;
  425. }
  426. .ui.modal > .close.inside + .header,
  427. .ui.fullscreen.modal > .header {
  428. padding-right: 2.25rem;
  429. }
  430. .ui.modal > .close.inside,
  431. .ui.fullscreen.modal > .close {
  432. top: 1.0535rem;
  433. right: 1rem;
  434. color: rgba(0, 0, 0, 0.87);
  435. }
  436. .ui.basic.fullscreen.modal > .close {
  437. color: #FFFFFF;
  438. }
  439. /*--------------
  440. Size
  441. ---------------*/
  442. .ui.modal {
  443. font-size: 1rem;
  444. }
  445. .ui.mini.modal > .header:not(.ui) {
  446. font-size: 1.3em;
  447. }
  448. @media only screen and (max-width: 767.98px) {
  449. .ui.mini.modal {
  450. width: 95%;
  451. margin: 0 0 0 0;
  452. }
  453. }
  454. @media only screen and (min-width: 768px) {
  455. .ui.mini.modal {
  456. width: 35.2%;
  457. margin: 0 0 0 0;
  458. }
  459. }
  460. @media only screen and (min-width: 992px) {
  461. .ui.mini.modal {
  462. width: 340px;
  463. margin: 0 0 0 0;
  464. }
  465. }
  466. @media only screen and (min-width: 1200px) {
  467. .ui.mini.modal {
  468. width: 360px;
  469. margin: 0 0 0 0;
  470. }
  471. }
  472. @media only screen and (min-width: 1920px) {
  473. .ui.mini.modal {
  474. width: 380px;
  475. margin: 0 0 0 0;
  476. }
  477. }
  478. .ui.tiny.modal > .header:not(.ui) {
  479. font-size: 1.3em;
  480. }
  481. @media only screen and (max-width: 767.98px) {
  482. .ui.tiny.modal {
  483. width: 95%;
  484. margin: 0 0 0 0;
  485. }
  486. }
  487. @media only screen and (min-width: 768px) {
  488. .ui.tiny.modal {
  489. width: 52.8%;
  490. margin: 0 0 0 0;
  491. }
  492. }
  493. @media only screen and (min-width: 992px) {
  494. .ui.tiny.modal {
  495. width: 510px;
  496. margin: 0 0 0 0;
  497. }
  498. }
  499. @media only screen and (min-width: 1200px) {
  500. .ui.tiny.modal {
  501. width: 540px;
  502. margin: 0 0 0 0;
  503. }
  504. }
  505. @media only screen and (min-width: 1920px) {
  506. .ui.tiny.modal {
  507. width: 570px;
  508. margin: 0 0 0 0;
  509. }
  510. }
  511. .ui.small.modal > .header:not(.ui) {
  512. font-size: 1.3em;
  513. }
  514. @media only screen and (max-width: 767.98px) {
  515. .ui.small.modal {
  516. width: 95%;
  517. margin: 0 0 0 0;
  518. }
  519. }
  520. @media only screen and (min-width: 768px) {
  521. .ui.small.modal {
  522. width: 70.4%;
  523. margin: 0 0 0 0;
  524. }
  525. }
  526. @media only screen and (min-width: 992px) {
  527. .ui.small.modal {
  528. width: 680px;
  529. margin: 0 0 0 0;
  530. }
  531. }
  532. @media only screen and (min-width: 1200px) {
  533. .ui.small.modal {
  534. width: 720px;
  535. margin: 0 0 0 0;
  536. }
  537. }
  538. @media only screen and (min-width: 1920px) {
  539. .ui.small.modal {
  540. width: 760px;
  541. margin: 0 0 0 0;
  542. }
  543. }
  544. .ui.large.modal > .header:not(.ui) {
  545. font-size: 1.6em;
  546. }
  547. @media only screen and (max-width: 767.98px) {
  548. .ui.large.modal {
  549. width: 95%;
  550. margin: 0 0 0 0;
  551. }
  552. }
  553. @media only screen and (min-width: 768px) {
  554. .ui.large.modal {
  555. width: 88%;
  556. margin: 0 0 0 0;
  557. }
  558. }
  559. @media only screen and (min-width: 992px) {
  560. .ui.large.modal {
  561. width: 1020px;
  562. margin: 0 0 0 0;
  563. }
  564. }
  565. @media only screen and (min-width: 1200px) {
  566. .ui.large.modal {
  567. width: 1080px;
  568. margin: 0 0 0 0;
  569. }
  570. }
  571. @media only screen and (min-width: 1920px) {
  572. .ui.large.modal {
  573. width: 1140px;
  574. margin: 0 0 0 0;
  575. }
  576. }
  577. .ui.big.modal > .header:not(.ui) {
  578. font-size: 1.6em;
  579. }
  580. @media only screen and (max-width: 767.98px) {
  581. .ui.big.modal {
  582. width: 95%;
  583. margin: 0 0 0 0;
  584. }
  585. }
  586. @media only screen and (min-width: 768px) {
  587. .ui.big.modal {
  588. width: 88%;
  589. margin: 0 0 0 0;
  590. }
  591. }
  592. @media only screen and (min-width: 992px) {
  593. .ui.big.modal {
  594. width: 1190px;
  595. margin: 0 0 0 0;
  596. }
  597. }
  598. @media only screen and (min-width: 1200px) {
  599. .ui.big.modal {
  600. width: 1260px;
  601. margin: 0 0 0 0;
  602. }
  603. }
  604. @media only screen and (min-width: 1920px) {
  605. .ui.big.modal {
  606. width: 1330px;
  607. margin: 0 0 0 0;
  608. }
  609. }
  610. .ui.huge.modal > .header:not(.ui) {
  611. font-size: 1.6em;
  612. }
  613. @media only screen and (max-width: 767.98px) {
  614. .ui.huge.modal {
  615. width: 95%;
  616. margin: 0 0 0 0;
  617. }
  618. }
  619. @media only screen and (min-width: 768px) {
  620. .ui.huge.modal {
  621. width: 88%;
  622. margin: 0 0 0 0;
  623. }
  624. }
  625. @media only screen and (min-width: 992px) {
  626. .ui.huge.modal {
  627. width: 1360px;
  628. margin: 0 0 0 0;
  629. }
  630. }
  631. @media only screen and (min-width: 1200px) {
  632. .ui.huge.modal {
  633. width: 1440px;
  634. margin: 0 0 0 0;
  635. }
  636. }
  637. @media only screen and (min-width: 1920px) {
  638. .ui.huge.modal {
  639. width: 1520px;
  640. margin: 0 0 0 0;
  641. }
  642. }
  643. .ui.massive.modal > .header:not(.ui) {
  644. font-size: 1.8em;
  645. }
  646. @media only screen and (max-width: 767.98px) {
  647. .ui.massive.modal {
  648. width: 95%;
  649. margin: 0 0 0 0;
  650. }
  651. }
  652. @media only screen and (min-width: 768px) {
  653. .ui.massive.modal {
  654. width: 88%;
  655. margin: 0 0 0 0;
  656. }
  657. }
  658. @media only screen and (min-width: 992px) {
  659. .ui.massive.modal {
  660. width: 1530px;
  661. margin: 0 0 0 0;
  662. }
  663. }
  664. @media only screen and (min-width: 1200px) {
  665. .ui.massive.modal {
  666. width: 1620px;
  667. margin: 0 0 0 0;
  668. }
  669. }
  670. @media only screen and (min-width: 1920px) {
  671. .ui.massive.modal {
  672. width: 1710px;
  673. margin: 0 0 0 0;
  674. }
  675. }
  676. /*****************************
  677. Inverted
  678. *******************************/
  679. .ui.inverted.modal {
  680. background: rgba(0, 0, 0, 0.9);
  681. }
  682. .ui.inverted.modal > .header,
  683. .ui.inverted.modal > .content {
  684. background: rgba(0, 0, 0, 0.9);
  685. color: #FFFFFF;
  686. }
  687. .ui.inverted.modal > .actions {
  688. background: #191A1B;
  689. border-top: 1px solid rgba(34, 36, 38, 0.85);
  690. color: #FFFFFF;
  691. }
  692. .ui.inverted.dimmer > .modal > .close {
  693. color: rgba(0, 0, 0, 0.85);
  694. }
  695. @media only screen and (max-width: 991.98px) {
  696. .ui.dimmer .inverted.modal > .close {
  697. color: #FFFFFF;
  698. }
  699. }
  700. .ui.inverted.modal > .close.inside,
  701. .ui.inverted.fullscreen.modal > .close {
  702. color: #FFFFFF;
  703. }
  704. /*******************************
  705. Theme Overrides
  706. *******************************/
  707. /*******************************
  708. Site Overrides
  709. *******************************/