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; 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_slide, .portal_slide a { color: #fff; text-shadow: 1px 1px 0 #000, 2px 1px 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, 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-2 .portal_slidertext { display: block; font-size: 50px; margin-right: 220px; line-height: 1em; }   /* panels */ .portal_main .portal_sliderlink-2 { position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 1; } .portal_main .portal_sliderlink-3 { position: absolute; top: 0; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-4 { position: absolute; top: 25%; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-5 { position: absolute; top: 50%; right: 0; height: 25%; cursor: pointer; z-index: 2; } .portal_main .portal_sliderlink-6 { position: absolute; top: 75%; right: 0; height: 25%; cursor: pointer; z-index: 2; }   /** panels width **/ .portal_main .portal_sliderlink-3, .portal_main .portal_sliderlink-4, .portal_main .portal_sliderlink-5, .portal_main .portal_sliderlink-6 { width: 215px; }

/* panels hover/shadow effect */ .portal_main .portal_sliderlink-2:after, .portal_main .portal_sliderlink-3:after, .portal_main .portal_sliderlink-4:after, .portal_main .portal_sliderlink-5:after, .portal_main .portal_sliderlink-6:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: #000; opacity: 0.2; } .portal_main .portal_sliderlink-2:hover:after, .portal_main .portal_sliderlink-3:hover:after, .portal_main .portal_sliderlink-4:hover:after, .portal_main .portal_sliderlink-5:hover:after, .portal_main .portal_sliderlink-6:hover:after { display: none; }

/* panel images */ .portal_main .portal_sliderlink-2 { background-image: url("/wiki/Special:FilePath/Slide_2_preview.png"); background-size: cover; } .portal_main .portal_sliderlink-3 { background-image: url("/Special:FilePath/Slide_3_preview.png"); background-size: cover; } .portal_main .portal_sliderlink-4 { background-image: url("/wiki/Special:FilePath/Slide_4_preview.png"); background-size: cover; } .portal_main .portal_sliderlink-5 { background-image: url("/wiki/Special:FilePath/Slide_5_preview.png"); background-size: cover; } .portal_main .portal_sliderlink-6 { background-image: url("/wiki/Special:FilePath/Slide_6_preview.png"); background-size: cover; }

/* 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_2_background.png"); background-size: cover; }   background-image: url("/wiki/Special:FilePath/Slide_3_background.png"); 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; }   background-image: url("/Special:FilePath/Slide_6_background.png"); background-size: cover; }
 * 1) portal_slide2 {
 * 1) portal_slide3 {
 * 1) portal_slide4 {
 * 1) portal_slide5 {
 * 1) portal_slide6 {

/** icons **/ .portal_slide .portal_buttons { display: block; position: absolute; bottom: 0; left: 5px; z-index: 2; }

.portal_slide .portal_buttons a { display: inline-block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; }

.portal_slide .portal_buttons .portal_navlink { display: inline-block; width: 35px; height: 35px; background-image: url("/wiki/Special:FilePath/Slider_back.png"); background-size: cover; cursor: pointer }

.portal_slide .portal_buttons .portal_editlink { display: inline-block; width: 35px; height: 35px; margin-left: 110px; background-image: url("/wiki/Special:FilePath/Slider_edit.png"); background-size: cover; cursor: pointer }

.portal_slide .portal_buttons div { opacity: 0.7 }

.portal_slide .portal_buttons div:hover { opacity: 1 }   /** 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 */