MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary Tag: Reverted |
||
| Line 154: | Line 154: | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); | box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); | ||
} | |||
.div3 { | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | } | ||
Revision as of 12:06, 14 November 2025
/* ===== CryptoRootsMX – Vector (legacy) full tan theme ===== */
/* Header + footer */
#mw-head, #footer {
color:#2E2A26 !important;
}
/* Tabs (Read / Edit / View history) */
.vector-menu-tabs li a {
color: #017C74 !important;
}
.vector-menu-tabs li.selected a {
background: transparent !important;
border-bottom: 3px solid #017C74 !important;
color: #017C74 !important;
}
/* Headings & links */
h1, h2, h3, h4 { color:#502583 !important; font-family: "Georgia","Garamond",serif; }
a, a:visited { color:#017C74 !important; }
a:hover { color:#B39D68 !important; }
/* === CryptoRootsMX gem styles (WAF-safe) === */
.gem-grid { width:100%; background:#FAEEDC; border:1px solid #E6CFAE; text-align:center; }
/* shared cell formatting */
.gem-cell { padding:12px; vertical-align:top; }
.gem-cell img { border-radius:6px; padding:2px; background:#FAEEDC; }
/* frames by role */
.gem-emerald-cell img { border:4px solid #046307; } /* Confirmed Jews */
.gem-ruby-cell img { border:4px solid #7D2181; } /* Conquistadors & Settlers */
.gem-sapphire-cell img { border:4px solid #0B3C8D; } /* Saints */
/* titles underneath (optional color without extra HTML) */
.gem-title { display:block; margin-top:8px; font-weight:bold; color:#2E2A26; }
.gem-emerald-cell .gem-title { color:#046307; }
.gem-ruby-cell .gem-title { color:#7D2181; }
.gem-sapphire-cell .gem-title { color:#0B3C8D; }
/* subtle hover without shadows */
.gem-cell:hover img { opacity:0.95; outline:2px solid rgba(0,0,0,0.05); }
.gem-cell:hover img {
transform: scale(1.02);
transition: all 0.25s ease;
opacity: 0.95;
}
.gem-emerald-cell img { border: 4px solid #046307; box-shadow: 0 0 10px rgba(4,99,7,0.4); }
.gem-ruby-cell img { border: 4px solid #7D2181; box-shadow: 0 0 10px rgba(125,33,129,0.4); }
.gem-sapphire-cell img { border: 4px solid #0B3C8D; box-shadow: 0 0 10px rgba(11,60,141,0.4); }
/* Confirmed Surnames grid (wider cards) */
.surname-grid {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 12px 10px;
text-align: center;
}
.surname-cell {
background: #FAEEDC;
border: 1px solid #E6CFAE;
border-radius: 10px;
padding: 12px 16px;
font-weight: 500;
color: #502583;
font-family: 'Georgia', serif;
box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
transition: transform 0.1s ease;
width: 160px; /* ← widen this to your liking */
min-width: 150px;
}
.surname-cell:hover {
transform: scale(1.05);
background: #F6EAD6;
}
/* ===== single book grid ===== */
/* MAIN GRID WRAPPER */
.singlebook-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
width: 100%;
height: auto;
}
/* div1 — IMAGE AREA (TOP-LEFT, SPANS 2 COLUMNS × 5 ROWS) */
.singlebook-div1 {
grid-area: 1 / 1 / 6 / 3;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.singlebook-div1 img {
width: 700px !important;
height: auto !important;
}
/* div2 — TOP-RIGHT BLOCK */
.singlebook-div2 {
grid-area: 1 / 3 / 4 / 6;
padding: 2rem;
}
/* div3 — MID RIGHT SECTION */
.singlebook-div3 {
grid-area: 4 / 3 / 5 / 6;
padding: 2rem;
}
/* div4 — BOTTOM RIGHT SECTION */
.singlebook-div4 {
grid-area: 5 / 3 / 6 / 6;
padding: 2rem;
}
.buy-now-btn {
display: inline-block;
padding: 14px 28px;
background: #c8f9b5; /* soft green */
border: 2px solid #51a037; /* darker green border */
border-radius: 6px;
font-size: 1.1rem;
font-weight: bold;
color: #1a3a12;
text-decoration: none;
letter-spacing: 0.5px;
font-family: "Arial Rounded MT Bold", sans-serif;
transition: 0.2s ease;
}
/* hover */
.buy-now-btn:hover {
background: #a3f085;
transform: translateY(-2px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.div3 {
display: flex;
justify-content: center;
align-items: center;
}