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.

296 lines
5.0 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Image
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 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.image,
  82. .ui.rounded.images .image > *,
  83. .ui.rounded.image > * {
  84. border-radius: 0.3125em;
  85. }
  86. /*--------------
  87. Bordered
  88. ---------------*/
  89. .ui.bordered.images .image,
  90. .ui.bordered.images img,
  91. .ui.bordered.images svg,
  92. .ui.bordered.image img,
  93. .ui.bordered.image svg,
  94. img.ui.bordered.image {
  95. border: 1px solid rgba(0, 0, 0, 0.1);
  96. }
  97. /*--------------
  98. Circular
  99. ---------------*/
  100. .ui.circular.images,
  101. .ui.circular.image {
  102. overflow: hidden;
  103. }
  104. .ui.circular.images .image,
  105. .ui.circular.image,
  106. .ui.circular.images .image > *,
  107. .ui.circular.image > * {
  108. border-radius: 500rem;
  109. }
  110. /*--------------
  111. Fluid
  112. ---------------*/
  113. .ui.fluid.images,
  114. .ui.fluid.image,
  115. .ui.fluid.images img,
  116. .ui.fluid.images svg,
  117. .ui.fluid.image svg,
  118. .ui.fluid.image img {
  119. display: block;
  120. width: 100%;
  121. height: auto;
  122. }
  123. /*--------------
  124. Avatar
  125. ---------------*/
  126. .ui.avatar.images .image,
  127. .ui.avatar.images img,
  128. .ui.avatar.images svg,
  129. .ui.avatar.image img,
  130. .ui.avatar.image svg,
  131. .ui.avatar.image {
  132. margin-right: 0.25em;
  133. display: inline-block;
  134. width: 2em;
  135. height: 2em;
  136. border-radius: 500rem;
  137. }
  138. /*-------------------
  139. Spaced
  140. --------------------*/
  141. .ui.spaced.image {
  142. display: inline-block !important;
  143. margin-left: 0.5em;
  144. margin-right: 0.5em;
  145. }
  146. .ui[class*="left spaced"].image {
  147. margin-left: 0.5em;
  148. margin-right: 0em;
  149. }
  150. .ui[class*="right spaced"].image {
  151. margin-left: 0em;
  152. margin-right: 0.5em;
  153. }
  154. /*-------------------
  155. Floated
  156. --------------------*/
  157. .ui.floated.image,
  158. .ui.floated.images {
  159. float: left;
  160. margin-right: 1em;
  161. margin-bottom: 1em;
  162. }
  163. .ui.right.floated.images,
  164. .ui.right.floated.image {
  165. float: right;
  166. margin-right: 0em;
  167. margin-bottom: 1em;
  168. margin-left: 1em;
  169. }
  170. .ui.floated.images:last-child,
  171. .ui.floated.image:last-child {
  172. margin-bottom: 0em;
  173. }
  174. .ui.centered.images,
  175. .ui.centered.image {
  176. margin-left: auto;
  177. margin-right: auto;
  178. }
  179. /*--------------
  180. Sizes
  181. ---------------*/
  182. .ui.mini.images .image,
  183. .ui.mini.images img,
  184. .ui.mini.images svg,
  185. .ui.mini.image {
  186. width: 20px;
  187. height: auto;
  188. font-size: 0.69230769rem;
  189. }
  190. .ui.tiny.images .image,
  191. .ui.tiny.images img,
  192. .ui.tiny.images svg,
  193. .ui.tiny.image {
  194. width: 80px;
  195. height: auto;
  196. font-size: 0.84615385rem;
  197. }
  198. .ui.small.images .image,
  199. .ui.small.images img,
  200. .ui.small.images svg,
  201. .ui.small.image {
  202. width: 150px;
  203. height: auto;
  204. font-size: 0.92307692rem;
  205. }
  206. .ui.medium.images .image,
  207. .ui.medium.images img,
  208. .ui.medium.images svg,
  209. .ui.medium.image {
  210. width: 300px;
  211. height: auto;
  212. font-size: 1rem;
  213. }
  214. .ui.large.images .image,
  215. .ui.large.images img,
  216. .ui.large.images svg,
  217. .ui.large.image {
  218. width: 450px;
  219. height: auto;
  220. font-size: 1.15384615rem;
  221. }
  222. .ui.big.images .image,
  223. .ui.big.images img,
  224. .ui.big.images svg,
  225. .ui.big.image {
  226. width: 600px;
  227. height: auto;
  228. font-size: 1.30769231rem;
  229. }
  230. .ui.huge.images .image,
  231. .ui.huge.images img,
  232. .ui.huge.images svg,
  233. .ui.huge.image {
  234. width: 800px;
  235. height: auto;
  236. font-size: 1.46153846rem;
  237. }
  238. .ui.massive.images .image,
  239. .ui.massive.images img,
  240. .ui.massive.images svg,
  241. .ui.massive.image {
  242. width: 960px;
  243. height: auto;
  244. font-size: 1.69230769rem;
  245. }
  246. /*******************************
  247. Groups
  248. *******************************/
  249. .ui.images {
  250. font-size: 0em;
  251. margin: 0em -0.25rem 0rem;
  252. }
  253. .ui.images .image,
  254. .ui.images img,
  255. .ui.images svg {
  256. display: inline-block;
  257. margin: 0em 0.25rem 0.5rem;
  258. }
  259. /*******************************
  260. Site Overrides
  261. *******************************/