MediaWiki:CustomTabs.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* For Template:CustomTabs */

/* Hide dummy infobox layout junk on desktop */
aside.pi-theme-dummy,
aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,
aside.pi-theme-dummy ~ aside.portable-infobox + p:empty + p > br:first-child {
  display: none;
}

.custom-tabs {
  display: flex;
  flex-direction: row;
  gap: 5px;
  width: 100%;
  margin: 5px 0;
  flex-wrap: wrap;
  justify-content: space-evenly;

  > span {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    transition: 0.25s;
  }

  a,
  .selflink,
  span.new {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 900 !important;
  }

  /* Apply Color Scheme */
  span {
    &.active-tab {
      background-color: var(--active-tab-background-color);

      strong,
      a:not(.new) {
        color: var(--active-tab-color);
      }
    }

    &.inactive-tab {
      background: var(--inactive-tab-background-color);

      a:not(.new) {
        color: var(--inactive-tab-color);
      }

      &:hover {
        background: var(--inactive-tab-hover-background-color);

        a:not(.new) {
          color: var(--inactive-tab-hover-color);
        }
      }
    }
  }
}

/* Mobile 2-column layout */
.skin-fandommobile {
  .custom-tabs {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-auto-flow: row;

    a,
    .selflink,
    span.new {
      font-size: 90%;
    }
  }
}

/* Default Color Scheme */
.custom-tabs-default {
  --active-tab-background-color: var(--theme-accent-color);
  --active-tab-color: var(--page-text-color);
  --inactive-tab-background-color: var(--theme-color-1);
  --inactive-tab-color: var(--page-text-color);
  --inactive-tab-hover-background-color: var(--theme-color-3);
  --inactive-tab-hover-color: var(--inactive-tab-color);

  .skin-theme-clientpref-night &, .skin-theme-clientpref-os & {
    --active-tab-color: var(--page-background-color);
  }
}