MediaWiki:Gadget-NavboxCSS.css

IdleTap-bot​(留言 | 贡献)2026年8月9日 (日) 13:49的版本 (修复:hlist 选择器同时匹配根级 .navbox.hlist,使所有依赖根 hlist 的 Navbox 列表内联)
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
/**
 * SPDX-License-Identifier: CC-BY-SA-4.0
 * _addText: '{{Gadget Header|license=CC-BY-SA-4.0}}'
 *
 * @source {@link https://git.qiuwen.net.cn/InterfaceAdmin/QiuwenGadgets/src/branch/master/src/NavboxCSS}
 * @license CC-BY-SA-4.0 {@link https://www.qiuwenbaike.cn/wiki/H:CC-BY-SA-4.0}
 */
/**
 * +------------------------------------------------------------+
 * |            === WARNING: GLOBAL GADGET FILE ===             |
 * +------------------------------------------------------------+
 * |       All changes should be made in the repository,        |
 * |                otherwise they will be lost.                |
 * +------------------------------------------------------------+
 * |        Changes to this page may affect many users.         |
 * | Please discuss changes by opening an issue before editing. |
 * +------------------------------------------------------------+
 */
/* <nowiki> */

/* src/NavboxCSS/NavboxCSS.less */
:root {
  --navbox-hue: 160;
  --navbox-saturation: 45%;
}
.navbox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid #a2a9b1;
  margin: 1em 0;
  background: #fdfdfd;
  clear: both;
  font-size: 97.5%;
  overflow-x: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  display: grid;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  flex-direction: column;
  grid-gap: 3px;
  grid-template-columns: minmax(10em, auto) 1fr;
  text-align: left;
  --navbox-title-color: hsl(var(--navbox-hue, 160) var(--navbox-saturation, 45%) 72%);
  --navbox-group-color: hsl(var(--navbox-hue, 160) var(--navbox-saturation, 45%) 80%);
  --navbox-subgroup-color: hsl(var(--navbox-hue, 160) var(--navbox-saturation, 45%) 86%);
  --navbox-sub-subgroup-color: hsl(var(--navbox-hue, 160) var(--navbox-saturation, 45%) 90%);
}
.navbox .navbox-cell {
  padding: 0.0875em 1em;
}
.navbox .navbox-above,
.navbox .navbox-below,
.navbox .navbox-title {
  text-align: center;
  margin-bottom: 1px;
}
.navbox .navbox-sole-row {
  grid-column: 1 / 3;
}
.navbox .navbox-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  display: grid;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  grid-column: 1 / 2;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.navbox .navbox-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  display: grid;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  align-items: center;
}
.navbox .navbox-title {
  display: block;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-left: 1em;
  background-color: #c4e3b5;
  background-color: var(--navbox-title-color, #c4e3b5);
  font-size: 97.5%;
  font-weight: bolder;
  text-align: center;
}
.navbox .navbox-title > .navbar,
.navbox .navbox-title-inner > .navbar {
  float: left;
  text-align: left;
  margin-right: 0;
  margin-left: 0.5em;
  grid-column: 1 / span 1;
  justify-self: start;
}
.navbox .navbox-title > .navbox-title-content,
.navbox .navbox-title-inner > .navbox-title-content {
  grid-column: 2 / span 1;
  justify-self: center;
}
.navbox .navbox-title .collapsetoggle,
.navbox .navbox-title-inner .collapsetoggle,
.navbox .navbox-title .mw-collapsible-toggle,
.navbox .navbox-title-inner .mw-collapsible-toggle,
.navbox .navbox-title .gadget-collapsible-toggler,
.navbox .navbox-title-inner .gadget-collapsible-toggler {
  font-weight: normal;
  grid-column: 3 / span 1;
  justify-self: end;
}
.navbox .navbox-group,
.navbox .navbox-above,
.navbox .navbox-below,
.navbox .navbox .navbox-title {
  background-color: #d2ebc7;
  background-color: var(--navbox-group-color, #d2ebc7);
}
.navbox .navbox .navbox-group,
.navbox .navbox .navbox-above,
.navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox-title {
  background-color: #e2f1da;
  background-color: var(--navbox-subgroup-color, #e2f1da);
}
.navbox .navbox .navbox .navbox-group,
.navbox .navbox .navbox .navbox-above,
.navbox .navbox .navbox .navbox-below,
.navbox .navbox .navbox .navbox .navbox-title {
  background-color: #f0f7ed;
  background-color: var(--navbox-sub-subgroup-color, #f0f7ed);
}
.navbox .navbox-odd {
  background: transparent;
}
.navbox .navbox-even {
  background: #f7f7f7;
}
.navbox .navbar {
  display: inline;
  font-weight: normal;
}
.navbox .navbar ul {
  display: inline;
}
.navbox .navbar li {
  word-spacing: -0.125em;
}
.navbox .navbar-mini li abbr[title] {
  border-bottom: 0;
  cursor: inherit;
  -webkit-font-feature-settings: "smcp";
  -moz-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
  font-variant: small-caps;
  -webkit-text-decoration: none;
  text-decoration: none;
}
.navbox .navbox-list.navbox,
.navbox .navbox-list > span > .navbox,
.navbox .navbox-list > span > span > .navbox,
.navbox .navbox-list > .navbox {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  align-items: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
  padding: 0;
  border: 0;
  margin: 0;
  font-size: inherit;
}
.navbox .navbox-list > .navbox,
.navbox .navbox-list > span > .navbox,
.navbox .navbox-list > span > span > .navbox {
  margin: -0.0875em -1em;
}
.navbox .navbox-list > .navbox:not(.navbox-level-0) {
  margin: 0;
}
.navbox .hlist dl,
.navbox .hlist ol,
.navbox .hlist ul,
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li,
.navbox.hlist dl,
.navbox.hlist ol,
.navbox.hlist ul,
.navbox.hlist dd,
.navbox.hlist dt,
.navbox.hlist li {
  margin: 0 !important;
  padding: 0.125em 0;
}
.navbox .hlist dd,
.navbox .hlist dt,
.navbox .hlist li,
.navbox.hlist dd,
.navbox.hlist dt,
.navbox.hlist li {
  white-space: nowrap;
  display: inline;
}
.navbox .hlist dd dl,
.navbox .hlist dt dl,
.navbox .hlist li dl,
.navbox .hlist dd ul,
.navbox .hlist dt ul,
.navbox .hlist li ul,
.navbox .hlist dd ol,
.navbox .hlist dt ol,
.navbox .hlist li ol,
.navbox.hlist dd dl,
.navbox.hlist dt dl,
.navbox.hlist li dl,
.navbox.hlist dd ul,
.navbox.hlist dt ul,
.navbox.hlist li ul,
.navbox.hlist dd ol,
.navbox.hlist dt ol,
.navbox.hlist li ol {
  white-space: normal;
}
.navbox .hlist dd a,
.navbox .hlist dt a,
.navbox .hlist li a,
.navbox.hlist dd a,
.navbox.hlist dt a,
.navbox.hlist li a {
  display: inline-block;
}
.navbox .hlist ul ul,
.navbox .hlist ol ul,
.navbox .hlist ul ol,
.navbox .hlist ol ol,
.navbox.hlist ul ul,
.navbox.hlist ol ul,
.navbox.hlist ul ol,
.navbox.hlist ol ol {
  padding-left: 0;
  margin-left: 0;
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox.hlist td dl,
.navbox.hlist td ol,
.navbox.hlist td ul {
  padding: 0.125em 0;
}
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
  padding: 0.125em 0;
}
.navbox-wrapper + .navbox-wrapper > .navbox,
.navbox-wrapper + .navbox-wrapper > .content-table > .navbox,
.navbox + .navbox {
  margin-top: -webkit-calc(-1px - 1em);
  margin-top: calc(-1px - 1em);
}
.navboxes > .navbox,
.navboxes > .navbox-wrapper > .navbox,
.navboxes > .navbox-wrapper > .content-table > .navbox {
  padding: 0.625em 0;
}
.plainbox > .navbox-group {
  max-width: none;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  text-align: center;
}
.plainbox > .navbox-group,
.plainbox > .navbox-list {
  grid-column: 1 / 3;
}
.navbox.vertical > .navbox-group,
.navbox-group.vertical {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.plainbox.vertical > .navbox-group,
.plainbox > .navbox-group.vertical {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  justify-content: center;
  text-align: center;
  -webkit-writing-mode: inherit;
  writing-mode: inherit;
}
@media screen and (max-width: 768px) {
  .plainbox > .navbox-group {
    max-width: none;
  }
  .plainbox > .navbox-group,
  .plainbox > .navbox-list {
    grid-column: 1 / 3;
  }
  .plainbox.vertical > .navbox-group,
  .plainbox > .navbox-group.vertical {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    text-align: center;
    -webkit-writing-mode: inherit;
    writing-mode: inherit;
  }
  .navbox .navbox-group {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    justify-content: center;
    text-align: center;
  }
  .navbox .navbox-list,
  .navbox .navbox-cell {
    padding: 0.0875em 0;
  }
  .navbox .navbox-list > .navbox,
  .navbox .navbox-list > span > .navbox,
  .navbox .navbox-list > span > span > .navbox {
    margin: 0;
  }
  .navbox.vertical > .navbox-group,
  .navbox-group.vertical {
    -webkit-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
  }
  .mw-body-content .navbox,
  .mw-body-content .navbox > .navbox-inner {
    display: block;
    width: 100% !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
table.navbox,
table.navbox-inner {
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  table.navbox,
  table.navbox-inner {
    max-width: 100% !important;
    margin-left: 1px !important;
    margin-right: 1px !important;
  }
}

/* </nowiki> */