MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ===================================================================
   Factory Town 2: Paradise Wiki — MediaWiki:Common.css
   Paste this entire file into: https://factorytown2.com/wiki/MediaWiki:Common.css
   =================================================================== */

/* -------------------------------------------------------------------
   1. Theme colors (edit these to taste — everything below references
      these variables, so changing a color here updates it everywhere)
   ------------------------------------------------------------------- */
:root {
    --ft2-accent: #2e7d32;       /* primary accent (buttons, links, hover) */
    --ft2-accent-dark: #1b5e20;
    --ft2-card-bg: #ffffff;
    --ft2-card-border: #dcdcdc;
    --ft2-card-shadow: rgba(0, 0, 0, 0.08);
    --ft2-text: #202122;
}

/* -------------------------------------------------------------------
   2. "Game Navigation" icon grid on the Main Page
      Targets MediaWiki's built-in <gallery> tag, which is the standard
      way to build an image+caption grid like the source wiki's.
      If your imported page instead uses a custom template/div wrapper,
      see the note at the bottom of this file for how to adjust.
   ------------------------------------------------------------------- */

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 20px 0;
    border: none !important; /* remove MediaWiki's default gallery border */
}

.gallery .gallerybox {
    width: 130px !important;
    text-align: center;
    background: var(--ft2-card-bg);
    border: 1px solid var(--ft2-card-border);
    border-radius: 10px;
    padding: 12px 8px;
    box-shadow: 0 1px 3px var(--ft2-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gallery .gallerybox:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px var(--ft2-card-shadow);
    border-color: var(--ft2-accent);
}

.gallery .gallerybox .thumb {
    background: transparent !important;
    border: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
}

.gallery .gallerybox img {
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
}

.gallery .gallerytext {
    font-weight: 600;
    font-size: 0.95em;
    margin-top: 8px;
    color: var(--ft2-text);
}

.gallery .gallerytext a {
    color: var(--ft2-text);
    text-decoration: none;
}

.gallery .gallerybox:hover .gallerytext a {
    color: var(--ft2-accent-dark);
}

/* -------------------------------------------------------------------
   3. Sidebar section headings — bolder, colored, small caps look
   ------------------------------------------------------------------- */

.vector-menu-heading,
.mw-portlet-head {
    color: var(--ft2-accent-dark) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.03em;
}

/* -------------------------------------------------------------------
   4. General link color to match the accent theme
   ------------------------------------------------------------------- */

a {
    color: var(--ft2-accent-dark);
}

a:visited {
    color: var(--ft2-accent);
}

/* -------------------------------------------------------------------
   5. Main page welcome box — light card treatment, if you wrap your
      welcome text in <div class="ft2-welcome">...</div> on the page
   ------------------------------------------------------------------- */

.ft2-welcome {
    background: #f6f8f6;
    border: 1px solid var(--ft2-card-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

/* =====================================================================
   NOTE: If the Game Navigation grid doesn't pick up this styling,
   the imported page likely uses different markup than a <gallery> tag.
   To check:
     1. View the Main Page in your browser
     2. Right-click one of the icon boxes -> "Inspect" (Chrome/Firefox)
     3. Look at the class name on the containing <div> or <li>
     4. Send me that class name and I'll adjust the selectors above
   ===================================================================== */