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.

293 lines
4.9 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Modal
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 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. right: 50%;
  20. text-align: right;
  21. width: 90%;
  22. margin-right: -45%;
  23. background-color: #FFFFFF;
  24. border: 1px solid #DDDDDD;
  25. -webkit-border-radius: 5px;
  26. -moz-border-radius: 5px;
  27. border-radius: 5px;
  28. -webkit-user-select: text;
  29. -moz-user-select: text;
  30. -ms-user-select: text;
  31. user-select: text;
  32. }
  33. /*******************************
  34. Content
  35. *******************************/
  36. /*--------------
  37. Close
  38. ---------------*/
  39. .ui.modal > .close {
  40. cursor: pointer;
  41. position: absolute;
  42. opacity: 0.8;
  43. font-size: 1.25em;
  44. top: -1.75em;
  45. left: -1.75em;
  46. color: #FFFFFF;
  47. }
  48. .ui.modal > .close:hover {
  49. opacity: 1;
  50. }
  51. /*--------------
  52. Header
  53. ---------------*/
  54. .ui.modal > .header {
  55. margin: 0em;
  56. padding: 1.5rem 2rem;
  57. font-size: 1.6em;
  58. font-weight: bold;
  59. -webkit-border-radius: 0.325em 0.325em 0px 0px;
  60. -moz-border-radius: 0.325em 0.325em 0px 0px;
  61. border-radius: 0.325em 0.325em 0px 0px;
  62. }
  63. /*--------------
  64. Content
  65. ---------------*/
  66. .ui.modal > .content {
  67. display: table;
  68. width: 100%;
  69. position: relative;
  70. padding: 2em;
  71. background-color: #F4F4F4;
  72. -webkit-box-sizing: border-box;
  73. -moz-box-sizing: border-box;
  74. -ms-box-sizing: border-box;
  75. box-sizing: border-box;
  76. }
  77. .ui.modal > .content > .right:not(.ui) {
  78. display: table-cell;
  79. padding-left: 1.5%;
  80. min-width: 25%;
  81. }
  82. .ui.modal > .content > .left:not(.ui) {
  83. display: table-cell;
  84. padding-right: 1.5%;
  85. vertical-align: top;
  86. }
  87. .ui.modal > .content > .right:not(.ui) > i.icon {
  88. font-size: 8em;
  89. margin: 0em;
  90. }
  91. .ui.modal > .content p {
  92. line-height: 1.6;
  93. }
  94. /*--------------
  95. Actions
  96. ---------------*/
  97. .ui.modal .actions {
  98. padding: 1rem 2rem;
  99. text-align: left;
  100. }
  101. .ui.modal .actions > .button {
  102. margin-right: 0.75em;
  103. }
  104. /*-------------------
  105. Sizing
  106. --------------------*/
  107. /* Mobile Only */
  108. @media only screen and (max-width : 768px) {
  109. .ui.modal .content > .right:not(.ui) {
  110. display: block;
  111. padding: 0em 0em 1em;
  112. }
  113. .ui.modal .content > .left:not(.ui) {
  114. display: block;
  115. padding: 1em 0em 0em;
  116. -webkit-box-shadow: none;
  117. -moz-box-shadow: none;
  118. box-shadow: none;
  119. }
  120. .ui.modal .content .image {
  121. width: auto !important;
  122. max-width: 100%;
  123. }
  124. .ui.modal .actions {
  125. padding-bottom: 0em
  126. }
  127. .ui.modal .actions > .buttons,
  128. .ui.modal .actions > .button {
  129. margin-bottom: 1em;
  130. }
  131. }
  132. /* Tablet and Mobile */
  133. @media only screen and (max-width : 998px) {
  134. .ui.modal {
  135. width: 92%;
  136. margin-right: -46%;
  137. }
  138. .ui.modal > .close {
  139. color: rgba(0, 0, 0, 0.8);
  140. top: 1.5rem;
  141. left: 1rem;
  142. }
  143. }
  144. /* Computer / Responsive */
  145. @media only screen and (min-width : 998px) {
  146. .ui.modal {
  147. width: 74%;
  148. margin-right: -37%;
  149. }
  150. }
  151. @media only screen and (min-width : 1500px) {
  152. .ui.modal {
  153. width: 56%;
  154. margin-right: -28%;
  155. }
  156. }
  157. @media only screen and (min-width : 1750px) {
  158. .ui.modal {
  159. width: 42%;
  160. margin-right: -21%;
  161. }
  162. }
  163. @media only screen and (min-width : 2000px) {
  164. .ui.modal {
  165. width: 36%;
  166. margin-right: -18%;
  167. }
  168. }
  169. /*******************************
  170. Types
  171. *******************************/
  172. .ui.basic.modal {
  173. background-color: transparent;
  174. border: none;
  175. color: #FFFFFF;
  176. }
  177. .ui.basic.modal > .close {
  178. top: 1.5rem;
  179. left: 1rem;
  180. }
  181. .ui.basic.modal .content {
  182. background-color: transparent;
  183. }
  184. /*******************************
  185. Variations
  186. *******************************/
  187. /* A modal that cannot fit on the page */
  188. .ui.modal.scrolling {
  189. position: absolute;
  190. margin-top: 10px;
  191. }
  192. /*******************************
  193. States
  194. *******************************/
  195. .ui.active.modal {
  196. display: block;
  197. }
  198. /*--------------
  199. Size
  200. ---------------*/
  201. /* Small */
  202. .ui.small.modal > .header {
  203. font-size: 1.3em;
  204. }
  205. @media only screen and (min-width : 998px) {
  206. .ui.small.modal {
  207. width: 58%;
  208. margin-right: -29%;
  209. }
  210. }
  211. @media only screen and (min-width : 1500px) {
  212. .ui.small.modal {
  213. width: 40%;
  214. margin-right: -20%;
  215. }
  216. }
  217. @media only screen and (min-width : 1750px) {
  218. .ui.small.modal {
  219. width: 26%;
  220. margin-right: -13%;
  221. }
  222. }
  223. @media only screen and (min-width : 2000px) {
  224. .ui.small.modal {
  225. width: 20%;
  226. margin-right: -10%;
  227. }
  228. }
  229. /* Large */
  230. @media only screen and (min-width : 998px) {
  231. .ui.large.modal {
  232. width: 74%;
  233. margin-right: -37%;
  234. }
  235. }
  236. @media only screen and (min-width : 1500px) {
  237. .ui.large.modal {
  238. width: 64%;
  239. margin-right: -32%;
  240. }
  241. }
  242. @media only screen and (min-width : 1750px) {
  243. .ui.large.modal {
  244. width: 54%;
  245. margin-right: -27%;
  246. }
  247. }
  248. @media only screen and (min-width : 2000px) {
  249. .ui.large.modal {
  250. width: 44%;
  251. margin-right: -22%;
  252. }
  253. }