MediaWiki:PortalSlider.css

/* =======================   PortalSlider.css is, along with MediaWiki:Common.js/Slider.js, the "power" behind the so-called "portal slider" seen on the main page.

Note that this wiki has had two versions of this CSS: this one, and an earlier one, dating back to about 2011.

This is the code which was built for the November 2017 version. It is not completely compatible with the older version, as explained to the admin staff on Discord.

See Cateogory:Templates creating portal for the templates this CSS was meant to affect.

Note, however, that it was only meant to affect the November 2017 revisions of those templates. ====================== */

/* container settings */

.portal_metro .toc { display: none; } .portal_container { position: relative; display: inline-block; width: 670px; } /* give all containers a black background so the opacity changes results in a brightness change */ .portal_metro:before { position: absolute; top: 0; left: 0; width:100%; height: 100%; content: ""; background-color: rgb(0,0,0); z-index: -2; } .portal_metro { border: 2px solid #ecc59e; } .portal_metro .portal_body { padding: 0 10px 0 10px; overflow: hidden; }

/* pages nested within a slider container should not render borders twice */ .portal_metro .portal_metro { border: none; } .portal_metro.ui-tabs .ui-tabs-panel { padding: 0; } .portal_metro#portal_slider, .portal_metro#portal_slider .portal_body { padding: 0; } .portal_metro#portal_slider { width:670px; margin:0 auto; } /* font title and sliders */ .portal_metro [class^=portal_sliderlink] .mw-headline, .portal_metro [class^=portal_sliderlink] .portal_slidertext, .portal_metro .portal_header_text, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a, .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { width: 100%; font-family: "Cinzel", serif; font-weight: normal; font-size: inherit; line-height: inherit; text-shadow: 0px 0px 2px rgba(0,64,0,0.5), -1px -1px rgba(0,64,0,0.5), 1px 1px rgba(0,64,0,0.5); text-align:left; color:#ecc59e; } .portal_metro [class^=portal_sliderlink] .mw-headline, .portal_metro [class^=portal_sliderlink] .portal_slidertext, .portal_metro .portal_header_text, .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { text-transform: uppercase; } .portal_metro .portal_header_text { font-size: 2em; padding-top: 15px; } .portal_metro [class^=portal_sliderlink] { font-size: 1.4em; } /* portal headers, headerlinks colors and formatting */ .portal_metro .portal_header { position: relative; margin-bottom: 6px; padding: 0; } .portal_metro .portal_header_text { border-bottom: none; padding-left: 15px; } .portal_metro .portal_headerlinks { font-size: 0.8em; position: absolute; right: 1em; top: 1em; padding-bottom: 2px; z-index: 1; } .portal_metro .portal_header, .portal_metro .portal_header a:link, .portal_metro .portal_header a:visited, .portal_metro .portal_header a:hover, .portal_metro .portal_header a:active { color: #ecc59e; } /* slider text position */ .portal_metro [class^=portal_sliderlink] .portal_slidertext { position: absolute; bottom: 10px; left: 10px; } .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { display: block; font-size: 1.6em; left: 20px; line-height: 1em; } /* main slider sizing */ .portal_metro#portal_main [class^=portal_sliderlink] { cursor: pointer; position: absolute; overflow: hidden; } .portal_metro#portal_main, .portal_vtab.ui-tabs-vertical, .portal_vtab.ui-tabs-vertical .ui-tabs-nav, .portal_vtab.ui-tabs-vertical .ui-tabs-panel { height: 450px; } .portal_metro#portal_main .portal_sliderlink-2 { width: 100%; } /* slider background */ .portal_metro#portal_main [class^=portal_sliderlink]:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0,0,0); position: absolute; z-index: -1; } .portal_metro#portal_main [class^=portal_sliderlink]:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .portal_metro#portal_main [class^=portal_sliderlink]:hover:after { opacity: 1; } .portal_metro#portal_main .portal_sliderlink-2 { top: 0px; left: 0px; height: 450px; } .portal_metro#portal_main .portal_sliderlink-2:after { background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/2/29/Odyssey-Portal-Medium.png'); } .portal_metro#portal_main .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; } .portal_metro#portal_main .portal_sliderlink-3:after { background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/e/e0/Other-Portal-Small.png'); } .portal_metro#portal_main .portal_sliderlink-4 { top: 112px; right: 0px; height: 113px; } .portal_metro#portal_main .portal_sliderlink-4:after { background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/9/99/Comics-Portal-Small.png'); } .portal_metro#portal_main .portal_sliderlink-5 { top: 225px; right: 0px; height: 112px; } .portal_metro#portal_main .portal_sliderlink-5:after { background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/5/57/Admin-Portal-Small.png'); } .portal_metro#portal_main .portal_sliderlink-6 { top: 337px; right: 0px; height: 113px; } .portal_metro#portal_main .portal_sliderlink-6:after { background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/a/aa/Main-Portal-Small.png'); } /* slider sub category background */ position: relative; }   z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }   background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/f/fe/Main-Portal-Big.png'); }   background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/e/ee/Odyssey-Portal-Big.png'); }   background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/8/86/Other-Portal-Big.png'); }   background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/6/64/Comics-Portal-Big.png'); }   background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/6/6a/Admin-Portal-Big.png'); } .portal_metro#portal_slider .portal_navlink { display: none; } .portal_metro#portal_slider { } .portal_metro#portal_slider .portal_navlink { display: block; position: absolute; bottom: 8px; left: 8px; z-index: 2; } .portal_metro#portal_slider .portal_navlink img { opacity: 0.3; } .portal_metro#portal_slider .portal_navlink img:hover { opacity: 0.8; } .portal_metro#portal_slider .portal_header { position: absolute; width: 100px; height: 50px; right: 10px; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { padding: 0; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { border: none; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel { position: absolute; left: 200px; top: 0px; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav { padding: 0; width: 200px; float: left; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li { cursor: pointer; margin: 0; top: 0; clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding: 0; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li a { background: none; font-size: 1.2em; display:block; width: 100%; padding: .25em 0 .5em 1em; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected a { background: none; cursor: pointer; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after { height: 420px; content: ""; width: 100%; overflow-y: hidden; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before { } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav:before, .portal_vtab.ui-tabs-vertical .ui-tabs-nav:after, .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-default { background-color: rgba(0,0,0,0.6); } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-active { background-color: transparent; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { background-color: transparent; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical { width: 100%; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; border-right-width: 1px; border-right-width: 1px; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel ul { padding: 12px 0 0 5px; margin: 0; /* columns: 2; -webkit-columns: 2; -moz-columns: 2; */ } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li { list-style: none; padding: .25em 0 .5em 1em; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a { font-size: 1.2em; display:block; color: rgb(255,255,255); font-family:Lora; line-height:120%; } .portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 { padding: 1em 0 0 1em; margin-top: 0; border-bottom: none; text-transform: uppercase; color: rgb(89,105,57); font-size: 1.4em; } .portal_metro#portal_slider .cols_2 ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; } /********************************/ /* portal screen wide overrides */ /********************************/ @media screen and (max-width: 1023px) { .portal_metro [class^=portal_sliderlink] { width: 225px; } .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { width: 360px; } .portal_metro#portal_images, .portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { height: 280px !important; } .WikiaRail .module { position: relative; } } @media screen and (min-width: 1023px) and (max-width: 1650px) { .portal_metro [class^=portal_sliderlink] { width: 225px; } .portal_metro#portal_main .portal_sliderlink-2 .portal_slidertext { width: 360px; } .portal_metro#portal_images, .portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { height: 280px !important; } } @media screen and (min-width: 1650px) { .portal_metro [class^=portal_sliderlink] { width: 300px; } }
 * 1) porta_main,
 * 2) portal_series,
 * 3) portal_lore,
 * 4) portal_dao,
 * 5) portal_da2,
 * 6) portal_dai {
 * 1) portal_series:after,
 * 2) portal_lore:after,
 * 3) portal_dao:after,
 * 4) portal_da2:after,
 * 5) portal_dai:after {
 * 1) portal_dai:after {
 * 1) portal_series:after {
 * 1) portal_dao:after {
 * 1) portal_da2:after {
 * 1) portal_lore:after {