MediaWiki:Gadget-SiteCommon.css

/* Styles for all mboxes */
.mbox {
  /* Common styles for all mboxes */
  display: flex;
  max-width: 95%;
  box-sizing: border-box;
  flex-direction: column;
  place-content: center center;
  align-items: center;
  border-width: 1.25px;
  border-left-width: 0.375em;
  border-style: solid;
  border-radius: 0.25em;
  border-color: #36c;
  padding: 0.5em 0.5em 0.5em 0;
  margin: 0.25em auto;
  background: #def;
  border-collapse: inherit;
  /* Cell sizes for tmbox/fmbox message boxes */
  /* Styles per type */
  /* Disambig and set index box styles */
}
.mbox-body {
  display: flex;
  width: 100%;
  flex-flow: row nowrap;
  place-content: center space-between;
  align-items: center;
}
.mbox-above,
.mbox-below {
  margin: auto;
}
.mbox-text {
  width: 95%;
  /* Make all mboxes the same width regardless of text length */
  flex: 1 1 95%;
  padding: 0.5em;
  /* 0.5em left/right */
  /* The message body cell(s) */
  border: 0;
}
.mbox-image,
.mbox-imageright {
  border: 0;
  flex: 1 0;
  margin: auto;
  padding: 1px 0.75em;
  text-align: center;
}
.mbox-image img,
.mbox-imageright img {
  max-width: 45px;
  height: auto;
  text-align: center;
}
.mbox-empty-cell {
  width: 1px;
  padding: 0;
  /* An empty narrow cell */
  border: 0;
}
.mbox-notice {
  border-color: #36c;
  background: #def;
}
.mbox-speedy,
.mbox.alert,
.mbox.red {
  border-color: #b22;
  /* Red */
  background: #fee;
  /* Pink */
}
.mbox-delete,
.mbox.tawny {
  border-color: #a97;
  /* tawny */
  background: #f0f0d8;
  /* light tawny */
}
.mbox-content,
.mbox.orange {
  border-color: #f28500;
  /* Orange */
  background: #fed;
  /* Light Orange */
}
.mbox-style,
.mbox-rule,
.mbox.rule,
.mbox.yellow {
  border-color: #fb3;
  /* Yellow */
  background: #ffc;
  /* Light yellow */
}
.mbox-move,
.mbox.violet,
.mbox.purple {
  border-color: #93c;
  /* Purple */
  background: #fef;
  /* Light purple */
}
.mbox-protection,
.mbox-draft,
.mbox.gray,
.mbox.grey {
  border-color: #606060;
  /* Dark gray */
  background: #eee;
  /* Light gray */
}
.mbox-featured,
.mbox.brown {
  border-color: #cba135;
  /* Brown-gold */
  background: #fec;
  /* light brown */
}
.mbox-policy,
.mbox.green {
  border-color: #181;
  /* Green */
  background: #cfc;
  /* Light green */
}
.mbox-guideline,
.mbox.blue {
  border-color: #36c;
  background: #def;
}
.mbox-license {
  border-width: 2px;
  border-color: #999;
}
.mbox-license,
.mbox.license-pd {
  background: #f7f8ff;
  /* Very light gray with blue */
}
.client-darkmode .mbox-license,
.client-darkmode .mbox.license-pd {
  background: #d9ddff;
  /* light blue */
}
.mbox.license-cc {
  background: #f9f9f9;
  /* Very light gray */
}
.client-darkmode .mbox.license-cc {
  background: #d9d9d9;
  /* light gray */
}
.mbox.license-other {
  background: #ffe;
  /* Very light gray with yellow */
}
.client-darkmode .mbox.license-other {
  background: #ff0;
  /* Yellow */
}
.mbox.license-free {
  background: #f3ffee;
  /* Very light green */
}
.client-darkmode .mbox.license-free {
  background: #b8ff99;
  /* Light green */
}
.mbox.license-nonfree {
  background: #fff9f9;
  /* Very light red */
}
.client-darkmode .mbox.license-nonfree {
  background: #fcc;
  /* Light red */
}
.mbox.license-self {
  background: #f8f9fa;
  /* Very light gray */
}
.mbox-disambig,
.mbox-setindex {
  border-color: #999;
  background: #fefefe;
}
.mbox .mbox-text .mbox {
  /* For mboxes inside mbox-text cells. */
  border-radius: 0;
}
.mbox.license-self .mbox-text .mbox {
  /* For mboxes inside mbox-text cells of mbox.license-self. */
  border-width: 1px;
}
.mbox-inside .mbox {
  /* For mboxes inside other templates. */
  margin: 0.25em;
}
/* Code for compact mbox */
.compact-mbox .mbox {
  /* Remove borders, backgrounds, padding, etc. */
  display: block;
  width: auto;
  padding: 0 !important;
  border-radius: 0.25em;
  margin: 0 0 0 1.6em !important;
  background: transparent;
  border-collapse: collapse;
}
.compact-mbox .mw-collapsible-content .mbox {
  display: list-item;
  border: 0;
  margin-left: 1em !important;
  line-height: 1.5em;
  list-style-type: disc;
}
body.mediawiki .compact-mbox .mbox-small-left {
  width: auto;
  margin: 0;
  clear: both;
  font-size: 100%;
}
.compact-mbox div .mbox-text {
  /* Style the text cell as a list item and remove its margin */
  margin: 0 !important;
}
.compact-mbox .mbox-text .mbox-image,
.compact-mbox .mbox-text .mbox-imageright,
.compact-mbox .mbox-text .mbox-empty-cell {
  /* Hide the images and empty cells */
  display: none;
}
/* Talk page message box styles */
.tmbox {
  background: #f8eaba;
}
.mbox-inside .tmbox.mbox-small {
  /* set in "mbox-small" above. */
  font-size: 100%;
  /* "small" tmboxes should not be small when */
  line-height: 1.5em;
  /* also "nested", so reset styles that are */
}
.mediawiki .mbox-inside .tmbox {
  width: 100%;
  /* For Safari and Opera */
  /* For tmboxes inside other templates. The "mediawiki" */
  margin: 2px 0;
  /* class ensures that this declaration overrides other */
}
/* Footer and header message box styles */
.fmbox {
  border-width: 1.25px;
  border-style: solid;
  border-color: #a2a9b1;
  margin: 0.25em 0;
  background: #f8f9fa;
  /* Default "system" gray */
  clear: both;
  /* Div based "system" style fmbox messages. */
}
.fmbox-warning {
  border-color: #bb7070;
  /* Dark pink */
  background: #ffdbdb;
  /* Pink */
}
.fmbox-editnotice {
  background: transparent;
}
.fmbox-system {
  padding: 0.25em 0;
  border-color: #a2a9b1;
  margin: 0.2em 0;
  background: #f8f9fa;
  clear: both;
}
/* Div based "warning" style fmbox messages. */
.mw-warning-with-logexcerpt,
.mw-lag-warn-high,
.mw-cascadeprotectedwarning,
#mw-protect-cascadeon {
  padding: 0.5em;
  border: 1px solid #bb7070;
  background: #ffdbdb;
  margin: 0.2em 0;
  clear: both;
}
/* These mbox-small classes must be placed after all other
   tmbox etc classes. "body.mediawiki" is so. */
body.mediawiki .mbox-small {
  max-width: 320px;
  margin: 0.25em 0 0.25em 0.5em !important;
  padding: 0.25em;
  /* For the "small=yes" option. */
  clear: both;
  float: right;
  font-size: 92.5%;
  line-height: 1.25em;
}
body.mediawiki .mbox-small-left {
  width: 240px;
  /* For the "small=left" option. */
  margin: 0.25em 0.5em 0.25em 0 !important;
  border-collapse: collapse;
  font-size: 92.5%;
  line-height: 1.25em;
}
body.mediawiki .mbox-small-image,
body.mediawiki .mbox-small-imageright {
  padding: 1px 0.5em;
}
/* Style for mboxes on small-screen pages */
@media screen and (max-width: 768px) {
  .mbox,
  .mbox-small {
    width: 95%;
    width: calc(100% - 1em);
    max-width: 95%;
  box-sizing: border-box;
    max-width: calc(100% - 1em);
  }
  .mbox-image img,
  .mbox-imageright img {
    max-width: 2em;
  }
  .mbox-image {
    /* The left image cell */
    padding: 2px 0 2px 0.5em;
    /* 0.5em left, 0px right */
  }
  .mbox-imageright {
    /* The right image cell */
    padding: 2px 0.5em 2px 0;
    /* 0px left, 0.5em right */
  }
  .mbox.licensetpl .mbox-image,
  .mbox.licensetpl .mbox-imageright {
    display: none;
  }
  .mbox-text {
    flex: 1 1 92.5%;
    padding: 0.375em 0.5em;
  }
}
@media screen and (max-width: 480px) {
  .mbox-small {
    width: 100%;
    margin: 0.25em auto !important;
    float: none;
  }
}
/* For permissionerror area */
.permissions-errors {
  border: 1px solid #a2a9b1;
}
.permissions-errors .fmbox {
  border: 0;
}