609 lines
13 KiB
Plaintext
609 lines
13 KiB
Plaintext
/* ==================================================
|
|
AdminModals
|
|
==================================================== */
|
|
/*
|
|
Styles for the html/body for special modal where we want 3d effects
|
|
Note that we need a container wrapping all content on the page for the
|
|
perspective effects (not including the modals and the overlay).
|
|
*/
|
|
.md-perspective,
|
|
.md-perspective body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.md-perspective body {
|
|
background: #222;
|
|
-webkit-perspective: 600px;
|
|
perspective: 600px;
|
|
}
|
|
|
|
/* Modal styles */
|
|
.md-modal {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50%;
|
|
max-width: 630px;
|
|
min-width: 320px;
|
|
height: auto;
|
|
z-index: 2000;
|
|
visibility: hidden;
|
|
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
|
|
-webkit-transform: translateX(-50%) translateY(-50%);
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
|
|
.md-show { visibility: visible; }
|
|
|
|
/* Overlay styles */
|
|
.md-overlay {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
visibility: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
opacity: 0;
|
|
background: rgba(0,0,0,0.8);
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
.md-show ~ .md-overlay {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
/* Content styles */
|
|
.md-content {
|
|
color: #666;
|
|
background: #FFF;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
margin: 0 auto;
|
|
}
|
|
.md-content h3 {
|
|
margin: 0;
|
|
padding: 15px;
|
|
text-align: center;
|
|
font-size: 2.4em;
|
|
font-weight: 300;
|
|
background: #eee;
|
|
border-radius: 3px 3px 0 0;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
.md-content > div {
|
|
padding: 15px 40px 30px;
|
|
margin: 0;
|
|
font-weight: 300;
|
|
font-size: 1.15em;
|
|
}
|
|
.md-content > div p {
|
|
margin: 0;
|
|
padding: 10px 0;
|
|
}
|
|
.md-content > div ul {
|
|
margin: 0;
|
|
padding: 0 0 30px 20px;
|
|
}
|
|
.md-content > div ul li {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
/* ====== Container options ====== */
|
|
/* modal close button */
|
|
.admin-form .mfp-close,
|
|
.admin-form .mfp-close-btn-in {
|
|
font-size: 26px;
|
|
color: #999;
|
|
text-shadow: none;
|
|
font-weight: 400;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
/* ====== Default Fade effect ====== */
|
|
.mfp-with-fade .mfp-content, .mfp-with-fade.mfp-bg {
|
|
opacity: 0;
|
|
-webkit-transition: opacity .5s ease-out;
|
|
transition: opacity .5s ease-out;
|
|
}
|
|
.mfp-with-fade.mfp-ready .mfp-content {
|
|
opacity: 1;
|
|
}
|
|
.mfp-with-fade.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-with-fade.mfp-removing .mfp-with-anim {
|
|
opacity: 0;
|
|
}
|
|
.mfp-with-fade.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Zoom effect ====== */
|
|
.mfp-zoomIn {
|
|
/* start state */
|
|
/* animate in */
|
|
/* animate out */
|
|
}
|
|
.mfp-zoomIn .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.2s ease-in-out;
|
|
transform: scale(0.8);
|
|
}
|
|
.mfp-zoomIn.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-zoomIn.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
.mfp-zoomIn.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-zoomIn.mfp-removing .mfp-with-anim {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
.mfp-zoomIn.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Zoom-out effect ====== */
|
|
.mfp-zoomOut {}
|
|
.mfp-zoomOut .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.3s ease-in-out;
|
|
transform: scale(1.3);
|
|
}
|
|
.mfp-zoomOut.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-zoomOut.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
.mfp-zoomOut.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-zoomOut.mfp-removing .mfp-with-anim {
|
|
transform: scale(1.3);
|
|
opacity: 0;
|
|
}
|
|
.mfp-zoomOut.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Move-from-left effect ====== */
|
|
.mfp-slideLeft {}
|
|
.mfp-slideLeft .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
transform: translateX(-50px);
|
|
}
|
|
.mfp-slideLeft.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
.mfp-slideLeft.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.mfp-slideLeft.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-slideLeft.mfp-removing .mfp-with-anim {
|
|
transform: translateX(50px);
|
|
opacity: 0;
|
|
}
|
|
.mfp-slideLeft.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Move-from-right effect ====== */
|
|
.mfp-slideRight {}
|
|
.mfp-slideRight .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
transform: translateX(50px);
|
|
}
|
|
.mfp-slideRight.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
}
|
|
.mfp-slideRight.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
.mfp-slideRight.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-slideRight.mfp-removing .mfp-with-anim {
|
|
transform: translateX(-50px);
|
|
opacity: 0;
|
|
}
|
|
.mfp-slideRight.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Move-from-top effect ====== */
|
|
.mfp-slideDown {}
|
|
.mfp-slideDown .mfp-content {
|
|
vertical-align: middle;
|
|
}
|
|
.mfp-slideDown .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
transform: translateY(-100px);
|
|
}
|
|
.mfp-slideDown.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
}
|
|
.mfp-slideDown.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.mfp-slideDown.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-slideDown.mfp-removing .mfp-with-anim {
|
|
transform: translateY(-50px);
|
|
opacity: 0;
|
|
}
|
|
.mfp-slideDown.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Move-from-bottom effect ====== */
|
|
.mfp-slideUp {}
|
|
.mfp-slideUp .mfp-content {
|
|
vertical-align: middle;
|
|
}
|
|
.mfp-slideUp .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
transform: translateY(100px);
|
|
}
|
|
.mfp-slideUp.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.2s;
|
|
}
|
|
.mfp-slideUp.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.mfp-slideUp.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-slideUp.mfp-removing .mfp-with-anim {
|
|
transform: translateY(50px);
|
|
opacity: 0;
|
|
}
|
|
.mfp-slideUp.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== 3d unfold ====== */
|
|
.flipInX {}
|
|
.mfp-flipInX .mfp-content {
|
|
perspective: 2000px;
|
|
}
|
|
.mfp-flipInX .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.3s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-60deg);
|
|
}
|
|
.mfp-flipInX.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-flipInX.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: rotateX(0deg);
|
|
}
|
|
.mfp-flipInX.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-flipInX.mfp-removing .mfp-with-anim {
|
|
transform: rotateX(60deg);
|
|
opacity: 0;
|
|
}
|
|
.mfp-flipInX.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== FlipInY ====== */
|
|
.mfp-flipInY {}
|
|
.mfp-flipInY .mfp-content {
|
|
perspective: 2000px;
|
|
}
|
|
.mfp-flipInY .mfp-with-anim {
|
|
opacity: 0;
|
|
transition: all 0.3s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
transform: rotateY(-60deg);
|
|
}
|
|
.mfp-flipInY.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-flipInY.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: rotateY(0deg);
|
|
}
|
|
.mfp-flipInY.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-flipInY.mfp-removing .mfp-with-anim {
|
|
transform: rotateY(60deg);
|
|
opacity: 0;
|
|
}
|
|
.mfp-flipInY.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== rotate in left ====== */
|
|
.mfp-rotateDown {}
|
|
.mfp-rotateDown .mfp-content {
|
|
-webkit-perspective: 1300px;
|
|
perspective: 1300px;
|
|
}
|
|
.mfp-rotateDown .mfp-with-anim {
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: translateY(-100%) rotateX(-90deg);
|
|
transform: translateY(-100%) rotateX(-90deg);
|
|
-webkit-transform-origin: 0 -100%;
|
|
transform-origin: 0 -100%;
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-rotateDown.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-rotateDown.mfp-ready .mfp-with-anim {
|
|
-webkit-transform: translateY(0%) rotateX(0deg);
|
|
transform: translateY(0%) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
.mfp-rotateDown.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-rotateDown.mfp-removing .mfp-with-anim {
|
|
-webkit-transform: translateY(-100%) rotateX(-90deg);
|
|
transform: translateY(-100%) rotateX(-90deg);
|
|
-webkit-transform-origin: 0 -100%;
|
|
transform-origin: 0 -100%;
|
|
opacity: 0;
|
|
}
|
|
.mfp-rotateDown.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== rotate in left ====== */
|
|
.mfp-rotateUp {}
|
|
.mfp-rotateUp .mfp-content {
|
|
-webkit-perspective: 1300px;
|
|
perspective: 1300px;
|
|
}
|
|
.mfp-rotateUp .mfp-with-anim {
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: translateY(100%) rotateX(90deg);
|
|
transform: translateY(100%) rotateX(90deg);
|
|
-webkit-transform-origin: 0 100%;
|
|
transform-origin: 0 100%;
|
|
opacity: 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-rotateUp.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-rotateUp.mfp-ready .mfp-with-anim {
|
|
-webkit-transform: translateY(0%) rotateX(0deg);
|
|
transform: translateY(0%) rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
.mfp-rotateUp.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-rotateUp.mfp-removing .mfp-with-anim {
|
|
-webkit-transform: translateY(100%) rotateX(90deg);
|
|
transform: translateY(100%) rotateX(90deg);
|
|
-webkit-transform-origin: 0 100%;
|
|
transform-origin: 0 100%;
|
|
opacity: 0;
|
|
}
|
|
.mfp-rotateUp.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== rotate in left ====== */
|
|
.mfp-rotateRight {}
|
|
.mfp-rotateRight .mfp-content {
|
|
-webkit-perspective: 1300px;
|
|
perspective: 1300px;
|
|
}
|
|
.mfp-rotateRight .mfp-with-anim {
|
|
opacity: 0;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: translateX(100%) rotateY(90deg);
|
|
transform: translateX(100%) rotateY(90deg);
|
|
-webkit-transform-origin: 100% 0;
|
|
transform-origin: 100% 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-rotateRight.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-rotateRight.mfp-ready .mfp-with-anim {
|
|
-webkit-transform: translateX(0%) rotateY(0deg);
|
|
transform: translateX(0%) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
.mfp-rotateRight.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-rotateRight.mfp-removing .mfp-with-anim {
|
|
-webkit-transform: translateX(-100%) rotateY(-90deg);
|
|
transform: translateX(-100%) rotateY(-90deg);
|
|
-webkit-transform-origin: -100% 0;
|
|
transform-origin: -100% 0;
|
|
opacity: 0;
|
|
}
|
|
.mfp-rotateRight.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== rotate in left ====== */
|
|
.mfp-rotateLeft {}
|
|
.mfp-rotateLeft .mfp-content {
|
|
-webkit-perspective: 1300px;
|
|
perspective: 1300px;
|
|
}
|
|
.mfp-rotateLeft .mfp-with-anim {
|
|
opacity: 0;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-transform: translateX(-100%) rotateY(-90deg);
|
|
transform: translateX(-100%) rotateY(-90deg);
|
|
-webkit-transform-origin: -100% 0;
|
|
transform-origin: -100% 0;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
.mfp-rotateLeft.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-rotateLeft.mfp-ready .mfp-with-anim {
|
|
-webkit-transform: translateX(0%) rotateY(0deg);
|
|
transform: translateX(0%) rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
.mfp-rotateLeft.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-rotateLeft.mfp-removing .mfp-with-anim {
|
|
-webkit-transform: translateX(100%) rotateY(90deg);
|
|
transform: translateX(100%) rotateY(90deg);
|
|
-webkit-transform-origin: 100% 0;
|
|
transform-origin: 100% 0;
|
|
opacity: 0;
|
|
}
|
|
.mfp-rotateLeft.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== fullscale ====== */
|
|
.mfp-fullscale {}
|
|
.mfp-fullscale .mfp-content {}
|
|
.mfp-fullscale .popup-basic {}
|
|
.mfp-fullscale .mfp-with-anim {
|
|
-webkit-transform: scale(0.8);
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
-webkit-transition: all 0.6s;
|
|
transition: all 0.6s;
|
|
-webkit-transition-delay: 0.3s;
|
|
transition-delay: 0.3s;
|
|
}
|
|
.mfp-fullscale.mfp-bg {
|
|
background: #000;
|
|
opacity: 0;
|
|
transition: all 0.35s;
|
|
}
|
|
.mfp-fullscale.mfp-ready .mfp-with-anim {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
.mfp-fullscale.mfp-ready.mfp-bg {
|
|
background: #000;
|
|
opacity: 1;
|
|
}
|
|
.mfp-fullscale.mfp-removing .mfp-with-anim {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.4s;
|
|
transition: all 0.4s;
|
|
}
|
|
.mfp-fullscale.mfp-removing.mfp-bg {
|
|
background: #000\A;
|
|
opacity: 0;
|
|
-webkit-transition: all 0.4s;
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
/* ====== Sign ====== */
|
|
.mfp-sign {}
|
|
.mfp-sign .mfp-content {
|
|
perspective: 1300px;
|
|
}
|
|
.mfp-sign .mfp-with-anim {
|
|
transform-style: preserve-3d;
|
|
transform: rotateX(-60deg);
|
|
transform-origin: 50% 0;
|
|
opacity: 0;
|
|
|
|
-webkit-transition: all 0.3s;
|
|
transition: all 0.3s;
|
|
}
|
|
.mfp-sign.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-sign.mfp-ready .mfp-with-anim {
|
|
transform: rotateX(0deg);
|
|
opacity: 1;
|
|
}
|
|
.mfp-sign.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-sign.mfp-removing .mfp-with-anim {
|
|
transform: rotateX(-60deg);
|
|
opacity: 0;
|
|
}
|
|
.mfp-sign.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
}
|
|
|
|
/* ====== Newspaper effect ====== */
|
|
.mfp-newspaper .mfp-with-anim {
|
|
opacity: 0;
|
|
-webkit-transition: all 0.2s ease-in-out;
|
|
transition: all 0.5s;
|
|
transform: scale(0) rotate(500deg);
|
|
}
|
|
.mfp-newspaper.mfp-bg {
|
|
opacity: 0;
|
|
transition: all 0.5s;
|
|
}
|
|
.mfp-newspaper.mfp-ready .mfp-with-anim {
|
|
opacity: 1;
|
|
transform: scale(1) rotate(0deg);
|
|
}
|
|
.mfp-newspaper.mfp-ready.mfp-bg {
|
|
opacity: 0.8;
|
|
}
|
|
.mfp-newspaper.mfp-removing .mfp-with-anim {
|
|
transform: scale(0) rotate(500deg);
|
|
opacity: 0;
|
|
}
|
|
.mfp-newspaper.mfp-removing.mfp-bg {
|
|
opacity: 0;
|
|
} |