MediaWiki:Pivot.css

/* Custom colors - top bar*/
.tab-bar {
    background: #2284a1;
}

.logo {
width: 50%; 
}

.subheader {
  background: #517398;
  color: #fff;
  text-align: center;
  padding: .5em;
}
#mw-normal-catlinks a.new {
  color: #000037;
}

.sidebar {
    background: #517398 !important;
}


#page-content {
 background-color: white;
}

.fancytree ul {
    background: none;
    border: none;
    font-size: 12px;
}
ul.fancytree-container {
    outline: 0;
    border: none;
    overflow: hidden;
}
.fancytree p {
    display: none;
}
span.fancytree-title {
    cursor: default;
}
span.fancytree-title a {
    color: black;
}



/* INI - FICHA JUEGO */
@media (max-width: 810px) {
	.responsive-table {
		width: 100%;
		display: grid;
		margin: 0;
	}
	
	.responsive-table table {
		width: 100%;
		max-width: 100%;
	}

	.responsive-table table td {
		width: auto;
		display: block;
		text-align: left;
		box-sizing: border-box;
		border-bottom: 1px solid #4682B4;
		padding: 8px;
		font-size: 12px;
	}
	
	.responsive-table table td:last-child {
		border-bottom: none;
	}
	
	.info-ficha {
		margin-left: 10px;
		width: 100%;
	}
}

.info-ficha {
	margin-left: 10px;
	width: 20%;
}
/* FIN - FICHA JUEGO */


/* MOVIE CARD */

#contenedor_miniatura {
	width: 200px;
	height: 200px;
	position: relative;
	border-radius: 10px !important;
	margin: 0 auto; /* esto centra el elemento horizontalmente */
}

.grande {
	max-width: 200px !important;
	max-height: 200px !important;
	/*filter: brightness(0.4);*/
	border-radius: 10px !important;
}

.pequeña {
	max-width: 100px;
	max-height: 120px;
	position: absolute;
	top: 15%;
	left: 25%;
	transform: translate(-20%, -20%);
	transform: rotate(-2.5deg) skewx(5deg);
	border-style: outset;
	border-color: white;
	border-width: thin;
	display: none;
}
.caratula {
	position: relative;
	/* width: 190px;*/
	background-color: #000;
	bottom: 100%;
	z-index: 1;
	max-width: 180px;
	box-shadow: 1px 4px 10px rgb(0 0 0);
	border: #7f7d7d9e;
	border-style: hidden;
	margin-right: 10px !important;
	border-width: 2px !important;
	border-style: groove;
	margin-bottom: 10px;
}

.titulo {
	line-height: 21px;
	color: white !important;
	background-color: black;
	font: menu;
	text-align: center;
}


#grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-gap: 5px;
}

#grid>div {
	text-align: center;
}

/* flip-card-container */
.flip-card-container {
	--white-1: hsl(0, 0%, 90%);
	--white-2: hsl(0, 0%, 80%);
	--dark: hsl(var(--hue), 25%, 10%);
	--grey: hsl(0, 0%, 50%);
	width: 120px;
	height: 150px;
	margin: 14px;
	margin-bottom: 35px;
	perspective: 1000px;
}

/* .flip-card */
.flip-card {
	width: inherit;
	height: inherit;
	position: relative;
	transform-style: preserve-3d;
	transition: .6s .1s;
}

/* hover and focus-within states */
.flip-card-container:hover .flip-card,
.flip-card-container:focus-within .flip-card {
	transform: rotateY(180deg);
}

/* .card-... */
.card-front,
.card-back {
	width: 100%;
	height: 100%;
	border-radius: 24px;
	background: var(--dark);
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	backface-visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* .card-front */
.card-front {
	transform: rotateY(0deg);
	z-index: 2;
}

/* .card-back */
.card-back {
transform: rotateY(180deg);
z-index: 1;
background:rgba(0,0,0,1	);
  opacity:0.8;
backface-visibility: hidden;
}



/* figure */
figure {
z-index: -1;
}

/* figure, .img-bg */
figure,
.img-bg {
position: absolute;
/*  top: 0; */
left: 0;

width: 100%;
height: 100%;
}

/* img */
.frontal {
height: 100%;
width: 100%;
border-radius: 24px;
border-width: 2px !important;
border-style: inset;
box-shadow: 10px 4px 10px rgb(0 0 0);
border-color: rgba(0, 0, 0, 0.8);
}

.trasera {
  height: 100%;
  width: 100%;
  border-radius: 24px;
  border-width: 2px !important;
  border-style: inset;
  box-shadow: 10px 4px 10px rgb(0 0 0);
  border-color: rgba(0, 0, 0, 0.8);
  }


/* figcaption */
figcaption {
display: block;

width: auto;
margin-top: 12%;
padding: 8px 22px;

font-weight: bold;
line-height: 1.6;
letter-spacing: 2px;
word-spacing: 6px;
text-align: right;

position: absolute;
top: 0;
right: 12px;

color: var(--white-1);
background: hsla(var(--hue), 25%, 10%, .5);
}

/* .img-bg */
.img-bg {
background: hsla(var(--hue), 25%, 10%, .5);
}

.card-front .img-bg {
clip-path: polygon(0 20%, 100% 40%, 100% 100%, 0 100%);
}

.card-front .img-bg::before {
content: "";

position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%) rotate(18deg);

width: 100%;
height: 6px;
border: 1px solid var(--primary);
border-left-color: transparent;
border-right-color: transparent;

transition: .1s;
}

.card-back .img-bg {
/*clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);*/
background-color: #000000ab !important;
}

/* hover state */
.flip-card-container:hover .card-front .img-bg::before {
width: 6px;
border-left-color: var(--primary);
border-right-color: var(--primary);
}

/* button */
button {
font-family: inherit;
font-weight: bold;
color: var(--white-1);

letter-spacing: 2px;

padding: 9px 20px;
border: 1px solid var(--grey);
border-radius: 1000px;
background: transparent;
transition: .3s;

cursor: pointer;
}

button:hover,
button:focus {
color: var(--primary);
background: hsla(var(--hue), 25%, 10%, .2);
border-color: currentColor;
}

button:active {
transform: translate(2px);
}

/* .design-container */
.design-container {
--tr: 90;
--op: .5;

width: 100%;
height: 100%;

background: transparent;
position: absolute;
top: 0;
left: 0;

pointer-events: none;
}

/* .design */
.design {
display: block;

background: var(--grey);
position: absolute;

opacity: var(--op);
transition: .3s;
}

.design--1,
.design--2,
.design--3,
.design--4 {
width: 1px;
height: 100%;
}

.design--1,
.design--2 {
top: 0;
transform: translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%))
}

.design--1 {
left: 20%;
}

.design--2 {
left: 80%;
}

.design--3,
.design--4 {
bottom: 0;
transform: translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}

.design--3 {
left: 24%;
}

.design--4 {
left: 76%;
}

.design--5,
.design--6,
.design--7,
.design--8 {
width: 100%;
height: 1px;
}

.design--5,
.design--6 {
left: 0;
transform: translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
}

.design--5 {
top: 41%;
}

.design--6 {
top: 59%;
}

.design--7,
.design--8 {
right: 0;
transform: translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}

.design--7 {
top: 44%;
}

.design--8 {
top: 56%;
}

/* states */
button:hover+.design-container,
button:active+.design-container,
button:focus+.design-container {
--tr: 20;
--op: .7;
}




/****/

/*===========*/




/* Overall style */
.mainpage {
	max-width: 1040px;
	margin: 0 auto;
}

/* Heading */
.mainpage-heading {
	width: 100%;
	margin: 0 1em 0 0;
	border-collapse: collapse;
	border-spacing: 0;
}
.mainpage-welcome {
	padding: .5em 1.6em 1em;
}
.mainpage-welcome-sitename {
	font-size: 220%;
	color: #484848;
}
.mainpage-welcome-slogan {
	color: #666;
}
.mainpage-actions {
	white-space: nowrap;
	text-align: right;
}
.mainpage-actions ul {
	margin: 0;
	padding: 0;
}
.mainpage-actions li {
	display: inline-block;
	margin: 0;
	padding: .5em;
	font-weight: bold;
}
@media screen and (max-width: 999px) {
	.mainpage-heading,
	.mainpage-heading tbody,
	.mainpage-heading tr,
	.mainpage-heading td {
		display: block;
	}
	.mainpage-heading td {
		padding-left: 1.6em;
		padding-right: 1.6em;
	}
	.mainpage-actions {
		text-align: center;
		white-space: normal;
	}
}

/* Main table */
.mainpage-maintable {
	width: 100%;
	margin: 1em 0;
	border: none;
	background: transparent;
	border-spacing: 0;
}
.mainpage-maintable td {
	padding: 0;
	vertical-align: top;
}
.mainpage-maintable td.mainpage-column-left {
	width: 60%;
	padding-right: .5em;
}
.mainpage-maintable td.mainpage-column-right {
	width: 50%;
	padding-left: .5em;
}
@media screen and (max-width: 999px) {
	.mainpage-maintable,
	.mainpage-maintable tbody,
	.mainpage-maintable tr,
	.mainpage-maintable td {
		display: block;
	}
	.mainpage-maintable td.mainpage-column-left {
		width: auto;
		padding: 0 0 .75em;
	}
	.mainpage-maintable td.mainpage-column-right {
		width: auto;
		padding: .75em 0 0;
	}
}

/* Boxes */
.mainpage-box {
	border: 1px solid;
}
.mainpage-box:not(:first-child) {
	margin-top: 1.5em;
}
.mainpage-box .mainpage-box-title {
	padding: .2em .5em;
	font-size: 125%;
	font-weight: bold;
}
.mainpage-box .mainpage-box-content {
	padding: .4em 1em .3em;
}
.mainpage-box .mainpage-box-seealso {
	clear: both;
	border-style: solid;
	border-width: 1px 0 0;
	padding-top: .4em;
	margin-top: .8em;
	text-align: end;
	font-size: 95%;
	font-weight: bold;
}
.mainpage-box-orange,
.mainpage-box-orange .mainpage-box-seealso {
	border-color: #fad67d;
}
.mainpage-box-orange .mainpage-box-title {
	background-color: #fad67d;
}
.mainpage-box-green,
.mainpage-box-green .mainpage-box-seealso {
	border-color: #bbfa7c;
}
.mainpage-box-green .mainpage-box-title {
	background-color: #bbfa7c;
}
.mainpage-box-blue,
.mainpage-box-blue .mainpage-box-seealso {
	border-color: #abd5f5;
}
.mainpage-box-blue .mainpage-box-title {
	background-color: #abd5f5;
}

/* Languages bar */
.mainpage-languages {
	padding: 2em;
	text-align: center;
}

/* keep wikitext div not exceed room available, it doesn’t have any identifier yet :( */
#mf-vid-vid > div,
/* keep Kaltura not exceed room available */
#mf-vid-vid .mediaContainer,
#mf-vid-vid .mwPlayerContainer,
#mf-vid-vid .PopUpMediaTransform,
/* keep VideoJS not exceed room available */
#mf-vid-vid .video-js,
#mf-vid-vid img {
	max-width: 100%;
}


/* CATLINKS - Mostrar categorías en la parte inferior */
#catlinks-sidebar {
	display: none;
}
#catlinks {
	display: block !important;
}