MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */

/* Planning to make a new infobox, infobox-2 is the old one */ /* Don't remember why - as far as I can tell infobox-2 looks good for now, hit me (Elias) up if you notice any problems with it */

.infobox-2 { /*Gets overridden by the floatright class, not sure why*/
 margin-left:auto;
 margin-right:auto;
}

.infobox-2 th, .infobox-2 td {
    vertical-align: top;
}

.infobox-2 td {
text-align: right;
}

.wikitable .infobox-subheader, .wikitable .infobox-above {
text-align: center;
}

.infobox-subheader {
padding: var(--space-xxs) var(--space-sm);
color: var(--color-base);
}

.infobox-2 .sub-infobox-header {
padding: var(--space-xxs) var(--space-sm);
}

.infobox-above {
font-size: var(--font-size-medium);
}

/*This should make the [Mark this page as patrolled] appear under the whole page. Could put it to scroll rather than hidden to make it easy to notice if something's cut off, but I'm scared people might think that's intended (and it's so ugly...)*/
/* .mw-parser-output {
 overflow: hidden;
} */
/*I'll never use it, just make it invisible for now:*/
.patrollink {
 display: none;
}

.wikitable .blazon {
	font-size : var(--font-size-x-small);
	color: var(--color-subtle);
}

.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* Combined grid-item styles */
.grid-item {
  display: block;
  background: var(--color-surface-2);
  padding: 16px;
  border-radius: 12px;
  text-align: center;

  /* link reset */
  text-decoration: none;
  color: inherit;

  /* hover animation */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grid-item:hover,
.grid-item:focus,
.grid-item:active {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 2;

  /* prevent underline */
  text-decoration: none;
}

.grid-item wiki-card a
{
text-decoration: none;
}

.wiki-card {
  position: relative;
  overflow: hidden;
}

.wiki-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}

.wiki-card-content {
  position: relative;
  z-index: 1;
  text-shadow: black 0px 0 2px;
  color: white;
}