模块:Message box/ambox.css

/* {{Ambox}} (article message box) styles
 * 条目消息框样式
 *
 * @source https://en.wikipedia.org/wiki/MediaWiki:Common.css
 * @revision 2022-05-25
*/
.ambox {
  margin: 0 10%;
  border: 1px solid #a2a9b1;
  border-left: 10px solid #3366cc;
  background-color: #fbfbfb;
}
.ambox .mbox-text {
  padding: 0.25em 0.5em;
}
.ambox .mbox-image {
  padding: 2px 0 2px 0.5em;
}
.ambox .mbox-imageright {
  padding: 2px 0.5em 2px 0;
}

.ambox + .ambox,
.ambox + .component-template_styles + .ambox {
  margin-top: -1px;
}

.ambox-notice {
  border-left-color: #3366cc;
}

.ambox-speedy {
  border-left-color: #b32424;
  background-color: #fee7e6;
}

.ambox-delete {
  border-left-color: #b32424;
}

.ambox-content {
  border-left-color: #f28500;
}

.ambox-style {
  border-left-color: #ffcc33;
}

.ambox-move {
  border-left-color: darkorchid;
}

.ambox-protection {
  border-left-color: #a2a9b1;
}

/* 在低宽度时移除外边距 */
@media screen and (max-width: 767px) {
  .ambox {
    margin: 0;
  }
}

/* 在使用 Minerva Neue 皮肤 (移动端默认) 时改变消息框文本颜色 */
body.skin-minerva .ambox {
  color: #54595d;
}

body.skin-minerva .ambox .ambox-learn-more + .mw-ui-icon {
  display: none;
}

/*
 * Minerva Neue 皮肤 Ambox 模板改善
 *
 * 最外层的 CSS 类都是通过 Javascript 添加的,
 * SEE: [[MediaWiki:Gadget-minerva-skin-ambox-improve.js]]
 *
 * @revision 2022-08-13
*/

.ambox-minerva_skin-improve .mbox-text {
  position: relative;
}

.ambox-minerva_skin-improve .hide-when-compact {
  display: none;
}

.ambox-minerva_skin-improve .ambox-learn-more {
  position: absolute;
  right: 0.5em;
  bottom: 0.2em;
  display: block;
  padding-left: 2em;
  background-image: linear-gradient(to right, transparent, #fbfbfb 1.5em);
  color: #3366cc;
  cursor: pointer;
}

.ambox-minerva_skin-improve.ambox-speedy .ambox-learn-more {
  background-image: linear-gradient(to right, transparent, #fee7e6 1.5em);
}

.ambox-minerva_skin-improve .ambox-learn-more:hover {
  text-decoration: underline solid;
}
.ambox-minerva_skin-improve .ambox-learn-more:active {
  color: #faa700;
}

.ambox-minerva_skin-improve .ambox-last_visible_p {
  margin-bottom: 0;
}

@media screen and (min-width: 720px) {
  .ambox-minerva_skin-improve .ambox-learn-more,
  .ambox-minerva_skin-improve.ambox-speedy .ambox-learn-more {
    right: inherit;
    bottom: 0.5em;
    padding-left: 0;
    background-image: none;
  }

  .ambox-minerva_skin-improve .mbox-text-span {
    padding-bottom: 2em;
  }
}