MediaWiki:Common.css: Difference between revisions

Latest revision as of 21:32, 21 January 2024

.infobox {
  border-radius:var(--border-radius--medium);
  background-color:var(--color-surface-2);
  padding: 20px;
  width: 100%;
  margin-top: 1em;
}
.infobox-title {
  color:var(--color-base--emphasized);
  font-weight:var(--font-weight-semibold);
  font-size:calc(var(--font-size-h3)*1.5);
  text-align:center;
}
.infobox-image {
  max-width:100%;
  height:auto;
}
.infobox-table td {
  padding-block:3px;
}
.infobox-table th {
  color:var(--color-base--subtle);
  font-weight:var(--font-weight-semibold);
  text-align:left;
  padding-right: 15px;
}
.infobox-table th {
  width: 40%;
}
.infobox-table td {
  width: 60%;
}

@media screen and (min-width:720px) {
  .infobox {
    max-width: 400px;
    float:right;
  }
}

@@ Line 1: / Line 1: @@
-/* CSS placed here will be applied to all skins */
-/* Infobox template style taken from Wikipedia (https://en.wikipedia.org/wiki/MediaWiki:Common.css) */
 .infobox {
-	border: 1px solid #a2a9b1;
+  border-radius:var(--border-radius--medium);
-	border-spacing: 3px;
+  background-color:var(--color-surface-2);
-	background-color: #f8f9fa;
+  padding: 20px;
-	color: black;
+  width: 100%;
-	/* @noflip */
+  margin-top: 1em;
-	margin: 0.5em 0 0.5em 1em;
+}
-	padding: 0.2em;
+.infobox-title {
-	/* @noflip */
+  color:var(--color-base--emphasized);
-	float: right;
+  font-weight:var(--font-weight-semibold);
-	/* @noflip */
+  font-size:calc(var(--font-size-h3)*1.5);
-	clear: right;
+  text-align:center;
-	font-size: 88%;
-	line-height: 1.5em;
-	width: 22em;
 }
+.infobox-image {
-.infobox-header,
+  max-width:100%;
-.infobox-label,
+  height:auto;
-.infobox-above,
-.infobox-full-data,
-.infobox-data,
-.infobox-below,
-.infobox-subheader,
-.infobox-image,
-.infobox-navbar,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox th,
-.infobox td {
-	vertical-align: top;
 }
+.infobox-table td {
-.infobox-label,
+  padding-block:3px;
-.infobox-data,
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox th,
-.infobox td {
-	/* @noflip */
-	text-align: left;
 }
+.infobox-table th {
-/* Remove .infobox when element selectors above are removed */
+  color:var(--color-base--subtle);
-.infobox .infobox-above,
+  font-weight:var(--font-weight-semibold);
-.infobox .infobox-title,
+  text-align:left;
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
+  padding-right: 15px;
-.infobox caption {
-	font-size: 125%;
-	font-weight: bold;
-	text-align: center;
 }
+.infobox-table th {
-.infobox-title,
+  width: 40%;
-/* Remove element selector when every .infobox thing is using the standard module/templates  */
-.infobox caption {
-	padding: 0.2em;
 }
+.infobox-table td {
-/* Remove .infobox when element selectors above are removed */
+  width: 60%;
-.infobox .infobox-header,
-.infobox .infobox-subheader,
-.infobox .infobox-image,
-.infobox .infobox-full-data,
-.infobox .infobox-below {
-	text-align: center;
 }
-/* Remove .infobox when element selectors above are removed */
+@media screen and (min-width:720px) {
-.infobox .infobox-navbar {
+  .infobox {
-	/* @noflip */
+    max-width: 400px;
-	text-align: right;
+    float:right;
+  }
 }