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
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
  1. /*
  2. * # Semantic UI
  3. * git://github.com/Semantic-Org/Semantic-UI.git#1.0
  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.7142rem;
  155. }
  156. .ui.tiny.images .image,
  157. .ui.tiny.images img,
  158. .ui.tiny.image {
  159. width: 80px;
  160. font-size: 0.8571rem;
  161. }
  162. .ui.small.images .image,
  163. .ui.small.images img,
  164. .ui.small.image {
  165. width: 150px;
  166. font-size: 0.9285rem;
  167. }
  168. .ui.medium.images .image,
  169. .ui.medium.images img,
  170. .ui.medium.image {
  171. width: 300px;
  172. font-size: 1rem;
  173. }
  174. .ui.large.images .image,
  175. .ui.large.images img,
  176. .ui.large.image {
  177. width: 450px;
  178. font-size: 1.1428rem;
  179. }
  180. .ui.big.images .image,
  181. .ui.big.images img,
  182. .ui.big.image {
  183. width: 600px;
  184. font-size: 1.2857rem;
  185. }
  186. .ui.huge.images .image,
  187. .ui.huge.images img,
  188. .ui.huge.image {
  189. width: 800px;
  190. font-size: 1.4285rem;
  191. }
  192. .ui.massive.images .image,
  193. .ui.massive.images img,
  194. .ui.massive.image {
  195. width: 960px;
  196. font-size: 1.7142rem;
  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. *******************************/