Vorlage:Medienbox/styles.css

Der folgende Artikel befasst sich mit dem Thema Vorlage:Medienbox/styles.css, das in den letzten Jahren die Aufmerksamkeit von Forschern, Experten und der breiten Öffentlichkeit auf sich gezogen hat. Während sich die Gesellschaft weiterentwickelt und vor neuen Herausforderungen steht, ist Vorlage:Medienbox/styles.css aufgrund seines Einflusses auf verschiedene Aspekte des täglichen Lebens zu einem Punkt des Interesses und der Debatte geworden. Aus diesem Grund ist es wichtig, dieses Thema eingehend zu untersuchen, um seine Bedeutung, seine Auswirkungen und mögliche zukünftige Auswirkungen zu verstehen. In diesem Artikel werden verschiedene Aspekte im Zusammenhang mit Vorlage:Medienbox/styles.css untersucht, mit dem Ziel, eine umfassende und bereichernde Vision zu liefern, die zum Nachdenken und zur Debatte einlädt.
/* (Info-)Box-Layout im medien-Bereich */
.medien-box{
	display:table;
	width:23em;
	margin-top:0;
	border:solid 1px #A2A9B1;
	border-spacing:0;
	line-height:1.3;
}

.medien-box,
.float-right{
	font-size:93%;
}

.medien-box th, .medien-box td{
	text-align:left;
	vertical-align:top;
	padding:4px;
}

.medien-box td ul {
	margin:0 0 0 1.5em;
	padding:0;
	line-height:inherit;
}

/* kompakte Listendarstellung */
.medien-box td:not() ul {
	list-style:none none;
	margin:0;
}

.medien-box td:not() ul li {
	margin:0 0 0 .7em;
	text-indent: -.7em;
}

@media (max-width:639px){
	.medien-box td:not() ul li {
		margin:0;
		display:inline;
	}

	.medien-box td:not() ul li+li::before {
		content: "• ";
	}

	.medien-box td ul{
		column-width:15em;
		column-gap:2em
	}
}

/* Bilder skalieren auf Boxbreite */
.medien-box img {
	width:auto;
	max-width:100%;
	height:auto;
	max-height:100%;
}

.medien-box td:not(.medien-titel) img{
	max-height:180px;
}

/* vermeidet zu schmale Textzeilen */
@media (max-width: 768px){
	.float-right{
		float:none !important;
		margin-left:auto;
		margin-right:auto;
	}
}

/* Band-Design bei Schachtelung */
.medien-box .medien-box {
	display:contents !important;
	font-size:inherit;
}

.medien-filmtv th, .medien-videospiel th{
	background-color:#F4F4F7;
	background-color:RGBA(150,150,175,.1);
	font-weight:inherit;
}

.medien-filmtv tr>:nth-child(2){
	width:70%;
}

/* Thematisch eingefaerbte Titelzeilen */
.medien-box tr:first-child .medien-titel{
	font-weight:bold;
}

.medien-box .medien-titel,
 td{
	text-align:center;
}

.medien-titel td, .medien-titel th{
	background-color:transparent;
}

.medien-hoerfunk tr:first-child .medien-titel{
	background-color:#B0C4DE;
}

.medien-hoerfunk .medien-titel{
	background-color:#DEE5EE;
}

.medien-website tr:first-child .medien-titel{
	background-color:#C7CDD9;
	background-color:RGBA(135,206,235,.5);
}

.medien-website .medien-titel{
	background-color:#EAECF0;
	background-color:RGBA(135,206,235,.3);
}

.medien-videospiel tr:first-child .medien-titel{
	color:white;
	background-color:#444444;
}

.medien-videospiel .medien-titel{
	background-color:var(--dewiki-hintergrundfarbe5);
}

.medien-youtube tr:first-child .medien-titel{
	background-color:#FC493B;
}

.medien-youtube .medien-titel{
	background-color:var(--dewiki-hintergrundfarbe7);
}

.medien-filmtv tr:first-child .medien-titel,
 tr:first-child th{
	background-color:#DCDCF5;
	background-color:RGBA(155,155,225,.35);
}

.medien-filmtv .medien-titel,
 th{
	color:inherit !important;
	background-color:#EBEBF9;
	background-color:RGBA(155,155,225,.2);
}