jquery-notifier
Version:
jQuery Notify is a jQuery plugin that easily displays html notifications.
90 lines (89 loc) • 3.61 kB
CSS
.notify {
background: #5bc0de;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #46b8da 0%, #5bc0de 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #46b8da 0%, #5bc0de 100%);
/* Opera */
background-image: -o-linear-gradient(top, #46b8da 0%, #5bc0de 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #46b8da), color-stop(1, #5bc0de));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #46b8da 0%, #5bc0de 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #46b8da 0%, #5bc0de 100%);
border-radius: 3px;
border: 1px solid #46b8da;
padding: 5px 20px;
margin-top: 5px;
left: 0;
right: 0;
color: #FFFFFF;
min-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.notify.success {
border-color: #4cae4c;
background: #5cb85c;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #4cae4c 0%, #5cb85c 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #5cb85c 0%, #4cae4c 100%);
/* Opera */
background-image: -o-linear-gradient(top, #5cb85c 0%, #4cae4c 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4cae4c), color-stop(1, #5cb85c));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #4cae4c 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%); }
.notify.error {
border-color: #d43f3a;
background: #d9534f;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #d43f3a 0%, #d9534f 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #d43f3a 0%, #d9534f 100%);
/* Opera */
background-image: -o-linear-gradient(top, #d43f3a 0%, #d9534f 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d43f3a), color-stop(1, #d9534f));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #d43f3a 0%, #d9534f 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #d43f3a 0%, #d9534f 100%); }
.notify.warning {
border-color: #eea236;
background: #f0ad4e;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #eea236 0%, #f0ad4e 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #eea236 0%, #f0ad4e 100%);
/* Opera */
background-image: -o-linear-gradient(top, #eea236 0%, #f0ad4e 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eea236), color-stop(1, #f0ad4e));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #eea236 0%, #f0ad4e 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #eea236 0%, #f0ad4e 100%); }
.notify.box {
right: 0;
width: 300px;
left: auto;
padding: 20px; }
.notify .close {
font-weight: bold;
font-size: 11px;
padding: 5px 4px 4px;
line-height: 0;
position: absolute;
top: 3px;
right: 3px;
color: #FFFFFF;
cursor: pointer;
opacity: 0.8;
filter: alpha(opacity=80);
text-shadow: 0 1px 0 #ffffff; }
.notify .close:hover {
opacity: 1;
filter: alpha(opacity=100); }