crossreference-demo: ckeditor/skins/office2013/notification.css@44d330dccc59

     1 /*

     2 Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.

     3 For licensing, see LICENSE.md or http://ckeditor.com/license

     4 */

     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);

    65 	-webkit-animation: fadeIn 0.7s;

    66 	animation: fadeIn 0.7s;

    67 }

    69 .cke_notification_message a

    70 {

    71 	color: #12306F;

    72 }

    74 @-webkit-keyframes fadeIn

    75 {

    76 	from { opacity: 0.4; }

    77 	to { opacity: 0.95; }

    78 }

    80 @keyframes fadeIn

    81 {

    82 	from { opacity: 0.4; }

    83 	to { opacity: 0.95; }

    84 }

    86 .cke_notification_success

    87 {

    88 	background: #72B572;

    89 	border: 1px solid #63A563;

    90 }

    92 .cke_notification_warning

    93 {

    94 	background: #C83939;

    95 	border: 1px solid #902B2B;

    96 }

    98 .cke_notification_info

    99 {

   100 	background: #2E9AD0;

   101 	border: 1px solid #0F74A8;

   102 }

   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 }

   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 }

   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 }

   147 .cke_notification_close:hover

   148 {

   149 	opacity: 1;

   150 	filter: alpha(opacity = 100);

   151 }

   153 .cke_notification_close span

   154 {

   155 	display: none;

   156 }

   158 .cke_notification_warning a.cke_notification_close

   159 {

   160 	opacity: 0.8;

   161 	filter: alpha(opacity = 80);

   162 }

   164 .cke_notification_warning a.cke_notification_close:hover

   165 {

   166 	opacity: 1;

   167 	filter: alpha(opacity = 100);

   168 }

author	indvd00m (gotoindvdum[at]gmail[dot]com)
	Thu, 15 Dec 2016 18:10:20 +0300
changeset 0	44d330dccc59
permissions	-rw-r--r--