MediaWiki:Timeless.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Timeless skin */
/* Reset and Base Styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #000000;
      color: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.6;
    }

    /* Links */
    a {
      color: #ffe135;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    a:visited {
      color: #c0c0c0;
    }

    a:hover {
      color: #ffed4e;
    }

    /* 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>
```