Skip to content

A
alertify-js
Commit 34115f0a authored by bingchuan's avatar bingchuan
Browse files
Options

Update alertify.css

parent 9b6abe45
Hide whitespace changes
Inline Side-by-side
Showing with 105 additions and 21 deletions
build/css/alertify.css
View file @ 34115f0a
/**
* alertifyjs 1.8.0 http://alertifyjs.com
* alertifyjs 1.14.0 http://alertifyjs.com
* AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.
* Copyright 2016 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com)
* Copyright 2024 Mohammad Younes <Mohammad@alertifyjs.com> (http://alertifyjs.com)
* Licensed under GPL 3 <https://opensource.org/licenses/gpl-3.0>*/
.alertify .ajs-dimmer {
position: fixed;
......@@ -13,7 +13,7 @@
padding: 0;
margin: 0;
background-color: #252525;
opacity: .5;
opacity: 0.5;
}
.alertify .ajs-modal {
position: fixed;
......@@ -312,9 +312,12 @@
.alertify .ajs-modal {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-property: opacity, visibility;
transition-property: opacity, visibility;
transition-timing-function: linear;
transition-duration: 250ms;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
}
.alertify.ajs-hidden .ajs-dimmer,
.alertify.ajs-hidden .ajs-modal {
......@@ -332,8 +335,8 @@
.alertify .ajs-dialog.ajs-shake {
-webkit-animation-name: ajs-shake;
animation-name: ajs-shake;
-webkit-animation-duration: .1s;
animation-duration: .1s;
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
......@@ -440,7 +443,8 @@
60%,
80%,
100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
......@@ -477,7 +481,8 @@
60%,
80%,
100% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
......@@ -625,13 +630,15 @@
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
......@@ -651,13 +658,15 @@
0% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
......@@ -709,13 +718,15 @@
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
......@@ -735,13 +746,15 @@
0% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
......@@ -838,12 +851,16 @@
margin: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition-duration: 250ms;
transition-timing-function: linear;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.alertify-notifier .ajs-message.ajs-visible {
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 1;
max-height: 100%;
padding: 15px;
......@@ -858,6 +875,19 @@
.alertify-notifier .ajs-message.ajs-warning {
background: rgba(252, 248, 215, 0.95);
}
.alertify-notifier .ajs-message .ajs-close {
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 16px;
cursor: pointer;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGPC/xhBQAAAFBJREFUGBl1j0EKADEIA+ve/P9f9bh1hEihNBfjVCO1v7RKVqJK4h8gM5cAPR42AkQEpSXPwMTyoi13n5N9YqJehm3Fnr7nL1D0ZEbD5OubGyC7a9gx+9eNAAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: center center;
background-color: rgba(0, 0, 0, 0.5);
border-top-right-radius: 2px;
}
.alertify-notifier.ajs-top {
top: 10px;
}
......@@ -882,3 +912,57 @@
.alertify-notifier.ajs-left .ajs-message.ajs-visible {
left: 0;
}
.alertify-notifier.ajs-center {
left: 50%;
}
.alertify-notifier.ajs-center .ajs-message {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.alertify-notifier.ajs-center .ajs-message.ajs-visible {
left: 50%;
-webkit-transition-timing-function: cubic-bezier(0.57, 0.43, 0.1, 0.65);
transition-timing-function: cubic-bezier(0.57, 0.43, 0.1, 0.65);
}
.alertify-notifier.ajs-center.ajs-top .ajs-message {
top: -300px;
}
.alertify-notifier.ajs-center.ajs-top .ajs-message.ajs-visible {
top: 0;
}
.alertify-notifier.ajs-center.ajs-bottom .ajs-message {
bottom: -300px;
}
.alertify-notifier.ajs-center.ajs-bottom .ajs-message.ajs-visible {
bottom: 0;
}
.ajs-no-transition.alertify .ajs-dimmer,
.ajs-no-transition.alertify .ajs-modal,
.ajs-no-transition.alertify .ajs-dialog {
-webkit-transition: none!important;
transition: none!important;
-webkit-animation: none!important;
animation: none!important;
}
.ajs-no-transition.alertify-notifier .ajs-message {
-webkit-transition: none!important;
transition: none!important;
-webkit-animation: none!important;
animation: none!important;
}
@media (prefers-reduced-motion: reduce) {
.alertify .ajs-dimmer,
.alertify .ajs-modal,
.alertify .ajs-dialog {
-webkit-transition: none!important;
transition: none!important;
-webkit-animation: none!important;
animation: none!important;
}
.alertify-notifier .ajs-message {
-webkit-transition: none!important;
transition: none!important;
-webkit-animation: none!important;
animation: none!important;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment