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