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.

288 lines
4.9 KiB

9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
9 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
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 1.11.5 - Image
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Image
  13. *******************************/
  14. .ui.image {
  15. position: relative;
  16. display: inline-block;
  17. vertical-align: middle;
  18. max-width: 100%;
  19. background-color: transparent;
  20. }
  21. img.ui.image {
  22. display: block;
  23. }
  24. .ui.image svg,
  25. .ui.image img {
  26. display: block;
  27. max-width: 100%;
  28. height: auto;
  29. }
  30. /*******************************
  31. States
  32. *******************************/
  33. .ui.hidden.images,
  34. .ui.hidden.image {
  35. display: none;
  36. }
  37. .ui.disabled.images,
  38. .ui.disabled.image {
  39. cursor: default;
  40. opacity: 0.3;
  41. }
  42. /*******************************
  43. Variations
  44. *******************************/
  45. /*--------------
  46. Inline
  47. ---------------*/
  48. .ui.inline.image,
  49. .ui.inline.image svg,
  50. .ui.inline.image img {
  51. display: inline-block;
  52. }
  53. /*------------------
  54. Vertical Aligned
  55. -------------------*/
  56. .ui.top.aligned.images .image,
  57. .ui.top.aligned.image,
  58. .ui.top.aligned.image svg,
  59. .ui.top.aligned.image img {
  60. display: inline-block;
  61. vertical-align: top;
  62. }
  63. .ui.middle.aligned.images .image,
  64. .ui.middle.aligned.image,
  65. .ui.middle.aligned.image svg,
  66. .ui.middle.aligned.image img {
  67. display: inline-block;
  68. vertical-align: middle;
  69. }
  70. .ui.bottom.aligned.images .image,
  71. .ui.bottom.aligned.image,
  72. .ui.bottom.aligned.image svg,
  73. .ui.bottom.aligned.image img {
  74. display: inline-block;
  75. vertical-align: bottom;
  76. }
  77. /*--------------
  78. Rounded
  79. ---------------*/
  80. .ui.rounded.images .image,
  81. .ui.rounded.images img,
  82. .ui.rounded.images svg,
  83. .ui.rounded.image img,
  84. .ui.rounded.image svg,
  85. .ui.rounded.image {
  86. border-radius: 0.3125em;
  87. }
  88. /*--------------
  89. Bordered
  90. ---------------*/
  91. .ui.bordered.images .image,
  92. .ui.bordered.images img,
  93. .ui.bordered.images svg,
  94. .ui.bordered.image img,
  95. .ui.bordered.image svg,
  96. img.ui.bordered.image {
  97. border: 1px solid rgba(0, 0, 0, 0.1);
  98. }
  99. /*--------------
  100. Circular
  101. ---------------*/
  102. .ui.circular.images,
  103. .ui.circular.image {
  104. overflow: hidden;
  105. }
  106. .ui.circular.images .image,
  107. .ui.circular.images img,
  108. .ui.circular.images svg,
  109. .ui.circular.image img,
  110. .ui.circular.image svg,
  111. .ui.circular.image {
  112. border-radius: 500rem;
  113. }
  114. /*--------------
  115. Fluid
  116. ---------------*/
  117. .ui.fluid.images,
  118. .ui.fluid.image,
  119. .ui.fluid.images img,
  120. .ui.fluid.images svg,
  121. .ui.fluid.image svg,
  122. .ui.fluid.image img {
  123. display: block;
  124. width: 100%;
  125. height: auto;
  126. }
  127. /*--------------
  128. Avatar
  129. ---------------*/
  130. .ui.avatar.images .image,
  131. .ui.avatar.images img,
  132. .ui.avatar.images svg,
  133. .ui.avatar.image img,
  134. .ui.avatar.image svg,
  135. .ui.avatar.image {
  136. margin-right: 0.25em;
  137. display: inline-block;
  138. width: 2.5em;
  139. height: 2.5em;
  140. border-radius: 500rem;
  141. }
  142. /*-------------------
  143. Floated
  144. --------------------*/
  145. .ui.floated.image,
  146. .ui.floated.images {
  147. float: left;
  148. margin-right: 1em;
  149. margin-bottom: 1em;
  150. }
  151. .ui.right.floated.images,
  152. .ui.right.floated.image {
  153. float: right;
  154. margin-right: 0em;
  155. margin-bottom: 1em;
  156. margin-left: 1em;
  157. }
  158. .ui.floated.images:last-child,
  159. .ui.floated.image:last-child {
  160. margin-bottom: 0em;
  161. }
  162. .ui.centered.images,
  163. .ui.centered.image {
  164. margin-left: auto;
  165. margin-right: auto;
  166. }
  167. /*--------------
  168. Sizes
  169. ---------------*/
  170. .ui.mini.images .image,
  171. .ui.mini.images img,
  172. .ui.mini.images svg,
  173. .ui.mini.image {
  174. width: 35px;
  175. height: auto;
  176. font-size: 0.71428571rem;
  177. }
  178. .ui.tiny.images .image,
  179. .ui.tiny.images img,
  180. .ui.tiny.images svg,
  181. .ui.tiny.image {
  182. width: 80px;
  183. height: auto;
  184. font-size: 0.85714286rem;
  185. }
  186. .ui.small.images .image,
  187. .ui.small.images img,
  188. .ui.small.images svg,
  189. .ui.small.image {
  190. width: 150px;
  191. height: auto;
  192. font-size: 0.92857143rem;
  193. }
  194. .ui.medium.images .image,
  195. .ui.medium.images img,
  196. .ui.medium.images svg,
  197. .ui.medium.image {
  198. width: 300px;
  199. height: auto;
  200. font-size: 1rem;
  201. }
  202. .ui.large.images .image,
  203. .ui.large.images img,
  204. .ui.large.images svg,
  205. .ui.large.image {
  206. width: 450px;
  207. height: auto;
  208. font-size: 1.14285714rem;
  209. }
  210. .ui.big.images .image,
  211. .ui.big.images img,
  212. .ui.big.images svg,
  213. .ui.big.image {
  214. width: 600px;
  215. height: auto;
  216. font-size: 1.28571429rem;
  217. }
  218. .ui.huge.images .image,
  219. .ui.huge.images img,
  220. .ui.huge.images svg,
  221. .ui.huge.image {
  222. width: 800px;
  223. height: auto;
  224. font-size: 1.42857143rem;
  225. }
  226. .ui.massive.images .image,
  227. .ui.massive.images img,
  228. .ui.massive.images svg,
  229. .ui.massive.image {
  230. width: 960px;
  231. height: auto;
  232. font-size: 1.71428571rem;
  233. }
  234. /*******************************
  235. Groups
  236. *******************************/
  237. .ui.images {
  238. font-size: 0em;
  239. margin: 0em -0.25rem 0rem;
  240. }
  241. .ui.images .image,
  242. .ui.images img,
  243. .ui.images svg {
  244. display: inline-block;
  245. margin: 0em 0.25rem 0.5rem;
  246. }
  247. /*******************************
  248. Theme Overrides
  249. *******************************/
  250. /*******************************
  251. Site Overrides
  252. *******************************/