Toggle search
Toggle menu
118
224
465
3.3K
GScripts
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
Tag: Reverted
Footer: hide bottom strip (tagline/poweredby/divider)
 
(19 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */
/* =========================================================================
  GScripts theme — matches the main site (https://gscripts.co)
  Dark navy surfaces + gold (#d4af37) accent + Inter. Citizen is themeable
  via CSS custom properties, so we override its surface/link/text vars and
  then style the content (tables, code, headings, infobox, nav cards).
  ========================================================================= */


/* Script Infobox settings */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
.infobox {
    width: 210px; /* Fixed width for both mobile and desktop */
    float: right;
    margin: 0 0 1em 1em;
    background: #333;
    color: #fff;
    padding: 1px;
}


/* Center infobox on mobile */
/* ---- Citizen colour + font variable overrides (force the brand dark theme) ---- */
@media (max-width: 767px) {
:root,
    .infobox {
html.skin-citizen-auto,
        float: none;
html.skin-citizen-dark,
        margin: 0 auto 1em auto;
html.skin-citizen-light,
     }
.skin-citizen {
}
    color-scheme: dark;           /* dark-only: force dark UA controls/scrollbars regardless of OS or toggle */
 
    --color-surface-0: #0d0e12;   /* page background (near-black) */
/* Center the image and table */
     --color-surface-1: #141418;  /* raised panels / sidebar (neutral dark) */
.center-content {
    --color-surface-2: #1b1b20;   /* cards / raised / interactive (neutral dark) */
    text-align: center;
     --color-surface-3: #26262c;   /* hovers (neutral) */
     padding-top: 5px; /* You can adjust this padding as needed */
    --color-surface-4: #26262c;
}


/* Ensure the parameters table is also centered */
    --color-base: #e5e7eb;        /* body text */
.infobox table {
    --color-emphasized: #ffffff;  /* strong text */
     width: 100%; /* Makes sure the table takes the full width of the infobox */
     --color-subtle: #9ca3af;     /* muted text */
}


/* Discord Styling */
    --color-progressive: #5e9eff;          /* links (blue, default-link style) */
#discord-link-below-logo {
    --color-progressive--hover: #d4af37;  /* gold on hover */
     margin-top: 5px;
    --color-progressive--active: #d4af37;
     line-height: 0;
     --color-progressive--focus: #5e9eff;
}
     --color-link: #5e9eff;
    --color-visited: #5e9eff;


#discord-link-below-logo img {
    --border-color-base: #3a3d44;          /* gray outlines (not blue/navy) */
     vertical-align: middle;
     --border-color-subtle: #2a2c31;
}


.vector-header-start {
    --background-color-base: #0d0e12;
    display: flex;
     --background-color-neutral: #1b1b20;
     flex-direction: column; /* Forces children (logo, then Discord link) to stack vertically */
     --background-color-neutral-subtle: #141418;
     align-items: flex-start; /* Aligns items to the left */
}


/* Base table styling */
    --font-family-base: 'Inter', 'Inter Variable', -apple-system, system-ui, sans-serif;
.hover-table {
     --font-family-heading: 'Inter', 'Inter Variable', system-ui, sans-serif;
     font-family: 'Arial', sans-serif; /* Fallback; ideally use a custom font below */
    --border-radius-medium: 10px;
}
}


/* Header styling */
/* Dark-only: hide the colour-scheme (theme) switcher in Citizen's preferences panel.
.hover-table caption {
  Each client pref is a portlet #skin-client-prefs-<feature>; we hide only the theme one. */
    font-size: 32px;
#skin-client-prefs-skin-theme,
    font-weight: bold;
.mw-portlet-skin-client-prefs-skin-theme {
    text-shadow: 1px 1px 2px #8B6F35;
     display: none !important;
     padding-bottom: 15px;
}
}


/* Cell styling */
/* Footer cleanup: drop the bottom strip (tagline + Powered by + divider line),
.hover-table td {
  the search dropdown's "Powered by", and the MobileFrontend "Mobile view" toggle. */
    transition: all 0.3s ease;
.citizen-footer__bottom,
     padding: 10px;
.citizen-search__footer-start,
#footer-places-mobileview,
a[href*="toggle_view_mobile"] {
     display: none !important;
}
}


/* Text styling for links */
/* faint grid backdrop like the main site */
.hover-table td a {
.mw-content-container,
     font-size: 18px;
.citizen-page-container {
    color: #E0C882;
     background-image:
    font-weight: 600;
        linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px),
    text-shadow: 0 0 3px rgba(139, 111, 53, 0.5);
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
     text-decoration: none; /* Removes underline for a cleaner look */
     background-size: 44px 44px;
}
}


/* Hover effect for the whole cell */
/* ---- headings ---- */
.hover-table td:hover {
.mw-body .mw-parser-output h2,
    transform: scale(1.05);
.mw-body .mw-parser-output h3,
    box-shadow: 0 0 10px rgba(224, 200, 130, 0.7);
.mw-body .mw-parser-output h4 {
     border-radius: 5px;
     color: #e8c869;
     background-color: rgba(224, 200, 130, 0.1);
     border-bottom: 1px solid #3a3d44;
}
}
 
.mw-body h1.firstHeading {
/* Optional: Brighten text on hover */
     color: #ffffff;
.hover-table td:hover a {
     color: #FFD700; /* Slightly brighter gold for emphasis */
    text-shadow: 0 0 5px rgba(139, 111, 53, 0.8);
}
}


/* Fix image sizing and hover effect for Main Page icons */
/* ---- links: blue like a default link, gold on hover ---- */
.hover-table img {
.mw-parser-output a:not(.image):not(.mw-selflink) {
    width: 100px;
     color: #5e9eff;
    height: 100px;
    object-fit: contain;
     transition: transform 0.2s ease-in-out;
}
}
 
.mw-parser-output a:not(.image):not(.mw-selflink):hover {
.hover-table img:hover {
     color: #d4af37;
     transform: scale(1.1);
    text-decoration: underline;
}
}
.mw-parser-output a.new { color: #b06a6a; } /* red/dead links, muted */


/* Uniform icon sizing and hover fix */
/* ---- wikitables: navy panels, gold heads, rounded ---- */
.icon-wrapper {
.mw-parser-output .wikitable {
     width: 100px;
     background: #161616;
     height: 100px;
     color: #d1d5db;
     display: inline-flex;
     border: 1px solid #2c2c2c;
     align-items: center;
    border-radius: 8px;
     justify-content: center;
     border-collapse: separate;
     border-spacing: 0;
     overflow: hidden;
     overflow: hidden;
    transition: transform 0.2s ease-in-out;
}
}
 
.mw-parser-output .wikitable > * > tr > th {
.icon-wrapper img {
     background: #1e1e22;
     width: 100%;
     color: #e8c869;
     height: 100%;
     border: 1px solid #2c2c2c;
     object-fit: contain;
    font-weight: 600;
}
.mw-parser-output .wikitable > * > tr > td {
    background: transparent;
    border: 1px solid #2c2c2c;
}
}
 
.mw-parser-output .wikitable > * > tr:hover > td {
/* Hover effect on the wrapper */
     background: rgba(255, 255, 255, .03);
.icon-wrapper:hover {
     transform: scale(1.1);
}
}


/* Name text under icons */
/* ---- code / pre ---- */
.hover-table td span {
.mw-parser-output code,
    display: inline-block;
.mw-parser-output pre,
    max-width: 100%;
.mw-parser-output kbd {
    text-align: center;
     background: #161616;
     font-size: 15px;
     border: 1px solid #2c2c2c;
     white-space: nowrap;
     color: #e5e7eb;
     overflow: hidden;
     border-radius: 6px;
     text-overflow: ellipsis;
}
}


/* Mobile Responsive adjustments */
/* ---- callout cards ----
@media (max-width: 768px) {
  Auto-style any inline left-accent block into a readable card. The inline
    .hover-table td span {
  `border-left:Npx solid <colour>` wins on the left edge, so each keeps its
        font-size: 11px;
  colour as an accent stripe; we add the dark bg, gray border and rounding.
        white-space: normal; /* allow wrapping if needed */
  `.gs-card` is the same thing for explicit use. */
        word-break: break-word;
.mw-parser-output div[style*="border-left"],
        line-height: 1.2;
.mw-parser-output .gs-card {
    }
    background: #161616;
 
    border: 1px solid #2c2c2c;
    .hover-table img {
    border-radius: 8px;
        width: 80px;
    padding: 12px 16px;
        height: 80px;
     margin: 14px 0;
    }
 
    .hover-table td {
        display: inline-block;
        width: 50%; /* 2 columns per row */
        box-sizing: border-box;
        text-align: center;
        vertical-align: top;
        padding: 6px;
     }
 
    .hover-table tr {
        display: block;
    }
}
}
 
/* code inside a card: lift it off the matching background */
/* Hide template spacer on mobile */
.mw-parser-output div[style*="border-left"] code,
@media screen and (max-width: 768px) {
.mw-parser-output .gs-card code {
    .desktop-only-spacer {
    background: #0f0f12;
        display: none !important;
    }
}
}


@media (max-width: 768px) {
/* =========================================================================
  .hover-table {
  Existing custom rules (palette refreshed to gold #d4af37 + navy)
    display: flex;
  ========================================================================= */
    flex-wrap: wrap;
    justify-content: center;
  }


  .hover-table tr {
/* Script Infobox */
    display: contents; /* Ensures <td> children are treated as flex items */
.infobox {
  }
     width: 210px;
 
     float: right;
  .hover-table td {
     margin: 0 0 1em 1em;
    display: flex;
     background: transparent;
    flex-direction: column;
    align-items: center;
     width: 45%; /* Two columns per row */
    padding: 10px;
     box-sizing: border-box;
    text-align: center;
  }
 
  .hover-table img {
    width: 80px;
    height: 80px;
  }
 
  .hover-table td span {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
     margin-top: 4px;
  }
}
 
@media (max-width: 768px) {
  /* Force entire table into flex grid layout */
  .hover-table {
    display: flex;
    flex-wrap: wrap;
     justify-content: space-evenly;
     padding: 0;
     padding: 0;
     border: none;
     border: none;
  }
}
@media (max-width: 767px) {
    .infobox { float: none; margin: 0 auto 1em auto; }
}
.center-content { text-align: center; padding-top: 5px; }
.infobox table { width: 100%; }


  .hover-table tr {
/* Discord styling */
    display: contents; /* Prevent <tr> from enforcing row breaks */
#discord-link-below-logo { margin-top: 5px; line-height: 0; }
  }
#discord-link-below-logo img { vertical-align: middle; }
.vector-header-start { display: flex; flex-direction: column; align-items: flex-start; }


  .hover-table td {
/* Nav cards (Wildy / PVM / Combat / category pages) */
    display: flex;
.hover-table { font-family: 'Inter', 'Arial', sans-serif; }
    flex-direction: column;
.hover-table caption {
    align-items: center;
     font-size: 32px;
    justify-content: flex-start;
     font-weight: 800;
    width: 45%;
     color: #d4af37;
    padding: 10px;
     text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    box-sizing: border-box;
     padding-bottom: 15px;
    border: none;
  }
 
  .hover-table img {
    width: 80px;
    height: 80px;
  }
 
  .hover-table td span {
     font-size: 11px;
     white-space: normal;
     word-break: break-word;
     text-align: center;
    line-height: 1.2;
     margin-top: 4px;
  }
}
}
 
.hover-table td { transition: all 0.2s ease; padding: 10px; }
.minigame-grid {
.hover-table td a {
  display: flex;
    font-size: 18px;
  flex-wrap: wrap;
    color: #d4af37;
  justify-content: center;
    font-weight: 600;
  gap: 10px;
    text-decoration: none;
}
}
 
.hover-table td:hover {
.minigame-card {
    transform: translateY(-2px);
  width: 18%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  min-width: 120px;
    border-radius: 10px;
  max-width: 150px;
    background-color: rgba(212, 175, 55, .08);
  text-align: center;
  color: #E0C882;
  font-weight: 600;
  text-shadow: 0 0 3px rgba(139, 111, 53, 0.5);
}
}
 
.hover-table td:hover a { color: #f0c75e; }
.minigame-card img {
.hover-table img {
  width: 100px;
    width: 100px; height: 100px; object-fit: contain;
  height: 100px;
    transition: transform 0.2s ease-in-out;
  object-fit: contain;
  transition: transform 0.2s ease-in-out;
}
}
 
.hover-table img:hover { transform: scale(1.08); }
.minigame-card img:hover {
@media (max-width: 768px) {
  transform: scale(1.1);
    .hover-table td { display: inline-block; width: 45%; box-sizing: border-box; text-align: center; vertical-align: top; padding: 10px; }
    .hover-table tr { display: block; }
}
}


.minigame-card span {
/* Uniform icon sizing */
  display: inline-block;
.icon-wrapper {
  font-size: 14px;
    width: 100px; height: 100px; display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;
    overflow: hidden; transition: transform 0.2s ease-in-out;
  margin-top: 4px;
  word-break: break-word;
}
}
.icon-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.icon-wrapper:hover { transform: scale(1.08); }
.hover-table td span { white-space: nowrap; display: inline-block; max-width: 100%; font-size: 15px; }


@media (max-width: 768px) {
@media screen and (max-width: 768px) {
  .minigame-card {
     .desktop-only-spacer { display: none !important; }
     width: 45%;
  }
 
  .minigame-card span {
    font-size: 12px;
  }
 
  .minigame-card img {
    width: 85px;
    height: 85px;
  }
}
}
Retrieved from "https://wiki.gscripts.co/MediaWiki:Common.css"