MediaWiki:Slider.css

/*******************************************               jQuery Slider *******************************************/ /** * CSS for "Template:Slider generator" * original code made by "Tierrie" for the Dragon Age Wiki * updated and reviewed by "leviathan_89" for the One Piece Wiki */

/* container and common settings */ .portal_container { max-width: 860px; position: relative; z-index: 1; border: 1px solid #000; text-align: left; font-family: "Segoe UI", Helvetica, Verdana, "sans-serif"; overflow: hidden; margin: 0 auto 5px auto; } .portal_container, .portal_main, .portal_slide { height: 450px; overflow: hidden; }   /** text and links **/ .portal_container, .portal_container a, .portal_main, .portal_main a, .portal_slide, .portal_slide a { color: #fff; text-shadow: 1px 1px 0 #000, 2px 1px 0 #000, 1px 2px 0 #000, 2px 2px 0 #000, 3px 3px 4px #000; }       /*** hovering links (excluding main menù) ***/ div.portal_body a:hover { color: #fdd600; text-shadow: 1px 1px 0 #000, 2px 1px 0 #000, 1px 2px 0 #000, 2px 2px 0 #000, 3px 3px 4px #000; }

/* give black background for fading to black while sliding */ .portal_container > .portal_body:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background-color: rgb(0, 0, 0); z-index: -2; }

/* avoid rendering borders twice */ .portal_container .portal_main, .portal_container .portal_slide { border: none; } /* paddings */ div.portal_container .ui-tabs-panel { padding: 0; } div.portal_container, div.portal_container .portal_body { padding: 0; }

/* main menù */ .portal_main .portal_slidertext { text-transform: uppercase; font-size: 22px; }   /** text **/ .portal_main .portal_slidertext { position: absolute; bottom: 5px; left: 5px; z-index: 3; } .portal_main .portal_sliderlink-1 .portal_slidertext { display: block; font-size: 50px; margin-right: 220px; line-height: 1em; }   /** panels **/ .portal_main .portal_sliderlink-1 { position: absolute; width: 75%; height: 100%; cursor: pointer; z-index: 1; } .portal_main .portal_sliderlink-2 { position: absolute; top: 0; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-3 { position: absolute; top: 25%; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-4 { position: absolute; top: 50%; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-5 { position: absolute; top: 75%; right: 0; height: 25%; cursor: pointer; z-index: 2; }   /** images **/ .portal_main img { width: 100%; height: 100%; }   /** small panels width **/ .portal_main .portal_sliderlink-2, .portal_main .portal_sliderlink-3, .portal_main .portal_sliderlink-4, .portal_main .portal_sliderlink-5 { width: 215px; }

/** panels hover/shadow effect **/ .portal_main .portal_sliderlink:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.2; } .portal_main .portal_sliderlink:hover:after { display: none; }

/* single slide */ /** padding **/ .portal_slide .portal_vtab { padding: 0; }   /** slide tabs **/ div.portal_slide .ui-tabs-nav { border: none; padding: 0; width: 200px; float: left; text-transform: uppercase; font-size: 16px; } div.portal_slide .ui-tabs-nav li { margin: 0; top: 0; width: 100%; white-space: normal; background-color: rgba(0, 0, 0, 0.6); }       /*** selecting/hovering tabs ***/ div.portal_slide .ui-tabs-nav li.ui-state-active { background-color: transparent; padding: 0; } div.portal_slide .ui-tabs-nav li.ui-state-hover { background-color: transparent; }       /*** tab links (overwriting global styles) ***/ div.portal_slide .ui-tabs-nav li a, div.portal_slide .ui-tabs-nav li.ui-tabs-selected a { width: 180px; /* ".ui-tabs-nav" width - padding */ margin: 0; padding: 10px 10px; background: none; cursor: pointer; color: inherit; font-size: inherit; font-weight: inherit; }       /*** continue tabs column even if there are no more elements ***/ div.portal_slide .ui-tabs-nav:after { height: 450px; content: ""; width: 100%; background-color: rgba(0, 0, 0, 0.6); }   /** slides background **/ background-image: url("/wiki/Special:FilePath/Slide_1_background.png"); background-size: cover; }   background-image: url("/wiki/Special:FilePath/Volume_11.jpg"); background-size: cover; }   background-image: url("/wiki/Special:FilePath/Anime_Key_Visual_2.jpg"); background-size: cover; }   background-image: url("/wiki/Special:FilePath/Slide_4_background.png"); background-size: cover; }   background-image: url("/wiki/Special:FilePath/Slide_5_background.png"); background-size: cover; }
 * 1) portal_slide1 {
 * 1) portal_slide2 {
 * 1) portal_slide3 {
 * 1) portal_slide4 {
 * 1) portal_slide5 {

/** icons **/ /*** container ***/ .portal_slide .portal_buttons { display: block; position: absolute; bottom: 0; left: 5px; z-index: 2; }       /*** hovering effect ***/ .portal_slide .portal_buttons .portal_icon { opacity: 0.7 }

.portal_slide .portal_buttons .portal_icon:hover { opacity: 1 }       /*** hiding text link ***/ .portal_slide .portal_buttons a { display: inline-block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; }       /*** home link ***/ .portal_slide .portal_buttons .portal_homelink { float: left; width: 35px; height: 35px; background-image: url("/wiki/Special:FilePath/Slider_home.png"); background-size: cover; cursor: pointer }       /*** nav links ***/ .portal_slide .portal_buttons .portal_navlink { float: left; }

.portal_slide .portal_buttons .portal_navlink div { float: left; width: 35px; height: 35px; background-image: url("/wiki/Special:FilePath/Slider_arrow.png"); background-size: cover; cursor: pointer }       /*** reversing "next" button ***/ .portal_slide .portal_buttons .portal_next { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: "FlipH"; filter: FlipH; }       /*** hiding unnecessary nav buttons ***/ .portal_container #portal_content-1 .portal_buttons .portal_prev, .portal_container .portal_content:last-child .portal_buttons .portal_next { display: none; }       /*** leaving a blank space for missing button ***/ .portal_container #portal_content-1 .portal_buttons .portal_navlink:before, .portal_container .portal_content:last-child .portal_buttons .portal_navlink:after { float: left; width: 35px; height: 35px; content: ""; }       /*** edit button ***/ .portal_slide .portal_buttons .portal_editlink { display: inline-block; width: 35px; height: 35px; background-image: url("/wiki/Special:FilePath/Slider_edit.png"); background-size: cover; cursor: pointer }

/** panel content **/ div.portal_slide .ui-tabs-panel { height: 450px; padding: 4px; overflow: auto; } div.portal_slide .ui-tabs-panel ul { list-style: none; margin-left: 0.5em; }

/* Monobook fixes */ .portal_container .ui-widget-content { background: inherit; color: inherit; border: inherit; } .portal_container.ui-corner-all, .portal_container .ui-corner-all { border-radius: inherit; } .portal_container .ui-widget-header { background: inherit; color: inherit; font-weight: inherit; } .portal_container .ui-widget { font-family: inherit; } .portal_container .ui-tabs-nav li { background: inherit; color: inherit; } .portal_container .ui-state-default { border: inherit; border-radius: inherit; } /* END jQuery Slider */