User:Editingthingsforlife/vector-2022.css: Difference between revisions
No edit summary Tag: Potentially disruptive edit |
No edit summary |
||
Line 3: | Line 3: | ||
/* Global styles */ | /* Global styles */ | ||
body { | body { | ||
background: | background: #16191C; /* Dark, muted gray for background */ | ||
color: # | color: #BFC6CC; /* Desaturated off-white for text */ | ||
font-family: 'Arial', sans-serif; | font-family: 'Arial', sans-serif; | ||
font-weight: 300; | font-weight: 300; | ||
font-size: 1em; | font-size: 1em; | ||
margin: 0; | |||
padding: 0; | |||
} | } | ||
/* | /* Remove default padding and margins for a cleaner look */ | ||
.mw-page-container { | .mw-page-container { | ||
background: | background: transparent; /* Allow body background to show */ | ||
padding: 0; | |||
border | border: none; | ||
} | } | ||
/* Header */ | /* Header (top bar) */ | ||
.vector-header-container { | .vector-header-container { | ||
background: # | background: #1C2125; /* Slightly lighter dark gray */ | ||
border-bottom: 1px solid # | border-bottom: 1px solid #2F363D; | ||
padding: 5px 0; | |||
} | |||
#mw-head { | |||
background: #1C2125; | |||
} | |||
#mw-head a { | |||
color: #BFC6CC; | |||
} | |||
#mw-head a:hover { | |||
color: #6B7A85; /* Muted blue on hover */ | |||
} | } | ||
/* Site notice (banner) */ | /* Site notice (banner below header) */ | ||
#siteNotice { | #siteNotice { | ||
background: # | background: #2F363D; | ||
color: # | color: #BFC6CC; | ||
padding: 8px; | |||
padding: | |||
text-align: center; | text-align: center; | ||
border-bottom: 1px solid #2F363D; | |||
} | } | ||
/* Sidebar */ | /* Sidebar */ | ||
.vector-menu-portal .vector-menu-content { | .vector-menu-portal .vector-menu-content { | ||
background: # | background: #1C2125; | ||
border-right: 1px solid # | border-right: 1px solid #2F363D; | ||
} | } | ||
.vector-menu-portal h3 { | .vector-menu-portal h3 { | ||
color: # | color: #BFC6CC; | ||
font-weight: 400; | font-weight: 400; | ||
border-bottom: 1px solid # | border-bottom: 1px solid #2F363D; | ||
padding | padding: 5px 10px; | ||
} | } | ||
.vector-menu-portal .vector-menu-content li a { | .vector-menu-portal .vector-menu-content li a { | ||
color: # | color: #6B7A85; | ||
transition: color 0.3s ease; | transition: color 0.3s ease; | ||
} | } | ||
.vector-menu-portal .vector-menu-content li a:hover { | .vector-menu-portal .vector-menu-content li a:hover { | ||
color: # | color: #BFC6CC; | ||
} | } | ||
/* Main content */ | /* Main content area */ | ||
#mw-content-text { | |||
background: transparent; | position: relative; | ||
background: url('/wiki/Special:FilePath/Background.jpg') center/cover no-repeat; /* Replace with your image */ | |||
min-height: 400px; /* Adjust based on image size */ | |||
color: transparent; /* Hide default text to allow overlay */ | |||
margin: 0; | |||
padding: 0; | |||
} | } | ||
/* | /* Overlay text (e.g., "Descent Wiki") */ | ||
# | #mw-content-text::before { | ||
color: # | content: "Descent Wiki"; /* Replace with your wiki's name */ | ||
position: absolute; | |||
letter-spacing: 0. | top: 40%; | ||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
font-size: 6em; | |||
font-weight: 700; | |||
color: #BFC6CC; | |||
text-transform: uppercase; | |||
letter-spacing: 0.15em; | |||
text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); | |||
z-index: 1; | |||
} | |||
/* Welcome message below the background image */ | |||
.mw-parser-output p { | |||
color: #BFC6CC; | |||
text-align: center; | |||
margin-top: 420px; /* Adjust based on background image height */ | |||
font-size: 1.2em; | |||
} | } | ||
/* Links in content */ | /* Links in content */ | ||
.mw-body a { | .mw-body a { | ||
color: # | color: #6B7A85; | ||
text-decoration: none; | text-decoration: none; | ||
transition: color 0.3s ease; | transition: color 0.3s ease; | ||
Line 77: | Line 111: | ||
.mw-body a:hover { | .mw-body a:hover { | ||
color: # | color: #BFC6CC; | ||
} | } | ||
/* Footer */ | /* Footer */ | ||
.footer { | .footer { | ||
background: # | background: #1C2125; | ||
color: # | color: #BFC6CC; | ||
border-top: 1px solid # | border-top: 1px solid #2F363D; | ||
padding: | padding: 10px; | ||
text-align: center; | |||
} | } | ||
/* Subtle | /* Subtle animation for content */ | ||
.mw-parser-output { | .mw-parser-output { | ||
animation: eerieFade | animation: eerieFade 2s ease-in; | ||
} | } | ||
@keyframes eerieFade { | @keyframes eerieFade { | ||
0% { opacity: 0. | 0% { opacity: 0.5; } | ||
100% { opacity: 1; } | 100% { opacity: 1; } | ||
} | } | ||
/* | /* Selection styling */ | ||
::selection { | ::selection { | ||
background: # | background: #2F363D; | ||
color: # | color: #BFC6CC; | ||
} | } |