toast.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689
  1. /*!
  2. * # Fomantic-UI - Toast
  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. Toast container
  12. *******************************/
  13. .ui.toast-container {
  14. position: fixed;
  15. z-index: 9999;
  16. }
  17. .ui.toast-container.top.right {
  18. top: 0.85714286em;
  19. right: 0.85714286em;
  20. margin-left: 0.85714286em;
  21. }
  22. .ui.toast-container.top.left {
  23. top: 0.85714286em;
  24. left: 0.85714286em;
  25. margin-right: 0.85714286em;
  26. }
  27. .ui.toast-container.top.center {
  28. left: 50%;
  29. -webkit-transform: translate(-50%, 0);
  30. transform: translate(-50%, 0);
  31. top: 0.85714286em;
  32. }
  33. .ui.toast-container.bottom.right {
  34. bottom: 0.85714286em;
  35. right: 0.85714286em;
  36. margin-left: 0.85714286em;
  37. }
  38. .ui.toast-container.bottom.left {
  39. bottom: 0.85714286em;
  40. left: 0.85714286em;
  41. margin-right: 0.85714286em;
  42. }
  43. .ui.toast-container.bottom.center {
  44. left: 50%;
  45. -webkit-transform: translate(-50%, 0);
  46. transform: translate(-50%, 0);
  47. bottom: 0.85714286em;
  48. }
  49. .ui.toast-container .visible.toast-box,
  50. .ui.toast-container .animating.toast-box,
  51. .ui.toast-container .toast-box {
  52. display: table !important;
  53. }
  54. .ui.toast-container .toast-box {
  55. margin-bottom: 0.5em;
  56. border-radius: 0.28571429rem;
  57. cursor: default;
  58. }
  59. .ui.toast-container .toast-box:hover {
  60. opacity: 1;
  61. }
  62. .ui.toast-container .toast-box:not(.unclickable):hover {
  63. cursor: pointer;
  64. }
  65. .ui.toast-container .toast-box.floating,
  66. .ui.toast-container .toast-box.hoverfloating:hover {
  67. -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  68. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  69. border: 1px solid rgba(34, 36, 38, 0.12);
  70. }
  71. .ui.toast-container .toast-box.compact,
  72. .ui.toast-container .toast-box > .compact {
  73. width: 350px;
  74. }
  75. .ui.toast-container .toast-box > .ui.toast,
  76. .ui.toast-container .toast-box > .ui.message {
  77. margin: 0 -1px -0.01em;
  78. position: relative;
  79. }
  80. .ui.toast-container .toast-box > .attached.progress {
  81. z-index: 1;
  82. }
  83. .ui.toast-container .toast-box > .attached.progress.bottom {
  84. margin: -0.2em -1px -0.01em;
  85. }
  86. .ui.toast-container .toast-box > .attached.progress.top {
  87. margin: -0.01em -1px -0.2em;
  88. }
  89. .ui.toast-container .toast-box > .attached.progress .bar {
  90. min-width: 0;
  91. }
  92. .ui.toast-container .toast-box > .attached.progress.info .bar.bar.bar {
  93. background: #12a1bf;
  94. }
  95. .ui.toast-container .toast-box > .attached.progress.warning .bar.bar.bar {
  96. background: #cf9b0d;
  97. }
  98. .ui.toast-container .toast-box > .attached.progress.success .bar.bar.bar {
  99. background: #15792d;
  100. }
  101. .ui.toast-container .toast-box > .attached.progress .error .bar.bar.bar {
  102. background: #9c1a1a;
  103. }
  104. .ui.toast-container .toast-box > .attached.progress.neutral .bar.bar.bar {
  105. background: #d9d9d9;
  106. }
  107. .ui.toast-container .toast-box > .ui.message > .close.icon {
  108. top: 0.3em;
  109. right: 0.3em;
  110. }
  111. .ui.toast-container .toast-box > .ui.message > .actions:last-child {
  112. margin-bottom: -1em;
  113. }
  114. .ui.toast-container .toast-box > .ui.message.icon {
  115. -webkit-box-align: inherit;
  116. -ms-flex-align: inherit;
  117. align-items: inherit;
  118. }
  119. .ui.toast-container .toast-box > .ui.message.icon > :not(.icon):not(.actions) {
  120. padding-left: 5rem;
  121. }
  122. .ui.toast-container .toast-box > .ui.message.icon > .icon:not(.close) {
  123. display: inline-block;
  124. position: absolute;
  125. width: 4rem;
  126. top: 50%;
  127. -webkit-transform: translateY(-50%);
  128. transform: translateY(-50%);
  129. }
  130. .ui.toast-container .toast-box > .ui.message.icon:not(.vertical).actions > .icon:not(.close) {
  131. top: calc(50% - 1.2em);
  132. -webkit-transform: none;
  133. transform: none;
  134. }
  135. .ui.toast-container .toast-box > .ui.message.icon:not(.vertical).icon.icon.icon {
  136. display: block;
  137. }
  138. .ui.toast-container .toast-box .ui.toast > .close.icon {
  139. cursor: pointer;
  140. margin: 0;
  141. opacity: 0.7;
  142. -webkit-transition: opacity 0.1s ease;
  143. transition: opacity 0.1s ease;
  144. }
  145. .ui.toast-container .toast-box .ui.toast > .close.icon:hover {
  146. opacity: 1;
  147. }
  148. .ui.toast-container .toast-box .ui.toast.vertical > .close.icon {
  149. margin-top: -0.3em;
  150. margin-right: -0.3em;
  151. }
  152. .ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon {
  153. position: absolute;
  154. top: 0.3em;
  155. }
  156. .ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon:not(.left) {
  157. right: 0.3em;
  158. }
  159. .ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon.left {
  160. margin-left: -0.3em;
  161. }
  162. .ui.toast-container .toast-box .ui.card {
  163. margin: 0;
  164. }
  165. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).bottom {
  166. border-top-left-radius: 0;
  167. border-top-right-radius: 0;
  168. }
  169. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).bottom.horizontal > .image > img {
  170. border-top-left-radius: 0;
  171. }
  172. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).bottom.horizontal > .image:last-child > img {
  173. border-top-right-radius: 0;
  174. }
  175. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).top {
  176. border-bottom-left-radius: 0;
  177. border-bottom-right-radius: 0;
  178. }
  179. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).top.horizontal > .image > img {
  180. border-bottom-left-radius: 0;
  181. }
  182. .ui.toast-container .toast-box .ui.card.attached:not(.vertical).top.horizontal > .image:last-child > img {
  183. border-bottom-right-radius: 0;
  184. }
  185. .ui.toast-container .toast-box .ui.card.horizontal.actions > .image > img {
  186. border-bottom-left-radius: 0;
  187. }
  188. .ui.toast-container .toast-box .ui.card.horizontal.actions > .image:last-child > img {
  189. border-bottom-right-radius: 0;
  190. }
  191. .ui.toast-container .toast-box .progressing {
  192. -webkit-animation-iteration-count: 1;
  193. animation-iteration-count: 1;
  194. -webkit-animation-timing-function: linear;
  195. animation-timing-function: linear;
  196. }
  197. .ui.toast-container .toast-box .progressing.up {
  198. -webkit-animation-name: progressUp;
  199. animation-name: progressUp;
  200. }
  201. .ui.toast-container .toast-box .progressing.down {
  202. -webkit-animation-name: progressDown;
  203. animation-name: progressDown;
  204. }
  205. .ui.toast-container .toast-box .progressing.wait {
  206. -webkit-animation-name: progressWait;
  207. animation-name: progressWait;
  208. }
  209. .ui.toast-container .toast-box:hover .pausable.progressing {
  210. -webkit-animation-play-state: paused;
  211. animation-play-state: paused;
  212. }
  213. .ui.toast-container .toast-box .ui.toast:not(.vertical) {
  214. display: block;
  215. }
  216. .ui.toast-container .toast-box :not(.comment):not(.card) .actions {
  217. margin: 0.5em -1em -1em -1em;
  218. }
  219. .ui.toast-container .toast-box :not(.comment) .actions {
  220. padding: 0.5em 0.5em 0.75em 0.5em;
  221. text-align: right;
  222. }
  223. .ui.toast-container .toast-box :not(.comment) .actions.attached:not(.vertical) {
  224. margin-right: 1px;
  225. }
  226. .ui.toast-container .toast-box :not(.comment) .actions:not(.basic):not(.attached) {
  227. background: rgba(255, 255, 255, 0.25);
  228. border-top: 1px solid rgba(0, 0, 0, 0.2);
  229. }
  230. .ui.toast-container .toast-box :not(.comment) .actions.left {
  231. text-align: left;
  232. }
  233. .ui.toast-container .toast-box .vertical.actions > .button,
  234. .ui.toast-container .toast-box > .vertical > .vertical.vertical,
  235. .ui.toast-container .toast-box > .vertical.vertical.vertical {
  236. display: -webkit-box;
  237. display: -ms-flexbox;
  238. display: flex;
  239. }
  240. .ui.toast-container .toast-box :not(.comment) .vertical.actions {
  241. -webkit-box-orient: vertical;
  242. -webkit-box-direction: normal;
  243. -ms-flex-direction: column;
  244. flex-direction: column;
  245. }
  246. .ui.toast-container .toast-box :not(.comment) .vertical.actions > .button {
  247. -webkit-box-pack: center;
  248. -ms-flex-pack: center;
  249. justify-content: center;
  250. }
  251. .ui.toast-container .toast-box :not(.comment) .vertical.actions.attached > .button {
  252. -webkit-box-align: center;
  253. -ms-flex-align: center;
  254. align-items: center;
  255. }
  256. .ui.toast-container .toast-box :not(.comment) .vertical.actions:not(.attached) {
  257. border-top: 0;
  258. margin-top: -0.75em;
  259. margin-bottom: -0.75em;
  260. margin-left: 1em;
  261. -ms-flex-pack: distribute;
  262. justify-content: space-around;
  263. }
  264. .ui.toast-container .toast-box :not(.comment) .vertical.actions:not(.attached):not(.basic) {
  265. border-left: 1px solid rgba(0, 0, 0, 0.2);
  266. }
  267. .ui.toast-container .toast-box :not(.comment) .vertical.actions:not(.attached) > .button:not(:last-child) {
  268. margin-bottom: 0.3em;
  269. }
  270. .ui.toast-container .toast-box :not(.comment) .vertical.actions:not(.attached).top {
  271. -webkit-box-pack: start;
  272. -ms-flex-pack: start;
  273. justify-content: flex-start;
  274. }
  275. .ui.toast-container .toast-box :not(.comment) .vertical.actions:not(.attached).bottom {
  276. -webkit-box-pack: end;
  277. -ms-flex-pack: end;
  278. justify-content: flex-end;
  279. }
  280. .ui.vertical.attached:not(.left).card > .image > img {
  281. border-top-right-radius: 0;
  282. }
  283. .ui.vertical.attached:not(.left).card.horizontal > .image:last-child > img {
  284. border-top-right-radius: 0;
  285. border-bottom-right-radius: 0;
  286. }
  287. .ui.vertical.attached:not(.left).card,
  288. .ui.vertical.attached:not(.left).toast {
  289. border-top-right-radius: 0;
  290. border-bottom-right-radius: 0;
  291. }
  292. .ui.vertical.attached:not(.left).actions {
  293. border-top-right-radius: 0.28571429rem;
  294. border-bottom-right-radius: 0.28571429rem;
  295. }
  296. .ui.vertical.attached:not(.left).actions .button:first-child,
  297. .ui.vertical.attached:not(.left).actions .button:last-child {
  298. border-top-left-radius: 0;
  299. border-bottom-left-radius: 0;
  300. }
  301. .ui.vertical.attached:not(.left).message {
  302. border-top-right-radius: 0;
  303. border-bottom-left-radius: 0.28571429rem;
  304. }
  305. .ui.vertical.attached.left.card > .image > img {
  306. border-top-left-radius: 0;
  307. }
  308. .ui.vertical.attached.left.card.horizontal > .image > img {
  309. border-top-left-radius: 0;
  310. border-bottom-left-radius: 0;
  311. }
  312. .ui.vertical.attached.left.card,
  313. .ui.vertical.attached.left.toast {
  314. border-top-left-radius: 0;
  315. border-bottom-left-radius: 0;
  316. }
  317. .ui.vertical.attached.left.actions {
  318. border-top-left-radius: 0.28571429rem;
  319. border-bottom-left-radius: 0.28571429rem;
  320. }
  321. .ui.vertical.attached.left.actions .button:first-child,
  322. .ui.vertical.attached.left.actions .button:last-child {
  323. border-top-right-radius: 0;
  324. border-bottom-right-radius: 0;
  325. }
  326. .ui.vertical.attached.left.actions .button:not(:first-child):not(:last-child) {
  327. margin-left: -1px;
  328. }
  329. .ui.vertical.attached.left.message.message.message {
  330. border-top-right-radius: 0.28571429rem;
  331. border-bottom-right-radius: 0.28571429rem;
  332. }
  333. .ui.attached:not(.vertical):not(.top).actions {
  334. border-bottom-left-radius: 0.28571429rem;
  335. border-bottom-right-radius: 0.28571429rem;
  336. }
  337. .ui.attached:not(.vertical):not(.top).actions .button:first-child {
  338. border-bottom-left-radius: 0.28571429rem;
  339. }
  340. .ui.attached:not(.vertical):not(.top).actions .button:last-child {
  341. border-bottom-right-radius: 0.28571429rem;
  342. }
  343. .ui.attached:not(.vertical).top.actions {
  344. border-top-left-radius: 0.28571429rem;
  345. border-top-right-radius: 0.28571429rem;
  346. }
  347. .ui.attached:not(.vertical).top.actions .button:first-child {
  348. border-top-left-radius: 0.28571429rem;
  349. }
  350. .ui.attached:not(.vertical).top.actions .button:last-child {
  351. border-top-right-radius: 0.28571429rem;
  352. }
  353. /*******************************
  354. Toast
  355. *******************************/
  356. .ui.toast {
  357. display: none;
  358. border-radius: 0.28571429rem;
  359. padding: 0.78571429em 1em;
  360. margin: 0 -1px -0.01em;
  361. color: rgba(0, 0, 0, 0.87);
  362. background-color: #FFFFFF;
  363. }
  364. .ui.toast > .content > .header {
  365. font-weight: bold;
  366. color: inherit;
  367. margin: 0;
  368. }
  369. .ui.toast.info {
  370. background-color: #31CCEC;
  371. color: rgba(255, 255, 255, 0.9);
  372. }
  373. .ui.toast.warning {
  374. background-color: #F2C037;
  375. color: rgba(255, 255, 255, 0.9);
  376. }
  377. .ui.toast.success {
  378. background-color: #21BA45;
  379. color: rgba(255, 255, 255, 0.9);
  380. }
  381. .ui.toast.error {
  382. background-color: #DB2828;
  383. color: rgba(255, 255, 255, 0.9);
  384. }
  385. .ui.toast.neutral {
  386. background-color: #FFFFFF;
  387. color: rgba(0, 0, 0, 0.87);
  388. }
  389. .ui.toast > .icon:not(.close) {
  390. font-size: 1.5em;
  391. }
  392. .ui.toast:not(.vertical) > .icon:not(.close) {
  393. position: absolute;
  394. }
  395. .ui.toast:not(.vertical) > .icon:not(.close) + .content {
  396. padding-left: 3em;
  397. }
  398. .ui.toast:not(.vertical) > .close.icon + .content {
  399. padding-left: 1.5em;
  400. }
  401. .ui.toast:not(.vertical) > .ui.image {
  402. position: absolute;
  403. }
  404. .ui.toast:not(.vertical) > .ui.image.avatar + .content {
  405. padding-left: 3em;
  406. min-height: 2em;
  407. }
  408. .ui.toast:not(.vertical) > .ui.image.mini + .content {
  409. padding-left: 3.4em;
  410. min-height: 35px;
  411. }
  412. .ui.toast:not(.vertical) > .ui.image.tiny + .content {
  413. padding-left: 7em;
  414. min-height: 80px;
  415. }
  416. .ui.toast:not(.vertical) > .ui.image.small + .content {
  417. padding-left: 12em;
  418. min-height: 150px;
  419. }
  420. .ui.toast:not(.vertical) > .centered.image,
  421. .ui.toast:not(.vertical) > .centered.icon {
  422. -webkit-transform: translateY(-50%);
  423. transform: translateY(-50%);
  424. top: 50%;
  425. }
  426. .ui.toast:not(.vertical).actions > .centered.image {
  427. top: calc(50% - 2em);
  428. }
  429. .ui.toast:not(.vertical).actions > .centered.icon {
  430. top: calc(50% - 1.2em);
  431. }
  432. .ui.toast.vertical > .close.icon + .content {
  433. padding-left: 1em;
  434. }
  435. .ui.toast.vertical > .ui.image + .content,
  436. .ui.toast.vertical > .icon:not(.close) + .content {
  437. padding-left: 1em;
  438. }
  439. .ui.toast.vertical > .ui.image {
  440. -ms-flex-item-align: start;
  441. align-self: flex-start;
  442. -ms-flex-negative: 0;
  443. flex-shrink: 0;
  444. /* IE11 fix */
  445. }
  446. .ui.toast.vertical > .centered.image,
  447. .ui.toast.vertical > .centered.icon {
  448. -ms-flex-item-align: center;
  449. align-self: center;
  450. }
  451. .ui.toast.attached.bottom {
  452. border-top-left-radius: 0;
  453. border-top-right-radius: 0;
  454. }
  455. .ui.toast.attached.top {
  456. border-bottom-left-radius: 0;
  457. border-bottom-right-radius: 0;
  458. }
  459. .ui.hoverfloating.message:hover {
  460. -webkit-box-shadow: 0 0 0 1px inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  461. box-shadow: 0 0 0 1px inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
  462. }
  463. .ui.center.toast-container .toast-box,
  464. .ui.right.toast-container .toast-box {
  465. margin-left: auto;
  466. }
  467. .ui.center.toast-container .toast-box {
  468. margin-right: auto;
  469. }
  470. /*--------------
  471. Colors
  472. -------------- */
  473. .ui.primary.toast {
  474. background-color: #2185D0;
  475. color: rgba(255, 255, 255, 0.9);
  476. }
  477. .ui.inverted.primary.toast,
  478. .ui.toast-container .toast-box > .inverted.primary.attached.progress .bar {
  479. background-color: #54C8FF;
  480. color: rgba(0, 0, 0, 0.87);
  481. }
  482. .ui.secondary.toast {
  483. background-color: #1B1C1D;
  484. color: rgba(255, 255, 255, 0.9);
  485. }
  486. .ui.inverted.secondary.toast,
  487. .ui.toast-container .toast-box > .inverted.secondary.attached.progress .bar {
  488. background-color: #545454;
  489. color: rgba(0, 0, 0, 0.87);
  490. }
  491. .ui.red.toast {
  492. background-color: #DB2828;
  493. color: rgba(255, 255, 255, 0.9);
  494. }
  495. .ui.inverted.red.toast,
  496. .ui.toast-container .toast-box > .inverted.red.attached.progress .bar {
  497. background-color: #FF695E;
  498. color: rgba(0, 0, 0, 0.87);
  499. }
  500. .ui.orange.toast {
  501. background-color: #F2711C;
  502. color: rgba(255, 255, 255, 0.9);
  503. }
  504. .ui.inverted.orange.toast,
  505. .ui.toast-container .toast-box > .inverted.orange.attached.progress .bar {
  506. background-color: #FF851B;
  507. color: rgba(0, 0, 0, 0.87);
  508. }
  509. .ui.yellow.toast {
  510. background-color: #FBBD08;
  511. color: rgba(255, 255, 255, 0.9);
  512. }
  513. .ui.inverted.yellow.toast,
  514. .ui.toast-container .toast-box > .inverted.yellow.attached.progress .bar {
  515. background-color: #FFE21F;
  516. color: rgba(0, 0, 0, 0.87);
  517. }
  518. .ui.olive.toast {
  519. background-color: #B5CC18;
  520. color: rgba(255, 255, 255, 0.9);
  521. }
  522. .ui.inverted.olive.toast,
  523. .ui.toast-container .toast-box > .inverted.olive.attached.progress .bar {
  524. background-color: #D9E778;
  525. color: rgba(0, 0, 0, 0.87);
  526. }
  527. .ui.green.toast {
  528. background-color: #21BA45;
  529. color: rgba(255, 255, 255, 0.9);
  530. }
  531. .ui.inverted.green.toast,
  532. .ui.toast-container .toast-box > .inverted.green.attached.progress .bar {
  533. background-color: #2ECC40;
  534. color: rgba(0, 0, 0, 0.87);
  535. }
  536. .ui.teal.toast {
  537. background-color: #00B5AD;
  538. color: rgba(255, 255, 255, 0.9);
  539. }
  540. .ui.inverted.teal.toast,
  541. .ui.toast-container .toast-box > .inverted.teal.attached.progress .bar {
  542. background-color: #6DFFFF;
  543. color: rgba(0, 0, 0, 0.87);
  544. }
  545. .ui.blue.toast {
  546. background-color: #2185D0;
  547. color: rgba(255, 255, 255, 0.9);
  548. }
  549. .ui.inverted.blue.toast,
  550. .ui.toast-container .toast-box > .inverted.blue.attached.progress .bar {
  551. background-color: #54C8FF;
  552. color: rgba(0, 0, 0, 0.87);
  553. }
  554. .ui.violet.toast {
  555. background-color: #6435C9;
  556. color: rgba(255, 255, 255, 0.9);
  557. }
  558. .ui.inverted.violet.toast,
  559. .ui.toast-container .toast-box > .inverted.violet.attached.progress .bar {
  560. background-color: #A291FB;
  561. color: rgba(0, 0, 0, 0.87);
  562. }
  563. .ui.purple.toast {
  564. background-color: #A333C8;
  565. color: rgba(255, 255, 255, 0.9);
  566. }
  567. .ui.inverted.purple.toast,
  568. .ui.toast-container .toast-box > .inverted.purple.attached.progress .bar {
  569. background-color: #DC73FF;
  570. color: rgba(0, 0, 0, 0.87);
  571. }
  572. .ui.pink.toast {
  573. background-color: #E03997;
  574. color: rgba(255, 255, 255, 0.9);
  575. }
  576. .ui.inverted.pink.toast,
  577. .ui.toast-container .toast-box > .inverted.pink.attached.progress .bar {
  578. background-color: #FF8EDF;
  579. color: rgba(0, 0, 0, 0.87);
  580. }
  581. .ui.brown.toast {
  582. background-color: #A5673F;
  583. color: rgba(255, 255, 255, 0.9);
  584. }
  585. .ui.inverted.brown.toast,
  586. .ui.toast-container .toast-box > .inverted.brown.attached.progress .bar {
  587. background-color: #D67C1C;
  588. color: rgba(0, 0, 0, 0.87);
  589. }
  590. .ui.grey.toast {
  591. background-color: #767676;
  592. color: rgba(255, 255, 255, 0.9);
  593. }
  594. .ui.inverted.grey.toast,
  595. .ui.toast-container .toast-box > .inverted.grey.attached.progress .bar {
  596. background-color: #DCDDDE;
  597. color: rgba(0, 0, 0, 0.87);
  598. }
  599. .ui.black.toast {
  600. background-color: #1B1C1D;
  601. color: rgba(255, 255, 255, 0.9);
  602. }
  603. .ui.inverted.black.toast,
  604. .ui.toast-container .toast-box > .inverted.black.attached.progress .bar {
  605. background-color: #545454;
  606. color: rgba(0, 0, 0, 0.87);
  607. }
  608. .ui.inverted.toast {
  609. color: rgba(255, 255, 255, 0.9);
  610. background-color: #1B1C1D;
  611. }
  612. @media only screen and (max-width: 420px) {
  613. .ui.toast-container .toast-box.toast-box,
  614. .ui.toast-container .toast-box > .compact,
  615. .ui.toast-container .toast-box > .vertical > *,
  616. .ui.toast-container .toast-box > * {
  617. width: auto;
  618. max-width: 100%;
  619. }
  620. .ui.toast-container .toast-box > *:not(.vertical) {
  621. min-width: 280px;
  622. }
  623. .ui.toast-container .toast-box > .ui.card.horizontal,
  624. .ui.toast-container .toast-box > .vertical > .ui.horizontal.card {
  625. min-width: initial;
  626. }
  627. }
  628. /*---------------
  629. Progress Bar
  630. ----------------*/
  631. @-webkit-keyframes progressDown {
  632. 0% {
  633. width: 100%;
  634. }
  635. 100% {
  636. width: 0;
  637. }
  638. }
  639. @keyframes progressDown {
  640. 0% {
  641. width: 100%;
  642. }
  643. 100% {
  644. width: 0;
  645. }
  646. }
  647. @-webkit-keyframes progressUp {
  648. 0% {
  649. width: 0;
  650. }
  651. 100% {
  652. width: 100%;
  653. }
  654. }
  655. @keyframes progressUp {
  656. 0% {
  657. width: 0;
  658. }
  659. 100% {
  660. width: 100%;
  661. }
  662. }
  663. @-webkit-keyframes progressWait {
  664. 0% {
  665. opacity: 1;
  666. }
  667. 100% {
  668. opacity: 0;
  669. }
  670. }
  671. @keyframes progressWait {
  672. 0% {
  673. opacity: 1;
  674. }
  675. 100% {
  676. opacity: 0;
  677. }
  678. }