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.

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