|
|
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Timeless skin */
| |
| /* Reset and Base Styles */ | | /* Reset and Base Styles */ |
| * {
| | * { |
| margin: 0;
| | margin: 0; |
| padding: 0;
| | padding: 0; |
| box-sizing: border-box;
| | box-sizing: border-box; |
| }
| | } |
|
| |
|
| body {
| | body { |
| background-color: #000000;
| | background-color: #000000; |
| color: #ffffff;
| | color: #ffffff; |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
| | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
| font-size: 16px;
| | font-size: 16px; |
| line-height: 1.6;
| | line-height: 1.6; |
| }
| | } |
|
| |
|
| /* Links */
| | /* Links */ |
| a {
| | a { |
| color: #ffe135;
| | color: #ffe135; |
| text-decoration: none;
| | text-decoration: none; |
| transition: color 0.3s ease;
| | transition: color 0.3s ease; |
| }
| | } |
|
| |
|
| a:visited {
| | a:visited { |
| color: #c0c0c0;
| | color: #c0c0c0; |
| }
| | } |
|
| |
|
| a:hover {
| | a:hover { |
| color: #ffed4e;
| | color: #ffed |
| }
| |
| | |
| /* Main Layout */
| |
| #mw-page-base,
| |
| #mw-head-base {
| |
| background-color: #000000;
| |
| }
| |
| | |
| #mw-head {
| |
| background-color: #1a1a1a;
| |
| border-bottom: 2px solid #333333;
| |
| padding: 10px 20px;
| |
| }
| |
| | |
| #mw-navigation {
| |
| background-color: #000000;
| |
| }
| |
| | |
| /* Content Area */
| |
| #content {
| |
| background-color: #000000;
| |
| padding: 20px;
| |
| margin-left: 0;
| |
| }
| |
| | |
| #mw-content-container {
| |
| max-width: 100%;
| |
| }
| |
| | |
| /* Text Boxes and Content */
| |
| #mw-content {
| |
| background-color: #1a1a1a;
| |
| padding: 20px;
| |
| border-radius: 4px;
| |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
| |
| }
| |
| | |
| /* Sidebar Navigation */
| |
| #mw-panel {
| |
| background-color: #000000;
| |
| padding: 10px 0;
| |
| }
| |
| | |
| .mw-portlet {
| |
| background-color: #000000;
| |
| margin-bottom: 20px;
| |
| border: 1px solid #333333;
| |
| border-radius: 4px;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .mw-portlet-body {
| |
| background-color: #1a1a1a;
| |
| padding: 0;
| |
| }
| |
| | |
| /* Portlet Header */
| |
| .mw-portlet > h3,
| |
| .vector-portlet-heading {
| |
| background-color: #2a2a2a;
| |
| color: #ffffff;
| |
| padding: 12px 15px;
| |
| margin: 0;
| |
| font-size: 16px;
| |
| font-weight: 600;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| border-bottom: 1px solid #333333;
| |
| transition: background-color 0.3s ease;
| |
| }
| |
| | |
| .mw-portlet > h3:hover,
| |
| .vector-portlet-heading:hover {
| |
| background-color: #333333;
| |
| }
| |
| | |
| /* Collapsible Arrow */
| |
| .portlet-arrow {
| |
| display: inline-block;
| |
| transition: transform 0.3s ease;
| |
| font-size: 12px;
| |
| color: #ffe135;
| |
| }
| |
| | |
| .portlet-arrow.collapsed {
| |
| transform: rotate(-90deg);
| |
| }
| |
| | |
| /* Portlet List */
| |
| .mw-portlet-body ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .mw-portlet-body li {
| |
| border-bottom: 1px solid #2a2a2a;
| |
| margin: 0;
| |
| }
| |
| | |
| .mw-portlet-body li:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .mw-portlet-body a {
| |
| display: block;
| |
| padding: 12px 15px;
| |
| color: #ffe135;
| |
| text-decoration: none;
| |
| transition: background-color 0.2s ease, padding-left 0.2s ease;
| |
| }
| |
| | |
| .mw-portlet-body a:visited {
| |
| color: #c0c0c0;
| |
| }
| |
| | |
| .mw-portlet-body a:hover {
| |
| background-color: #2a2a2a;
| |
| padding-left: 20px;
| |
| color: #ffed4e;
| |
| }
| |
| | |
| /* Year Items and Expandable Sections */
| |
| .year-item {
| |
| background-color: #1a1a1a;
| |
| border-bottom: 1px solid #2a2a2a;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .year-item:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .year-header {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| padding: 12px 15px;
| |
| background-color: #1a1a1a;
| |
| color: #ffe135;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| font-weight: 500;
| |
| transition: background-color 0.2s ease;
| |
| }
| |
| | |
| .year-header:hover {
| |
| background-color: #2a2a2a;
| |
| }
| |
| | |
| .year-arrow {
| |
| display: inline-block;
| |
| transition: transform 0.3s ease;
| |
| font-size: 12px;
| |
| color: #ffe135;
| |
| }
| |
| | |
| .year-arrow.collapsed {
| |
| transform: rotate(-90deg);
| |
| }
| |
| | |
| .year-content {
| |
| display: none;
| |
| background-color: #0f0f0f;
| |
| padding: 0;
| |
| border-top: 1px solid #2a2a2a;
| |
| }
| |
| | |
| .year-content.expanded {
| |
| display: block;
| |
| }
| |
| | |
| .year-content ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| | |
| .year-content li {
| |
| border-bottom: 1px solid #2a2a2a;
| |
| margin: 0;
| |
| }
| |
| | |
| .year-content li:last-child {
| |
| border-bottom: none;
| |
| }
| |
| | |
| .year-content a {
| |
| display: block;
| |
| padding: 10px 15px 10px 30px;
| |
| color: #ffe135;
| |
| text-decoration: none;
| |
| transition: background-color 0.2s ease, padding-left 0.2s ease;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .year-content a:visited {
| |
| color: #c0c0c0;
| |
| }
| |
| | |
| .year-content a:hover {
| |
| background-color: #1a1a1a;
| |
| padding-left: 35px;
| |
| color: #ffed4e;
| |
| }
| |
| | |
| /* Search Box */
| |
| .searchbox {
| |
| padding: 10px;
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| .searchbox input {
| |
| width: 100%;
| |
| padding: 8px;
| |
| border: 1px solid #2a2a2a;
| |
| background-color: #0f0f0f;
| |
| color: #ffe135;
| |
| font-size: 14px;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .searchbox input::placeholder {
| |
| color: #666;
| |
| }
| |
| | |
| .searchbox input:focus {
| |
| outline: none;
| |
| border-color: #ffe135;
| |
| background-color: #1a1a1a;
| |
| }
| |
| | |
| /* Responsive Design */
| |
| @media (max-width: 768px) {
| |
| .sidebar {
| |
| position: fixed;
| |
| left: -300px;
| |
| top: 0;
| |
| height: 100vh;
| |
| z-index: 1000;
| |
| transition: left 0.3s ease;
| |
| }
| |
| | |
| .sidebar.active {
| |
| left: 0;
| |
| }
| |
| | |
| .main-content {
| |
| margin-left: 0;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
| <div class="sidebar">
| |
| <div class="sidebar-header">
| |
| <h2>Sidebar</h2>
| |
| </div>
| |
| | |
| <!-- Search Box -->
| |
| <div class="searchbox">
| |
| <input type="text" id="searchInput" placeholder="Search...">
| |
| </div>
| |
| | |
| <!-- Portlets -->
| |
| <div class="mw-portlet" id="portlet-navigation">
| |
| <div class="portlet-header">
| |
| <h3>Navigation</h3>
| |
| <span class="portlet-arrow">▼</span>
| |
| </div>
| |
| <div class="mw-portlet-body">
| |
| <ul>
| |
| <li><a href="#home">Home</a></li>
| |
| <li><a href="#about">About</a></li>
| |
| <li><a href="#services">Services</a></li>
| |
| <li><a href="#contact">Contact</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| | |
| <div class="mw-portlet" id="portlet-years">
| |
| <div class="portlet-header">
| |
| <h3>Years</h3>
| |
| <span class="portlet-arrow">▼</span>
| |
| </div>
| |
| <div class="mw-portlet-body">
| |
| <div class="year-item" data-year="2024">
| |
| <div class="year-header">
| |
| <span>2024</span>
| |
| <span class="year-arrow">▼</span>
| |
| </div>
| |
| <div class="year-content">
| |
| <ul>
| |
| <li><a href="#2024-jan">January</a></li>
| |
| <li><a href="#2024-feb">February</a></li>
| |
| <li><a href="#2024-mar">March</a></li>
| |
| <li><a href="#2024-apr">April</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| | |
| <div class="year-item" data-year="2023">
| |
| <div class="year-header">
| |
| <span>2023</span>
| |
| <span class="year-arrow">▼</span>
| |
| </div>
| |
| <div class="year-content">
| |
| <ul>
| |
| <li><a href="#2023-jan">January</a></li>
| |
| <li><a href="#2023-feb">February</a></li>
| |
| <li><a href="#2023-mar">March</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <div class="mw-portlet" id="portlet-tools">
| |
| <div class="portlet-header">
| |
| <h3>Tools</h3>
| |
| <span class="portlet-arrow">▼</span>
| |
| </div>
| |
| <div class="mw-portlet-body">
| |
| <ul>
| |
| <li><a href="#tool1">Tool 1</a></li>
| |
| <li><a href="#tool2">Tool 2</a></li>
| |
| <li><a href="#tool3">Tool 3</a></li>
| |
| </ul>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <div class="main-content">
| |
| <h1>Main Content</h1>
| |
| <p>This is the main content area. The sidebar on the left contains navigation, years, and tools.</p>
| |
| </div>
| |
| | |
| <script>
| |
| // Portlet Toggle
| |
| document.querySelectorAll('.portlet-header').forEach(header => {
| |
| header.addEventListener('click', function () {
| |
| const portlet = this.closest('.mw-portlet');
| |
| const body = portlet.querySelector('.mw-portlet-body');
| |
| const arrow = this.querySelector('.portlet-arrow');
| |
| | |
| body.classList.toggle('collapsed');
| |
| arrow.classList.toggle('collapsed');
| |
| });
| |
| });
| |
| | |
| // Year Toggle
| |
| document.querySelectorAll('.year-header').forEach(header => {
| |
| header.addEventListener('click', function () {
| |
| const yearItem = this.closest('.year-item');
| |
| const content = yearItem.querySelector('.year-content');
| |
| const arrow = this.querySelector('.year-arrow');
| |
| | |
| content.classList.toggle('expanded');
| |
| arrow.classList.toggle('collapsed');
| |
| });
| |
| });
| |
| | |
| // Search Functionality
| |
| document.getElementById('searchInput').addEventListener('keyup', function (e) {
| |
| const searchTerm = e.target.value.toLowerCase();
| |
| document.querySelectorAll('.mw-portlet-body a, .year-content a').forEach(link => {
| |
| const linkText = link.textContent.toLowerCase();
| |
| if (linkText.includes(searchTerm)) {
| |
| link.parentElement.style.display = 'block';
| |
| } else {
| |
| link.parentElement.style.display = 'none';
| |
| }
| |
| });
| |
| });
| |
| </script>
| |
| </body>
| |
| </html>
| |
| ```
| |
