模块:Navbox/sandbox/styles.css

.navbox {
  border: 1px solid rgb(162, 169, 177);
  padding: 0.25em;
}

.navbox, .navbox-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.navbox .navbox-title, .navbox-subgroup .navbox-title {
  text-align: left;
}

.navbox + .component-templatestyles + .navbox {
  margin-top: -1px;
}

.navbox-title {
  padding: 0.25em calc(0.5em + 0.5vw);
}
.navbox-title-text {
  font-weight: 700;
}
.navbox-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  gap: 2px;
}
.navbox-abovebelow {
  text-align: center;
  padding: 0.25em calc(0.5em + 0.5vw);
}
.navbox-ci {
  display: flex;
  gap: 2px;
}
.navbox-image {
  flex: 0 0 auto;
  display: none;
  padding: 0 0.25em;
}
.navbox-lists {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.navbox-group {
  padding: 0.25em calc(0.5em + 0.5vw);
  font-weight: 700;
}
.navbox-list {
  padding: 0.25em calc(1em + 0.5vw);
  text-align: center;
}
.navbox-list-with-group {
  text-align: left;
}
.navbox-list-has-subgroup.navbox-list {
  padding: initial;
}

@media (min-width: 480px) {
  .navbox .navbar {
    float: left;
    text-align: left;
  }
  .navbox-title-text {
    margin: 0 5em;
    text-align: center;
  }
}
@media (min-width: 720px) {
  .navbox-image {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .navbox-lists {
    grid-template-columns: auto 1fr;
  }
  .navbox-group {
    padding: 0.25em calc(0.5em + 0.5vw);
  }
  .navbox-list {
    padding: 0.25em;
  }
  .navbox-list:not(.navbox-list-with-group) {
    grid-column: 1/3;
  }
}
@media screen {
  .navbox {
    border-color: rgb(162, 169, 177);
    background-color: rgb(248, 249, 250);
  }
  .navbox-title {
    background-color: rgb(200, 200, 251);
  }
  .navbox-abovebelow, .navbox-group, .navbox-subgroup .navbox-title {
    background-color: rgb(216, 216, 255);
  }
  .navbox-subgroup .navbox-abovebelow, .navbox-subgroup .navbox-group {
    background-color: rgb(234, 235, 255);
  }
  .navbox-even {
    background-color: rgba(148, 148, 252, 0.05);
  }
  html.skin-theme-clientpref-night .navbox {
    border-color: rgba(255, 255, 255, 0.05);
    background-color: rgb(32, 33, 34);
  }
  html.skin-theme-clientpref-night .navbox-title {
    background-color: rgb(43, 40, 79);
  }
  html.skin-theme-clientpref-night .navbox-abovebelow, html.skin-theme-clientpref-night .navbox-group, html.skin-theme-clientpref-night .navbox-subgroup .navbox-title {
    background-color: rgb(31, 27, 65);
  }
  html.skin-theme-clientpref-night .navbox-subgroup .navbox-abovebelow, html.skin-theme-clientpref-night .navbox-subgroup .navbox-group {
    background-color: rgb(20, 15, 52);
  }
  html.skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1 .navbox {
    background-color: black;
  }
}
@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .navbox {
    border-color: rgba(255, 255, 255, 0.05);
    background-color: rgb(32, 33, 34);
  }
  html.skin-theme-clientpref-os .navbox-title {
    background-color: rgb(43, 40, 79);
  }
  html.skin-theme-clientpref-os .navbox-abovebelow, html.skin-theme-clientpref-os .navbox-group, html.skin-theme-clientpref-os .navbox-subgroup .navbox-title {
    background-color: rgb(31, 27, 65);
  }
  html.skin-theme-clientpref-os .navbox-subgroup .navbox-abovebelow, html.skin-theme-clientpref-os .navbox-subgroup .navbox-group {
    background-color: rgb(20, 15, 52);
  }
  html.skin-theme-clientpref-os.citizen-feature-pure-black-clientpref-1 .navbox {
    background-color: black;
  }
}