|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* General Reset and Base Styles */
| | $(document).ready(function () { |
| * {
| | // Collapse tool panel on page load |
| margin: 0; | | const toolsPanel = document.querySelector('#vector-page-tools'); |
| padding: 0; | |
| box-sizing: border-box;
| |
| }
| |
|
| |
|
| body {
| | if (toolsPanel) { |
| font-family: 'Roboto Condensed', sans-serif;
| | toolsPanel.classList.add('collapsed'); |
| background-color: #1a0d00; /* Very dark brown */
| |
| color: #fff; /* White */
| |
| }
| |
|
| |
|
| /* Container for Sidebar and Main Content */ | | // Add toggle button |
| .container { | | const toggle = document.createElement('div'); |
| display: flex;
| | toggle.id = 'page-tools-toggle'; |
| min-height: 100vh;
| | toggle.innerText = '☰ Tools'; |
| }
| | document.body.appendChild(toggle); |
|
| |
|
| /* Sidebar */
| | toggle.addEventListener('click', () => { |
| .sidebar { | | toolsPanel.classList.toggle('collapsed'); |
| width: 220px;
| | }); |
| background: linear-gradient(180deg, #2b1a07, #1a0d00); /* Gradient from dark brown to very dark brown */
| |
| padding: 15px;
| |
| border-right: 3px double #ffd700; /* Gold double border */
| |
| box-shadow: 3px 0 10px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| .logo {
| |
| text-align: center;
| |
| margin-bottom: 25px;
| |
| }
| |
| | |
| .logo img {
| |
| max-width: 80px;
| |
| border-radius: 10px;
| |
| border: 2px solid #ff4040; /* Red border */
| |
| box-shadow: 0 0 8px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .sidebar h2 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.3em;
| |
| color: #ff4040; /* Red */
| |
| margin: 20px 0 10px;
| |
| text-transform: uppercase;
| |
| text-shadow: 1px 1px 2px #000;
| |
| border-bottom: 1px dashed #8b5a2b; /* Medium brown dashed border */
| |
| padding-bottom: 5px;
| |
| }
| |
| | |
| .sidebar ul {
| |
| list-style: none;
| |
| }
| |
| | |
| .nav-links li, .community-links li {
| |
| margin: 8px 0;
| |
| }
| |
| | |
| .nav-links a, .community-links a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| display: block;
| |
| padding: 8px;
| |
| border-radius: 5px;
| |
| transition: all 0.3s ease;
| |
| background: rgba(0, 0, 0, 0.3);
| |
| border-left: 4px solid transparent;
| |
| }
| |
| | |
| .nav-links a:hover, .community-links a:hover {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border-left: 4px solid #ffd700; /* Gold */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| /* Main Content */
| |
| .main-content { | |
| flex: 1;
| |
| /* Replace 'your-background-image.jpg' with your desired background image URL */
| |
| background: url('your-background-image.jpg') no-repeat center center/cover;
| |
| padding: 30px;
| |
| position: relative;
| |
| }
| |
| | |
| /* Header Bar with Tabs */
| |
| .header-bar {
| |
| background: #000; /* Black */
| |
| padding: 10px;
| |
| margin-bottom: 30px;
| |
| border-bottom: 2px solid #ff4040; /* Red */
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
| |
| }
| |
| | |
| .tabs {
| |
| display: flex;
| |
| gap: 20px;
| |
| }
| |
| | |
| .tabs a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| font-family: 'Special Elite', cursive;
| |
| padding: 8px 15px;
| |
| border-radius: 3px;
| |
| transition: all 0.3s ease;
| |
| border: 1px solid transparent;
| |
| }
| |
| | |
| .tabs a.active {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border: 1px solid #ffd700; /* Gold */
| |
| }
| |
| | |
| .tabs a:hover {
| |
| background: #8b5a2b; /* Medium brown */
| |
| color: #fff;
| |
| border: 1px solid #ff4040; /* Red */
| |
| }
| |
| | |
| /* Hero Section */
| |
| .hero-section {
| |
| text-align: center;
| |
| padding: 40px 20px;
| |
| background: rgba(0, 0, 0, 0.8); /* Black with transparency */
| |
| border: 2px solid #8b5a2b; /* Medium brown */
| |
| border-radius: 10px;
| |
| margin-bottom: 30px;
| |
| box-shadow: 0 0 15px rgba(255, 64, 64, 0.3);
| |
| }
| |
| | |
| .hero-section h1 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 4em;
| |
| color: #ff4040; /* Red */
| |
| text-transform: uppercase;
| |
| text-shadow: 3px 3px 5px #000, 0 0 10px #ffd700; /* Black and gold shadow */
| |
| margin-bottom: 20px;
| |
| }
| |
| | |
| .hero-section p {
| |
| font-size: 1.3em;
| |
| color: #fff; /* White */
| |
| text-shadow: 1px 1px 2px #000;
| |
| }
| |
| | |
| /* Navigation Table */
| |
| .navigation table {
| |
| width: 100%;
| |
| max-width: 500px;
| |
| margin: 0 auto;
| |
| background: rgba(43, 26, 7, 0.95); /* Dark brown with transparency */
| |
| border-collapse: separate;
| |
| border-spacing: 0;
| |
| border: 2px solid #ff4040; /* Red */
| |
| border-radius: 8px;
| |
| overflow: hidden;
| |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| .navigation th, .navigation td {
| |
| padding: 12px;
| |
| text-align: center;
| |
| border: 1px solid #8b5a2b; /* Medium brown */
| |
| }
| |
| | |
| .navigation th {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.2em;
| |
| text-shadow: 1px 1px 2px #000;
| |
| }
| |
| | |
| .navigation td {
| |
| background: #1a0d00; /* Very dark brown */
| |
| }
| |
| | |
| .table-link {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| display: block;
| |
| padding: 8px;
| |
| transition: all 0.3s ease;
| |
| } | |
| | |
| .table-link:hover {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| /* Responsive Design */
| |
| @media (max-width: 768px) {
| |
| .container {
| |
| flex-direction: column;
| |
| } | | } |
|
| |
|
| .sidebar { | | // Improve special page visibility |
| width: 100%;
| | $('.mw-specialpages-body, .mw-changeslist, .mw-page-info').css({ |
| border-right: none;
| | 'background-color': '#1c0e0e', |
| border-bottom: 3px double #ffd700;
| | 'border': '2px solid #ff2e2e', |
| }
| | 'padding': '20px', |
| | | 'border-radius': '10px', |
| .hero-section h1 {
| | 'box-shadow': '0 0 10px #ff0000' |
| font-size: 2.5em;
| | }); |
| }
| | }); |
| | |
| .hero-section p {
| |
| font-size: 1.1em;
| |
| }
| |
| | |
| .navigation table {
| |
| max-width: 100%;
| |
| }
| |
| }
| |
| | |
| /* General Reset and Base Styles */
| |
| * {
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| body {
| |
| font-family: 'Roboto Condensed', sans-serif;
| |
| background-color: #1a0d00; /* Very dark brown */
| |
| color: #fff; /* White */ | |
| }
| |
| | |
| /* Container for Sidebar and Main Content */
| |
| .container {
| |
| display: flex;
| |
| min-height: 100vh;
| |
| }
| |
| | |
| /* Sidebar */
| |
| .sidebar {
| |
| width: 220px;
| |
| background: linear-gradient(180deg, #2b1a07, #1a0d00); /* Gradient from dark brown to very dark brown */
| |
| padding: 15px;
| |
| border-right: 3px double #ffd700; /* Gold double border */
| |
| box-shadow: 3px 0 10px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| .logo {
| |
| text-align: center;
| |
| margin-bottom: 25px;
| |
| }
| |
| | |
| .logo img {
| |
| max-width: 80px;
| |
| border-radius: 10px;
| |
| border: 2px solid #ff4040; /* Red border */
| |
| box-shadow: 0 0 8px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .sidebar h2 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.3em;
| |
| color: #ff4040; /* Red */
| |
| margin: 20px 0 10px;
| |
| text-transform: uppercase;
| |
| text-shadow: 1px 1px 2px #000;
| |
| border-bottom: 1px dashed #8b5a2b; /* Medium brown dashed border */
| |
| padding-bottom: 5px;
| |
| }
| |
| | |
| .sidebar ul {
| |
| list-style: none;
| |
| }
| |
| | |
| .nav-links li, .community-links li {
| |
| margin: 8px 0;
| |
| }
| |
| | |
| .nav-links a, .community-links a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| display: block;
| |
| padding: 8px;
| |
| border-radius: 5px;
| |
| transition: all 0.3s ease;
| |
| background: rgba(0, 0, 0, 0.3);
| |
| border-left: 4px solid transparent;
| |
| }
| |
| | |
| .nav-links a.active {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border-left: 4px solid #ffd700; /* Gold */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .nav-links a:hover, .community-links a:hover {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border-left: 4px solid #ffd700; /* Gold */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| /* Main Content */
| |
| .main-content {
| |
| flex: 1;
| |
| /* Replace 'your-background-image.jpg' with your desired background image URL */
| |
| background: url('your-background-image.jpg') no-repeat center center/cover;
| |
| padding: 30px;
| |
| position: relative;
| |
| }
| |
| | |
| /* Header Bar with Tabs */
| |
| .header-bar {
| |
| background: #000; /* Black */
| |
| padding: 10px;
| |
| margin-bottom: 30px;
| |
| border-bottom: 2px solid #ff4040; /* Red */
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
| |
| }
| |
| | |
| .tabs {
| |
| display: flex;
| |
| gap: 20px;
| |
| }
| |
| | |
| .tabs a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| font-family: 'Special Elite', cursive;
| |
| padding: 8px 15px;
| |
| border-radius: 3px;
| |
| transition: all 0.3s ease;
| |
| border: 1px solid transparent;
| |
| }
| |
| | |
| .tabs a.active {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border: 1px solid #ffd700; /* Gold */
| |
| }
| |
| | |
| .tabs a:hover {
| |
| background: #8b5a2b; /* Medium brown */
| |
| color: #fff;
| |
| border: 1px solid #ff4040; /* Red */
| |
| }
| |
| | |
| /* Monsters Section */
| |
| .monsters-section {
| |
| margin-bottom: 40px;
| |
| }
| |
| | |
| .monsters-section h1 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 2.5em;
| |
| color: #ff4040; /* Red */
| |
| text-align: center;
| |
| text-transform: uppercase;
| |
| text-shadow: 2px 2px 4px #000, 0 0 8px #ffd700; /* Black and gold shadow */
| |
| margin-bottom: 20px;
| |
| border-bottom: 2px solid #8b5a2b; /* Medium brown */
| |
| padding-bottom: 10px;
| |
| }
| |
| | |
| /* Gallery */
| |
| .gallery {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 15px;
| |
| padding: 20px;
| |
| background: rgba(0, 0, 0, 0.8); /* Black with transparency */
| |
| border: 2px solid #8b5a2b; /* Medium brown */
| |
| border-radius: 10px;
| |
| box-shadow: 0 0 15px rgba(255, 64, 64, 0.3);
| |
| }
| |
| | |
| .gallery-item {
| |
| text-align: center;
| |
| width: 120px;
| |
| }
| |
| | |
| .gallery-item img {
| |
| width: 100px;
| |
| height: 100px;
| |
| object-fit: cover;
| |
| border-radius: 5px;
| |
| border: 2px solid #ff4040; /* Red */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| margin-bottom: 5px;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| | |
| .gallery-item img:hover {
| |
| transform: scale(1.1);
| |
| }
| |
| | |
| .monster-link {
| |
| display: inline-block;
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 0.9em;
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| background: linear-gradient(45deg, #2b1a07, #1a0d00); /* Gradient
| |
|
| |
| /* General Reset and Base Styles */
| |
| * {
| |
| margin: 0;
| |
| padding: 0;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| body {
| |
| font-family: 'Roboto Condensed', sans-serif;
| |
| background-color: #1a0d00; /* Very dark brown */
| |
| color: #fff; /* White */
| |
| }
| |
| | |
| /* Container for Sidebar and Main Content */
| |
| .container {
| |
| display: flex;
| |
| min-height: 100vh;
| |
| }
| |
| | |
| /* Sidebar */
| |
| .sidebar {
| |
| width: 220px;
| |
| background: linear-gradient(180deg, #2b1a07, #1a0d00); /* Gradient from dark brown to very dark brown */
| |
| padding: 15px;
| |
| border-right: 3px double #ffd700; /* Gold double border */
| |
| box-shadow: 3px 0 10px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| .logo {
| |
| text-align: center;
| |
| margin-bottom: 25px;
| |
| }
| |
| | |
| .logo img {
| |
| max-width: 80px;
| |
| border-radius: 10px;
| |
| border: 2px solid #ff4040; /* Red border */
| |
| box-shadow: 0 0 8px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .sidebar h2 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.3em;
| |
| color: #ff4040; /* Red */
| |
| margin: 20px 0 10px;
| |
| text-transform: uppercase;
| |
| text-shadow: 1px 1px 2px #000;
| |
| border-bottom: 1px dashed #8b5a2b; /* Medium brown dashed border */
| |
| padding-bottom: 5px;
| |
| }
| |
| | |
| .sidebar ul {
| |
| list-style: none;
| |
| }
| |
| | |
| .nav-links li, .community-links li {
| |
| margin: 8px 0;
| |
| }
| |
| | |
| .nav-links a, .community-links a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| display: block;
| |
| padding: 8px;
| |
| border-radius: 5px;
| |
| transition: all 0.3s ease;
| |
| background: rgba(0, 0, 0, 0.3);
| |
| border-left: 4px solid transparent;
| |
| }
| |
| | |
| .nav-links a.active {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border-left: 4px solid #ffd700; /* Gold */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .nav-links a:hover, .community-links a:hover {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border-left: 4px solid #ffd700; /* Gold */
| |
| box-shadow: 0 0 5px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| /* Main Content */
| |
| .main-content {
| |
| flex: 1;
| |
| /* Replace 'your-background-image.jpg' with your desired background image URL */
| |
| background: url('your-background-image.jpg') no-repeat center center/cover;
| |
| padding: 30px;
| |
| position: relative;
| |
| }
| |
| | |
| /* Header Bar with Tabs */
| |
| .header-bar {
| |
| background: #000; /* Black */
| |
| padding: 10px;
| |
| margin-bottom: 30px;
| |
| border-bottom: 2px solid #ff4040; /* Red */
| |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
| |
| }
| |
| | |
| .tabs {
| |
| display: flex;
| |
| gap: 20px;
| |
| }
| |
| | |
| .tabs a {
| |
| color: #ffd700; /* Gold */
| |
| text-decoration: none;
| |
| font-size: 1em;
| |
| font-family: 'Special Elite', cursive;
| |
| padding: 8px 15px;
| |
| border-radius: 3px;
| |
| transition: all 0.3s ease;
| |
| border: 1px solid transparent;
| |
| }
| |
| | |
| .tabs a.active {
| |
| background: #ff4040; /* Red */
| |
| color: #fff;
| |
| border: 1px solid #ffd700; /* Gold */
| |
| }
| |
| | |
| .tabs a:hover {
| |
| background: #8b5a2b; /* Medium brown */
| |
| color: #fff;
| |
| border: 1px solid #ff4040; /* Red */
| |
| }
| |
| | |
| /* Content Section */
| |
| .content-section {
| |
| background: rgba(0, 0, 0, 0.8); /* Black with transparency */
| |
| padding: 20px;
| |
| border: 2px solid #8b5a2b; /* Medium brown */
| |
| border-radius: 10px;
| |
| box-shadow: 0 0 15px rgba(255, 64, 64, 0.3);
| |
| }
| |
| | |
| .content-section h1 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 2.5em;
| |
| color: #ff4040; /* Red */
| |
| text-transform: uppercase;
| |
| text-shadow: 2px 2px 4px #000, 0 0 8px #ffd700; /* Black and gold shadow */
| |
| margin-bottom: 20px;
| |
| border-bottom: 2px solid #8b5a2b; /* Medium brown */
| |
| padding-bottom: 10px;
| |
| }
| |
| | |
| .content-section h2 {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.8em;
| |
| color: #ff4040; /* Red */
| |
| margin: 20px 0 10px;
| |
| text-shadow: 1px 1px 2px #000;
| |
| }
| |
| | |
| .content-section p {
| |
| font-size: 1.1em;
| |
| line-height: 1.6;
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| .content-section em {
| |
| color: #ffd700; /* Gold */
| |
| font-style: italic;
| |
| }
| |
| | |
| /* Infobox */
| |
| .infobox {
| |
| float: right;
| |
| width: 250px;
| |
| background: linear-gradient(45deg, #2b1a07, #1a0d00); /* Gradient from dark brown to very dark brown */
| |
| border: 2px solid #ff4040; /* Red */
| |
| border-radius: 8px;
| |
| padding: 15px;
| |
| margin: 0 0 20px 20px;
| |
| box-shadow: 0 0 10px rgba(255, 64, 64, 0.5);
| |
| }
| |
| | |
| .infobox-header {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1.5em;
| |
| color: #ffd700; /* Gold */
| |
| text-align: center;
| |
| text-shadow: 1px 1px 2px #000;
| |
| border-bottom: 1px solid #8b5a2b; /* Medium brown */
| |
| padding-bottom: 10px;
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| .infobox-image img {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 5px;
| |
| border: 2px solid #8b5a2b; /* Medium brown */
| |
| margin-bottom: 15px;
| |
| }
| |
| | |
| .infobox-row {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .infobox-label {
| |
| font-family: 'Special Elite', cursive;
| |
| font-size: 1em;
| |
| color: #ff4040; /* Red */
| |
| text-shadow: 1px 1px 1px #000;
| |
| }
| |
| | |
| .infobox-value {
| |
| font-size: 1em;
| |
| color: #fff; /* White */
| |
| }
| |
| | |
| /* Responsive Design */
| |
| @media (max-width: 768px) {
| |
| .container {
| |
| flex-direction: column;
| |
| } | |
| | |
| .sidebar {
| |
| width: 100%;
| |
| border-right: none;
| |
| Larger screens */
| |
| @media (min-width: 769px) {
| |
| .content-section {
| |
| margin-right: 270px; /* Space for the infobox */
| |
| }
| |
| }
| |
| | |
| /* Smaller screens */
| |
| @media (max-width: 768px) {
| |
| .container {
| |
| flex-direction: column;
| |
| }
| |
| | |
| .sidebar {
| |
| width: 100%;
| |
| border-right: none;
| |
| border-bottom: 3px double #ffd700;
| |
| }
| |
| | |
| .content-section h1 {
| |
| font-size: 2em;
| |
| }
| |
| | |
| .infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 0 0 20px 0;
| |
| }
| |
| | |
| .content-section {
| |
| margin-right: 0; /* Remove margin on smaller screens */
| |
| }
| |
| }
| |