MediaWiki:Collapsible.css: Difference between revisions

Revision as of 11:34, 3 December 2025

/* Collapsible Elements */
.mw-body .collapsible,
#content .collapsible,
#mw-content-text .collapsible,
button.collapsible {
  background-color: #f1f1f1;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 4px;
  margin-bottom: 5px;
  position: relative;
}

.mw-body .collapsible:hover,
#content .collapsible:hover,
#mw-content-text .collapsible:hover,
button.collapsible:hover {
  background-color: #ddd;
}

.mw-body .collapsible::after,
#content .collapsible::after,
#mw-content-text .collapsible::after,
button.collapsible::after {
  content: '+';
  font-size: 18px;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.mw-body .collapsible.active::after,
#content .collapsible.active::after,
#mw-content-text .collapsible.active::after,
button.collapsible.active::after {
  content: '-';
}

.mw-body .collapsible-content,
#content .collapsible-content,
#mw-content-text .collapsible-content,
button.collapsible + .collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
  border-radius: 0 0 4px 4px;
}

.mw-body .collapsible-content.active,
#content .collapsible-content.active,
#mw-content-text .collapsible-content.active,
button.collapsible + .collapsible-content.active {
  max-height: 500px;
  padding: 18px;
  border: 1px solid #ddd;
  border-top: none;
  margin-bottom: 15px;
}
html[data-theme="dark"] .mw-body .collapsible,
html[data-theme="dark"] #content .collapsible,
html[data-theme="dark"] #mw-content-text .collapsible,
html[data-theme="dark"] button.collapsible {
  background-color: #141c2a;
  color: #cfe6ff;
  border: 1px solid rgba(159,208,255,.25);
  box-shadow: 0 6px 20px rgba(123,187,255,.22);
}
html[data-theme="dark"] .mw-body .collapsible:hover,
html[data-theme="dark"] #content .collapsible:hover,
html[data-theme="dark"] #mw-content-text .collapsible:hover,
html[data-theme="dark"] button.collapsible:hover {
  background-color: rgba(61,97,146,.22);
}
html[data-theme="dark"] .mw-body .collapsible-content,
html[data-theme="dark"] #content .collapsible-content,
html[data-theme="dark"] #mw-content-text .collapsible-content,
html[data-theme="dark"] button.collapsible + .collapsible-content {
  background-color: #121a29;
  border-radius: 0 0 4px 4px;
}
html[data-theme="dark"] .mw-body .collapsible-content.active,
html[data-theme="dark"] #content .collapsible-content.active,
html[data-theme="dark"] #mw-content-text .collapsible-content.active,
html[data-theme="dark"] button.collapsible + .collapsible-content.active {
  border: 1px solid rgba(159,208,255,.25);
  border-top: none;
  color: #cfe6ff;
}