image.css 5.2 KB

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