Template:Infobox/styles.css

.tg-infobox {

   position: relative;
   width: 320px;
   padding: 16px 0;
   border: var(--tg-border-base);
   border-radius: var(--tg-border-radius-large);
   border-spacing: 0;
   color: var(--tg-color-base);
   background-color: var(--tg-color-surface-2);
   line-height: var(--tg-line-height-xx-small);
   font-size: var(--tg-font-size-small);

}

.tg-infobox th, .tg-infobox td {

   padding: 0; /* Remove default padding */
   vertical-align: top;

}

.tg-infobox tr > *:first-child {

   padding-left: 16px;

}

.tg-infobox tr > *:last-child {

   padding-right: 16px;

}

.tg-infobox .tg-infobox-title {

   font-size: var(--tg-font-size-x-large);
   padding-bottom: 4px;

}

.tg-infobox-title, .tg-infobox-header {

   color: var(--tg-color-emphasized);

}

.tg-infobox-title, .tg-infobox-subtitle {

   line-height: var(--tg-line-height-xxx-small);

}

.tg-infobox .tg-infobox-image {

   border-top-left-radius: var(--tg-border-radius-large);
   border-top-right-radius: var(--tg-border-radius-large);
   padding: 0 !important;
   transform: translateY(-16px);
   overflow: hidden;

}

.tg-infobox-image > figure, .tg-infobox-image > figure > figcaption {

   /* Reset styles from other skins */
   border: 0;
   padding: 0;
   background: transparent;
   box-shadow: none;

}

.tg-infobox-image > figure {

   margin-top: 0;
   margin-bottom: 0;
   overflow: hidden;

}

.tg-infobox-image .mw-file-description {

   border-radius: var(--tg-border-radius-sharp) !important;

}

.tg-infobox-image > figure > figcaption {

   padding-left: 16px;
   padding-right: 16px;
   text-align: center;

}

.tg-infobox-image > figure > a::after, .tg-infobox-image > figure > figcaption::before {

   /* Remove link icon */
   content: none;

}

.tg-infobox-image > figure img {

   margin: 0;
   border: 0;

}

.tg-infobox-image, .tg-infobox-subtitle, .tg-infobox-caption {

   text-align: center;

}

.tg-infobox-subtitle, .tg-infobox-caption {

   color: var(--tg-color-subtle);
   font-size: var(--tg-font-size-x-small);

}

.tg-infobox .tg-infobox-caption {

   padding-top: 4px;
   padding-bottom: 4px;

}

.tg-infobox .tg-infobox-header {

   padding-top: 12px;
   padding-bottom: 8px;

}

.tg-infobox-header:not(.tg-infobox-title) span {

   display: flex;
   align-items: center;
   gap: 1rem;
   white-space: nowrap;
   color: var(--tg-color-subtle);
   font-size: var(--tg-font-size-x-small);
   font-weight: var(--tg-font-weight-regular);

}

.tg-infobox-header:not(.tg-infobox-title) span:before, .tg-infobox-header:not(.tg-infobox-title) span:after {

   content: " ";
   height: 1px;
   width: 100%;
   background-color: var(--tg-border-color-base);

}

.tg-infobox .tg-infobox-data, .tg-infobox .tg-infobox-label {

   padding: 8px;

}

.tg-infobox-label {

   text-align: start;
   vertical-align: top;

}

@media (max-width: 640px) {

   .tg-infobox {
       width: 100%;
   }

   .tg-infobox-image > figure {
       margin-top: 16px;
   }

}

/* Fix EmbedVideo styles for Spotify */ .tg-infobox .embedvideo[data-service="spotifytrack"] {

   position: relative;
   /* Fix incorrect inline width */
   width: 100% !important;

}

/* HACK: Hide white background in iframe */ .tg-infobox .embedvideo[data-service="spotifytrack"]::after {

   content: "";
   position: absolute;
   inset: -4px;
   border: 6px solid var(--tg-color-surface-2);
   border-radius: 12px;
   pointer-events: none;

}

No description.

Template parameters

Parameter		Description	Type	Status
No parameters specified