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.

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