MediaWiki:Hauptseite.css: Unterschied zwischen den Versionen

/*Für alles was da kommt... Nun nur noch für die Seriennavigation

Hauptseiten ReDesign 2.0 Rev. 3; Mai 2019*/

/*Responsible Design*/

* Screen widths: 0 < 950px < 1180px < 1650px < 2355px < 3000px */

/* width 0 < 950px */
.empty-tile    { display:none;  } /* No need space fillers */

@media screen and (min-width: 950px) { /* width 950px < 1180px */
	.categories      { max-width:750px; } /* Leave a 100px to 215px gap each side */
}

@media screen and (min-width: 1180px) { /* width 1180px < 1650px */
	.empty-tile, /*{ display:inline-block; }*/
	.categories    { max-width:950px;      } /* Leave a 115px to 200px gap each side */
}

@media screen and (min-width: 1650px) { /* width 1650px < 2355px */
	.nav-titlecard           { max-width:1415px; }
}

@media screen and (min-width: 2355px) { /* width 2355px < 3000px */
	.nav-titlecard,        /*{ max-width:2130px; }*/
	.infoblock-container   { max-width:2130px; }
}
@media screen and (min-width: 3000px) { /* width 3000px < inf */
	.categories            { max-width:2130px; }
	/*.nav-titlecard         { max-width:2130px; }*/
	/*.infoblock-container { max-width:2130px; }*/
}

/*Seriennavigation*/
.nav-titlecard{
	margin:0 auto;
	/*display:flex;
	flex-flow:row-reverse wrap-reverse;*/
	justify-content:center;
}

.series {
	display:inline-block;
	position:relative;
	font-size:0;
	margin:2px;
}
/*
.series a {
	width:100%;
	height:101%;
	clip:rect(0px,230px,125px,0px); 
	display:inline-block;
	font-style:normal;
	color:white;
	position:absolute;
	line-height:29px;
	font-size:25px;
	text-decoration:none;
	background-color:rgba(0,0,0, 0.6);*/
	/*display:flex;
	flex-direction:column;*/
/*	justify-content:center;
}*/

.series a:hover {
	background-color:rgba(0,0,0, 0.3);
}

#mf-mainseries .series {
	width: 100%;
	height: 125px;
	margin: 0 0 14px 0;
	overflow: hidden;
}

#mf-mainseries .series img { /* May need more tweaking */
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
}

#mf-mainseries .series a {
	width: 100%;
	height: 100%;
	text-align: left;
	box-sizing: border-box;
	padding: 5%; /* Changed from 16px */
	justify-content: flex-start;
	clip: auto;
	box-shadow: inset rgba(255, 255, 255, 0.1) 0 0 0 1px;
	z-index: 1;
}

#mf-mainseries .series {
	bottom: 12px;
	right: 16px;
	left: auto;
}

/*Kacheln*/
div.tabcontents.vertical-centered-content > div.content img  {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.tabcontainer span.tab.explain {
	text-decoration: none;
}

table.infobox-curse-ad div.tabcontents.vertical-centered-content > div.content img  {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.tabcontainer span.tab.explain {
	text-decoration: none;
	float: none;
	display: inline-block;
}

div.tabcontainer {
	margin-left: auto;
	margin-right: auto;
}

div.tabcontainer-top {
	padding-top: 5px;
	margin-top: 0;
	margin-bottom: 10px;
}

div.tabcontainer-bottom {
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 0;
}

/* Tabs */
.tabcontainer .tab {
    background-color: #2a2a2a;
    background-image:-webkit-linear-gradient(top, #6e6e6e, #2a2a2a);
    background-image:   -moz-linear-gradient(top, #6e6e6e, #2a2a2a);
    background-image:    -ms-linear-gradient(top, #6e6e6e, #2a2a2a);
    background-image:     -o-linear-gradient(top, #6e6e6e, #2a2a2a);
    background-image:        linear-gradient(top, #6e6e6e, #2a2a2a);
    border:2px solid #250b2d;
    border-radius:2px;
    cursor:pointer;
    float:middle;
    margin:0 1px 2px;
    padding:3px;
    text-align:center;
    white-space:nowrap;
}

.tabcontainer .tab:hover {
    background-color:#1D1D1D;
    background-image:-webkit-linear-gradient(top, #4a4a4a, #1D1D1D);
    background-image:   -moz-linear-gradient(top, #4a4a4a, #1D1D1D);
    background-image:    -ms-linear-gradient(top, #4a4a4a, #1D1D1D);
    background-image:     -o-linear-gradient(top, #4a4a4a, #1D1D1D);
    background-image:        linear-gradient(top, #4a4a4a, #1D1D1D);
    color:#e69710;
}

.tabcontainer .tab.active {
    background-color:#1D1D1D !important;
    background-image:-webkit-linear-gradient(top, #3b3b3b, #1D1D1D);
    background-image:   -moz-linear-gradient(top, #3b3b3b, #1D1D1D);
    background-image:    -ms-linear-gradient(top, #3b3b3b, #1D1D1D);
    background-image:     -o-linear-gradient(top, #3b3b3b, #1D1D1D);
    background-image:        linear-gradient(top, #3b3b3b, #1D1D1D);
    color:#e69710;
}