MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */
/* --- Sticky Footer for Timeless Skin --- */

/* Make the content's direct wrapper a flex container that's at least as tall as the screen */
#mw-content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Allow the main content area to grow and fill available space */
#content {
    flex: 1 0 auto;
}


/* --- Gallery Item Hover Effect --- */

/* Target each individual box within the gallery */
.gallerybox {
  /* This makes the animation smooth. It will take 0.2 seconds to transition the transform property. */
  transition: transform 0.2s ease-in-out;
}

/* This is the magic: when you hover over a gallery box with your mouse... */
.gallerybox:hover {
  /* ...it will scale up to 110% of its original size. */
  transform: scale(1.05);

  /* This is also important. It brings the hovered item to the front layer,
     so it doesn't get awkwardly covered by the items next to it. */
  z-index: 10;
}


/* --- Make the entire gallery box clickable --- */

/* First, establish the gallery box as a positioning container */
.gallerybox {
  position: relative;
}

/* Now, find the link inside the thumbnail and create a pseudo-element.
  This pseudo-element is an invisible layer that we will stretch.
*/
.gallerybox .thumb a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* --- Custom Main Page Title --- */

/* 1. Import the font from Google Fonts (must be the first line) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

/* 2. Style the main page's first heading */
.page-Main_Page #firstHeading {
  /* Hide the default "Main Page" title */
  display: none;
}

/* 3. Style your custom welcome message */
/* First, go to your Main Page and wrap your welcome message in a div with a class, like this: */
/* <div class="main-page-welcome">Welcome to the unofficial Combat Demo Wiki!</div> */

.main-page-welcome {
  font-family: 'Cinzel', serif; /* Use the font we imported */
  text-align: center;         /* Center the text */
  font-size: 3.5em;           /* Make it much bigger (adjust as needed) */
  font-weight: 700;           /* Make the font bolder */
  color: #3a3a3a;              /* A softer dark grey instead of pure black */
  margin-top: 20px;
  margin-bottom: 30px;
  
  /* Optional: Add a subtle shadow to make it pop */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}