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.

297 lines
4.8 KiB

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