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.

215 lines
3.5 KiB

  1. .ui.message {
  2. position: relative;
  3. min-height: 18px;
  4. margin: 1em 0;
  5. height: auto;
  6. background-color: #EFEFEF;
  7. padding: 1em;
  8. line-height: 1.33;
  9. color: rgba(0,0,0,.6);
  10. -webkit-transition: opacity .1s ease,color .1s ease,background .1s ease,-webkit-box-shadow .1s ease;
  11. transition: opacity .1s ease,color .1s ease,background .1s ease,box-shadow .1s ease;
  12. -webkit-box-sizing: border-box;
  13. -moz-box-sizing: border-box;
  14. -ms-box-sizing: border-box;
  15. box-sizing: border-box;
  16. border-radius: .325em;
  17. }
  18. .ui.message:first-child {
  19. margin-top: 0;
  20. }
  21. .ui.message:last-child {
  22. margin-bottom: 0;
  23. }
  24. .ui.message .header {
  25. margin: 0;
  26. font-size: 1.33em;
  27. font-weight: 700;
  28. }
  29. .ui.message p {
  30. opacity: .85;
  31. margin: 1em 0;
  32. }
  33. .ui.message p:first-child {
  34. margin-top: 0;
  35. }
  36. .ui.message p:last-child {
  37. margin-bottom: 0;
  38. }
  39. .ui.message .header+p {
  40. margin-top: .3em;
  41. }
  42. .ui.message>:first-child {
  43. margin-top: 0;
  44. }
  45. .ui.message>:last-child {
  46. margin-bottom: 0;
  47. }
  48. .ui.message ul.list {
  49. opacity: .85;
  50. list-style-position: inside;
  51. margin: .2em 0;
  52. padding: 0;
  53. }
  54. .ui.message ul.list li {
  55. position: relative;
  56. list-style-type: none;
  57. margin: 0 1em .3em 0;
  58. padding: 0;
  59. }
  60. .ui.message ul.list li:before {
  61. position: absolute;
  62. content: '\2022';
  63. top: -.05em;
  64. right: -.8em;
  65. height: 100%;
  66. vertical-align: baseline;
  67. opacity: .5;
  68. }
  69. .ui.message ul.list li:first-child {
  70. margin-top: 0;
  71. }
  72. .ui.message>.close.icon {
  73. cursor: pointer;
  74. position: absolute;
  75. top: 1em;
  76. left: .5em;
  77. opacity: .7;
  78. -webkit-transition: opacity .1s linear;
  79. transition: opacity .1s linear;
  80. }
  81. .ui.message>.close.icon:hover {
  82. opacity: 1;
  83. }
  84. .ui.message.visible,
  85. .ui.header.visible {
  86. display: block!important;
  87. }
  88. .ui.message.hidden,
  89. .ui.header.hidden {
  90. display: none;
  91. }
  92. .ui.compact.message {
  93. display: inline-block;
  94. }
  95. .ui.attached.message {
  96. margin-right: -1px;
  97. margin-left: -1px;
  98. margin-bottom: -1px;
  99. border-radius: .325em .325em 0 0;
  100. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  101. box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
  102. }
  103. .ui.bottom.attached.message {
  104. margin-top: -1px;
  105. border-radius: 0 0 .325em .325em;
  106. }
  107. .ui.icon.message {
  108. display: table;
  109. width: 100%;
  110. }
  111. .ui.icon.message>.icon {
  112. display: table-cell;
  113. vertical-align: middle;
  114. font-size: 3.8em;
  115. opacity: .5;
  116. }
  117. .ui.icon.message>.icon+.content {
  118. padding-right: 1em;
  119. }
  120. .ui.icon.message>.content {
  121. display: table-cell;
  122. vertical-align: middle;
  123. }
  124. .ui.inverted.message {
  125. background-color: rgba(255,255,255,.05);
  126. color: rgba(255,255,255,.95);
  127. }
  128. .ui.floating.message {
  129. -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset;
  130. box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.05) inset;
  131. }
  132. .ui.black.message {
  133. background-color: #333;
  134. color: rgba(255,255,255,.95);
  135. }
  136. .ui.blue.message,
  137. .ui.info.message {
  138. background-color: #E6F4F9;
  139. color: #4D8796;
  140. }
  141. .ui.green.message {
  142. background-color: #DEFCD5;
  143. color: #52A954;
  144. }
  145. .ui.yellow.message,
  146. .ui.warning.message {
  147. background-color: #F6F3D5;
  148. color: #96904D;
  149. }
  150. .ui.red.message {
  151. background-color: #F1D7D7;
  152. color: #A95252;
  153. }
  154. .ui.success.message,
  155. .ui.positive.message {
  156. background-color: #DEFCD5;
  157. color: #52A954;
  158. }
  159. .ui.error.message,
  160. .ui.negative.message {
  161. background-color: #F1D7D7;
  162. color: #A95252;
  163. }
  164. .ui.small.message {
  165. font-size: .875em;
  166. }
  167. .ui.message {
  168. font-size: 1em;
  169. }
  170. .ui.large.message {
  171. font-size: 1.125em;
  172. }
  173. .ui.huge.message {
  174. font-size: 1.5em;
  175. }
  176. .ui.massive.message {
  177. font-size: 2em;
  178. }