GaryJJSpate (talk | contribs) No edit summary |
GaryJJSpate (talk | contribs) No edit summary |
||
| Line 925: | Line 925: | ||
grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); | grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); | ||
} | |||
.vault-evidence-grid > *:not(.vault-evidence-item) { | |||
display:none; | |||
} | } | ||
Revision as of 00:18, 30 July 2026
/* ==========================================================
THE VAULT @ THE E.E.R.I.E. FILES
MediaWiki:Common.css
VERSION 2.0
Archive Edition
Clean research archive aesthetic:
- Paper background
- Dark text
- Vault accent colours
- Cosmos compatible
========================================================== */
/* ==========================================================
FONTS
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* ==========================================================
COLOUR SYSTEM
========================================================== */
:root {
--vault-paper:#f4f1e8;
--vault-white:#ffffff;
--vault-text:#222222;
--vault-muted:#666666;
--vault-border:#d8d2c4;
--vault-purple:#5c2d91;
--vault-purple-dark:#3d1d63;
--vault-green:#a6ff3f;
--vault-amber:#d89b00;
--vault-red:#a83232;
--vault-blue:#315f8c;
}
/* ==========================================================
BASE MEDIAWIKI
========================================================== */
html {
background:var(--vault-paper);
}
body {
background:var(--vault-paper) !important;
color:var(--vault-text) !important;
font-family:'Space Grotesk', sans-serif !important;
}
#content,
.mw-body,
#bodyContent,
#mw-content-text {
background:transparent !important;
color:var(--vault-text);
}
.mw-parser-output {
color:var(--vault-text);
line-height:1.65;
}
/* ==========================================================
TYPOGRAPHY
========================================================== */
h1,
h2,
h3,
h4,
.firstHeading,
.mw-first-heading {
font-family:'Bungee',sans-serif !important;
color:var(--vault-purple-dark) !important;
letter-spacing:.02em;
}
.firstHeading,
.mw-first-heading {
border-bottom:3px solid var(--vault-purple);
padding-bottom:.5rem;
}
h2 {
border-bottom:1px solid var(--vault-border);
padding-bottom:.3rem;
margin-top:2rem;
}
h3 {
color:var(--vault-purple);
}
/* ==========================================================
LINKS
========================================================== */
a {
color:var(--vault-purple);
}
a:visited {
color:#74509b;
}
a:hover {
color:#8a5cc4 !important;
}
a.new {
color:var(--vault-red) !important;
}
/* ==========================================================
TABLES
========================================================== */
table.wikitable {
background:var(--vault-white) !important;
color:var(--vault-text) !important;
border:1px solid var(--vault-border) !important;
}
table.wikitable th {
background:var(--vault-purple) !important;
color:white !important;
font-family:'JetBrains Mono',monospace;
}
table.wikitable td {
border-color:var(--vault-border) !important;
}
/* ==========================================================
CATEGORY FOOTER
========================================================== */
#catlinks,
.catlinks {
background:var(--vault-white);
border:1px solid var(--vault-border);
padding:.8rem;
color:var(--vault-muted);
}
#catlinks a,
.catlinks a {
color:var(--vault-purple);
}
/* ==========================================================
THE VAULT
SECTION 2 — ARCHIVE COMPONENTS
========================================================== */
/* ==========================================================
VAULT HERO
========================================================== */
.vault-hero {
background:
linear-gradient(
135deg,
rgba(92,45,145,.08),
rgba(255,255,255,.9)
);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-purple);
padding:2.5rem;
margin:1.5rem 0 2rem;
text-align:center;
}
.vault-hero .vault-title {
font-family:'Bungee',sans-serif;
font-size:2.8rem;
color:var(--vault-purple-dark);
margin:0;
}
.vault-hero .vault-title span {
color:var(--vault-purple);
}
.vault-hero .vault-tagline {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
letter-spacing:.15em;
color:var(--vault-muted);
font-size:.8rem;
margin-top:.8rem;
}
/* ==========================================================
ARCHIVE CARDS
========================================================== */
.vault-card-grid {
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(230px,1fr));
gap:1.2rem;
margin:2rem 0;
}
.vault-card {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.4rem;
text-decoration:none !important;
display:block;
transition:.2s ease;
}
.vault-card:hover {
border-color:var(--vault-purple);
transform:translateY(-4px);
box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.vault-card-icon {
font-size:2rem;
display:block;
margin-bottom:.8rem;
}
.vault-card-title {
font-family:'Bungee',sans-serif;
color:var(--vault-purple) !important;
font-size:1rem;
}
.vault-card-description {
color:var(--vault-muted);
font-size:.9rem;
line-height:1.5;
}
/* ==========================================================
FEATURED FILE
========================================================== */
.vault-feature {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-green);
padding:1.5rem;
margin:2rem 0;
}
.vault-feature-label {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.7rem;
letter-spacing:.12em;
color:var(--vault-amber);
}
.vault-feature-title {
font-family:'Bungee',sans-serif;
font-size:1.4rem;
color:var(--vault-purple-dark);
}
/* ==========================================================
VAULT INFOBOX
========================================================== */
.vault-infobox {
float:right;
width:300px;
margin:0 0 1.5rem 2rem;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
overflow:hidden;
}
.vault-infobox-header {
background:var(--vault-purple);
color:white !important;
padding:1rem;
text-align:center;
font-family:'Bungee',sans-serif;
font-size:1rem;
}
.vault-infobox-image {
text-align:center;
padding:1rem;
}
.vault-infobox-image img {
max-width:100%;
height:auto;
}
.vault-infobox-caption {
font-size:.75rem;
color:var(--vault-muted);
padding:.5rem 1rem 1rem;
}
.vault-infobox-row {
display:grid;
grid-template-columns:100px 1fr;
gap:1rem;
padding:.7rem 1rem;
border-top:1px solid var(--vault-border);
}
.vault-infobox-k {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-infobox-v {
color:var(--vault-text);
}
/* ==========================================================
ASSESSMENT BOX
========================================================== */
.vault-assessment {
width:100%;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-assessment-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-assessment-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.vault-assessment-item {
padding:1rem;
border-right:1px solid var(--vault-border);
}
.vault-assessment-item:last-child {
border-right:none;
}
.vault-assessment-label {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--vault-muted);
}
.vault-assessment-value {
color:var(--vault-text);
margin-top:.4rem;
line-height:1.5;
}
.vault-assessment-status {
color:#4c8b00;
font-weight:bold;
}
/* ==========================================================
PROFILE / PERSON ASSESSMENT
========================================================== */
.vault-profile-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-profile-header {
background:var(--vault-purple);
color:white !important;
padding:.9rem;
text-align:center;
font-family:'Bungee',sans-serif;
}
.vault-profile-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.vault-profile-item {
padding:1rem;
border-right:1px solid var(--vault-border);
}
.vault-profile-label {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
color:var(--vault-muted);
text-transform:uppercase;
}
.vault-profile-value {
margin-top:.4rem;
color:var(--vault-text);
}
/* ==========================================================
THE VAULT
SECTION 3 — ARCHIVE SYSTEM COMPONENTS
========================================================== */
/* ==========================================================
EVIDENCE ASSESSMENT
========================================================== */
.vault-evidence {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-evidence-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-evidence-score {
text-align:center;
font-family:'Bungee',sans-serif;
font-size:2.5rem;
color:var(--vault-amber);
padding:1rem;
}
.vault-evidence-label {
text-align:center;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.75rem;
color:var(--vault-muted);
padding-bottom:1rem;
}
.vault-evidence-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.vault-evidence-grid > *:not(.vault-evidence-item) {
display:none;
}
.vault-evidence-item:only-child {
grid-column:1 / -1;
}
.vault-evidence-item {
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-evidence-title {
font-family:'JetBrains Mono',monospace;
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.08em;
color:var(--vault-muted);
}
.vault-evidence-value {
color:var(--vault-text);
margin-top:.5rem;
line-height:1.5;
}
/* ==========================================================
WORK ASSESSMENT
========================================================== */
.vault-work-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-work-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-work-row {
display:grid;
grid-template-columns:140px 1fr;
gap:1rem;
padding:1rem;
border-top:1px solid var(--vault-border);
}
.vault-work-section {
padding:1.2rem;
border-top:1px solid var(--vault-border);
}
.vault-work-k {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-work-v {
color:var(--vault-text);
line-height:1.6;
}
/* ==========================================================
LOCATION ASSESSMENT
========================================================== */
.vault-location-assessment {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
margin:2rem 0;
overflow:hidden;
}
.vault-location-header {
background:var(--vault-purple);
color:white !important;
font-family:'Bungee',sans-serif;
text-align:center;
padding:.9rem;
}
.vault-location-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
}
.vault-location-item {
padding:1rem;
border-right:1px solid var(--vault-border);
}
.vault-location-item:last-child {
border-right:none;
}
.vault-location-label {
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.65rem;
color:var(--vault-muted);
}
.vault-location-value {
margin-top:.4rem;
color:var(--vault-text);
}
/* ==========================================================
NOTICE BOXES
========================================================== */
.vault-notice {
background:var(--vault-white);
border:1px solid var(--vault-border);
border-left:5px solid var(--vault-amber);
padding:1.2rem;
margin:2rem 0;
border-radius:6px;
}
.vault-notice-header {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.1em;
color:var(--vault-amber);
}
.vault-notice-title {
font-family:'Bungee',sans-serif;
color:var(--vault-purple-dark);
margin:.5rem 0;
}
.vault-notice-body {
color:var(--vault-text);
line-height:1.6;
}
.vault-notice.warning {
border-left-color:var(--vault-red);
}
.vault-notice.research {
border-left-color:var(--vault-blue);
}
.vault-notice.featured {
border-left-color:var(--vault-green);
}
/* ==========================================================
STATISTICS BAR
========================================================== */
.vault-stats {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:1rem;
background:var(--vault-white);
border:1px solid var(--vault-border);
border-radius:8px;
padding:1.5rem;
margin:2rem 0;
text-align:center;
}
.vault-stat-number {
font-family:'Bungee',sans-serif;
font-size:2rem;
color:var(--vault-purple);
}
.vault-stat-label {
font-family:'JetBrains Mono',monospace;
font-size:.7rem;
text-transform:uppercase;
color:var(--vault-muted);
}
/* ==========================================================
BUTTONS / CALL TO ACTIONS
========================================================== */
.vault-cta {
background:var(--vault-purple);
color:white;
text-align:center;
padding:2rem;
margin:2rem 0;
border-radius:8px;
}
.vault-cta-title {
font-family:'Bungee',sans-serif;
font-size:1.5rem;
}
.vault-btn {
display:inline-block;
padding:.7rem 1.5rem;
margin:.5rem;
border-radius:5px;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
font-size:.75rem;
text-decoration:none !important;
}
.vault-btn-primary {
background:var(--vault-green);
color:#111 !important;
}
.vault-btn-secondary {
background:white;
color:var(--vault-purple) !important;
}
/* ==========================================================
TAGS
========================================================== */
.vault-tag {
display:inline-block;
background:#eee7f5;
border:1px solid #d5c5e8;
color:var(--vault-purple) !important;
border-radius:20px;
padding:.25rem .7rem;
margin:.2rem;
font-size:.7rem;
font-family:'JetBrains Mono',monospace;
text-transform:uppercase;
}
/* ==========================================================
COSMOS SKIN COMPATIBILITY
========================================================== */
#cosmos-rail .rail-module,
.rail-module {
background:var(--vault-white);
border:1px solid var(--vault-border);
color:var(--vault-text);
}
.rail-module-header {
color:var(--vault-purple) !important;
font-family:'JetBrains Mono',monospace;
}
#searchInput,
.cosmos-searchInput input {
background:white !important;
color:var(--vault-text) !important;
border:1px solid var(--vault-border) !important;
}
/* ==========================================================
RESPONSIVE DESIGN
========================================================== */
@media screen and (max-width:800px) {
.vault-infobox {
float:none;
width:100%;
margin:1rem 0;
}
.vault-assessment-grid,
.vault-profile-grid,
.vault-location-grid {
grid-template-columns:1fr;
}
.vault-evidence-grid {
grid-template-columns:1fr;
}
.vault-work-row {
grid-template-columns:1fr;
}
.vault-hero .vault-title {
font-size:2rem;
}
}
/* ==========================================================
END OF THE VAULT ARCHIVE STYLE SYSTEM
========================================================== */