Module:Infobox/styles.css: Difference between revisions

Latest revision as of 20:38, 1 April 2023

.infobox {
	max-width: 400px;
	font-size: 0.875rem;
	background-color: #1D1A20;
    border-radius: 15px;
    border-collapse: collapse;
    line-height: 1.375;
}

/* We use grid to create the infobox layout */
.infobox tbody,
.infobox th,
.infobox td {
	display: block;
}

.infobox tr {
	display: grid;
	margin-left: 1rem;
	margin-right: 1rem;
}

.infobox tr + tr {
	margin-top: 0.5rem;
}

.infobox th {
	text-align: start;
}

.infobox-image,
.infobox-above,
.infobox-below {
	margin-left: -1rem;
	margin-right: -1rem;
}

.infobox-image {
	position: relative;
}

.infobox-image img {
	max-width: 100%;
    height: auto;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}

.infobox-caption {
    text-align: center;
    color: white;
    background-color: #1D1A20;
    letter-spacing: 0.025em;
}

.infobox-title,
.infobox-header {
	margin-top: 0.5rem;
	color: #1D1A20;
}

.infobox-title {
    font-size: 30px;
}

.infobox-header {
	font-size: 1rem;
    border-top: 1px solid;
    border-color: #1D1A20;
    padding-top: 0.5rem;
}

.infobox-label {
	color: #1D1A20;
    font-size: 0.8125rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

@@ Line 1: / Line 1: @@
-/* {{pp|small=y}} */
+.infobox {
-/*
+	max-width: 400px;
- * This TemplateStyles sheet deliberately does NOT include the full set of
+	font-size: 0.875rem;
- * infobox styles. We are still working to migrate all of the manual
+	background-color: #1D1A20;
- * infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]]
+    border-radius: 15px;
- * DO NOT ADD THEM HERE
+    border-collapse: collapse;
- */
+    line-height: 1.375;
-/*
- * not strictly certain these styles are necessary since the modules now
- * exclusively output infobox-subbox or infobox, not both
- * just replicating the module faithfully
- */
-.infobox-subbox {
-	padding: 0;
-	border: none;
-	margin: -3px;
-	width: auto;
-	min-width: 100%;
-	font-size: 100%;
-	clear: none;
-	float: none;
-	background-color: transparent;
 }
-.infobox-3cols-child {
+/* We use grid to create the infobox layout */
-	margin: auto;
+.infobox tbody,
+.infobox th,
+.infobox td {
+	display: block;
 }
-.infobox .navbar {
+.infobox tr {
-	font-size: 100%;
+	display: grid;
+	margin-left: 1rem;
+	margin-right: 1rem;
 }
-/* T281642 */
+.infobox tr + tr {
-body.skin-minerva .infobox-header,
+	margin-top: 0.5rem;
-body.skin-minerva .infobox-subheader,
+}
-body.skin-minerva  .infobox-above,
-body.skin-minerva .infobox-title,
+.infobox th {
-body.skin-minerva  .infobox-image,
+	text-align: start;
-body.skin-minerva  .infobox-full-data,
+}
-body.skin-minerva .infobox-below {
-	text-align: center;
+.infobox-image,
+.infobox-above,
+.infobox-below {
+	margin-left: -1rem;
+	margin-right: -1rem;
+}
+.infobox-image {
+	position: relative;
+}
+.infobox-image img {
+	max-width: 100%;
+    height: auto;
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+}
+.infobox-caption {
+    text-align: center;
+    color: white;
+    background-color: #1D1A20;
+    letter-spacing: 0.025em;
+}
+.infobox-title,
+.infobox-header {
+	margin-top: 0.5rem;
+	color: #1D1A20;
+}
+.infobox-title {
+    font-size: 30px;
+}
+.infobox-header {
+	font-size: 1rem;
+    border-top: 1px solid;
+    border-color: #1D1A20;
+    padding-top: 0.5rem;
+}
+.infobox-label {
+	color: #1D1A20;
+    font-size: 0.8125rem;
+    font-weight: bold;
+    letter-spacing: 0.05em;
 }