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.

436 lines
8.1 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. /*
  2. * # Semantic UI
  3. * https://github.com/Semantic-Org/Semantic-UI
  4. * http://www.semantic-ui.com/
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Modal
  13. *******************************/
  14. .ui.modal {
  15. display: none;
  16. position: fixed;
  17. z-index: 1001;
  18. top: 50%;
  19. left: 50%;
  20. text-align: left;
  21. width: 90%;
  22. margin-left: -45%;
  23. background: #ffffff;
  24. border: none;
  25. box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
  26. border-radius: 0.2857rem;
  27. -webkit-user-select: text;
  28. -moz-user-select: text;
  29. -ms-user-select: text;
  30. user-select: text;
  31. will-change: top, left, margin, transform, opacity;
  32. }
  33. .ui.modal > :first-child:not(.icon),
  34. .ui.modal > .icon:first-child + * {
  35. border-top-left-radius: 0.2857rem;
  36. border-top-right-radius: 0.2857rem;
  37. }
  38. .ui.modal > :last-child {
  39. border-bottom-left-radius: 0.2857rem;
  40. border-bottom-right-radius: 0.2857rem;
  41. }
  42. /*******************************
  43. Content
  44. *******************************/
  45. /*--------------
  46. Close
  47. ---------------*/
  48. .ui.modal > .close {
  49. cursor: pointer;
  50. position: absolute;
  51. top: -2.5rem;
  52. right: -2.5rem;
  53. z-index: 1;
  54. opacity: 0.8;
  55. font-size: 1.25em;
  56. color: #ffffff;
  57. width: 2.25rem;
  58. height: 2.25rem;
  59. padding: 0.625rem 0rem 0rem 0rem;
  60. }
  61. .ui.modal > .close:hover {
  62. opacity: 1;
  63. }
  64. /*--------------
  65. Header
  66. ---------------*/
  67. .ui.modal > .header {
  68. display: block;
  69. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  70. background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
  71. background: linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff;
  72. margin: 0em;
  73. padding: 1.2rem 2rem;
  74. box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
  75. font-size: 1.6em;
  76. line-height: 1.3em;
  77. font-weight: bold;
  78. color: rgba(0, 0, 0, 0.85);
  79. border-bottom: 1px solid rgba(39, 41, 43, 0.15);
  80. }
  81. /*--------------
  82. Content
  83. ---------------*/
  84. .ui.modal > .content {
  85. display: table;
  86. table-layout: fixed;
  87. width: 100%;
  88. font-size: 1em;
  89. line-height: 1.4;
  90. padding: 2rem;
  91. background: #ffffff;
  92. }
  93. /* Image */
  94. .ui.modal > .content > .image {
  95. display: table-cell;
  96. width: '';
  97. vertical-align: top;
  98. }
  99. .ui.modal > .content > .image[class*="top aligned"] {
  100. vertical-align: top;
  101. }
  102. .ui.modal > .content > .image[class*="top aligned"] {
  103. vertical-align: middle;
  104. }
  105. /* Description */
  106. .ui.modal > .content > .description {
  107. display: table-cell;
  108. vertical-align: top;
  109. }
  110. .ui.modal > .content > .icon + .description,
  111. .ui.modal > .content > .image + .description {
  112. min-width: '';
  113. width: 80%;
  114. padding-left: 2em;
  115. }
  116. /*rtl:ignore*/
  117. .ui.modal > .content > .image > i.icon {
  118. font-size: 8rem;
  119. margin: 0em;
  120. opacity: 1;
  121. width: auto;
  122. }
  123. /*--------------
  124. Actions
  125. ---------------*/
  126. .ui.modal .actions {
  127. background: #efefef;
  128. padding: 1rem 2rem;
  129. border-top: 1px solid rgba(39, 41, 43, 0.15);
  130. text-align: right;
  131. }
  132. .ui.modal .actions > .button {
  133. margin-left: 0.75em;
  134. }
  135. /*-------------------
  136. Responsive
  137. --------------------*/
  138. /* Modal Width */
  139. @media only screen and (max-width: 767px) {
  140. .ui.modal {
  141. width: 95%;
  142. margin: 0em 0em 0em -47.5%;
  143. }
  144. }
  145. @media only screen and (min-width: 768px) {
  146. .ui.modal {
  147. width: 88%;
  148. margin: 0em 0em 0em -44%;
  149. }
  150. }
  151. @media only screen and (min-width: 992px) {
  152. .ui.modal {
  153. width: 74%;
  154. margin: 0em 0em 0em -37%;
  155. }
  156. }
  157. @media only screen and (min-width: 1400px) {
  158. .ui.modal {
  159. width: 56%;
  160. margin: 0em 0em 0em -28%;
  161. }
  162. }
  163. @media only screen and (min-width: 1920px) {
  164. .ui.modal {
  165. width: 42%;
  166. margin: 0em 0em 0em -21%;
  167. }
  168. }
  169. /* Tablet and Mobile */
  170. @media only screen and (max-width: 992px) {
  171. .ui.modal > .header {
  172. padding-right: 2.25rem;
  173. }
  174. .ui.modal > .close {
  175. top: 0.905rem;
  176. right: 1rem;
  177. color: rgba(0, 0, 0, 0.8);
  178. }
  179. }
  180. /* Mobile */
  181. @media only screen and (max-width: 767px) {
  182. .ui.modal > .header {
  183. padding: 0.75rem 1rem !important;
  184. padding-right: 2.25rem !important;
  185. }
  186. .ui.modal > .content {
  187. display: block;
  188. padding: 1rem !important;
  189. }
  190. .ui.modal > .close {
  191. top: 0.5rem !important;
  192. right: 0.5rem !important;
  193. }
  194. /*rtl:ignore*/
  195. .ui.modal .content > .image {
  196. display: block;
  197. max-width: 100%;
  198. margin: 0em auto !important;
  199. text-align: center;
  200. padding: 0rem 0rem 1rem !important;
  201. }
  202. .ui.modal > .content > .image > i.icon {
  203. font-size: 5rem;
  204. text-align: center;
  205. }
  206. /*rtl:ignore*/
  207. .ui.modal .content > .description {
  208. display: block;
  209. width: 100% !important;
  210. margin: 0em !important;
  211. padding: 1rem 0rem !important;
  212. box-shadow: none;
  213. }
  214. .ui.modal > .actions {
  215. padding: 1rem 1rem -1rem !important;
  216. }
  217. .ui.modal .actions > .buttons,
  218. .ui.modal .actions > .button {
  219. margin-bottom: 2rem;
  220. }
  221. }
  222. /*******************************
  223. Types
  224. *******************************/
  225. .ui.basic.modal {
  226. background-color: transparent;
  227. border: none;
  228. box-shadow: 0px 0px 0px 0px;
  229. color: #ffffff;
  230. }
  231. .ui.basic.modal > .header,
  232. .ui.basic.modal > .content,
  233. .ui.basic.modal > .actions {
  234. background-color: transparent;
  235. }
  236. .ui.basic.modal > .header {
  237. color: #ffffff;
  238. }
  239. .ui.basic.modal > .close {
  240. top: 1rem;
  241. right: 1.5rem;
  242. }
  243. /* Tablet and Mobile */
  244. @media only screen and (max-width: 992px) {
  245. .ui.basic.modal > .close {
  246. color: #ffffff;
  247. }
  248. }
  249. /*******************************
  250. Variations
  251. *******************************/
  252. /* A modal that cannot fit on the page */
  253. .scrolling.dimmable.dimmed {
  254. overflow: hidden;
  255. }
  256. .scrolling.dimmable.dimmed > .dimmer {
  257. overflow: auto;
  258. -webkit-overflow-scrolling: touch;
  259. }
  260. .scrolling.dimmable > .dimmer {
  261. position: fixed;
  262. }
  263. .ui.scrolling.modal {
  264. position: static;
  265. margin: 3.5rem auto !important;
  266. }
  267. @media only screen and (max-width: 992px) {
  268. .ui.scrolling.modal {
  269. margin-top: 1rem;
  270. margin-bottom: 1rem;
  271. }
  272. }
  273. /*******************************
  274. States
  275. *******************************/
  276. .ui.active.modal {
  277. display: block;
  278. }
  279. /*******************************
  280. Variations
  281. *******************************/
  282. /*--------------
  283. Full Screen
  284. ---------------*/
  285. .ui.fullscreen.modal {
  286. width: 95% !important;
  287. left: 2.5% !important;
  288. margin: 1em auto;
  289. }
  290. .ui.fullscreen.scrolling.modal {
  291. left: 0em !important;
  292. }
  293. .ui.fullscreen.modal > .header {
  294. padding-right: 2.25rem;
  295. }
  296. .ui.fullscreen.modal > .close {
  297. top: 0.905rem;
  298. right: 1rem;
  299. color: rgba(0, 0, 0, 0.8);
  300. }
  301. @media only screen and (max-width: 767px) {
  302. .ui.fullscreen.modal {
  303. width: auto !important;
  304. margin: 1em !important;
  305. }
  306. }
  307. /*--------------
  308. Size
  309. ---------------*/
  310. .ui.modal {
  311. font-size: 1rem;
  312. }
  313. /* Small */
  314. .ui.small.modal > .header {
  315. font-size: 1.3em;
  316. }
  317. /* Small Modal Width */
  318. @media only screen and (max-width: 767px) {
  319. .ui.small.modal {
  320. width: 95%;
  321. margin: 0em 0em 0em -47.5%;
  322. }
  323. }
  324. @media only screen and (min-width: 768px) {
  325. .ui.small.modal {
  326. width: 52.8%;
  327. margin: 0em 0em 0em -26.4%;
  328. }
  329. }
  330. @media only screen and (min-width: 992px) {
  331. .ui.small.modal {
  332. width: 44.4%;
  333. margin: 0em 0em 0em -22.2%;
  334. }
  335. }
  336. @media only screen and (min-width: 1400px) {
  337. .ui.small.modal {
  338. width: 33.6%;
  339. margin: 0em 0em 0em -16.8%;
  340. }
  341. }
  342. @media only screen and (min-width: 1920px) {
  343. .ui.small.modal {
  344. width: 25.2%;
  345. margin: 0em 0em 0em -12.6%;
  346. }
  347. }
  348. /* Large Modal Width */
  349. .ui.large.modal > .header {
  350. font-size: 1.6em;
  351. }
  352. @media only screen and (max-width: 767px) {
  353. .ui.large.modal {
  354. width: 95%;
  355. margin: 0em 0em 0em -47.5%;
  356. }
  357. }
  358. @media only screen and (min-width: 768px) {
  359. .ui.large.modal {
  360. width: 88%;
  361. margin: 0em 0em 0em -44%;
  362. }
  363. }
  364. @media only screen and (min-width: 992px) {
  365. .ui.large.modal {
  366. width: 88.8%;
  367. margin: 0em 0em 0em -44.4%;
  368. }
  369. }
  370. @media only screen and (min-width: 1400px) {
  371. .ui.large.modal {
  372. width: 67.2%;
  373. margin: 0em 0em 0em -33.6%;
  374. }
  375. }
  376. @media only screen and (min-width: 1920px) {
  377. .ui.large.modal {
  378. width: 50.4%;
  379. margin: 0em 0em 0em -25.2%;
  380. }
  381. }
  382. /*******************************
  383. Theme Overrides
  384. *******************************/
  385. /*******************************
  386. Site Overrides
  387. *******************************/