A Twitch.tv viewer reward and games system.
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.

100 lines
2.5 KiB

  1. /*! UIkit 2.3.1 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
  2. /* ========================================================================
  3. Addon: Notify
  4. ========================================================================== */
  5. /*
  6. * Message container for positioning
  7. */
  8. .uk-notify {
  9. position: fixed;
  10. top: 10px;
  11. left: 10px;
  12. z-index: 1030;
  13. -moz-box-sizing: border-box;
  14. box-sizing: border-box;
  15. width: 350px;
  16. }
  17. /* Position modifiers
  18. ========================================================================== */
  19. .uk-notify-top-right,
  20. .uk-notify-bottom-right {
  21. left: auto;
  22. right: 10px;
  23. }
  24. .uk-notify-top-center,
  25. .uk-notify-bottom-center {
  26. left: 50%;
  27. margin-left: -175px;
  28. }
  29. .uk-notify-bottom-left,
  30. .uk-notify-bottom-right,
  31. .uk-notify-bottom-center {
  32. top: auto;
  33. bottom: 10px;
  34. }
  35. /* Responsiveness
  36. ========================================================================== */
  37. /* Only phones portrait */
  38. @media (max-width: 479px) {
  39. /*
  40. * Fit in small screen
  41. */
  42. .uk-notify {
  43. left: 10px;
  44. right: 10px;
  45. width: auto;
  46. margin: 0;
  47. }
  48. }
  49. /* Sub-object: `uk-notify-message`
  50. ========================================================================== */
  51. .uk-notify-message {
  52. position: relative;
  53. margin-bottom: 10px;
  54. padding: 10px;
  55. background: #444444;
  56. color: #ffffff;
  57. font-size: 16px;
  58. line-height: 22px;
  59. cursor: pointer;
  60. border: 1px solid #444444;
  61. border-radius: 4px;
  62. }
  63. /* Close in notify
  64. ========================================================================== */
  65. .uk-notify-message > .uk-close {
  66. visibility: hidden;
  67. float: right;
  68. }
  69. .uk-notify-message:hover > .uk-close {
  70. visibility: visible;
  71. }
  72. /* Modifier: `uk-alert-info`
  73. ========================================================================== */
  74. .uk-notify-message-info {
  75. background: #ebf7fd;
  76. color: #2d7091;
  77. border-color: rgba(45, 112, 145, 0.3);
  78. }
  79. /* Modifier: `uk-alert-success`
  80. ========================================================================== */
  81. .uk-notify-message-success {
  82. background: #f2fae3;
  83. color: #659f13;
  84. border-color: rgba(101, 159, 19, 0.3);
  85. }
  86. /* Modifier: `uk-notify-message-warning`
  87. ========================================================================== */
  88. .uk-notify-message-warning {
  89. background: #fffceb;
  90. color: #e28327;
  91. border-color: rgba(226, 131, 39, 0.3);
  92. }
  93. /* Modifier: `uk-notify-message-danger`
  94. ========================================================================== */
  95. .uk-notify-message-danger {
  96. background: #fff1f0;
  97. color: #d85030;
  98. border-color: rgba(216, 80, 48, 0.3);
  99. }