_show.scss

@import 'sub-rating';
@import 'header';
@import 'trophy';
@import 'profile';
@import 'number-menu';
@import 'note-zone';
@import 'activity';
@import 'games';

.page-menu {
  /* for the trophies. This glorious hack bypasses the .user-show overflow: hidden */
  position: relative;
}

.user-show {
  overflow: hidden;

  /* this fixes profile overflow, but cuts out the trophies */

  .flash {
    @extend %box-margin-horiz;
  }

  &__social {
    @extend %flex-between-nowrap;

    background: $c-bg-zebra;

    .number-menu {
      flex: 0 1 auto;
      overflow-x: auto;
      margin: 0 0 0.2em 1em;
    }

    .user-actions {
      @extend %flex-center-nowrap;
      flex: 0 0 auto;
      margin: 0 1em 0 0.3em;

      .mod-zone-toggle,
      .dropdown > a {
        display: block;
        font-size: 2em;
        height: 1.5em;
        color: $c-font-dim;
        padding: 0 0.7em;
      }
      .mod-zone-toggle:hover {
        color: $c-font-clear;
      }
    }

    .dropdown {
      position: relative;

      .dropdown-window {
        @extend %dropdown-shadow;
        z-index: $z-link-overlay-2;
        visibility: hidden;
        background: $c-bg-header-dropdown;
        border-radius: $box-radius-size 0 $box-radius-size $box-radius-size;
        position: absolute;
        top: 3rem;
        @include inline-end(0);
        a {
          @extend %flex-center-nowrap;
          width: 20em;
          padding: 0.7rem 1rem;
          color: $c-header-dropdown;
          &::before {
            margin-inline: 0 1rem;
            font-size: 1.4em;
          }
          &:first-child {
            border-radius: $box-radius-size 0 0 0;
          }
          &:last-child {
            @extend %box-radius-bottom;
          }
          &:hover {
            background: $c-primary;
            &,
            &::after {
              color: $c-over;
            }
          }
        }
      }
      &:hover {
        > a {
          @extend %box-radius-top, %dropdown-shadow;
          background: $c-bg-header-dropdown;
          color: $c-font-clear;
        }
        .dropdown-window {
          visibility: visible;
        }
      }
    }
  }

  .claim-title {
    @extend %box-padding;

    border-top: $border;

    h2 {
      font-size: 1.5em;
      margin-bottom: 1em;
    }

    form {
      @extend %flex-between;

      margin: 3em 0 1em 0;
    }
  }

  .crosstable {
    margin: 2em 1em;
    width: auto;
  }

  .new-player {
    padding: 1.5em;
    overflow-y: scroll;

    h2 {
      font-size: 1.5em;
    }

    p {
      margin: 1em 0;
    }

    li {
      list-style: disc inside;
      line-height: 1.5em;
    }
  }

  .number-menu .to-games.active,
  #games.number-menu {
    background: $c-bg-low !important;
  }

  .angles {
    @extend %metal;

    font-size: 1.2em;
    height: 4rem;
    border-top: $border;

    .nm-item {
      @extend %flex-center;

      justify-content: center;
    }

    .unread {
      margin-inline-start: 0.5em;
    }
  }

  .activity {
    margin-bottom: 2em;
  }

  &__blog {
    border-top: 1px solid $c-border;
    padding: 2vh 2.5%;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 0 3%;
    grid-template-rows: auto; /* first row auto */
    grid-auto-rows: 0; /* all the other rows 0 */
  }
}