GravTheme/pluginAppObj/imFooter_pluginAppObj_03/custom.css

364 lines
8.6 KiB
CSS
Raw Normal View History

2023-09-02 11:11:48 +00:00
#imFooter_pluginAppObj_03{
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
max-width: 100%;
;
}
#iandt_imFooter_pluginAppObj_03 {
width: 250px;
max-width: 100%;
}
#iandt_imFooter_pluginAppObj_03 .wrapper{
width: 100%;
height: 0px;
padding-top: 20%;
margin: 0 auto;
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
}
#iandt_imFooter_pluginAppObj_03 .sides-container{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#iandt_imFooter_pluginAppObj_03 .side{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#iandt_imFooter_pluginAppObj_03 .side.front{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#iandt_imFooter_pluginAppObj_03 .side.back{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#iandt_imFooter_pluginAppObj_03 .wrapper:not(.none) .side{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#iandt_imFooter_pluginAppObj_03 .front{
cursor: default;
background-color: transparent;
}
#iandt_imFooter_pluginAppObj_03 .back{
background-color: rgba(64, 64, 64, 1);
}
#iandt_imFooter_pluginAppObj_03 .none .back,
#iandt_imFooter_pluginAppObj_03 .fade .back,
#iandt_imFooter_pluginAppObj_03 .appear-top .back,
#iandt_imFooter_pluginAppObj_03 .appear-bottom .back,
#iandt_imFooter_pluginAppObj_03 .appear-left .back,
#iandt_imFooter_pluginAppObj_03 .appear-right .back {
background-color: rgba(64, 64, 64, 0.6);
}
#iandt_imFooter_pluginAppObj_03 .front .text-container{
width: 250px;
height: 50px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family:Unica One;font-size:14pt;font-weight: normal;font-style: normal;color:rgba(255, 255, 255, 1);
background-image: url('../../pluginAppObj/imFooter_pluginAppObj_03/4Creative-Discord-Button.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#iandt_imFooter_pluginAppObj_03 .center-all{
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
}
#iandt_imFooter_pluginAppObj_03 .back .text-container{
width: 250px;
height: 50px;
max-width: 100%;
max-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Unica One;
font-size: 14pt;
font-weight: normal;
font-style: normal;
color: rgba(255, 255, 255, 1);
}
#iandt_imFooter_pluginAppObj_03 .back .text-container p{ margin: 10px 5px 0px 5px; }
#iandt_imFooter_pluginAppObj_03 .back .text-container .btn{
margin: 15px auto;
position: relative;
display: inline-block;
background-color: transparent;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-family: Unica One;
font-size: 14pt;
font-weight: bold;
font-style: normal;
color:rgba(243, 243, 243, 1);
}
#iandt_imFooter_pluginAppObj_03 .back-visible .back .btn{
cursor: pointer;
}
#iandt_imFooter_pluginAppObj_03 .back .text-container .btn:hover{
background-color:transparent;
}
#iandt_imFooter_pluginAppObj_03 .back .text-container .btn a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
pointer-events: none;
box-sizing: border-box;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
#iandt_imFooter_pluginAppObj_03 .back-visible .back .text-container .btn a{
pointer-events: auto;
display: block;
}
/* Effects! */
/* NONE */
#iandt_imFooter_pluginAppObj_03 .none .back{
display: none;
opacity: 0;
}
#iandt_imFooter_pluginAppObj_03 .none.back-visible .back{
display: block;
opacity: 1;
}
/* FADE */
#iandt_imFooter_pluginAppObj_03 .fade .back{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#iandt_imFooter_pluginAppObj_03 .fade.back-visible .back{
visibility: visible;
opacity: 1;
}
/* APPEAR-TOP */
#iandt_imFooter_pluginAppObj_03 .appear-top .back{
top: -100%;
}
#iandt_imFooter_pluginAppObj_03 .appear-top.back-visible .back{
top: 0;
}
/* APPEAR-BOTTOM */
#iandt_imFooter_pluginAppObj_03 .appear-bottom .back{
top: 100%;
}
#iandt_imFooter_pluginAppObj_03 .appear-bottom.back-visible .back{
top: 0;
}
/* APPEAR-LEFT */
#iandt_imFooter_pluginAppObj_03 .appear-left .back{
left: -100%;
}
#iandt_imFooter_pluginAppObj_03 .appear-left.back-visible .back{
left: 0;
}
/* APPEAR-RIGHT */
#iandt_imFooter_pluginAppObj_03 .appear-right .back{
left: 100%;
}
#iandt_imFooter_pluginAppObj_03 .appear-right.back-visible .back{
left: 0;
}
/* MOVE-TOP */
#iandt_imFooter_pluginAppObj_03 .move-top .front{
top: 0;
}
#iandt_imFooter_pluginAppObj_03 .move-top.back-visible .front{
top: 100%;
}
#iandt_imFooter_pluginAppObj_03 .move-top .back{
top: -100%;
}
#iandt_imFooter_pluginAppObj_03 .move-top.back-visible .back{
top: 0;
}
/* MOVE-BOTTOM */
#iandt_imFooter_pluginAppObj_03 .move-bottom .front{
top: 0;
}
#iandt_imFooter_pluginAppObj_03 .move-bottom.back-visible .front{
top: -100%;
}
#iandt_imFooter_pluginAppObj_03 .move-bottom .back{
top: 100%;
}
#iandt_imFooter_pluginAppObj_03 .move-bottom.back-visible .back{
top: 0;
}
/* MOVE-LEFT */
#iandt_imFooter_pluginAppObj_03 .move-left .front{
left: 0;
}
#iandt_imFooter_pluginAppObj_03 .move-left.back-visible .front{
left: 100%;
}
#iandt_imFooter_pluginAppObj_03 .move-left .back{
left: -100%;
}
#iandt_imFooter_pluginAppObj_03 .move-left.back-visible .back{
left: 0;
}
/* MOVE-RIGHT */
#iandt_imFooter_pluginAppObj_03 .move-right .front{
left: 0;
}
#iandt_imFooter_pluginAppObj_03 .move-right.back-visible .front{
left: -100%;
}
#iandt_imFooter_pluginAppObj_03 .move-right .back{
left: 100%;
}
#iandt_imFooter_pluginAppObj_03 .move-right.back-visible .back{
left: 0;
}
/* FLIP HORIZONTAL & VERTICAL */
#iandt_imFooter_pluginAppObj_03 .flip-hor,
#iandt_imFooter_pluginAppObj_03 .flip-vert {
perspective: 1000px;
overflow: visible;
}
#iandt_imFooter_pluginAppObj_03 .flip-hor .sides-container,
#iandt_imFooter_pluginAppObj_03 .flip-vert .sides-container{
transform-style: preserve-3d;
}
#iandt_imFooter_pluginAppObj_03 .flip-hor .side,
#iandt_imFooter_pluginAppObj_03 .flip-vert .side {
-webkit-transition: all 500ms ease, width 1ms, height 1ms;
-moz-transition: all 500ms ease, width 1ms, height 1ms;
-o-transition: all 500ms ease, width 1ms, height 1ms;
transition: all 500ms ease, width 1ms, height 1ms;
transform-style: preserve-3d;
overflow: visible;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
#iandt_imFooter_pluginAppObj_03 .flip-hor .front,
#iandt_imFooter_pluginAppObj_03 .flip-vert .front{
z-index: 2;
}
#iandt_imFooter_pluginAppObj_03 .flip-hor .front{
transform: rotateY(0deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-hor .back{
transform: rotateY(-180deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-hor.back-visible .front{
transform: rotateY(180deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-hor.back-visible .back{
transform: rotateY(0deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-vert .front{
transform: rotateX(0deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-vert .back{
transform: rotateX(-180deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-vert.back-visible .front{
transform: rotateX(180deg);
}
#iandt_imFooter_pluginAppObj_03 .flip-vert.back-visible .back{
transform: rotateX(0deg);
}
/* ZOOM */
#iandt_imFooter_pluginAppObj_03 .zoom .front img{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#iandt_imFooter_pluginAppObj_03 .zoom.back-visible .front{
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
}
#iandt_imFooter_pluginAppObj_03 .zoom .back{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#iandt_imFooter_pluginAppObj_03 .zoom.back-visible .back{
visibility: visible;
opacity: 1;
}