/* Page styles for /User/[user] (linked only by that page, after user.css and switch.css).

   These are the inline styles of v1/site/user.php that React can't express inline
   (`!important`) plus the per-clip inline styles, moved into classes so a profile with
   ~900 clips doesn't repeat them in every card. Selectors start with `html body` (or an
   id) to beat Bootstrap's !important utility classes, as the inline styles did. */

/* <body style="background: transparent !important">: the blurred banner sits at
   z-index:-1 behind the page and must show through. The html element keeps #141826. */
html:root body {
  background: transparent !important;
}

/* <div class="album bg-dark" style="background-color: transparent !important"> */
html body .nu-album {
  background-color: transparent !important;
}

/* Profile name next to the avatar. */
html body .nu-profile-name {
  color: whitesmoke !important;
  font-weight: 600;
}

/* Clip cards */
html body .nu-col {
  border-radius: 5px;
}

html body .nu-card {
  --bs-card-border-color: white !important;
  border: 1px solid #6b7280 !important;
  box-shadow: 0px 0px 10px #141826 !important;
}

html body .nu-length {
  background-color: rgba(0, 0, 0, 0.55);
  position: absolute;
  bottom: 62px;
  right: 0;
  border-radius: 999px;
  color: white;
  font-size: 14px;
  z-index: 1;
}

html body .nu-video-box {
  text-decoration: none;
  line-height: 0;
  background-color: #17212f;
  border-radius: 5px 5px 0px 0px;
}

html body .nu-thumb {
  border-radius: 5px 5px 0px 0px;
  min-height: 5.45vw;
  background-color: #141826;
  aspect-ratio: 16 / 9;
}

html body .nu-card-body {
  background-color: #141826 !important;
  border-bottom-left-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
}

html body .nu-plain-link {
  text-decoration: none;
}

html body .nu-card-title {
  margin-block-end: 0;
  font-weight: 500;
  color: whitesmoke !important;
}

html body .nu-card-meta {
  max-height: 21px;
}

/* Owner's per-clip menu (edit icon, unlisted icon, Make public/unlisted, Delete video). */
html body .nu-owner-menu {
  margin-right: calc(var(--bs-gutter-x) * .5);
}

html body .nu-owner-edit {
  max-width: 20px;
  cursor: pointer;
}

html body .nu-owner-unlisted {
  max-width: 20px;
  margin-right: 6px;
  cursor: default;
}

html body .nu-owner-item {
  cursor: pointer;
}

/* Was an inline style, so it must also win over .dropdown-item:hover/:active. */
html body .dropdown-menu .nu-owner-delete {
  font-weight: 500;
  color: red;
}

/* Placeholder cards shown when there are no clips. */
html body .nu-placeholder-card {
  outline: 1px solid #6b7280 !important;
  border: 0;
  box-shadow: 0px 0px 10px #141826 !important;
  border-radius: 5px 5px 5px 5px;
}

html body .nu-placeholder-body {
  background-color: #141826 !important;
  border-radius: 0px 0px 5px 5px;
}

/* Followers/Following modal */
html body .nu-modal-content {
  background-color: #141826 !important;
  min-height: 450px;
}

/* The <style> block at the end of user.php. */
#dropdownFilterButton + .dropdown-menu .dropdown-item:hover {
  background-color: #1f2937 !important;
  color: #d1d5db !important;
}