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.

245 lines
4.9 KiB

  1. /*
  2. * # Semantic - Message
  3. * http://github.com/semantic-org/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. font-size: 1.1em;
  43. font-weight: bold;
  44. }
  45. /* block with paragraphs */
  46. .ui.message p {
  47. opacity: 0.85;
  48. margin: 1em 0em;
  49. }
  50. .ui.message p:first-child {
  51. margin-top: 0em;
  52. }
  53. .ui.message p:last-child {
  54. margin-bottom: 0em;
  55. }
  56. .ui.message .header + p {
  57. margin-top: 0.3em;
  58. }
  59. .ui.message > :first-child {
  60. margin-top: 0em;
  61. }
  62. .ui.message > :last-child {
  63. margin-bottom: 0em;
  64. }
  65. /* block with child list */
  66. .ui.message ul.list {
  67. opacity: 0.85;
  68. list-style-position: inside;
  69. margin: 0.2em 0em;
  70. padding: 0em;
  71. }
  72. .ui.message ul.list li {
  73. position: relative;
  74. list-style-type: none;
  75. margin: 0em 0em 0.3em 1em;
  76. padding: 0em;
  77. }
  78. .ui.message ul.list li:before {
  79. position: absolute;
  80. content: '\2022';
  81. top: -0.05em;
  82. left: -0.8em;
  83. height: 100%;
  84. vertical-align: baseline;
  85. opacity: 0.5;
  86. }
  87. .ui.message ul.list li:first-child {
  88. margin-top: 0em;
  89. }
  90. /* dismissable block */
  91. .ui.message > .close.icon {
  92. cursor: pointer;
  93. position: absolute;
  94. top: 1em;
  95. right: 0.5em;
  96. opacity: 0.7;
  97. -webkit-transition: opacity 0.1s linear
  98. ;
  99. transition: opacity 0.1s linear
  100. ;
  101. }
  102. .ui.message > .close.icon:hover {
  103. opacity: 1;
  104. }
  105. /*******************************
  106. States
  107. *******************************/
  108. .ui.message.visible,
  109. .ui.header.visible {
  110. display: block !important;
  111. }
  112. .ui.message.hidden,
  113. .ui.header.hidden {
  114. display: none;
  115. }
  116. /*******************************
  117. Variations
  118. *******************************/
  119. /*--------------
  120. Compact
  121. ---------------*/
  122. .ui.compact.message {
  123. display: inline-block;
  124. }
  125. /*--------------
  126. Attached
  127. ---------------*/
  128. .ui.attached.message {
  129. margin-left: -1px;
  130. margin-right: -1px;
  131. margin-bottom: -1px;
  132. border-radius: 0.325em 0.325em 0em 0em;
  133. -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  134. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset;
  135. }
  136. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  137. margin-top: -1px;
  138. border-radius: 0em;
  139. }
  140. .ui.bottom.attached.message {
  141. margin-top: -1px;
  142. border-radius: 0em 0em 0.325em 0.325em;
  143. }
  144. .ui.bottom.attached.message:not(:last-child) {
  145. margin-bottom: 1em;
  146. }
  147. .ui.attached.icon.message {
  148. display: block;
  149. width: auto;
  150. }
  151. /*--------------
  152. Icon
  153. ---------------*/
  154. .ui.icon.message {
  155. display: table;
  156. width: 100%;
  157. }
  158. .ui.icon.message > .icon:not(.close) {
  159. display: table-cell;
  160. vertical-align: middle;
  161. font-size: 3.8em;
  162. opacity: 0.5;
  163. }
  164. .ui.icon.message > .icon + .content {
  165. padding-left: 1em;
  166. }
  167. .ui.icon.message > .content {
  168. display: table-cell;
  169. vertical-align: middle;
  170. }
  171. /*--------------
  172. Inverted
  173. ---------------*/
  174. .ui.inverted.message {
  175. background-color: rgba(255, 255, 255, 0.05);
  176. color: rgba(255, 255, 255, 0.95);
  177. }
  178. /*--------------
  179. Floating
  180. ---------------*/
  181. .ui.floating.message {
  182. -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  183. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 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: #352F00;
  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. }