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 */

@media screen and (max-width: 640px) {
  .infobox-2 { /*Gets overridden by the floatright class, not sure why*/ /*It clearly doesn't, dunno what I meant by this*/
	margin-left:auto;
	margin-right:auto;
	}
	
	/*FIXME: maybe? hacky I think*/
	.infobox-2 td, th {
		width: 100vw;
	}
}

.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;
}

.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;
}
@font-face {
    font-family: "Modesto Condensed";
    src: url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.eot");
    src: url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/098778ecc5c04647b35cd474022c42a0.svg#Modesto Condensed")format("svg");
}
.wiki-card-content {
  position: relative;
  z-index: 1;
  color: white;
  height: var(--header-size);
  align-content: center;
  text-shadow: var(--sh-s) var(--sh-s) var(--third-thing) #000, var(--sh-s-2) var(--sh-s) var(--third-thing) #000, var(--sh-s-2) var(--sh-s-2) var(--third-thing) #000, var(--sh-s) var(--sh-s-2) var(--third-thing) #000;
  --sh-s: 0.1rem;
  --sh-s-2: calc(var(--sh-s) * -1);
  --third-thing: 1rem;
  font-family:Modesto Condensed;
  font-size: var(--font-size-xx-large);
  display: grid;
  line-height: var(--line-height-medium);
}

#footer-poweredbyico {
	display:none !important;
}

.wacky-tagline {
	cursor:pointer;
}

.hatnote {
  font-style: italic;
}

div.hatnote {
	padding-left: 1.6em;
  margin-bottom: 0.5em;
}

.aon-domain a {
    color: inherit;
    text-decoration: none;
}

.aon-domain a.external,
.aon-domain a.extiw,
.aon-domain a[href^="http"] {
    background: none !important;
    padding-right: 0 !important;
}

.aon-domain a.external::after,
.aon-domain a.extiw::after {
    display: none !important;
    content: none !important;
}

/* =========================================================
   Character image gallery
   ========================================================= */

/* Character gallery */
.mw-gallery-traditional {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* Individual images */
.mw-gallery-traditional .gallerybox {
    width: calc(50% - 5px) !important;
    margin: 0;
    padding: 0;
}

/* Image container */
.mw-gallery-traditional .gallerybox .thumb {
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
    color: none;

    overflow: hidden;
    border-radius: 8px;
}
/* Image */
.mw-gallery-traditional .gallerybox .mw-file-element {
    display: block;

    width: 100%;
    height: auto;
}

/* Caption */
.mw-gallery-traditional .gallerytext {
    box-sizing: border-box;

    width: 100%;
    padding: 6px;

    font-size: 0.85em;
    line-height: 1.3;
    text-align: center;
}