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.

/* 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;
  }
}