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. 
    ====================== */

/*********************************/
/* main page jquery tabs/sliders */
/*********************************/
.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav:after { overflow-y: hidden; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; color: #FFFFFF;/* Experimental */ }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } 
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs-hide { display: none !important; }
/***************/
/* portal main */
/***************/
/* container settings */
#portal_slider a.external:after,
.portal_metro .toc {
    display: none;
}
#portal_slider.portal_metro.ui-corner-all {
    border-radius: 0;
}
.portal_container {
position: relative;
display: inline-block;
margin-bottom: 15px;
width: 100%;
}
/* 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: "";/* experimental */
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;
}
/* 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 [class^=portal_sliderlink] .mw-headline {
    letter-spacing:3px;
}
.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;
font-size: large;/* Experimental */
}
.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: "";/* Experimental */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgb(0,0,0);
position: absolute;
z-index: -1; }
/* Experimental */
.portal_metro#portal_main [class^=portal_sliderlink] {
    /*content: "";*/
    position: absolute;
    top: 0;
    /*left: 0;*/
    /*z-index: -1;*/
    /*width: 100%;*/
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
}
.portal_metro#portal_main [class^=portal_sliderlink]:hover {
    opacity: 1;
}/**/
/* Transclucency patch */
#portal_slider #portal_main .portal_body:before,
#portal_slider #portal_main .portal_body:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 225px;
    background-color: #000000;
}
#portal_slider #portal_main .portal_body:after {
    z-index: 10;
    width: 100%;
}
.portal_sliderlink-2 {
    z-index: 20;
}
.portal_sliderlink-2 ~ [class^="portal_sliderlink"] {
    z-index: 40;
}/**/
.portal_metro#portal_main [class^=portal_sliderlink]:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    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; background-image:url(https://vignette.wikia.nocookie.net/czech-ac-out/images/e/ee/Odyssey-Portal-Big.png); background-position: center;}
.portal_metro#portal_main .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; 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; 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; 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; background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/a/aa/Main-Portal-Small.png'); }
/* slider sub category background */
#portal_slider .ui-state-active,
#portal_slider .ui-state-default,
#portal_slider .ui-widget-content,
#portal_slider .ui-widget-header {
    background: none;
}
#porta_main, #portal_series, #portal_lore #portal_dao, #portal_da2, #portal_dai { position: relative; }
#portal_series { 
    background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/e/ee/Odyssey-Portal-Big.png');}
#portal_lore { 
    background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/6/6a/Admin-Portal-Big.png');}
#portal_dao { 
    background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/8/86/Other-Portal-Big.png');}
#portal_da2 { 
    background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/6/64/Comics-Portal-Big.png');}
#portal_dai { 
    background-image: url('https://vignette.wikia.nocookie.net/czech-ac-out/images/f/fe/Main-Portal-Big.png');}
#portal_series:after, #portal_lore:after, #portal_dao:after, #portal_da2:after, #portal_dai:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.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-corner-all {
    border: 0;
    border-radius: 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: 0.25em 0 0.25em 1em; margin: 0; }
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-nav .ui-corner-left {
    border: 0;
    border-radius: 0;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel li a {     display:block; 
    color: rgb(255,255,255); 
    font-family:Rubik; 
    line-height:120%;
}
.portal_metro#portal_slider .portal_vtab.ui-tabs-vertical .ui-tabs-panel h2 {
padding: 0.5em 0 0 1em;
margin: 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; 
      }
}