MediaWiki:Common.css: Difference between revisions

From Ragnarok Plus Wiki
No edit summary
No edit summary
Line 66: Line 66:


.bg-cell {
.bg-cell {
position: relative; /* needed for overlay positioning /
  position: relative;
width: 100%; / fill the full width of the cell /
  width: 100%;
min-width: 300px; / match other cells /
  min-width: 300px;
min-height: 300px; / adjust height as needed /
  min-height: 300px;
background-size: cover; / make the background cover the whole cell /
  background-size: cover;
background-position: center; / center the image /
  background-position: center;
background-repeat: no-repeat; / prevent repeating /
  background-repeat: no-repeat;
border: 2px solid #0f172b; / match other cells /
  border: 2px solid #0f172b;
box-shadow: 2px 2px 2px rgba(0,0,0,0.1); / subtle shadow */
  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
}


.bg-cell::before {
.bg-cell::before {
content: "";
  content: "";
position: absolute;
  position: absolute;
inset: 0; /* top:0; right:0; bottom:0; left:0; /
  inset: 0;
background: rgba(0,0,0,0.4); / overlay opacity */
  background: rgba(0,0,0,0.4);
}
}


/* optional: dynamic background via data-bg attribute /
.bg-cell > .bg-content {
.bg-cell[data-bg] {
  position: relative;
background-image: none; / reset default background */
  z-index: 1;
}
  display: flex;
 
  align-items: center;
.bg-cell[data-bg]:before {
  justify-content: center;
content: "";
  height: 100%;
}
 
.bg-cell[data-bg] {
background-image: url(attr(data-bg)); /* use URL from data-bg attribute */
}
}

Revision as of 09:42, 21 October 2025

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

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

a:hover,
a:active {
    text-decoration: underline !important;
}

a.external {
    background: none !important;
    padding-right: 0 !important;
}

a.external::after {
    content: none !important;
}

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

.bg-cell {
  position: relative;
  width: 100%;
  min-width: 300px;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #0f172b;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}

.bg-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.bg-cell > .bg-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}