19 lines
3.6 KiB
CSS
19 lines
3.6 KiB
CSS
/* Tip */
|
|
.imTip { position: absolute; z-index: 100201; margin: 0 auto; padding: 10px; background-color: rgba(255, 255, 255, 1); border-style: solid; border-width: 1px 1px 1px 1px; border-color: rgba(255, 0, 0, 1) rgba(255, 0, 0, 1) rgba(255, 0, 0, 1) rgba(255, 0, 0, 1); border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
|
|
.imTip { opacity: 0; transition: opacity 1s; }
|
|
@keyframes imTipTopBounce { 0% { transform: translateY(-200px); } 50% { transform: translateY(0); } 70% { transform: translateY(-20px); } 90% { transform: translateY(0); } 95% { transform: translateY(-3px); } 100% { transform: translateY(0); } }@keyframes imTipBottomBounce { 0% { transform: translateY(200px); } 50% { transform: translateY(0); } 70% { transform: translateY(20px); } 90% { transform: translateY(0); } 95% { transform: translateY(3px); } 100% { transform: translateY(0); } }@keyframes imTipLeftBounce { 0% { transform: translateX(-200px); } 50% { transform: translateX(0); } 70% { transform: translateX(-20px); } 90% { transform: translateX(0); } 95% { transform: translateX(-3px); } 100% { transform: translateX(0); } }@keyframes imTipRightBounce { 0% { transform: translateX(200px); } 50% { transform: translateX(0); } 70% { transform: translateX(20px); } 90% { transform: translateX(0); } 95% { transform: translateX(3px); } 100% { transform: translateX(0); } }.imTip.imTipTop.imTipVisible { opacity: 1; animation: 1s imTipTopBounce; }
|
|
.imTip.imTipBottom.imTipVisible { opacity: 1; animation: 1s imTipBottomBounce; }
|
|
.imTip.imTipLeft.imTipVisible { opacity: 1; animation: 1s imTipLeftBounce; }
|
|
.imTip.imTipRight.imTipVisible { opacity: 1; animation: 1s imTipRightBounce; }
|
|
.imTipArrowBorder, .imTipArrow { border-style: solid; height: 0; width: 0; position: absolute; }
|
|
.imTip.imTipTop>.imTipArrowBorder { border-color: rgba(255, 0, 0, 1) transparent transparent transparent; border-width: 11px 11px 0px 11px; top: 100%; left: calc(50% - 11px); }
|
|
.imTip.imTipTop>.imTipArrow { border-color: rgba(255, 255, 255, 1) transparent transparent transparent; border-width: 10px 10px 0px 10px; top: 100%; left: calc(50% - 10px); }
|
|
.imTip.imTipBottom>.imTipArrowBorder { border-color: transparent transparent rgba(255, 0, 0, 1) transparent; border-width: 0px 11px 11px 11px; bottom: 100%; left: calc(50% - 11px); }
|
|
.imTip.imTipBottom>.imTipArrow { border-color: transparent transparent rgba(255, 255, 255, 1) transparent; border-width: 0px 10px 10px 10px; bottom: 100%; left: calc(50% - 10px); }
|
|
.imTip.imTipLeft>.imTipArrowBorder { border-color: transparent transparent transparent rgba(255, 0, 0, 1); border-width: 11px 0px 11px 11px; left: 100%; top: calc(50% - 11px); }
|
|
.imTip.imTipLeft>.imTipArrow { border-color: transparent transparent transparent rgba(255, 255, 255, 1); border-width: 10px 0px 10px 10px; left: 100%; top: calc(50% - 10px); }
|
|
.imTip.imTipRight>.imTipArrowBorder { border-color: transparent rgba(255, 0, 0, 1) transparent transparent; border-width: 11px 11px 11px 0px; right: 100%; top: calc(50% - 11px); }
|
|
.imTip.imTipRight>.imTipArrow { border-color: transparent rgba(255, 255, 255, 1) transparent transparent; border-width: 10px 10px 10px 0px; right: 100%; top: calc(50% - 10px); }
|
|
.imTipContent { width: 100%; font: normal normal normal 13pt 'Open Sans'; color: rgba(67, 67, 67, 1); background-color: rgba(255, 255, 255, 1); text-decoration: none; text-align: center; }
|
|
.imTipContent img { margin-bottom: 6px; max-width: 100%; }
|
|
.imTip.textLeft .imTipContent { text-align: left; } |