hummingbird-me/kitsu-web

// Nothing is truly infamous, but what is wicked; and therefore,
// shame can never disturb an innocent and virtuous mind.
// -- WILLIAM SHERLOCK, A Practical Discourse Concerning a Future Judgment

// Hello
// -- WOPIAN

// temporary padding for fixed header. Will need to be addressed when dealing with cover photos.
body {
  padding-top: 80px;
}

// Need a more elegant solution for vertically centering primary-nav content. Currently the height of the
// avatar causes the header to become too large (due to the top and bottom padding) and forces the
// left-hand links to misalign vertically.
.nav-link.avatar {
  width: 25px;
  height: 25px;
  .avatar-image {
    position: absolute;
    right: 0;
    top: 8px;
  }
}

// Running into an issue where I'm unable to align the edge of the absolutely positioned
// .cover-user-info area to 'right: 0', this hacky solution instead sets the max-width
// to match that of the container. More elegant solution is needed.
.cover-user-info {
  @media (min-width: 544px) {
    max-width: 576px;
  }
  @media (min-width: 768px) {
    max-width: 720px;
  }
  @media (min-width: 992px) {
    max-width: 940px;
  }
  @media (min-width: 1200px) {
    max-width: 1140px;
  }
}

// No idea why, but the library content width for some reason isn't getting set.
// A fix for this issue would be great.
.container {
  width: 100%;
}

// Somewhat improves visual quality of circle outlines in header
// For non-retina displays
.site-search__input,
.notifications {
  transform: rotate(0.01deg);
}

// Need to find the cause of horizontal scroll on mobile devices
@media (max-width: 554px) {
  .global-container {
    overflow-x: hidden;
  }
  // Allow scrolling on the reports page until the overflow hack is no longer needed
  .user-reports {
    overflow-x: auto;
  }
  .settings--header {
    margin-top: 0;
  }
  .stream-item-comments {
    overflow: hidden;
  }
}

// Breaks long words and links that would otherwise cause overflow
.full-post {
  word-break: break-word;
}

// Hide extra whitespace created by the overflow hack above
@media (min-width: 432px) and (max-width: 554px) {
  body {
    padding-top: 42px;
  }
}

@media (max-width: 431px) {
  body.settings-page {
    padding-top: 42px;
  }
}

@media (max-width: 431px) {
  // Hide Kitsu logo on extremely small devices to prevent wrapping to 2 lines
  .navbar button + .nav-item {
    max-width: 28px;
    overflow: hidden;
  }
}

@media (max-width: 320px) {
  // Prevent header wrapping to 2 lines on logged out iPhone 5/SE
  .site-search__input {
    width: 125px;
  }
}

// Height fix until we migrate away from deprecated ember-one-way-controls in expanding-textarea
.report-content-input {
  min-height: 6rem;
}

// Fix for Canny not working in dark-mode because we can't style it
.w-100 > iframe {
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
}

// Fix for some ember-styled dropdowns that I simply can't figure out which
// document their style comes from.
@if $theme == "kitsu-dark" {
  .ember-basic-dropdown,
  .ember-basic-dropdown-content,
  .ember-basic-dropdown-content * {
    border: none;
    & li:hover {
      background-color: $foreground-background-color;
    }
  }
  .ember-power-select-dropdown.ember-basic-dropdown-content--below,
  .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
    border: 1px solid $divider-color;
    transform: none;
  }
  .ember-basic-dropdown-content {
    background-color: $background-color;
  }
}