Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Gadget-ms-Carousel.css

MediaWiki interface page
Clear your cache often around here

After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.

  • Firefox: hold down Shift while performing a page reload.
  • Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
  • Safari users should simultaneously hold down + Option + E. You may need to enable the Develop menu first
  • Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* =======================
   Carousel.css is what powers
   rotating imagery for a few 
   infobox images of Time Lords,
   most notably, the Doctor, the Master
   and Romana.  
   ======================== */

/* ====================
   Definitions for classes
   used in templates that
   invoke the following dissolving
   image carousel
   ==================== */
.info-pic {
	text-align:center;
	margin: 0;
	padding:0;
}

.info-pic2 {
	text-align:center;
	margin: 0;
	padding:3px 0 0 0;
}
.info-pic img,
.info-pic2 img {
     width:250px;
     height:auto!important;
}

/*  ===================
    Dissolving image
    carousel
    ===================
    From mishunov.me/lab
    =================== */

.dissolve {
    position: relative;
    overflow: hidden;
    width:250px; /*necessary for Firefox*/
    height:141.24px!important
}
.dissolve .item {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    width:250px; /*necessary for Firefox*/
    height:141.24px!important;
    -webkit-animation: dissolve 130s linear infinite;
       -moz-animation: dissolve 130s linear infinite;
        -ms-animation: dissolve 130s linear infinite;
         -o-animation: dissovle 130s linear infinite;
            animation: dissolve 130s linear infinite;
}
.dissolve .item:nth-child(2) {
    -webkit-animation-delay: 10s;
       -moz-animation-delay: 10s;
        -ms-animation-delay: 10s;
         -o-animation-delay: 10s;
            animation-delay: 10s;
}
.dissolve .item:nth-child(3) {
    -webkit-animation-delay: 20s;
       -moz-animation-delay: 20s;
        -ms-animation-delay: 20s;
         -o-animation-delay: 20s;
            animation-delay: 20s;
}
.dissolve .item:nth-child(4) {
    -webkit-animation-delay: 30s;
       -moz-animation-delay: 30s;
        -ms-animation-delay: 30s;
         -o-animation-delay: 30s;
            animation-delay: 30s;
}
.dissolve .item:nth-child(5) {
    -webkit-animation-delay: 40s;
       -moz-animation-delay: 40s;
        -ms-animation-delay: 40s;
         -o-animation-delay: 40s;
            animation-delay: 40s;
}
.dissolve .item:nth-child(6) {
    -webkit-animation-delay: 50s;
       -moz-animation-delay: 50s;
        -ms-animation-delay: 50s;
         -o-animation-delay: 50s;
            animation-delay: 50s;
}
.dissolve .item:nth-child(7) {
    -webkit-animation-delay: 60s;
       -moz-animation-delay: 60s;
        -ms-animation-delay: 60s;
         -o-animation-delay: 60s;
            animation-delay: 60s;
}
.dissolve .item:nth-child(8) {
    -webkit-animation-delay: 70s;
       -moz-animation-delay: 70s;
        -ms-animation-delay: 70s;
         -o-animation-delay: 70s;
            animation-delay: 70s;
}
.dissolve .item:nth-child(9) {
    -webkit-animation-delay: 80s;
       -moz-animation-delay: 80s;
        -ms-animation-delay: 80s;
         -o-animation-delay: 80s;
            animation-delay: 80s;
}
.dissolve .item:nth-child(10) {
    -webkit-animation-delay: 90s;
       -moz-animation-delay: 90s;
        -ms-animation-delay: 90s;
         -o-animation-delay: 90s;
            animation-delay: 90s;
}
.dissolve .item:nth-child(11) {
    -webkit-animation-delay: 100s;
       -moz-animation-delay: 100s;
        -ms-animation-delay: 100s;
         -o-animation-delay: 100s;
            animation-delay: 100s;
}
.dissolve .item:nth-child(12) {
    -webkit-animation-delay: 110s;
       -moz-animation-delay: 110s;
        -ms-animation-delay: 110s;
         -o-animation-delay: 110s;
            animation-delay: 110s;
}
.dissolve .item:nth-child(13) {
    -webkit-animation-delay: 120s;
       -moz-animation-delay: 120s;
        -ms-animation-delay: 120s;
         -o-animation-delay: 120s;
            animation-delay: 120s;
}

/*  The keyframes calculations are based on assumption of 4 items in the carousel. You should notice the pattern for your own calculations.

    To support Safari 4, you *must* have 0% and 100% frames */

@-webkit-keyframes dissolve {
    
    7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; }
    11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;}
}
@-moz-keyframes dissolve {

    7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; }
    11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;}
/*
    0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { opacity: 0; }
    5%, 25% { opacity: 1;} */
}
@-ms-keyframes dissolve {
    7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; }
    11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;}
    /*0%, 30%, 100% { opacity: 0; }
    5%, 25% { opacity: 1;}*/
}
@keyframes dissolve {
    7.69%, 15.38%, 23.08%, 30.77%, 38.46%, 46.15%, 53.85%, 61.54%, 69.23%, 76.92%, 84.61%, 92.30%, 100% { opacity: 0; }
    11%, 20%, 27%, 33%, 41%, 50%, 57%, 66%, 72%, 80%, 89%, 96% { opacity: 1;}

/*    0%, 30%, 100% { opacity: 0; }
    5%, 25% { opacity: 1;}*/
}
Cookies help us deliver our services. By using our services, you agree to our use of cookies.