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.

305 lines
4.8 KiB

11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Message
  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. Message
  13. *******************************/
  14. .ui.message {
  15. position: relative;
  16. min-height: 18px;
  17. margin: 1em 0em;
  18. height: auto;
  19. background-color: #EFEFEF;
  20. padding: 1em;
  21. line-height: 1.33;
  22. color: rgba(0, 0, 0, 0.6);
  23. -webkit-transition: opacity 0.1s ease,
  24. color 0.1s ease,
  25. background 0.1s ease,
  26. -webkit-box-shadow 0.1s ease;
  27. transition: opacity 0.1s ease,
  28. color 0.1s ease,
  29. background 0.1s ease,
  30. box-shadow 0.1s ease;
  31. -webkit-box-sizing: border-box;
  32. -moz-box-sizing: border-box;
  33. -ms-box-sizing: border-box;
  34. box-sizing: border-box;
  35. border-radius: 0.325em 0.325em 0.325em 0.325em;
  36. }
  37. .ui.message:first-child {
  38. margin-top: 0em;
  39. }
  40. .ui.message:last-child {
  41. margin-bottom: 0em;
  42. }
  43. /*--------------
  44. Content
  45. ---------------*/
  46. /* block with headers */
  47. .ui.message .header {
  48. margin: 0em;
  49. font-size: 1.33em;
  50. font-weight: bold;
  51. }
  52. /* block with paragraphs */
  53. .ui.message p {
  54. opacity: 0.85;
  55. margin: 1em 0em;
  56. }
  57. .ui.message p:first-child {
  58. margin-top: 0em;
  59. }
  60. .ui.message p:last-child {
  61. margin-bottom: 0em;
  62. }
  63. .ui.message .header + p {
  64. margin-top: 0.3em;
  65. }
  66. .ui.message > :first-child {
  67. margin-top: 0em;
  68. }
  69. .ui.message > :last-child {
  70. margin-bottom: 0em;
  71. }
  72. /* block with child list */
  73. .ui.message ul.list {
  74. opacity: 0.85;
  75. list-style-position: inside;
  76. margin: 0.2em 0em;
  77. padding: 0em;
  78. }
  79. .ui.message ul.list li {
  80. position: relative;
  81. list-style-type: none;
  82. margin: 0em 1em 0.3em 0em;
  83. padding: 0em;
  84. }
  85. .ui.message ul.list li:before {
  86. position: absolute;
  87. content: '\2022';
  88. top: -0.05em;
  89. right: -0.8em;
  90. height: 100%;
  91. vertical-align: baseline;
  92. opacity: 0.5;
  93. }
  94. .ui.message ul.list li:first-child {
  95. margin-top: 0em;
  96. }
  97. /* dismissable block */
  98. .ui.message > .close.icon {
  99. cursor: pointer;
  100. position: absolute;
  101. top: 1em;
  102. left: 0.5em;
  103. opacity: 0.7;
  104. -webkit-transition: opacity 0.1s linear;
  105. transition: opacity 0.1s linear;
  106. }
  107. .ui.message > .close.icon:hover {
  108. opacity: 1;
  109. }
  110. /*******************************
  111. States
  112. *******************************/
  113. .ui.message.visible,
  114. .ui.header.visible {
  115. display: block !important;
  116. }
  117. .ui.message.hidden,
  118. .ui.header.hidden {
  119. display: none;
  120. }
  121. /*******************************
  122. Variations
  123. *******************************/
  124. /*--------------
  125. Compact
  126. ---------------*/
  127. .ui.compact.message {
  128. display: inline-block;
  129. }
  130. /*--------------
  131. Attached
  132. ---------------*/
  133. .ui.attached.message {
  134. margin-right: -1px;
  135. margin-left: -1px;
  136. margin-bottom: -1px;
  137. border-radius: 0.325em 0.325em 0em 0em;
  138. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  139. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  140. }
  141. .ui.bottom.attached.message {
  142. margin-top: -1px;
  143. border-radius: 0em 0em 0.325em 0.325em;
  144. }
  145. .ui.attached.icon.message {
  146. display: block;
  147. width: auto;
  148. }
  149. /*--------------
  150. Icon
  151. ---------------*/
  152. .ui.icon.message {
  153. display: table;
  154. width: 100%;
  155. }
  156. .ui.icon.message > .icon:not(.close) {
  157. display: table-cell;
  158. vertical-align: middle;
  159. font-size: 3.8em;
  160. opacity: 0.5;
  161. }
  162. .ui.icon.message > .icon + .content {
  163. padding-right: 1em;
  164. }
  165. .ui.icon.message > .content {
  166. display: table-cell;
  167. vertical-align: middle;
  168. }
  169. /*--------------
  170. Inverted
  171. ---------------*/
  172. .ui.inverted.message {
  173. background-color: rgba(255, 255, 255, 0.05);
  174. color: rgba(255, 255, 255, 0.95);
  175. }
  176. /*--------------
  177. Floating
  178. ---------------*/
  179. .ui.floating.message {
  180. -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
  181. 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  182. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
  183. 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  184. }
  185. /*--------------
  186. Colors
  187. ---------------*/
  188. .ui.black.message {
  189. background-color: #333333;
  190. color: rgba(255, 255, 255, 0.95);
  191. }
  192. /*--------------
  193. Types
  194. ---------------*/
  195. .ui.blue.message,
  196. .ui.info.message {
  197. background-color: #E6F4F9;
  198. color: #4D8796;
  199. }
  200. /* Green Text Block */
  201. .ui.green.message {
  202. background-color: #DEFCD5;
  203. color: #52A954;
  204. }
  205. /* Yellow Text Block */
  206. .ui.yellow.message,
  207. .ui.warning.message {
  208. background-color: #F6F3D5;
  209. color: #96904D;
  210. }
  211. /* Red Text Block */
  212. .ui.red.message {
  213. background-color: #F1D7D7;
  214. color: #A95252;
  215. }
  216. /* Success Text Block */
  217. .ui.success.message,
  218. .ui.positive.message {
  219. background-color: #DEFCD5;
  220. color: #52A954;
  221. }
  222. /* Error Text Block */
  223. .ui.error.message,
  224. .ui.negative.message {
  225. background-color: #F1D7D7;
  226. color: #A95252;
  227. }
  228. /*--------------
  229. Sizes
  230. ---------------*/
  231. .ui.small.message {
  232. font-size: 0.875em;
  233. }
  234. .ui.message {
  235. font-size: 1em;
  236. }
  237. .ui.large.message {
  238. font-size: 1.125em;
  239. }
  240. .ui.huge.message {
  241. font-size: 1.5em;
  242. }
  243. .ui.massive.message {
  244. font-size: 2em;
  245. }