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

/* Custom Timeless skin CSS to match modern website design */
:root {
  --color-base: #2c3e50;          /* Primary color - dark blue */
  --color-base--hover: #34495e;   /* Slightly lighter on hover */
  --color-primary: #e74c3c;       /* Secondary color - red accent */
  --color-secondary: #3498db;     /* Accent color - blue */
  --color-text: #333;             /* Main text color */
  --color-text--subtle: #777;     /* Subtle text color */
  --color-link: #3498db;          /* Link color */
  --color-link--visited: #9b59b6; /* Visited link color */
  --color-link--active: #e74c3c;  /* Active link color */
  --font-family-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-serif: 'Playfair Display', serif;
  --border-radius--small: 4px;
  --border-radius--medium: 8px;
}

/* Header styling */
.color-middle {
  background-color: var(--color-base);
}

.ts-inner {
  font-family: var(--font-family-sans);
}

/* Content area styling */
#mw-content-container {
  background-color: #f8f9fa;
}

#mw-content {
  background-color: white;
  border-radius: var(--border-radius--medium);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 2em;
}

/* Typography */
#mw-content h1, 
#mw-content h2, 
#mw-content h3, 
#mw-content h4, 
#mw-content h5, 
#mw-content h6 {
  font-family: var(--font-family-serif);
  font-weight: 600;
  color: var(--color-base);
}

#mw-content h1.firstHeading {
  font-size: 2.5rem;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}

#mw-content h2 {
  border-bottom: 1px solid #eee;
  padding-bottom: 0.3em;
}

/* Links */
#mw-content a {
  color: var(--color-link);
  transition: color 0.3s ease;
}

#mw-content a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* Buttons */
.mw-ui-button {
  background-color: var(--color-base);
  color: white;
  border-radius: var(--border-radius--small);
  font-family: var(--font-family-sans);
  transition: background-color 0.3s ease;
}

.mw-ui-button:hover {
  background-color: var(--color-base--hover);
}

.mw-ui-button.mw-ui-progressive {
  background-color: var(--color-secondary);
}

.mw-ui-button.mw-ui-progressive:hover {
  background-color: #2980b9;
}

/* Table styling */
table.wikitable {
  border-radius: var(--border-radius--small);
  border: 1px solid #eee;
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
  background-color: var(--color-base);
  color: white;
}

/* Footer */
#mw-footer {
  background-color: var(--color-base);
  color: white;
  padding: 2em 0;
}

#mw-footer a {
  color: white;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

#mw-footer a:hover {
  opacity: 1;
  color: var(--color-primary);
  text-decoration: none;
}