MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
AdminKursed (talk | contribs) No edit summary |
AdminKursed (talk | contribs) No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* ==================================== | /* ========================================== | ||
ConquestPS | ConquestPS — Parchment Overlay Main Page | ||
==================================== */ | ========================================== */ | ||
/* | /* Beach background stays */ | ||
body.page-Main_Page { | body.page-Main_Page { | ||
background: url('/resources/assets/conquest-beach-bg.png') center top / cover no-repeat fixed; | background: url('/resources/assets/conquest-beach-bg.png') center top / cover no-repeat fixed; | ||
color: #2a220f; /* default text color for parchment areas */ | |||
color: # | |||
} | } | ||
/* | /* Dim overlay to keep text readable */ | ||
body.page-Main_Page::before { | body.page-Main_Page::before { | ||
content: ""; | content: ""; | ||
position: fixed; | position: fixed; | ||
inset: 0; | inset: 0; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.35); | ||
z-index: -1; | z-index: -1; | ||
} | } | ||
/* --- | /* Main parchment container */ | ||
.parchment-wrap { | |||
--parch-gold: #e9c76a; | |||
--parch-gold-deep: #d7ad3a; | |||
--parch-ink: #2a220f; | |||
--parch-edge: rgba(0,0,0,0.25); | |||
max-width: 1100px; | max-width: 1100px; | ||
margin: 24px auto 80px; | |||
padding: 28px 22px; | |||
color: var(--parch-ink); | |||
/* Texture stack (each layer is optional) */ | |||
background: | |||
radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,0.07), rgba(0,0,0,0) 50%), | |||
radial-gradient(100% 100% at 90% 10%, rgba(255,255,255,0.05), rgba(0,0,0,0) 60%), | |||
linear-gradient(180deg, #f6e2b8 0%, #efd7a4 30%, #e7cc8f 60%, #e2c481 100%), | |||
url('/resources/assets/parchment-texture.jpg'), | |||
url('/resources/assets/paper-noise.png'); | |||
background-blend-mode: overlay, overlay, normal, multiply, overlay; | |||
background-size: cover, cover, cover, cover, 512px 512px; | |||
border-radius: 18px; | |||
border: 1px solid rgba(0,0,0,0.18); | |||
box-shadow: | |||
0 18px 40px rgba(0,0,0,0.45), | |||
inset 0 0 40px rgba(255,255,255,0.15), | |||
inset 0 -8px 24px rgba(0,0,0,0.08); | |||
} | |||
/* Inner container for layout */ | |||
.parchment-inner { | |||
max-width: 1000px; | |||
margin: 0 auto; | margin: 0 auto; | ||
text-align: center; | text-align: center; | ||
} | } | ||
/* | /* Hero */ | ||
. | .parch-hero { | ||
padding: 14px 12px 8px; | |||
padding: | |||
} | } | ||
. | .parch-hero img { | ||
width: | width: 150px; | ||
filter: drop-shadow(0 6px | filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); | ||
margin-bottom: | margin-bottom: 8px; | ||
} | } | ||
. | .parch-title { | ||
font-size: | font-size: 34px; | ||
font-weight: 900; | font-weight: 900; | ||
color: | color: var(--parch-gold-deep); | ||
text-shadow: | |||
text-shadow: 0 2px | 0 2px 0 #f6e7b8, | ||
0 2px 10px rgba(0,0,0,0.15); | |||
letter-spacing: .3px; | |||
} | } | ||
. | .parch-sub { | ||
font-size: | margin-top: 6px; | ||
opacity: .85; | |||
font-size: 16px; | |||
} | |||
/* Decorative divider */ | |||
.parch-divider { | |||
height: 10px; | |||
margin: 18px auto 8px; | |||
background: | |||
radial-gradient(circle at 50% 130%, rgba(0,0,0,0.18), rgba(0,0,0,0) 60%), | |||
linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.08)), | |||
linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent); | |||
border-radius: 100px; | |||
} | } | ||
/* | /* Grid for cards */ | ||
. | .parch-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, minmax(0, 1fr)); | grid-template-columns: repeat(4, minmax(0, 1fr)); | ||
gap: | gap: 16px; | ||
margin: | margin: 14px 0 8px; | ||
} | } | ||
@media (max-width: 1000px) { | @media (max-width: 1000px) { .parch-grid { grid-template-columns: repeat(2, 1fr); } } | ||
@media (max-width: 560px) { .parch-grid { grid-template-columns: 1fr; } } | |||
} | |||
@media (max-width: 560px) { | |||
} | |||
. | /* Card links */ | ||
.parch-card-link { | |||
display: block; | display: block; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
| Line 77: | Line 109: | ||
} | } | ||
. | /* Parchment cards */ | ||
background: rgba(255,255,255,0. | .parch-card { | ||
border: 1px solid rgba( | background: | ||
linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)), | |||
linear-gradient(180deg, #f3e0b1 0%, #ecd29a 100%); | |||
background-blend-mode: overlay, normal; | |||
border: 1px solid rgba(78,60,22,0.25); | |||
border-radius: 14px; | border-radius: 14px; | ||
padding: | padding: 16px 16px 14px; | ||
box-shadow: | |||
0 6px 16px rgba(0,0,0,0.22), | |||
box-shadow: 0 6px | inset 0 1px 0 rgba(255,255,255,0.35); | ||
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; | |||
} | } | ||
. | .parch-card:hover { | ||
transform: translateY(-3px); | transform: translateY(-3px); | ||
box-shadow: 0 | border-color: rgba(78,60,22,0.38); | ||
box-shadow: | |||
0 10px 24px rgba(0,0,0,0.32), | |||
inset 0 1px 0 rgba(255,255,255,0.5); | |||
} | } | ||
. | /* Card text */ | ||
font-weight: | .parch-card-title { | ||
font-weight: 800; | |||
color: #c8921c; /* golden header */ | |||
text-shadow: 0 1px 0 #fff3cc; | |||
margin-bottom: 6px; | margin-bottom: 6px; | ||
font-size: 16px; | |||
font-size: | |||
} | } | ||
. | .parch-card-desc { | ||
color: #463a1e; | |||
line-height: 1.45; | |||
font-size: 14px; | font-size: 14px; | ||
opacity: .95; | |||
opacity: . | |||
} | } | ||
/* | /* Updates panel (scroll-style) */ | ||
. | .parch-updates { | ||
margin-top: 20px; | |||
margin-top: | |||
text-align: left; | text-align: left; | ||
background: | |||
border: 1px solid rgba(255,255,255,0. | linear-gradient(180deg, rgba(255,255,255,0.25), rgba(0,0,0,0.06)), | ||
#efdcad; | |||
border: 1px solid rgba(78,60,22,0.25); | |||
border-radius: 12px; | |||
padding: 14px 16px; | |||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 12px rgba(0,0,0,0.18); | |||
} | } | ||
. | .parch-updates h3 { | ||
margin: 0 0 6px; | |||
color: #b37a12; | |||
font-size: | font-size: 17px; | ||
font-weight: | font-weight: 800; | ||
} | } | ||
/* Hide | /* Hide "Powered by MediaWiki" */ | ||
.citizen-footer__poweredby { display: none !important; } | .citizen-footer__poweredby { display: none !important; } | ||
Revision as of 08:05, 12 November 2025
/* ==========================================
ConquestPS — Parchment Overlay Main Page
========================================== */
/* Beach background stays */
body.page-Main_Page {
background: url('/resources/assets/conquest-beach-bg.png') center top / cover no-repeat fixed;
color: #2a220f; /* default text color for parchment areas */
}
/* Dim overlay to keep text readable */
body.page-Main_Page::before {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.35);
z-index: -1;
}
/* Main parchment container */
.parchment-wrap {
--parch-gold: #e9c76a;
--parch-gold-deep: #d7ad3a;
--parch-ink: #2a220f;
--parch-edge: rgba(0,0,0,0.25);
max-width: 1100px;
margin: 24px auto 80px;
padding: 28px 22px;
color: var(--parch-ink);
/* Texture stack (each layer is optional) */
background:
radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,0.07), rgba(0,0,0,0) 50%),
radial-gradient(100% 100% at 90% 10%, rgba(255,255,255,0.05), rgba(0,0,0,0) 60%),
linear-gradient(180deg, #f6e2b8 0%, #efd7a4 30%, #e7cc8f 60%, #e2c481 100%),
url('/resources/assets/parchment-texture.jpg'),
url('/resources/assets/paper-noise.png');
background-blend-mode: overlay, overlay, normal, multiply, overlay;
background-size: cover, cover, cover, cover, 512px 512px;
border-radius: 18px;
border: 1px solid rgba(0,0,0,0.18);
box-shadow:
0 18px 40px rgba(0,0,0,0.45),
inset 0 0 40px rgba(255,255,255,0.15),
inset 0 -8px 24px rgba(0,0,0,0.08);
}
/* Inner container for layout */
.parchment-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
/* Hero */
.parch-hero {
padding: 14px 12px 8px;
}
.parch-hero img {
width: 150px;
filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
margin-bottom: 8px;
}
.parch-title {
font-size: 34px;
font-weight: 900;
color: var(--parch-gold-deep);
text-shadow:
0 2px 0 #f6e7b8,
0 2px 10px rgba(0,0,0,0.15);
letter-spacing: .3px;
}
.parch-sub {
margin-top: 6px;
opacity: .85;
font-size: 16px;
}
/* Decorative divider */
.parch-divider {
height: 10px;
margin: 18px auto 8px;
background:
radial-gradient(circle at 50% 130%, rgba(0,0,0,0.18), rgba(0,0,0,0) 60%),
linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.08)),
linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent);
border-radius: 100px;
}
/* Grid for cards */
.parch-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 14px 0 8px;
}
@media (max-width: 1000px) { .parch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .parch-grid { grid-template-columns: 1fr; } }
/* Card links */
.parch-card-link {
display: block;
text-decoration: none !important;
color: inherit !important;
}
/* Parchment cards */
.parch-card {
background:
linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0.05)),
linear-gradient(180deg, #f3e0b1 0%, #ecd29a 100%);
background-blend-mode: overlay, normal;
border: 1px solid rgba(78,60,22,0.25);
border-radius: 14px;
padding: 16px 16px 14px;
box-shadow:
0 6px 16px rgba(0,0,0,0.22),
inset 0 1px 0 rgba(255,255,255,0.35);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.parch-card:hover {
transform: translateY(-3px);
border-color: rgba(78,60,22,0.38);
box-shadow:
0 10px 24px rgba(0,0,0,0.32),
inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Card text */
.parch-card-title {
font-weight: 800;
color: #c8921c; /* golden header */
text-shadow: 0 1px 0 #fff3cc;
margin-bottom: 6px;
font-size: 16px;
}
.parch-card-desc {
color: #463a1e;
line-height: 1.45;
font-size: 14px;
opacity: .95;
}
/* Updates panel (scroll-style) */
.parch-updates {
margin-top: 20px;
text-align: left;
background:
linear-gradient(180deg, rgba(255,255,255,0.25), rgba(0,0,0,0.06)),
#efdcad;
border: 1px solid rgba(78,60,22,0.25);
border-radius: 12px;
padding: 14px 16px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 12px rgba(0,0,0,0.18);
}
.parch-updates h3 {
margin: 0 0 6px;
color: #b37a12;
font-size: 17px;
font-weight: 800;
}
/* Hide "Powered by MediaWiki" */
.citizen-footer__poweredby { display: none !important; }