@import '../arch_definitions';
@import 'mediawiki.skin.variables';

.mw-body {
  & h1,
  &-content h1,
  &-content h2 {
    font-family: sans-serif;
  }
}

nav.vector-menu-tabs {
  padding-left: 0;

  // remove background with color gradient
  ul, ul li {
    background: none;
  }

  li.selected {
    // border around the tab matches content, at the bottom we override the
    // content border with the background color
    border: var(--archwiki-content-border-style);
    border-color: var(--archwiki-content-border-color);
    border-bottom-color: var(--archwiki-content-background-color);
    // background of the selected tab should match the content
    background-color: var(--archwiki-content-background-color);

    // remove background with the vertical separator
    a {
      background: none !important;
    }
  }

  // invisible border to align well with the selected tab
  ul li {
    border-width: var(--archwiki-content-border-width);
    border-style: none;
  }
}

// Vector in responsive mode; https://www.mediawiki.org/wiki/Skin:Vector#wgVectorResponsive
body.skin-vector.skin--responsive {
  nav.vector-menu-tabs {
    li.selected {
      margin-top: calc(-1 * var(--archwiki-content-border-width));
      border-bottom: none;
    }
  }

  // Let the left border of the selected tab overlap with the vertical bar
  // coming from the background image of the previous tab.
  li:not(:first-child).selected {
    margin-left: calc(-1 * var(--archwiki-content-border-width));
  }
}

// Vector legacy and Vector 2022
body.skin-vector {
  // Set background color
  div.mw-page-container {
    background-color: var(--archwiki-body-background-color);
  }

  // Disable sidebar's gradient as it conflicts with the background color
  div#mw-panel {
    background-image: none;
  }

  // Override font size of section headings to improve readability
  // Vector's font size for h4 is 100%, just like regular paragraphs, which makes
  // the heading indiscernible from regular bolded text.
  .mw-body-content {
    .mw-heading1 { font-size: 188%; }
    .mw-heading2 { font-size: 150%; }
    .mw-heading3 { font-size: 128%; }
    .mw-heading4 { font-size: 116%; }
    .mw-heading5 { font-size: 108%; }
    .mw-heading6 { font-size: 100%; }
  }

  // Use plain item markers
  #content ul {
    list-style-image: none;
  }
}

// Vector 2022
body.skin-vector-2022 {
  // Set background color
  .vector-sticky-header {
    background: var(--archwiki-body-background-color);
  }
  .vector-header-container, .vector-header {
    background-color: var(--archwiki-body-background-color);
  }

  // Show the main menu and user menu in the visible area
  .vector-header {
    min-width: unset;
  }

  // Match the font used in page title
  .vector-sticky-header-context-bar-primary {
    font-family: sans-serif;
  }

  // keep padding as we are using a visual border
  @media screen {
    .mw-body {
      padding: 1.5em;
    }
    .mw-ui-icon-flush-left {
      margin-left: 0;
    }
    .mw-ui-icon-flush-right {
      margin-right: 0;
    }
  }
  @media screen and (max-width: 999px) {
    // move horizontal padding from .mw-page-container to .mw-body and .mw-footer
    .mw-page-container {
      padding-left: 0;
      padding-right: 0;
    }
    .mw-body, .mw-footer {
      padding: 0.5em;
    }
    // increase max-width from 60em to 100%
    .mw-content-container {
      max-width: 100%;
    }
  }

  // Fix to not hide the login menu
  #p-personal.emptyPortlet {
    display: block;
  }

  // Restore section numbers in the sidebar table of contents
  .vector-toc .vector-toc-numb {
    display: inline;
    padding-right: 0.5em;
  }

  // Restore language links which disappeared in the Vector 2022 version 1.39
  #p-lang-btn.mw-portlet-empty {
    display: block;
    float: right;
  }

  // Align the language selector
  .vector-page-titlebar > .mw-ui-button:last-child,
  .vector-page-titlebar > .mw-portlet-lang:last-child {
    margin-right: auto;
  }

  // Hide gradient after menus
  @media screen {
    .vector-sticky-pinned-container::after {
      display: none;
    }
  }
}

// Vector legacy
body.skin-vector-legacy {
  div#mw-head,
  .mw-header {
    top: 65px;
  }

  div#mw-panel {
    top: 65px;
    margin-top: 1em;
  }

  #mw-page-base {
    background: none;
  }

  // fix vertical position of tabs
  nav.vector-menu-tabs, nav.vector-menu {
    margin-top: calc(-2 * var(--archwiki-content-border-width));
  }

  nav.vector-menu-tabs {
    // Let the left border of the selected tab overlap with the vertical bar
    // coming from the background image of the previous tab.
    li:not(:first-child).selected {
      margin-left: calc(-2 * var(--archwiki-content-border-width));
    }
  }

  @media screen and ( max-width: @max-width-breakpoint-tablet ) {
    // fix position of personal navigation bar
    div#p-personal {
      top: unset;
    }

    // remove useless blank space at the bottom
    div#mw-panel {
      padding-top: 0;
    }
  }
}