|
|
| (3 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Eerie theme for Miraheze/WikiOasis Vector-2022 skin */ | | $(document).ready(function () { |
| | // Collapse tool panel on page load |
| | const toolsPanel = document.querySelector('#vector-page-tools'); |
|
| |
|
| /* Global styles */
| | if (toolsPanel) { |
| body {
| | toolsPanel.classList.add('collapsed'); |
| background: #16191C; /* Dark, muted gray for background */ | |
| color: #BFC6CC; /* Desaturated off-white for text */
| |
| font-family: 'Arial', sans-serif;
| |
| font-weight: 300;
| |
| font-size: 1em;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
|
| /* Remove default padding and margins for a cleaner look */ | | // Add toggle button |
| .mw-page-container { | | const toggle = document.createElement('div'); |
| background: transparent; /* Allow body background to show */
| | toggle.id = 'page-tools-toggle'; |
| padding: 0; | | toggle.innerText = '☰ Tools'; |
| border: none; | | document.body.appendChild(toggle); |
| }
| |
|
| |
|
| /* Header (top bar) */
| | toggle.addEventListener('click', () => { |
| .vector-header-container { | | toolsPanel.classList.toggle('collapsed'); |
| background: #1C2125; /* Slightly lighter dark gray */
| | }); |
| border-bottom: 1px solid #2F363D; | | } |
| padding: 5px 0;
| |
| } | |
|
| |
|
| #mw-head {
| | // Improve special page visibility |
| background: #1C2125;
| | $('.mw-specialpages-body, .mw-changeslist, .mw-page-info').css({ |
| }
| | 'background-color': '#1c0e0e', |
| | | 'border': '2px solid #ff2e2e', |
| #mw-head a {
| | 'padding': '20px', |
| color: #BFC6CC;
| | 'border-radius': '10px', |
| }
| | 'box-shadow': '0 0 10px #ff0000' |
| | | }); |
| #mw-head a:hover {
| | }); |
| color: #6B7A85; /* Muted blue on hover */
| |
| }
| |
| | |
| /* Site notice (banner below header) */
| |
| #siteNotice {
| |
| background: #2F363D;
| |
| color: #BFC6CC;
| |
| padding: 8px;
| |
| text-align: center;
| |
| border-bottom: 1px solid #2F363D;
| |
| }
| |
| | |
| /* Sidebar */
| |
| .vector-menu-portal .vector-menu-content { | |
| background: #1C2125; | |
| border-right: 1px solid #2F363D;
| |
| }
| |
| | |
| .vector-menu-portal h3 {
| |
| color: #BFC6CC;
| |
| font-weight: 400;
| |
| border-bottom: 1px solid #2F363D; | |
| padding: 5px 10px; | |
| }
| |
| | |
| .vector-menu-portal .vector-menu-content li a {
| |
| color: #6B7A85; | |
| transition: color 0.3s ease;
| |
| }
| |
| | |
| .vector-menu-portal .vector-menu-content li a:hover {
| |
| color: #BFC6CC;
| |
| }
| |
| | |
| /* Main content area */
| |
| #mw-content-text {
| |
| 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 {
| |
| content: "Descent Wiki"; /* Replace with your wiki's name */ | |
| position: absolute;
| |
| 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 */
| |
| .mw-body a {
| |
| color: #6B7A85;
| |
| text-decoration: none;
| |
| transition: color 0.3s ease;
| |
| } | |
| | |
| .mw-body a:hover {
| |
| color: #BFC6CC;
| |
| }
| |
| | |
| /* Footer */
| |
| .footer {
| |
| background: #1C2125;
| |
| color: #BFC6CC;
| |
| border-top: 1px solid #2F363D;
| |
| padding: 10px;
| |
| text-align: center;
| |
| }
| |
| | |
| /* Subtle animation for content */
| |
| .mw-parser-output {
| |
| animation: eerieFade 2s ease-in;
| |
| }
| |
| | |
| @keyframes eerieFade {
| |
| 0% { opacity: 0.5; }
| |
| 100% { opacity: 1; }
| |
| }
| |
| | |
| /* Selection styling */
| |
| ::selection {
| |
| background: #2F363D;
| |
| color: #BFC6CC;
| |
| }
| |