Slider.css

Версия от 14:13, 13 августа 2019

/***************/
/* portal main */
/***************/
/* container settings */
.portal_metro .toc { display: none; }
.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: ""; background-color: rgb(0,0,0); z-index: -2; }
.portal_metro { border: 1px solid black; }
.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: 200px; */
font-family: "MasonChronicles", Helvetica, Verdana; 
font-weight: normal; 
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
text-align:left; 
color: rgb(255,255,255); 
}
.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; font-family: "MasonChronicles"; white-space: nowrap; }
.portal_metro [class^=portal_sliderlink] { font-size: 1.5em; }
 
/* 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: 12px; }
.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: rgb(255,255,255); }
 
/* 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 em; 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; background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/7/7b/Slide_3i.jpg/revision/latest?cb=20160523164519'); background-size: cover;}
.portal_metro#portal_main .portal_sliderlink-3 { top: 0px; right: 0px; height: 112px; background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/e/e7/Slide_V1.jpg/revision/latest?cb=20160515100729'); background-size: cover;}
.portal_metro#portal_main .portal_sliderlink-4 { top: 112px; right: 0px; height: 113px; background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/5/5b/Slide_V2.jpg/revision/latest?cb=20160515100754'); background-size: cover;}
.portal_metro#portal_main .portal_sliderlink-5 { top: 225px; right: 0px; height: 112px; background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/a/a5/Slide_L.jpeg/revision/latest?cb=20160515100838'); background-size: cover;}
.portal_metro#portal_main .portal_sliderlink-6 { top: 337px; right: 0px; height: 113px; background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/8/88/Slide_F.jpg/revision/latest?cb=20171210111326'); background-size: cover;}
 
/* slider sub category background */
#portal_main, #portal_v3, #portal_v1 #portal_v2, #portal_l, #portal_f { 
    position: relative;
    -webkit-filter:brightness(70%) grayscale(30%);
    -moz-filter:brightness(70%) grayscale(30%);
    -ms-filter:brightness(70%) grayscale(30%);
    -o-filter:brightness(70%) grayscale(30%);
    filter:brightness(70%) grayscale(30%);
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
}

#portal_v3:after, #portal_v1:after, #portal_v2:after, #portal_l:after, #portal_f:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#portal_v3:after { background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/2/20/Slide_V3.jpg/revision/latest?cb=20160515100702');  background-size: cover;}
#portal_v1:after { background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/e/e7/Slide_V1.jpg/revision/latest?cb=20160515100729'); background-size: cover;}
#portal_v2 { background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/5/5b/Slide_V2.jpg/revision/latest?cb=20160515100754'); background-size: cover;}
#portal_l:after { background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/a/a5/Slide_L.jpeg/revision/latest?cb=20160515100838'); background-position-y: -20px; background-size: cover;}
#portal_f:after { background-image: url('https://vignette.wikia.nocookie.net/vedmak/images/8/88/Slide_F.jpg/revision/latest?cb=20160515100855'); background-position-y: -20px; background-size: cover;} 
 
/*******************/
/* portal sections */
/*******************/
/* portal section background */
.portal_metro#portal_forums:after, .portal_metro#portal_news:after, .portal_metro#portal_twitter:after, .portal_metro#portal_quotes:after, .portal_metro#portal_statistics:after, .portal_metro#portal_chat:after, .portal_metro#portal_images:after, .portal_metro#portal_help:after, .portal_metro#portal_affiliates:after { z-index: -1; background-repeat: no-repeat; content : ""; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
 
/*****************/
/* portal images */
/*****************/
.portal_metro#portal_images:after { background-image: url('https://images.wikia.nocookie.net/__cb20141018231551/dragonage/images/9/95/Portal2_section_images.jpg?1'); opacity: 0.2; }
.portal_metro#portal_images:hover:after { opacity: 0.4; }
/* modify the default gallery to be component wide */
.portal_metro#portal_images .wikia-slideshow-images-wrapper.accent { border: none; padding: 0; background-color: transparent; }
.portal_metro#portal_images .portal_body { padding: 0px; }
.portal_metro#portal_images .wikia-slideshow { width: 100%; }
.portal_metro#portal_images .portal_header { z-index: 2; position: absolute; width: 100%; }
.portal_metro#portal_images .wikia-slideshow-wrapper { margin: 0; }
.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: 360px !important; }
.portal_metro#portal_images img.thumbimage, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-wrapper, .portal_metro#portal_images .wikia-slideshow-images { width: 100% !important; }
.portal_metro#portal_images .wikia-slideshow-images .wikia-slideshow-image { left: 0; }
/* remove the bar that shows "1 of 6" */
.portal_metro#portal_images .wikia-slideshow-toolbar.clearfix { display: none !important; }
/* move the image description and make it semi transparent */
.portal_metro#portal_images .wikia-slideshow-image-caption { bottom: 20px; background: rgba(0,0,0,0.5); }
/* make the prev-next button component wide and tall */
.portal_metro#portal_images .wikia-slideshow-prev-next, .portal_metro#portal_images .wikia-slideshow-prev-next a { width: 100%; height: 100%; position: absolute; top: 0 !important; }
/* remove the default image used for prev and next */
.portal_metro#portal_images .wikia-slideshow-prev-next a span { background-color: transparent; background-image: none; background-size: 100%; }
.portal_metro#portal_images img.chevron { display: none; }
/* place prev and next element halfway down the component */
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-prev, .portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-next { width: 48px; height: 48px; position: absolute; top: 40% !important; }
/* create prev element and place it */
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-prev { position: absolute; left: 10px; }
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-prev span { width: 48px; height: 48px; background-image: url('https://images.wikia.nocookie.net/__cb20140914231609/dragonage/images/9/94/Metro_back.png?1'); background-repeat: no-repeat; margin: 0; opacity: 0.3; }
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-prev:hover span { opacity: 0.4; }
/* create next button and place it */
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-next { position: absolute; right: 10px; }
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-next span { width: 48px; height: 48px; background-image: url('https://images.wikia.nocookie.net/__cb20141019004442/dragonage/images/2/26/Metro_forward.png?1'); background-repeat: no-repeat; margin: 0; opacity: 0.3; }
.portal_metro#portal_images .wikia-slideshow-prev-next .wikia-slideshow-next:hover span { opacity: 0.8; }
 
/***************/
/* portal help */
/***************/
.portal_metro#portal_help:after { background-image: url('https://images.wikia.nocookie.net/__cb20141018230649/dragonage/images/f/ff/Portal2_section_help.jpg?1'); opacity: 0.2; }
.portal_metro#portal_help:hover:after { opacity: 0.4; }
 
/********************/
/* portal affiliate */
/********************/
.portal_metro#portal_affiliates:after { background-image: url('https://images.wikia.nocookie.net/__cb20141018230509/dragonage/images/4/48/Portal2_section_affiliates.jpg?1'); opacity: 0.2; }
.portal_metro#portal_affiliates:hover:after { opacity: 0.4; }
.portal_metro#portal_affiliates hr { border: none; height: 1px; background-color: rgb(0,0,0); }
.portal_metro#portal_affiliates { padding-bottom: 12px; }
 
.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%; }
.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:calc(100%-200px); }
.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 15px; 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: 0px 0px 0px 15px;
}

.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); /*text-shadow:none;*/ }
.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(255,255,255); font-size: 1.4em; }
.portal_metro#portal_slider .cols_2 ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
.portal_metro#portal_slider .cols_3 ul { columns: 3; -webkit-columns: 3; -moz-columns: 3; }
.portal_metro#portal_slider .cols_4 ul { columns: 4; -webkit-columns: 4; -moz-columns: 4; }
/********************************/
/* 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; }
  /* realign slider background images */
  .portal_metro#portal_main .portal_sliderlink-2:after { background-position-x: -550px; }
  /* realign slider background images */
/*  .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: 420px !important; } */
}

/************/
/** Slider **/
/************/

.GamesBackground {
    background: transparent;
    border-top: 1px solid #800000;
    border-bottom: 1px solid #800000;
    width: 596px;
    height: 160px;
}
 
.GameBox {
	margin-right: 5px;
	width:202px;
	display:inline-block;
    text-align: center;
}
 
.GamesArrowLeft {
	background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.08) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}
 
.GamesArrowLeft:hover {
	background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.32) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}
 
.GamesArrowLeft:active {
    background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.16) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}
 
.GamesArrowRight {
	background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.08) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}
 
.GamesArrowRight:hover {
	background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.32) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}
 
.GamesArrowRight:active {
    background: linear-gradient(to right,rgba(131, 147, 162, 0) 0%,rgba(144, 11, 11, 0.16) 100%);
	border: 1px solid #800000;
	height:30px;
	width:20px;
}