alert.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .alert {
  2. z-index: 999;
  3. position: absolute;
  4. top: 85px;
  5. left: 50%;
  6. margin-right: -50%;
  7. transform: translate(-50%, 100%);
  8. width: 360px;
  9. font-size: 12px;
  10. font-family: 'Charcoal';
  11. min-height: 66px;
  12. padding: 16px 16px 16px 26px;
  13. border: 1px solid #111;
  14. background: #dedade;
  15. box-shadow: 1px 2px #111, inset 1px 1px #ff9999, inset -1px -1px #ff6162, inset 2px 2px #fff, inset -2px -2px #999;
  16. }
  17. .alert .body {
  18. display: flex;
  19. flex-wrap: wrap;
  20. }
  21. .alert .icon {
  22. padding: 16px;
  23. margin-right: 25px;
  24. }
  25. .alert.caution .icon {
  26. background-image: url("../img/ui/icons-large/alert-caution.png");
  27. background-repeat: no-repeat;
  28. }
  29. .alert.note .icon {
  30. background-image: url("../img/ui/icons-large/alert-note.png");
  31. background-repeat: no-repeat;
  32. }
  33. .alert.stop .icon {
  34. background-image: url("../img/ui/icons-large/alert-stop.png");
  35. background-repeat: no-repeat;
  36. }
  37. .alert .content {
  38. display: flex;
  39. }
  40. .alert .buttons {
  41. display: flex;
  42. width: 100%;
  43. justify-content: flex-end;
  44. gap: 10px;
  45. margin-top: 15px;
  46. }
  47. .shutdown.alert button {
  48. width: 82px;
  49. }