Dark mode by adrdl

/* ==UserStyle==
@name       Dark mode
@version    20241106.21.05
@namespace  ?
==/UserStyle== */

@-moz-document url("https://joelboersma.github.io/TF2LoadoutRandomizer/") {
/* Dark Mode Theme for TF2 Loadout Randomizer */

body {
  background-color: #121212;
  color: #e0e0e0;
}

header h1 {
  color: #ffcc00; /* Highlight color for the header */
}

main {
  background-color: #1e1e1e;
  color: #e0e0e0;
  padding: 20px;
  border-radius: 8px;
}

#controls {
  margin-top: 20px;
}

#controls button#generateButton {
  background-color: #3a3a3a;
  color: #ffcc00;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#controls button#generateButton:hover {
  background-color: #555;
}

#controls ol {
  list-style-type: none;
  padding: 0;
}

#controls ol li button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3a3a3a;
  color: #ffffff;
  border: 1px solid #555;
  padding: 10px 15px; /* Added padding for more space */
  border-radius: 5px;
  margin-bottom: 5px;
  min-width: 150px; /* Ensures button width is sufficient */
  font-size: 16px; /* Increase font size for readability */
  cursor: pointer;
  transition: background-color 0.3s;
}

#controls ol li button:hover {
  background-color: #555;
}

/* Dark mode adjustments for #results */
#results {
  background-color: #2a2a2a; /* Darker background for readability */
  color: #f0e68c; /* Softer yellow for text */
  border: 1px solid #444; /* Subtle border for clarity */
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
}

#results h2 {
  color: #ffcc00;
}

#results ul {
  color: #ffffff; /* Ensure list text is bright enough */
}

#keys p {
  color: #aaaaaa;
}

#keys p kbd {
  background-color: #3a3a3a;
  color: #ffffff;
  padding: 3px 5px;
  border-radius: 3px;
  font-weight: bold;
}

footer {
  background-color: #1e1e1e;
  color: #bbbbbb;
  padding: 10px 0;
  text-align: center;
  border-top: 1px solid #444;
}

footer ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

footer ul li a {
  color: #66ccff;
  text-decoration: none;
  transition: color 0.3s;
}

footer ul li a:hover {
  color: #ffcc00;
}
}