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.

252 lines
4.1 KiB

10 years ago
  1. /*
  2. * # Semantic UI
  3. * git://github.com/Semantic-Org/Semantic-UI.git
  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. background: none;
  24. }
  25. .ui.image img {
  26. display: block;
  27. max-width: 100%;
  28. height: auto;
  29. }
  30. /*******************************
  31. States
  32. *******************************/
  33. .ui.disabled.image {
  34. cursor: default;
  35. opacity: 0.3;
  36. }
  37. /*******************************
  38. Variations
  39. *******************************/
  40. /*--------------
  41. Inline
  42. ---------------*/
  43. .ui.inline.image,
  44. .ui.inline.image img {
  45. display: inline-block;
  46. }
  47. /*------------------
  48. Vertical Aligned
  49. -------------------*/
  50. .ui.top.aligned.images .image,
  51. .ui.top.aligned.image,
  52. .ui.top.aligned.image img {
  53. display: inline-block;
  54. vertical-align: top;
  55. }
  56. .ui.middle.aligned.images .image,
  57. .ui.middle.aligned.image,
  58. .ui.middle.aligned.image img {
  59. display: inline-block;
  60. vertical-align: middle;
  61. }
  62. .ui.bottom.aligned.images .image,
  63. .ui.bottom.aligned.image,
  64. .ui.bottom.aligned.image img {
  65. display: inline-block;
  66. vertical-align: bottom;
  67. }
  68. /*--------------
  69. Rounded
  70. ---------------*/
  71. .ui.rounded.images .image,
  72. .ui.rounded.images img,
  73. .ui.rounded.image img,
  74. .ui.rounded.image {
  75. border-radius: 0.3125em;
  76. }
  77. /*--------------
  78. Bordered
  79. ---------------*/
  80. .ui.bordered.images .image,
  81. .ui.bordered.images img,
  82. .ui.bordered.image img,
  83. img.ui.bordered.image {
  84. border: 1px solid rgba(0, 0, 0, 0.1);
  85. }
  86. /*--------------
  87. Circular
  88. ---------------*/
  89. .ui.circular.images,
  90. .ui.circular.image {
  91. overflow: hidden;
  92. }
  93. .ui.circular.images .image,
  94. .ui.circular.images img,
  95. .ui.circular.image img,
  96. .ui.circular.image {
  97. border-radius: 500rem;
  98. }
  99. /*--------------
  100. Fluid
  101. ---------------*/
  102. .ui.fluid.images,
  103. .ui.fluid.image,
  104. .ui.fluid.images img,
  105. .ui.fluid.image img {
  106. display: block;
  107. width: 100%;
  108. }
  109. /*--------------
  110. Avatar
  111. ---------------*/
  112. .ui.avatar.images .image,
  113. .ui.avatar.images img,
  114. .ui.avatar.image img,
  115. .ui.avatar.image {
  116. margin-right: 0.25em;
  117. display: inline-block;
  118. width: 2.5em;
  119. height: 2.5em;
  120. border-radius: 500rem;
  121. }
  122. /*-------------------
  123. Floated
  124. --------------------*/
  125. .ui.floated.image,
  126. .ui.floated.images {
  127. float: left;
  128. margin-right: 1em;
  129. margin-bottom: 1em;
  130. }
  131. .ui.right.floated.images,
  132. .ui.right.floated.image {
  133. float: right;
  134. margin-right: 0em;
  135. margin-bottom: 1em;
  136. margin-left: 1em;
  137. }
  138. .ui.floated.images:last-child,
  139. .ui.floated.image:last-child {
  140. margin-bottom: 0em;
  141. }
  142. .ui.centered.images,
  143. .ui.centered.image {
  144. margin-left: auto;
  145. margin-right: auto;
  146. }
  147. /*--------------
  148. Sizes
  149. ---------------*/
  150. .ui.mini.images .image,
  151. .ui.mini.images img,
  152. .ui.mini.image {
  153. width: 20px;
  154. font-size: 0.7em;
  155. }
  156. .ui.tiny.images .image,
  157. .ui.tiny.images img,
  158. .ui.tiny.image {
  159. width: 80px;
  160. font-size: 0.8em;
  161. }
  162. .ui.small.images .image,
  163. .ui.small.images img,
  164. .ui.small.image {
  165. width: 150px;
  166. font-size: 0.875em;
  167. }
  168. .ui.medium.images .image,
  169. .ui.medium.images img,
  170. .ui.medium.image {
  171. width: 300px;
  172. font-size: 1em;
  173. }
  174. .ui.large.images .image,
  175. .ui.large.images img,
  176. .ui.large.image {
  177. width: 450px;
  178. font-size: 1.125em;
  179. }
  180. .ui.big.images .image,
  181. .ui.big.images img,
  182. .ui.big.image {
  183. width: 600px;
  184. font-size: 1.25em;
  185. }
  186. .ui.huge.images .image,
  187. .ui.huge.images img,
  188. .ui.huge.image {
  189. width: 800px;
  190. font-size: 1.375em;
  191. }
  192. .ui.massive.images .image,
  193. .ui.massive.images img,
  194. .ui.massive.image {
  195. width: 960px;
  196. font-size: 1.5em;
  197. }
  198. /*******************************
  199. Groups
  200. *******************************/
  201. .ui.images {
  202. font-size: 0em;
  203. margin: 0em -0.25rem 0rem;
  204. }
  205. .ui.images .image,
  206. .ui.images img {
  207. display: inline-block;
  208. margin: 0em 0.25rem 0.5rem;
  209. }
  210. /*******************************
  211. Theme Overrides
  212. *******************************/
  213. /*******************************
  214. Site Overrides
  215. *******************************/