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.

470 lines
8.9 KiB

  1. /*!
  2. * # Semantic UI 2.1.6 - Message
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 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: 1em;
  17. margin: 1em 0em;
  18. background: -webkit-linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE;
  19. background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE;
  20. padding: 15px 15px;
  21. line-height: 1.4285em;
  22. color: rgba(0, 0, 0, 0.87);
  23. -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, 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. border-radius: 0.2307em;
  26. box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  27. }
  28. .ui.message:first-child {
  29. margin-top: 0em;
  30. }
  31. .ui.message:last-child {
  32. margin-bottom: 0em;
  33. }
  34. /*--------------
  35. Content
  36. ---------------*/
  37. /* Header */
  38. .ui.message .header {
  39. display: block;
  40. font-family: 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  41. font-weight: bold;
  42. margin: -0.14285em 0em 0rem 0em;
  43. }
  44. /* Default font size */
  45. .ui.message .header:not(.ui) {
  46. font-size: 1.15em;
  47. }
  48. /* Paragraph */
  49. .ui.message p {
  50. opacity: 0.85;
  51. margin: 0.75em 0em;
  52. }
  53. .ui.message p:first-child {
  54. margin-top: 0em;
  55. }
  56. .ui.message p:last-child {
  57. margin-bottom: 0em;
  58. }
  59. .ui.message .header + p {
  60. margin-top: 0.25em;
  61. }
  62. /* List */
  63. .ui.message .list:not(.ui) {
  64. text-align: left;
  65. padding: 0em;
  66. opacity: 0.85;
  67. list-style-position: inside;
  68. margin: 0.5em 0em 0em;
  69. }
  70. .ui.message .list:not(.ui):first-child {
  71. margin-top: 0em;
  72. }
  73. .ui.message .list:not(.ui):last-child {
  74. margin-bottom: 0em;
  75. }
  76. .ui.message .list:not(.ui) li {
  77. position: relative;
  78. list-style-type: none;
  79. margin: 0em 0em 0.3em 1em;
  80. padding: 0em;
  81. }
  82. .ui.message .list:not(.ui) li:before {
  83. position: absolute;
  84. content: '•';
  85. left: -1em;
  86. height: 100%;
  87. vertical-align: baseline;
  88. }
  89. .ui.message .list:not(.ui) li:last-child {
  90. margin-bottom: 0em;
  91. }
  92. /* Icon */
  93. .ui.message > .icon {
  94. margin-right: 0.6em;
  95. }
  96. /* Close Icon */
  97. .ui.message > .close.icon {
  98. cursor: pointer;
  99. position: absolute;
  100. margin: 0em;
  101. top: 14.78575px;
  102. right: 0.5em;
  103. opacity: 0.7;
  104. -webkit-transition: opacity 0.1s ease;
  105. transition: opacity 0.1s ease;
  106. }
  107. .ui.message > .close.icon:hover {
  108. opacity: 1;
  109. }
  110. /* First / Last Element */
  111. .ui.message > :first-child {
  112. margin-top: 0em;
  113. }
  114. .ui.message > :last-child {
  115. margin-bottom: 0em;
  116. }
  117. /*******************************
  118. Coupling
  119. *******************************/
  120. .ui.dropdown .menu > .message {
  121. margin: 0px -1px;
  122. }
  123. /*******************************
  124. States
  125. *******************************/
  126. /*--------------
  127. Visible
  128. ---------------*/
  129. .ui.visible.visible.visible.visible.message {
  130. display: block;
  131. }
  132. .ui.icon.visible.visible.visible.visible.message {
  133. display: -webkit-box;
  134. display: -webkit-flex;
  135. display: -ms-flexbox;
  136. display: flex;
  137. }
  138. /*--------------
  139. Hidden
  140. ---------------*/
  141. .ui.hidden.hidden.hidden.hidden.message {
  142. display: none;
  143. }
  144. /*******************************
  145. Variations
  146. *******************************/
  147. /*--------------
  148. Compact
  149. ---------------*/
  150. .ui.compact.message {
  151. display: inline-block;
  152. }
  153. /*--------------
  154. Attached
  155. ---------------*/
  156. .ui.attached.message {
  157. margin-bottom: -1px;
  158. border-radius: 0.2307em 0.2307em 0em 0em;
  159. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.13) inset;
  160. margin-left: -1px;
  161. margin-right: -1px;
  162. }
  163. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  164. margin-top: -1px;
  165. border-radius: 0em;
  166. }
  167. .ui.bottom.attached.message {
  168. margin-top: -1px;
  169. border-radius: 0em 0em 0.2307em 0.2307em;
  170. box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.13) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.13);
  171. }
  172. .ui.bottom.attached.message:not(:last-child) {
  173. margin-bottom: 1em;
  174. }
  175. .ui.attached.icon.message {
  176. width: auto;
  177. }
  178. /*--------------
  179. Icon
  180. ---------------*/
  181. .ui.icon.message {
  182. display: -webkit-box;
  183. display: -webkit-flex;
  184. display: -ms-flexbox;
  185. display: flex;
  186. width: 100%;
  187. -webkit-box-align: center;
  188. -webkit-align-items: center;
  189. -ms-flex-align: center;
  190. align-items: center;
  191. }
  192. .ui.icon.message > .icon:not(.close) {
  193. display: block;
  194. -webkit-box-flex: 0;
  195. -webkit-flex: 0 0 auto;
  196. -ms-flex: 0 0 auto;
  197. flex: 0 0 auto;
  198. width: auto;
  199. line-height: 1;
  200. vertical-align: middle;
  201. font-size: 3em;
  202. opacity: 0.8;
  203. }
  204. .ui.icon.message > .content {
  205. display: block;
  206. -webkit-box-flex: 1;
  207. -webkit-flex: 1 1 auto;
  208. -ms-flex: 1 1 auto;
  209. flex: 1 1 auto;
  210. vertical-align: middle;
  211. }
  212. .ui.icon.message .icon:not(.close) + .content {
  213. padding-left: 0rem;
  214. }
  215. .ui.icon.message .circular.icon {
  216. width: 1em;
  217. }
  218. /*--------------
  219. Floating
  220. ---------------*/
  221. .ui.floating.message {
  222. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 2px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset;
  223. }
  224. /*--------------
  225. Colors
  226. ---------------*/
  227. .ui.black.message {
  228. background-color: #333333;
  229. color: rgba(255, 255, 255, 0.9);
  230. }
  231. /*--------------
  232. Types
  233. ---------------*/
  234. /* Positive */
  235. .ui.positive.message {
  236. background-color: #FCFFF5;
  237. color: #2C662D;
  238. }
  239. .ui.positive.message,
  240. .ui.attached.positive.message {
  241. box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  242. }
  243. .ui.positive.message .header {
  244. color: #1A531B;
  245. }
  246. /* Negative */
  247. .ui.negative.message {
  248. background-color: #FFF6F6;
  249. color: #9F3A38;
  250. }
  251. .ui.negative.message,
  252. .ui.attached.negative.message {
  253. box-shadow: 0px 0px 0px 1px #E0B4B4 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  254. }
  255. .ui.negative.message .header {
  256. color: #912D2B;
  257. }
  258. /* Info */
  259. .ui.info.message {
  260. background-color: #E6F1F6;
  261. color: #264C72;
  262. }
  263. .ui.info.message,
  264. .ui.attached.info.message {
  265. box-shadow: 0px 0px 0px 1px #97C1DA inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  266. }
  267. .ui.info.message .header {
  268. color: #0E566C;
  269. }
  270. /* Warning */
  271. .ui.warning.message {
  272. background-color: #FFFAF3;
  273. color: #613A00;
  274. }
  275. .ui.warning.message,
  276. .ui.attached.warning.message {
  277. box-shadow: 0px 0px 0px 1px #DCA874 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  278. }
  279. .ui.warning.message .header {
  280. color: #794B02;
  281. }
  282. /* Error */
  283. .ui.error.message {
  284. background-color: #FFF6F6;
  285. color: #991111;
  286. }
  287. .ui.error.message,
  288. .ui.attached.error.message {
  289. box-shadow: 0px 0px 0px 1px #DA9797 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  290. }
  291. .ui.error.message .header {
  292. color: #912D2B;
  293. }
  294. /* Success */
  295. .ui.success.message {
  296. background-color: #FCFFF5;
  297. color: #2C662D;
  298. }
  299. .ui.success.message,
  300. .ui.attached.success.message {
  301. box-shadow: 0px 0px 0px 1px #A3C293 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  302. }
  303. .ui.success.message .header {
  304. color: #1A531B;
  305. }
  306. /* Colors */
  307. .ui.inverted.message,
  308. .ui.black.message {
  309. background-color: #333333;
  310. color: rgba(255, 255, 255, 0.9);
  311. }
  312. .ui.red.message {
  313. background-color: #FFE8E6;
  314. color: #DB2828;
  315. }
  316. .ui.red.message .header {
  317. color: #c82121;
  318. }
  319. .ui.orange.message {
  320. background-color: #FFEDDE;
  321. color: #D26911;
  322. }
  323. .ui.orange.message .header {
  324. color: #ba5d0f;
  325. }
  326. .ui.yellow.message {
  327. background-color: #FFF8DB;
  328. color: #B58105;
  329. }
  330. .ui.yellow.message .header {
  331. color: #9c6f04;
  332. }
  333. .ui.olive.message {
  334. background-color: #FBFDEF;
  335. color: #8ABC1E;
  336. }
  337. .ui.olive.message .header {
  338. color: #7aa61a;
  339. }
  340. .ui.green.message {
  341. background-color: #E5F9E7;
  342. color: #1EBC30;
  343. }
  344. .ui.green.message .header {
  345. color: #1aa62a;
  346. }
  347. .ui.teal.message {
  348. background-color: #E1F7F7;
  349. color: #10A3A3;
  350. }
  351. .ui.teal.message .header {
  352. color: #0e8c8c;
  353. }
  354. .ui.blue.message {
  355. background-color: #DFF0FF;
  356. color: #80A6CD;
  357. }
  358. .ui.blue.message .header {
  359. color: #6e99c6;
  360. }
  361. .ui.violet.message {
  362. background-color: #EAE7FF;
  363. color: #6435C9;
  364. }
  365. .ui.violet.message .header {
  366. color: #5a30b5;
  367. }
  368. .ui.purple.message {
  369. background-color: #F6E7FF;
  370. color: #A333C8;
  371. }
  372. .ui.purple.message .header {
  373. color: #922eb4;
  374. }
  375. .ui.pink.message {
  376. background-color: #FFE3FB;
  377. color: #E03997;
  378. }
  379. .ui.pink.message .header {
  380. color: #dd238b;
  381. }
  382. .ui.brown.message {
  383. background-color: #F1E2D3;
  384. color: #A5673F;
  385. }
  386. .ui.brown.message .header {
  387. color: #935b38;
  388. }
  389. /*--------------
  390. Sizes
  391. ---------------*/
  392. .ui.small.message {
  393. font-size: 0.92307692em;
  394. }
  395. .ui.message {
  396. font-size: 1em;
  397. }
  398. .ui.large.message {
  399. font-size: 1.15384615em;
  400. }
  401. .ui.huge.message {
  402. font-size: 1.46153846em;
  403. }
  404. .ui.massive.message {
  405. font-size: 1.69230769em;
  406. }
  407. .ui.info.message {
  408. background: -webkit-linear-gradient(#D8EBF8, #D0E3EF);
  409. background: linear-gradient(#D8EBF8, #D0E3EF);
  410. }
  411. .ui.error.message {
  412. background: -webkit-linear-gradient(#F8D8D8, #EFD0D0);
  413. background: linear-gradient(#F8D8D8, #EFD0D0);
  414. }
  415. .ui.warning.message {
  416. background: -webkit-linear-gradient(#FFE3C8, #F5DAC0);
  417. background: linear-gradient(#FFE3C8, #F5DAC0);
  418. }
  419. /*******************************
  420. Site Overrides
  421. *******************************/