message.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643
  1. /*!
  2. * # Fomantic-UI - Message
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Message
  12. *******************************/
  13. .ui.message {
  14. position: relative;
  15. min-height: 1em;
  16. margin: 1em 0;
  17. background: #F8F8F9;
  18. padding: 1em 1.5em;
  19. line-height: 1.4285em;
  20. color: rgba(0, 0, 0, 0.87);
  21. -webkit-transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
  22. transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
  23. 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, -webkit-box-shadow 0.1s ease;
  25. border-radius: 0.28571429rem;
  26. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
  27. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
  28. }
  29. .ui.message:first-child {
  30. margin-top: 0;
  31. }
  32. .ui.message:last-child {
  33. margin-bottom: 0;
  34. }
  35. /*--------------
  36. Content
  37. ---------------*/
  38. /* Header */
  39. .ui.message .header {
  40. display: block;
  41. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  42. font-weight: bold;
  43. margin: -0.14285714em 0 0 0;
  44. }
  45. /* Default font size */
  46. .ui.message .header:not(.ui) {
  47. font-size: 1.14285714em;
  48. }
  49. /* Paragraph */
  50. .ui.message p {
  51. opacity: 0.85;
  52. margin: 0.75em 0;
  53. }
  54. .ui.message p:first-child {
  55. margin-top: 0;
  56. }
  57. .ui.message p:last-child {
  58. margin-bottom: 0;
  59. }
  60. .ui.message .header + p {
  61. margin-top: 0.25em;
  62. }
  63. /* List */
  64. .ui.message .list:not(.ui) {
  65. text-align: left;
  66. padding: 0;
  67. opacity: 0.85;
  68. list-style-position: inside;
  69. margin: 0.5em 0 0;
  70. }
  71. .ui.message .list:not(.ui):first-child {
  72. margin-top: 0;
  73. }
  74. .ui.message .list:not(.ui):last-child {
  75. margin-bottom: 0;
  76. }
  77. .ui.message .list:not(.ui) li {
  78. position: relative;
  79. list-style-type: none;
  80. margin: 0 0 0.3em 1em;
  81. padding: 0;
  82. }
  83. .ui.message .list:not(.ui) li:before {
  84. position: absolute;
  85. content: '•';
  86. left: -1em;
  87. height: 100%;
  88. vertical-align: baseline;
  89. }
  90. .ui.message .list:not(.ui) li:last-child {
  91. margin-bottom: 0;
  92. }
  93. /* Icon */
  94. .ui.message > .icon {
  95. margin-right: 0.6em;
  96. }
  97. /* Close Icon */
  98. .ui.message > .close.icon {
  99. cursor: pointer;
  100. position: absolute;
  101. margin: 0;
  102. top: 0.78575em;
  103. right: 0.5em;
  104. opacity: 0.7;
  105. -webkit-transition: opacity 0.1s ease;
  106. transition: opacity 0.1s ease;
  107. }
  108. .ui.message > .close.icon:hover {
  109. opacity: 1;
  110. }
  111. /* First / Last Element */
  112. .ui.message > :first-child {
  113. margin-top: 0;
  114. }
  115. .ui.message > :last-child {
  116. margin-bottom: 0;
  117. }
  118. /*******************************
  119. Coupling
  120. *******************************/
  121. .ui.dropdown .menu > .message {
  122. margin: 0 -1px;
  123. }
  124. /*******************************
  125. States
  126. *******************************/
  127. /*--------------
  128. Visible
  129. ---------------*/
  130. .ui.visible.visible.visible.visible.message {
  131. display: block;
  132. }
  133. .ui.icon.visible.visible.visible.visible.message {
  134. display: -webkit-box;
  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. .ui.compact.icon.message {
  154. display: -webkit-inline-box;
  155. display: -ms-inline-flexbox;
  156. display: inline-flex;
  157. width: auto;
  158. }
  159. /*--------------
  160. Attached
  161. ---------------*/
  162. .ui.attached.message {
  163. margin-bottom: -1px;
  164. border-radius: 0.28571429rem 0.28571429rem 0 0;
  165. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  166. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  167. margin-left: -1px;
  168. margin-right: -1px;
  169. }
  170. .ui.attached + .ui.attached.message:not(.top):not(.bottom) {
  171. margin-top: -1px;
  172. border-radius: 0;
  173. }
  174. .ui.bottom.attached.message {
  175. margin-top: -1px;
  176. border-radius: 0 0 0.28571429rem 0.28571429rem;
  177. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  178. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  179. }
  180. .ui.bottom.attached.message:not(:last-child) {
  181. margin-bottom: 1em;
  182. }
  183. .ui.attached.icon.message {
  184. width: auto;
  185. }
  186. /*--------------
  187. Icon
  188. ---------------*/
  189. .ui.icon.message {
  190. display: -webkit-box;
  191. display: -ms-flexbox;
  192. display: flex;
  193. width: 100%;
  194. -webkit-box-align: center;
  195. -ms-flex-align: center;
  196. align-items: center;
  197. }
  198. .ui.icon.message > .icon:not(.close) {
  199. display: block;
  200. -webkit-box-flex: 0;
  201. -ms-flex: 0 0 auto;
  202. flex: 0 0 auto;
  203. width: auto;
  204. line-height: 1;
  205. vertical-align: middle;
  206. font-size: 3em;
  207. opacity: 0.8;
  208. }
  209. .ui.icon.message > .content {
  210. display: block;
  211. -webkit-box-flex: 1;
  212. -ms-flex: 1 1 auto;
  213. flex: 1 1 auto;
  214. vertical-align: middle;
  215. }
  216. .ui.icon.message .icon:not(.close) + .content {
  217. padding-left: 0;
  218. }
  219. .ui.icon.message .circular.icon {
  220. width: 1em;
  221. }
  222. /*--------------
  223. Floating
  224. ---------------*/
  225. .ui.floating.message {
  226. -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  227. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  228. }
  229. /*--------------
  230. Colors
  231. ---------------*/
  232. /*--------------
  233. Types
  234. ---------------*/
  235. .ui.positive.message {
  236. background-color: #FCFFF5;
  237. color: #2C662D;
  238. }
  239. .ui.positive.message,
  240. .ui.attached.positive.message {
  241. -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  242. box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  243. }
  244. .ui.floating.positive.message {
  245. -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  246. box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  247. }
  248. .ui.positive.message .header {
  249. color: #1A531B;
  250. }
  251. .ui.negative.message {
  252. background-color: #FFF6F6;
  253. color: #9F3A38;
  254. }
  255. .ui.negative.message,
  256. .ui.attached.negative.message {
  257. -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  258. box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  259. }
  260. .ui.floating.negative.message {
  261. -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  262. box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  263. }
  264. .ui.negative.message .header {
  265. color: #912D2B;
  266. }
  267. .ui.info.message {
  268. background-color: #F8FFFF;
  269. color: #276F86;
  270. }
  271. .ui.info.message,
  272. .ui.attached.info.message {
  273. -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
  274. box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
  275. }
  276. .ui.floating.info.message {
  277. -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  278. box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  279. }
  280. .ui.info.message .header {
  281. color: #0E566C;
  282. }
  283. .ui.warning.message {
  284. background-color: #FFFAF3;
  285. color: #573A08;
  286. }
  287. .ui.warning.message,
  288. .ui.attached.warning.message {
  289. -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
  290. box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
  291. }
  292. .ui.floating.warning.message {
  293. -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  294. box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  295. }
  296. .ui.warning.message .header {
  297. color: #794B02;
  298. }
  299. .ui.error.message {
  300. background-color: #FFF6F6;
  301. color: #9F3A38;
  302. }
  303. .ui.error.message,
  304. .ui.attached.error.message {
  305. -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  306. box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  307. }
  308. .ui.floating.error.message {
  309. -webkit-box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  310. box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  311. }
  312. .ui.error.message .header {
  313. color: #912D2B;
  314. }
  315. .ui.success.message {
  316. background-color: #FCFFF5;
  317. color: #2C662D;
  318. }
  319. .ui.success.message,
  320. .ui.attached.success.message {
  321. -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  322. box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  323. }
  324. .ui.floating.success.message {
  325. -webkit-box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  326. box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  327. }
  328. .ui.success.message .header {
  329. color: #1A531B;
  330. }
  331. .ui.primary.message {
  332. background-color: #DFF0FF;
  333. color: rgba(255, 255, 255, 0.9);
  334. }
  335. .ui.primary.message,
  336. .ui.attached.primary.message {
  337. -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  338. box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  339. }
  340. .ui.floating.primary.message {
  341. -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  342. box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  343. }
  344. .ui.primary.message .header {
  345. color: rgba(242, 242, 242, 0.9);
  346. }
  347. .ui.secondary.message {
  348. background-color: #F4F4F4;
  349. color: rgba(255, 255, 255, 0.9);
  350. }
  351. .ui.secondary.message,
  352. .ui.attached.secondary.message {
  353. -webkit-box-shadow: 0 0 0 1px #1B1C1D inset, 0 0 0 0 rgba(0, 0, 0, 0);
  354. box-shadow: 0 0 0 1px #1B1C1D inset, 0 0 0 0 rgba(0, 0, 0, 0);
  355. }
  356. .ui.floating.secondary.message {
  357. -webkit-box-shadow: 0 0 0 1px #1B1C1D inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  358. box-shadow: 0 0 0 1px #1B1C1D inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  359. }
  360. .ui.secondary.message .header {
  361. color: rgba(242, 242, 242, 0.9);
  362. }
  363. .ui.red.message {
  364. background-color: #FFE8E6;
  365. color: #DB2828;
  366. }
  367. .ui.red.message,
  368. .ui.attached.red.message {
  369. -webkit-box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  370. box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  371. }
  372. .ui.floating.red.message {
  373. -webkit-box-shadow: 0 0 0 1px #DB2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  374. box-shadow: 0 0 0 1px #DB2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  375. }
  376. .ui.red.message .header {
  377. color: #c82121;
  378. }
  379. .ui.orange.message {
  380. background-color: #FFEDDE;
  381. color: #F2711C;
  382. }
  383. .ui.orange.message,
  384. .ui.attached.orange.message {
  385. -webkit-box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0);
  386. box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0);
  387. }
  388. .ui.floating.orange.message {
  389. -webkit-box-shadow: 0 0 0 1px #F2711C inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  390. box-shadow: 0 0 0 1px #F2711C inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  391. }
  392. .ui.orange.message .header {
  393. color: #e7640d;
  394. }
  395. .ui.yellow.message {
  396. background-color: #FFF8DB;
  397. color: #B58105;
  398. }
  399. .ui.yellow.message,
  400. .ui.attached.yellow.message {
  401. -webkit-box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  402. box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  403. }
  404. .ui.floating.yellow.message {
  405. -webkit-box-shadow: 0 0 0 1px #B58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  406. box-shadow: 0 0 0 1px #B58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  407. }
  408. .ui.yellow.message .header {
  409. color: #9c6f04;
  410. }
  411. .ui.olive.message {
  412. background-color: #FBFDEF;
  413. color: #8ABC1E;
  414. }
  415. .ui.olive.message,
  416. .ui.attached.olive.message {
  417. -webkit-box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0);
  418. box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0);
  419. }
  420. .ui.floating.olive.message {
  421. -webkit-box-shadow: 0 0 0 1px #8ABC1E inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  422. box-shadow: 0 0 0 1px #8ABC1E inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  423. }
  424. .ui.olive.message .header {
  425. color: #7aa61a;
  426. }
  427. .ui.green.message {
  428. background-color: #E5F9E7;
  429. color: #1EBC30;
  430. }
  431. .ui.green.message,
  432. .ui.attached.green.message {
  433. -webkit-box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  434. box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  435. }
  436. .ui.floating.green.message {
  437. -webkit-box-shadow: 0 0 0 1px #1EBC30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  438. box-shadow: 0 0 0 1px #1EBC30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  439. }
  440. .ui.green.message .header {
  441. color: #1aa62a;
  442. }
  443. .ui.teal.message {
  444. background-color: #E1F7F7;
  445. color: #10A3A3;
  446. }
  447. .ui.teal.message,
  448. .ui.attached.teal.message {
  449. -webkit-box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  450. box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  451. }
  452. .ui.floating.teal.message {
  453. -webkit-box-shadow: 0 0 0 1px #10A3A3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  454. box-shadow: 0 0 0 1px #10A3A3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  455. }
  456. .ui.teal.message .header {
  457. color: #0e8c8c;
  458. }
  459. .ui.blue.message {
  460. background-color: #DFF0FF;
  461. color: #2185D0;
  462. }
  463. .ui.blue.message,
  464. .ui.attached.blue.message {
  465. -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  466. box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  467. }
  468. .ui.floating.blue.message {
  469. -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  470. box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  471. }
  472. .ui.blue.message .header {
  473. color: #1e77ba;
  474. }
  475. .ui.violet.message {
  476. background-color: #EAE7FF;
  477. color: #6435C9;
  478. }
  479. .ui.violet.message,
  480. .ui.attached.violet.message {
  481. -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  482. box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  483. }
  484. .ui.floating.violet.message {
  485. -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  486. box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  487. }
  488. .ui.violet.message .header {
  489. color: #5a30b5;
  490. }
  491. .ui.purple.message {
  492. background-color: #F6E7FF;
  493. color: #A333C8;
  494. }
  495. .ui.purple.message,
  496. .ui.attached.purple.message {
  497. -webkit-box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  498. box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  499. }
  500. .ui.floating.purple.message {
  501. -webkit-box-shadow: 0 0 0 1px #A333C8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  502. box-shadow: 0 0 0 1px #A333C8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  503. }
  504. .ui.purple.message .header {
  505. color: #922eb4;
  506. }
  507. .ui.pink.message {
  508. background-color: #FFE3FB;
  509. color: #E03997;
  510. }
  511. .ui.pink.message,
  512. .ui.attached.pink.message {
  513. -webkit-box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  514. box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  515. }
  516. .ui.floating.pink.message {
  517. -webkit-box-shadow: 0 0 0 1px #E03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  518. box-shadow: 0 0 0 1px #E03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  519. }
  520. .ui.pink.message .header {
  521. color: #dd238b;
  522. }
  523. .ui.brown.message {
  524. background-color: #F1E2D3;
  525. color: #A5673F;
  526. }
  527. .ui.brown.message,
  528. .ui.attached.brown.message {
  529. -webkit-box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0);
  530. box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0);
  531. }
  532. .ui.floating.brown.message {
  533. -webkit-box-shadow: 0 0 0 1px #A5673F inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  534. box-shadow: 0 0 0 1px #A5673F inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  535. }
  536. .ui.brown.message .header {
  537. color: #935b38;
  538. }
  539. .ui.grey.message {
  540. background-color: #F4F4F4;
  541. color: #767676;
  542. }
  543. .ui.grey.message,
  544. .ui.attached.grey.message {
  545. -webkit-box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  546. box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0);
  547. }
  548. .ui.floating.grey.message {
  549. -webkit-box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  550. box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  551. }
  552. .ui.grey.message .header {
  553. color: #696969;
  554. }
  555. .ui.black.message {
  556. background-color: #1B1C1D;
  557. color: rgba(255, 255, 255, 0.9);
  558. }
  559. .ui.black.message .header {
  560. color: rgba(255, 255, 255, 0.9);
  561. }
  562. .ui.inverted.message {
  563. background-color: #1B1C1D;
  564. color: rgba(255, 255, 255, 0.9);
  565. }
  566. /*--------------
  567. Sizes
  568. ---------------*/
  569. .ui.message {
  570. font-size: 1em;
  571. }
  572. .ui.mini.message {
  573. font-size: 0.78571429em;
  574. }
  575. .ui.tiny.message {
  576. font-size: 0.85714286em;
  577. }
  578. .ui.small.message {
  579. font-size: 0.92857143em;
  580. }
  581. .ui.large.message {
  582. font-size: 1.14285714em;
  583. }
  584. .ui.big.message {
  585. font-size: 1.28571429em;
  586. }
  587. .ui.huge.message {
  588. font-size: 1.42857143em;
  589. }
  590. .ui.massive.message {
  591. font-size: 1.71428571em;
  592. }
  593. /*******************************
  594. Theme Overrides
  595. *******************************/
  596. /*******************************
  597. Site Overrides
  598. *******************************/