MediaWiki:Common.css

From Ragnarok Plus Wiki
Revision as of 13:29, 13 November 2025 by TerryTie (talk | contribs)

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.
/* CSS placed here will be applied to all skins */

/* Table with dark green borders */

table.wikitable.ragnarok-table {
    border: 1px solid #0f172b !important;
    border-collapse: collapse !important;
}

table.wikitable.ragnarok-table th {
    border: 1px solid #0f172b !important;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

table.wikitable.ragnarok-table td {
    border: 1px solid #0f172b !important;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
}

table.wikitable.ragnarok-table .left   { text-align: left; }
table.wikitable.ragnarok-table .right  { text-align: right; }
table.wikitable.ragnarok-table .center { text-align: center; }

.green-bold {
    color: #02783d;
    font-weight: bold;
}

/* General styles for all links */

a,
a:visited {
    color: black !important;
    text-decoration: none !important;
}

/* Underline on hover or active */
a:hover,
a:active {
    text-decoration: underline !important;
}

/* External links — remove default MediaWiki icon */
a.external {
    background: none !important;   /* remove default background/icon */
    padding-right: 0 !important;   /* remove spacing for the icon */
}

/* By default, no icon for external links */
a.external::after {
    content: none !important;
    display: inline-block !important;
}

/* Add Unicode icon 🔗 only for specific link roots */
a.external[href*="ragnarok.plus/mob-db"]::after,
a.external[href*="ragnarok.plus/item-db"]::after {
    content: "🔗" !important;
    color: black !important;
    font-size: 80% !important;
    font-style: normal !important;   /* ensure icon is not italic */
    vertical-align: middle !important;
    user-select: none !important;
    display: inline-block !important;
    margin-left: 0.20em;   /* spacing between text and icon */
    position: relative !important;
    top: -0.20em;   /* slightly lift the icon above text */
}

/* Hide external link icons inside #no-icons */

#no-icons a.external::after {
    content: none !important;
}

/* Copy text to buffer */

/* Class for copyable text */
.copyword {
    cursor: pointer;   /* show hand cursor */
    transition: all 0.2s;   /* smooth transition for hover effects */
}

/* Automatically add the copy symbol after the text */
.copyword::after {
    content: " ⧉";   /* the copy symbol */
    /* inherits all font properties and color from parent */
}

/* Dotted underline appears only on hover */
.copyword:hover {
    border-bottom: 1px dashed currentColor;   /* underline appears on hover, same color as text */
}

/* Dashed grey line */

hr.dashed {
  border: none;
  border-top: 2px dashed #a2a9b1;
  margin: 1em 0;
}

/* Dotted grey line */
hr.dotted {
  border: none;
  border-top: 2px dotted #a2a9b1;
  margin: 1em 0;
}