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.

232 lines
4.9 KiB

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