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.

338 lines
5.1 KiB

  1. /*
  2. * # Semantic - Image
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Theme
  13. *******************************/
  14. /*-------------------
  15. Theme
  16. --------------------*/
  17. /* To override a theme for an individual element
  18. specify theme name below
  19. */
  20. /* Global */
  21. /* Elements */
  22. /* Collections */
  23. /* Modules */
  24. /* Views */
  25. /* Import */
  26. /*******************************
  27. Global Variables
  28. *******************************/
  29. /*-------------------
  30. Paths
  31. --------------------*/
  32. /*-------------------
  33. Page
  34. --------------------*/
  35. /*-------------------
  36. Fonts
  37. --------------------*/
  38. /*-------------------
  39. Icons
  40. --------------------*/
  41. /* Width of largest icon */
  42. /*******************************
  43. BG Colors
  44. *******************************/
  45. /*******************************
  46. Colors
  47. *******************************/
  48. /*-------------------
  49. Background
  50. --------------------*/
  51. /*--- Colors ---*/
  52. /*--- Emotive ---*/
  53. /*--- Neutrals ---*/
  54. /*-------------------
  55. Text Colors
  56. --------------------*/
  57. /*-------------------
  58. Brand Colors
  59. --------------------*/
  60. /*-------------------
  61. Borders
  62. --------------------*/
  63. /*-------------------
  64. Sizes
  65. --------------------*/
  66. /*-------------------
  67. Transitions
  68. --------------------*/
  69. /*******************************
  70. States
  71. *******************************/
  72. /*-------------------
  73. Disabled
  74. --------------------*/
  75. /*-------------------
  76. Hover
  77. --------------------*/
  78. /*--- Colors ---*/
  79. /*--- Emotive ---*/
  80. /*--- Neutrals ---*/
  81. /*-------------------
  82. Down (:active)
  83. --------------------*/
  84. /*--- Colors ---*/
  85. /*--- Emotive ---*/
  86. /*--- Neutrals ---*/
  87. /*-------------------
  88. Active
  89. --------------------*/
  90. /*--- Standard ---*/
  91. /*--- Emotive ---*/
  92. /*--- Neutrals ---*/
  93. /*******************************
  94. User Global Variables
  95. *******************************/
  96. /*-------------------
  97. Globals Used
  98. --------------------*/
  99. /*
  100. @borderColor
  101. */
  102. /*-------------------
  103. Variables
  104. --------------------*/
  105. /*******************************
  106. User Variable Overrides
  107. *******************************/
  108. /*******************************
  109. Overrides
  110. *******************************/
  111. /*******************************
  112. Overrides
  113. *******************************/
  114. /*******************************
  115. Image
  116. *******************************/
  117. .ui.image {
  118. position: relative;
  119. display: inline-block;
  120. vertical-align: middle;
  121. max-width: 100%;
  122. background-color: rgba(0, 0, 0, 0.05);
  123. }
  124. img.ui.image {
  125. display: block;
  126. background: none;
  127. }
  128. .ui.image img {
  129. display: block;
  130. max-width: 100%;
  131. height: auto;
  132. }
  133. /*******************************
  134. States
  135. *******************************/
  136. .ui.disabled.image {
  137. cursor: default;
  138. opacity: 0.3;
  139. }
  140. /*******************************
  141. Variations
  142. *******************************/
  143. /*--------------
  144. Rounded
  145. ---------------*/
  146. .ui.rounded.images .image,
  147. .ui.rounded.images img,
  148. .ui.rounded.image img,
  149. .ui.rounded.image {
  150. border-radius: 0.3125em;
  151. }
  152. /*--------------
  153. Circular
  154. ---------------*/
  155. .ui.circular.images .image,
  156. .ui.circular.images img,
  157. .ui.circular.image img,
  158. .ui.circular.image {
  159. border-radius: 500rem;
  160. }
  161. /*--------------
  162. Fluid
  163. ---------------*/
  164. .ui.fluid.images,
  165. .ui.fluid.image,
  166. .ui.fluid.images img,
  167. .ui.fluid.image img {
  168. display: block;
  169. width: 100%;
  170. }
  171. /*--------------
  172. Avatar
  173. ---------------*/
  174. .ui.avatar.images .image,
  175. .ui.avatar.images img,
  176. .ui.avatar.image img,
  177. .ui.avatar.image {
  178. margin-right: 0.25rem;
  179. display: inline-block;
  180. width: 2em;
  181. height: 2em;
  182. border-radius: 500rem;
  183. }
  184. /*-------------------
  185. Floated
  186. --------------------*/
  187. .ui.floated.image,
  188. .ui.floated.images {
  189. float: left;
  190. margin-right: 1em;
  191. margin-bottom: 1em;
  192. }
  193. .ui.right.floated.images,
  194. .ui.right.floated.image {
  195. float: right;
  196. margin-bottom: 1em;
  197. margin-left: 1em;
  198. }
  199. /*--------------
  200. Sizes
  201. ---------------*/
  202. .ui.mini.images .image,
  203. .ui.mini.images img,
  204. .ui.mini.image {
  205. width: 20px;
  206. font-size: 0.7em;
  207. }
  208. .ui.tiny.images .image,
  209. .ui.tiny.images img,
  210. .ui.tiny.image {
  211. width: 80px;
  212. font-size: 0.8em;
  213. }
  214. .ui.small.images .image,
  215. .ui.small.images img,
  216. .ui.small.image {
  217. width: 150px;
  218. font-size: 0.875em;
  219. }
  220. .ui.medium.images .image,
  221. .ui.medium.images img,
  222. .ui.medium.image {
  223. width: 300px;
  224. font-size: 1em;
  225. }
  226. .ui.large.images .image,
  227. .ui.large.images img,
  228. .ui.large.image {
  229. width: 450px;
  230. font-size: 1.125em;
  231. }
  232. .ui.big.images .image,
  233. .ui.big.images img,
  234. .ui.big.image {
  235. width: 600px;
  236. font-size: 1.25em;
  237. }
  238. .ui.huge.images .image,
  239. .ui.huge.images img,
  240. .ui.huge.image {
  241. width: 800px;
  242. font-size: 1.375em;
  243. }
  244. .ui.massive.images .image,
  245. .ui.massive.images img,
  246. .ui.massive.image {
  247. width: 960px;
  248. font-size: 1.5em;
  249. }
  250. /*******************************
  251. Groups
  252. *******************************/
  253. .ui.images {
  254. font-size: 0em;
  255. margin: 0em -0.25rem 0rem;
  256. }
  257. .ui.images .image,
  258. .ui.images img {
  259. display: inline-block;
  260. margin: 0em 0.25rem 0.5rem;
  261. }