sources/skins/moonocolor/notification.css

   1 /*
   2 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.md or http://ckeditor.com/license
   4 */
   5
   6 /**
   7  * Progress notification structure:
   8  *
   9  * +---div.cke_notification cke_notification_info--------------------------+
  10  * |                                                                       |
  11  * | +---div.cke_notification_progress-----------------------------------+ |
  12  * | |                                                                   | |
  13  * | +-------------------------------------------------------------------+ |
  14  * |                                                                       |
  15  * | +---p.cke_notification_message--------------------------------------+ |
  16  * | | Foo                                                               | |
  17  * | +-------------------------------------------------------------------+ |
  18  * |                                                                       |
  19  * | +---a.cke_notification_close----------------------------------------+ |
  20  * | | +---span.cke_label----------------------------------------------+ | |
  21  * | | | X                                                             | | |
  22  * | | +---------------------------------------------------------------+ | |
  23  * | +-------------------------------------------------------------------+ |
  24  * |                                                                       |
  25  * +-----------------------------------------------------------------------+
  26  *
  27  *
  28  * Warning notification structure:
  29  *
  30  * +---div.cke_notification cke_notification_warning-----------------------+
  31  * |                                                                       |
  32  * | +---p.cke_notification_message--------------------------------------+ |
  33  * | | Foo                                                               | |
  34  * | +-------------------------------------------------------------------+ |
  35  * |                                                                       |
  36  * | +---a.cke_notification_close----------------------------------------+ |
  37  * | | +---span.cke_label----------------------------------------------+ | |
  38  * | | | X                                                             | | |
  39  * | | +---------------------------------------------------------------+ | |
  40  * | +-------------------------------------------------------------------+ |
  41  * |                                                                       |
  42  * +-----------------------------------------------------------------------+
  43  *
  44  * Success and info notifications have the same structure as warning, but use
  45  * `cke_notification_success` and `cke_notification_info` instead of `cke_notification_warning`.
  46  */
  47 .cke_notifications_area
  48 {
  49         /* Prevent notification margin capture clicking. */
  50         pointer-events: none;
  51 }
  52 .cke_notification
  53 {
  54         pointer-events: auto;
  55         position: relative;
  56         margin: 10px;
  57         width: 300px;
  58         color: white;
  59         border-radius: 3px;
  60         text-align: center;
  61         opacity: 0.95;
  62         filter: alpha(opacity = 95);
  63         box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.3);
  64
  65         -webkit-animation: fadeIn 0.7s;
  66         animation: fadeIn 0.7s;
  67 }
  68
  69 .cke_notification_message a
  70 {
  71         color: #12306F;
  72 }
  73
  74 @-webkit-keyframes fadeIn
  75 {
  76         from { opacity: 0.4; }
  77         to { opacity: 0.95; }
  78 }
  79
  80 @keyframes fadeIn
  81 {
  82         from { opacity: 0.4; }
  83         to { opacity: 0.95; }
  84 }
  85
  86 .cke_notification_success
  87 {
  88         background: #72B572;
  89         border: 1px solid #63A563;
  90 }
  91
  92 .cke_notification_warning
  93 {
  94         background: #C83939;
  95         border: 1px solid #902B2B;
  96 }
  97
  98 .cke_notification_info
  99 {
 100         background: #2E9AD0;
 101         border: 1px solid #0F74A8;
 102 }
 103
 104 .cke_notification_info span.cke_notification_progress
 105 {
 106         background-color: #0F74A8;
 107         display: block;
 108         padding: 0;
 109         margin: 0;
 110         height: 100%;
 111         overflow: hidden;
 112         position: absolute;
 113         z-index: 1;
 114 }
 115
 116 .cke_notification_message
 117 {
 118         position: relative;
 119         margin: 4px 23px 3px;
 120         font-family: Arial, Helvetica, sans-serif;
 121         font-size: 12px;
 122         line-height: 18px;
 123         z-index: 4;
 124         text-overflow: ellipsis;
 125         overflow: hidden;
 126 }
 127
 128 .cke_notification_close
 129 {
 130         background-image: url(images/close.png);
 131         background-repeat: no-repeat;
 132         background-position: 50%;
 133         position: absolute;
 134         cursor: pointer;
 135         text-align: center;
 136         height: 20px;
 137         width: 20px;
 138         top: 1px;
 139         right: 1px;
 140         padding: 0;
 141         margin: 0;
 142         z-index: 5;
 143         opacity: 0.6;
 144         filter: alpha(opacity = 60);
 145 }
 146
 147 .cke_notification_close:hover
 148 {
 149         opacity: 1;
 150         filter: alpha(opacity = 100);
 151 }
 152
 153 .cke_notification_close span
 154 {
 155         display: none;
 156 }
 157
 158 .cke_notification_warning a.cke_notification_close
 159 {
 160         opacity: 0.8;
 161         filter: alpha(opacity = 80);
 162 }
 163
 164 .cke_notification_warning a.cke_notification_close:hover
 165 {
 166         opacity: 1;
 167         filter: alpha(opacity = 100);
 168 }