overleaf/services/web/frontend/stylesheets/components/tabs.less

.ol-tabs {
  // Overrides for nav.less
  .nav-tabs {
    border: 0 !important;
    margin-bottom: 0;
    margin-top: -@line-height-computed; //- adjusted for portal-name
    padding: @padding-lg 0 @padding-md;
    text-align: center;
  }

  .nav-tabs > li {
    display: inline-block;
    float: none;
    a {
      border: 0;
      color: @link-color-alt;
      &:focus,
      &:hover {
        background-color: transparent !important;
        border: 0;
        color: @link-hover-color-alt;
      }
    }
  }

  li.active > a {
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid @accent-color-secondary!important;
    color: @accent-color-secondary!important;
    &:hover {
      border-bottom: 1px solid @accent-color-secondary!important;
      color: @accent-color-secondary!important;
    }
  }
  .tab-content:extend(.container) {
    background-color: transparent !important;
    border: none !important;
  }
}

.ol-tabs-scrollable {
  // Styling for Website redesign, it will be used in CMS Later on.
  max-width: 800px;
  margin: 0 auto;

  .nav-tabs-container {
    overflow-x: auto;
    margin-bottom: var(--spacing-11);
    text-align: center;
    .nav-tabs {
      display: inline-flex;
      border-bottom: var(--border-width-base) solid var(--neutral-20);
      margin: 0 auto;
      padding: 0;
      text-align: center;
      min-width: max-content; // This is for horizontal scrolling
      border-top: 2px solid transparent; // so that top focus border is visible

      li {
        display: inline-block;
        float: none;
        margin-bottom: calc(var(--border-width-base) * -1);
        margin-right: var(--spacing-04);

        &:last-child {
          margin-right: 0;
        }

        a {
          border: 0;
          border-radius: 0;
          color: var(--neutral-70);
          margin-right: unset;
          padding: var(--spacing-04);
          line-height: var(--line-height-03);

          &:focus,
          &:hover {
            border: 0;
          }

          &:focus,
          &:focus-visible {
            background-color: unset;
            outline: 0;
          }

          &:hover {
            background-color: var(--neutral-10);
          }

          &:focus-visible {
            .box-shadow-button-input();
          }
        }
      }

      li.active > a {
        background-color: transparent !important;
        border: 0 !important;
        border-bottom: 3px solid var(--green-50) !important;
        color: @neutral-90 !important;

        &:hover {
          border-bottom: 3px solid var(--green-50) !important;
        }
      }

      @media (max-width: @screen-xs-max) {
        text-align: left;
      }
    }
  }

  .tab-content {
    border: 0 !important; //override navs.less
    padding: 0 !important; //override navs.less
  }

  .ol-accordions-container :first-child {
    // remove top padding so we have spacing-11 between tab nav and tab content
    padding-top: 0px !important;
  }
}

// Scroll the page up a bit to allow tab links to be shown when navigating to
// a bookmarked tab hash
[data-ol-bookmarkable-tabset] .tab-pane {
  scroll-margin-top: calc(
    @line-height-computed + // Computed text height
    20px + // nav-link-padding top & bottom
    @padding-md + // ol-tabs bottom padding
    (@line-height-computed / 2) // tab-content top padding
  );
}