123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388 |
- /* This is the core CSS of Tooltipster */
- /* GENERAL STRUCTURE RULES (do not edit this section) */
- .tooltipster-base {
- /* this ensures that a constrained height set by functionPosition,
- if greater that the natural height of the tooltip, will be enforced
- in browsers that support display:flex */
- display: flex;
- pointer-events: none;
- /* this may be overriden in JS for fixed position origins */
- position: absolute;
- }
- .tooltipster-box {
- /* see .tooltipster-base. flex-shrink 1 is only necessary for IE10-
- and flex-basis auto for IE11- (at least) */
- flex: 1 1 auto;
- }
- .tooltipster-content {
- /* prevents an overflow if the user adds padding to the div */
- box-sizing: border-box;
- /* these make sure we'll be able to detect any overflow */
- max-height: 100%;
- max-width: 100%;
- overflow: auto;
- }
- .tooltipster-ruler {
- /* these let us test the size of the tooltip without overflowing the window */
- bottom: 0;
- left: 0;
- overflow: hidden;
- position: fixed;
- right: 0;
- top: 0;
- visibility: hidden;
- }
- /* ANIMATIONS */
- /* Open/close animations */
- /* fade */
- .tooltipster-fade {
- opacity: 0;
- -webkit-transition-property: opacity;
- -moz-transition-property: opacity;
- -o-transition-property: opacity;
- -ms-transition-property: opacity;
- transition-property: opacity;
- }
- .tooltipster-fade.tooltipster-show {
- opacity: 1;
- }
- /* grow */
- .tooltipster-grow {
- -webkit-transform: scale(0,0);
- -moz-transform: scale(0,0);
- -o-transform: scale(0,0);
- -ms-transform: scale(0,0);
- transform: scale(0,0);
- -webkit-transition-property: -webkit-transform;
- -moz-transition-property: -moz-transform;
- -o-transition-property: -o-transform;
- -ms-transition-property: -ms-transform;
- transition-property: transform;
- -webkit-backface-visibility: hidden;
- }
- .tooltipster-grow.tooltipster-show {
- -webkit-transform: scale(1,1);
- -moz-transform: scale(1,1);
- -o-transform: scale(1,1);
- -ms-transform: scale(1,1);
- transform: scale(1,1);
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- }
- /* swing */
- .tooltipster-swing {
- opacity: 0;
- -webkit-transform: rotateZ(4deg);
- -moz-transform: rotateZ(4deg);
- -o-transform: rotateZ(4deg);
- -ms-transform: rotateZ(4deg);
- transform: rotateZ(4deg);
- -webkit-transition-property: -webkit-transform, opacity;
- -moz-transition-property: -moz-transform;
- -o-transition-property: -o-transform;
- -ms-transition-property: -ms-transform;
- transition-property: transform;
- }
- .tooltipster-swing.tooltipster-show {
- opacity: 1;
- -webkit-transform: rotateZ(0deg);
- -moz-transform: rotateZ(0deg);
- -o-transform: rotateZ(0deg);
- -ms-transform: rotateZ(0deg);
- transform: rotateZ(0deg);
- -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);
- -webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
- -moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
- -ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
- -o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
- transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);
- }
- /* fall */
- .tooltipster-fall {
- -webkit-transition-property: top;
- -moz-transition-property: top;
- -o-transition-property: top;
- -ms-transition-property: top;
- transition-property: top;
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- }
- .tooltipster-fall.tooltipster-initial {
- top: 0 !important;
- }
- .tooltipster-fall.tooltipster-show {
- }
- .tooltipster-fall.tooltipster-dying {
- -webkit-transition-property: all;
- -moz-transition-property: all;
- -o-transition-property: all;
- -ms-transition-property: all;
- transition-property: all;
- top: 0 !important;
- opacity: 0;
- }
- /* slide */
- .tooltipster-slide {
- -webkit-transition-property: left;
- -moz-transition-property: left;
- -o-transition-property: left;
- -ms-transition-property: left;
- transition-property: left;
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
- -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- -o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);
- }
- .tooltipster-slide.tooltipster-initial {
- left: -40px !important;
- }
- .tooltipster-slide.tooltipster-show {
- }
- .tooltipster-slide.tooltipster-dying {
- -webkit-transition-property: all;
- -moz-transition-property: all;
- -o-transition-property: all;
- -ms-transition-property: all;
- transition-property: all;
- left: 0 !important;
- opacity: 0;
- }
- /* Update animations */
- /* We use animations rather than transitions here because
- transition durations may be specified in the style tag due to
- animationDuration, and we try to avoid collisions and the use
- of !important */
- /* fade */
- @keyframes tooltipster-fading {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- .tooltipster-update-fade {
- animation: tooltipster-fading 400ms;
- }
- /* rotate */
- @keyframes tooltipster-rotating {
- 25% {
- transform: rotate(-2deg);
- }
- 75% {
- transform: rotate(2deg);
- }
- 100% {
- transform: rotate(0);
- }
- }
- .tooltipster-update-rotate {
- animation: tooltipster-rotating 600ms;
- }
- /* scale */
- @keyframes tooltipster-scaling {
- 50% {
- transform: scale(1.1);
- }
- 100% {
- transform: scale(1);
- }
- }
- .tooltipster-update-scale {
- animation: tooltipster-scaling 600ms;
- }
- /**
- * DEFAULT STYLE OF THE SIDETIP PLUGIN
- *
- * All styles are "namespaced" with .tooltipster-sidetip to prevent
- * conflicts between plugins.
- */
- /* .tooltipster-box */
- .tooltipster-sidetip .tooltipster-box {
- background: #565656;
- border: 2px solid black;
- border-radius: 4px;
- }
- .tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
- margin-top: 8px;
- }
- .tooltipster-sidetip.tooltipster-left .tooltipster-box {
- margin-right: 8px;
- }
- .tooltipster-sidetip.tooltipster-right .tooltipster-box {
- margin-left: 8px;
- }
- .tooltipster-sidetip.tooltipster-top .tooltipster-box {
- margin-bottom: 8px;
- }
- /* .tooltipster-content */
- .tooltipster-sidetip .tooltipster-content {
- color: white;
- line-height: 18px;
- padding: 6px 14px;
- }
- /* .tooltipster-arrow : will keep only the zone of .tooltipster-arrow-uncropped that
- corresponds to the arrow we want to display */
- .tooltipster-sidetip .tooltipster-arrow {
- overflow: hidden;
- position: absolute;
- }
- .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
- height: 10px;
- /* half the width, for centering */
- margin-left: -10px;
- top: 0;
- width: 20px;
- }
- .tooltipster-sidetip.tooltipster-left .tooltipster-arrow {
- height: 20px;
- margin-top: -10px;
- right: 0;
- /* top 0 to keep the arrow from overflowing .tooltipster-base when it has not
- been positioned yet */
- top: 0;
- width: 10px;
- }
- .tooltipster-sidetip.tooltipster-right .tooltipster-arrow {
- height: 20px;
- margin-top: -10px;
- left: 0;
- /* same as .tooltipster-left .tooltipster-arrow */
- top: 0;
- width: 10px;
- }
- .tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
- bottom: 0;
- height: 10px;
- margin-left: -10px;
- width: 20px;
- }
- /* common rules between .tooltipster-arrow-background and .tooltipster-arrow-border */
- .tooltipster-sidetip .tooltipster-arrow-background, .tooltipster-sidetip .tooltipster-arrow-border {
- height: 0;
- position: absolute;
- width: 0;
- }
- /* .tooltipster-arrow-background */
- .tooltipster-sidetip .tooltipster-arrow-background {
- border: 10px solid transparent;
- }
- .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
- border-bottom-color: #565656;
- left: 0;
- top: 3px;
- }
- .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-background {
- border-left-color: #565656;
- left: -3px;
- top: 0;
- }
- .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-background {
- border-right-color: #565656;
- left: 3px;
- top: 0;
- }
- .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background {
- border-top-color: #565656;
- left: 0;
- top: -3px;
- }
- /* .tooltipster-arrow-border */
- .tooltipster-sidetip .tooltipster-arrow-border {
- border: 10px solid transparent;
- left: 0;
- top: 0;
- }
- .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
- border-bottom-color: black;
- }
- .tooltipster-sidetip.tooltipster-left .tooltipster-arrow-border {
- border-left-color: black;
- }
- .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-border {
- border-right-color: black;
- }
- .tooltipster-sidetip.tooltipster-top .tooltipster-arrow-border {
- border-top-color: black;
- }
- /* tooltipster-arrow-uncropped */
- .tooltipster-sidetip .tooltipster-arrow-uncropped {
- position: relative;
- }
- .tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
- top: -10px;
- }
- .tooltipster-sidetip.tooltipster-right .tooltipster-arrow-uncropped {
- left: -10px;
- }
|