mirror of
https://github.com/MichMich/MagicMirror.git
synced 2025-07-02 22:08:42 +00:00
136 lines
3.1 KiB
CSS
Executable File
136 lines
3.1 KiB
CSS
Executable File
/* Based on work by http://tympanus.net/codrops/licensing/ */
|
|
/* To bar notifications */
|
|
.ns-box.ns-bar {
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.ns-bar .ns-close {
|
|
background: transparent;
|
|
top: 50%;
|
|
right: 20px;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.ns-bar .ns-close::before,
|
|
.ns-bar .ns-close::after {
|
|
background: #b7b5b3;
|
|
}
|
|
|
|
[class^="ns-effect-"].ns-bar.ns-hide,
|
|
[class*=" ns-effect-"].ns-bar.ns-hide {
|
|
-webkit-animation-direction: reverse;
|
|
animation-direction: reverse;
|
|
}
|
|
|
|
/* Individual Effects */
|
|
|
|
/* Slide on top */
|
|
.ns-effect-slidetop.ns-show,
|
|
.ns-effect-slidetop.ns-hide {
|
|
-webkit-animation-name: animSlideTop;
|
|
animation-name: animSlideTop;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
}
|
|
|
|
.ns-effect-slidetop p {
|
|
padding: 0 3.2em;
|
|
font-size: 1.2em;
|
|
display: inline-block;
|
|
}
|
|
|
|
@-webkit-keyframes animSlideTop {
|
|
0% { -webkit-transform: translate3d(0,-100%,0); }
|
|
100% { -webkit-transform: translate3d(0,0,0); }
|
|
}
|
|
|
|
@keyframes animSlideTop {
|
|
0% { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
|
|
100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
|
|
}
|
|
|
|
/* Expanding Loader */
|
|
.ns-effect-exploader {
|
|
background: #fff;
|
|
color: #7a7264;
|
|
-webkit-transform-origin: 0 0;
|
|
transform-origin: 0 0;
|
|
}
|
|
|
|
.ns-effect-exploader .ns-box-inner {
|
|
position: relative;
|
|
}
|
|
|
|
.ns-effect-exploader p {
|
|
padding: 0.25em 2em 0.25em 3em;
|
|
}
|
|
|
|
.ns-effect-exploader.ns-show {
|
|
-webkit-animation-name: animLoad;
|
|
animation-name: animLoad;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
@-webkit-keyframes animLoad {
|
|
0% { opacity: 1; -webkit-transform: scale3d(0,0.3,1); }
|
|
100% { opacity: 1; -webkit-transform: scale3d(1,1,1); }
|
|
}
|
|
|
|
@keyframes animLoad {
|
|
0% { opacity: 1; -webkit-transform: scale3d(0,0.3,1); transform: scale3d(0,0.3,1); }
|
|
100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
|
|
}
|
|
|
|
.ns-effect-exploader.ns-hide {
|
|
-webkit-animation-name: animFade;
|
|
animation-name: animFade;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
}
|
|
|
|
.ns-effect-exploader.ns-show .ns-box-inner,
|
|
.ns-effect-exploader.ns-show .ns-close {
|
|
-webkit-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
-webkit-animation-delay: 0.6s;
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.ns-effect-exploader.ns-show .ns-close {
|
|
-webkit-animation-name: animFade;
|
|
animation-name: animFade;
|
|
}
|
|
|
|
.ns-effect-exploader.ns-show .ns-box-inner {
|
|
-webkit-animation-name: animFadeMove;
|
|
animation-name: animFadeMove;
|
|
-webkit-animation-timing-function: ease-out;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
@-webkit-keyframes animFadeMove {
|
|
0% { opacity: 0; -webkit-transform: translate3d(0,10px,0); }
|
|
100% { opacity: 1; -webkit-transform: translate3d(0,0,0); }
|
|
}
|
|
|
|
@keyframes animFadeMove {
|
|
0% { opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
|
|
100% { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
|
|
}
|
|
|
|
@-webkit-keyframes animFade {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes animFade {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|