resources/src/mediawiki.notification/default.less

   1 @import 'mediawiki.skin.variables.less';
   2
   3 .mw-notification-area-overlay {
   4         position: absolute;
   5         top: 0;
   6         right: 0;
   7         height: 100%;
   8         width: 100%;
   9         /* Avoid horizontal scrollbar on fade in and on fade out */
  10         overflow: hidden;
  11         pointer-events: none;
  12 }
  13
  14 .mw-notification-area {
  15         top: 0;
  16         right: 0;
  17         /* Padding on all sides so drop shadows aren't cut by overflow: hidden */
  18         padding: 1em;
  19         width: 20em;
  20         line-height: 1.35;
  21         z-index: 10000;
  22 }
  23
  24 .mw-notification {
  25         padding: 0.75em 1.5em;
  26         margin-bottom: 0.5em;
  27         border: @border-width-base @border-style-base @border-color-notice;
  28         background-color: @background-color-base;
  29         color: @color-emphasized;
  30         /* Click handler in mediawiki.notification.js */
  31         cursor: pointer;
  32         opacity: 0;
  33         transform: translateX( 35px );
  34         transition: opacity 0.35s ease-in-out, transform 0.35s ease-in-out;
  35         pointer-events: auto;
  36         word-break: break-word;
  37 }
  38
  39 .mw-notification-visible {
  40         opacity: 1;
  41         transform: translateX( 0 );
  42 }
  43
  44 .mw-notification-replaced {
  45         opacity: 0;
  46         transform: translateY( -35px );
  47         pointer-events: none;
  48 }
  49
  50 .mw-notification-title {
  51         font-weight: bold;
  52 }
  53
  54 .mw-notification.mw-notification-type-warn {
  55         background-color: @background-color-warning-subtle;
  56         border-color: @border-color-warning;
  57 }
  58
  59 .mw-notification.mw-notification-type-error {
  60         background-color: @background-color-error-subtle;
  61         border-color: @border-color-error;
  62 }
  63
  64 .mw-notification.mw-notification-type-success {
  65         background-color: @background-color-success-subtle;
  66         border-color: @border-color-success;
  67 }