docbrown/app/assets/stylesheets/views/article.scss

@import '../config/import';

.article-wrapper {
  // Hack preventing content exceeding its container - it works for scenarios where we have
  // `pre` tag having wide (overflowing) text. And the container itself is part of a layout
  // built using CSS `grid`. Without this, the grid layout wouldn't stick to its defined
  // widths...
  min-width: 0;
}

.crayons-article {
  &__cover {
    position: relative;
    width: 100%;
    padding-top: 42%;

    &__image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: var(--radius-auto);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      object-fit: scale-down;
      width: 100%;
      height: 100%;

      &__feed {
        padding-top: 0;
        padding-bottom: 0;
        height: 100%;
        width: 100%;
        aspect-ratio: auto 650 / 273;
        object-fit: scale-down;
        border-radius: var(--radius-auto) var(--radius) 0 0;
      }
    }
  }

  &__video {
    background: black;

    &__player {
      &:empty {
        width: 100%;
        padding-top: 56.25%;
      }
    }
  }

  &__header {
    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;

    &__meta {
      padding: var(--content-padding-y) var(--content-padding-x) 0
        var(--content-padding-x);
    }
  }

  &__actions {
    &:empty {
      display: none;
    }
    background: var(--accent-warning-a10);
    border: 1px solid var(--accent-warning-a10);
    border-radius: var(--radius);
    padding: var(--su-1);
  }

  &__subheader {
    font-size: var(--fs-base);
    color: var(--base-60);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  &__main {
    padding: var(--content-padding-y) var(--content-padding-x);
  }

  &__body {
    overflow-wrap: break-word;
  }

  .reaction-button[disabled] {
    cursor: pointer;
  }
}

.crayons-article-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  background: var(--body-color-inverted);
  padding: var(--su-2);
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
  z-index: var(--z-sticky);

  @media (min-width: $breakpoint-m) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
    padding-bottom: 0;
    background: var(--body-bg);
    display: grid;
    gap: var(--su-6);
    position: -webkit-sticky;
    position: sticky;
    box-shadow: none;
    justify-content: stretch;
    top: calc(var(--header-height) + var(--layout-padding) + 6vh);
    z-index: var(--z-elevate);
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom);

    @media (min-width: $breakpoint-m) {
      display: grid;
      gap: var(--su-4);
      justify-content: stretch;
    }
  }
}

.crayons-reaction {
  --reaction-color: var(--button-ghost-color);
  --reaction-border: inset 0 0 0 0 transparent;
  --reaction-bg: transparent;

  border: none;
  padding: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  @media (min-width: $breakpoint-m) {
    flex-direction: column;
  }

  .crayons-tooltip {
    &__content {
      // display tooltip on top of the icon
      @media (max-width: $breakpoint-m) {
        top: -100%;
      }
    }
  }

  // We don't show tooltips on touch-only devices
  @media (hover: none) {
    .crayons-tooltip__content {
      display: none;
    }
  }

  &__icon {
    padding: var(--su-2);
    box-shadow: var(--reaction-border);
    background: var(--reaction-bg);
    color: var(--reaction-color);
    border-radius: 50%;
    transition: all var(--transition-props);

    &--active {
      display: none;
    }
    // This overrides some of the styles for the temporarily feature-flaged
    &--borderless {
      padding: var(--su-2);
      box-shadow: none;
      background: none;
      color: var(--reaction-color);
      border-radius: 0;
      transition: all var(--transition-props);
    }
  }

  &__count {
    color: var(--base-70);
    font-size: var(--fs-s);
    display: inline-flex;
    margin-left: var(--su-1);
    min-width: var(--su-6);

    @media (min-width: $breakpoint-m) {
      min-width: auto;
      margin-left: 0;
      display: block;
    }
  }

  &.user-activated {
    --reaction-border: inset 0 0 0 2px var(--reaction-color);
    .crayons-reaction__icon--inactive {
      display: none;
    }
    .crayons-reaction__icon--active {
      display: block;
    }
  }

  &--like {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-like-color);
      --reaction-bg: var(--reaction-like-bg);
    }
  }

  &--unicorn {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-custom-color);
      --reaction-bg: var(--reaction-custom-bg);
    }
  }

  &--readinglist {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-save-color);
      --reaction-bg: var(--reaction-save-bg);
    }
  }

  &--comment {
    &:hover,
    &.user-activated {
      --reaction-color: var(--reaction-comment-color);
      --reaction-bg: var(--reaction-comment-bg);
    }
  }
}

// This overrides some of the styles for the temporarily feature-flaged
.reaction-drawer .crayons-reaction {
  border: 1px solid var(--card-bg);
  flex-direction: column;

  &.user-activated {
    background-color: var(--body-bg);
    border: 1px solid #d4d4d4;
    border-radius: 20px;

    .crayons-reaction__icon--active {
      border: 0;
      box-shadow: none;
    }
  }
}

.user-animated {
  .crayons-reaction__icon {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 4px currentColor;
      opacity: 0;
      transform: scale(2);
      animation-name: ringPop;
      animation-duration: 0.25s;
    }

    &:after {
      content: '';
      position: absolute;
      pointer-events: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 0 transparent;
      opacity: 0;
      transform: scale(1);
      animation-name: ringPop2;
      animation-duration: 0.75s;
    }

    animation-name: iconPop;
    animation-duration: 0.25s;
  }

  @keyframes iconPop {
    0% {
      transform: scale(0.65);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes ringPop {
    0% {
      transform: scale(2);
      box-shadow: 0 0 0 4px currentColor;
      opacity: var(--opacity-0);
    }

    100% {
      box-shadow: 0 0 0 1px currentColor;
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes ringPop2 {
    0% {
      box-shadow: 0 0 0 currentColor;
      transform: scale(1);
      opacity: 0.6;
    }

    100% {
      box-shadow: 0 0 1px 1px transparent;
      transform: scale(4);
      opacity: var(--opacity-0);
    }
  }
}

.crayons-article-sticky:last-child {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height) + var(--layout-padding));
  .static-header & {
    top: var(--layout-padding);
  }
}

.crayons-post_sidebar_display_ad {
  @media screen and (max-width: $breakpoint-l) {
    display: none;
  }
}

.user-metadata-details {
  li + li {
    margin-top: var(--su-3);
  }
  .key {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--card-color-tertiary);
  }
}

// TODO: The drawer__outer contains the trigger button and the drawer itself,
// enabling hover, however this then requires the __outer wrapping div to be
// styled similarly to the other action buttons in the sidebar, which we can
// clean up significantly *after* the multiple_reactions feature flag is
// fully rolled-out.
.reaction-drawer__outer {
  border: none;
  padding: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  // Disables text selection to help "long tap" work on mobile
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  @media (min-width: $breakpoint-m) {
    flex-direction: column;
  }

  &.open .reaction-drawer {
    display: block;
  }

  .hidden {
    display: none;
  }
}

.reaction-drawer {
  min-width: auto;
  border-radius: 32px;
  position: absolute;
  top: -80px;
  left: 15px;
  display: none; // Initially hidden

  // Copying from Dropdown for now
  padding: var(--su-2);
  min-width: 250px;
  margin-top: var(--su-1);
  z-index: var(--z-dropdown);
  background: var(--card-bg);
  color: var(--card-color);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius);

  flex-direction: column;

  @media (min-width: $breakpoint-m) {
    max-width: 360px;
    width: max-content;
    top: -5px;
    left: 55px;
  }

  .crayons-reaction__count {
    min-width: auto;
    margin-left: 0;
    display: block;
  }
}

.reaction-drawer__outer:hover .reaction-drawer {
  @media (min-width: $breakpoint-m) {
    display: block;
  }
}

.reaction-drawer__container {
  display: flex;
  flex-direction: row;
  gap: var(--su-3);
}

.multiple_reactions_engagement {
  padding: 0.5em 0;

  span {
    margin-right: 1em;
  }
  svg {
    display: inline-block;
  }
}

.multiple_reactions_aggregate {
  display: flex;
  align-items: center;

  .crayons_icon_container {
    display: inline-block;
    background-color: var(--body-bg);
    border: 2px solid var(--card-bg);
    border-radius: 15px;
    margin-right: -0.5em;
    width: 28px;
    height: 28px;
  }

  img {
    margin: 3px 3px;
  }

  .aggregate_reactions_counter {
    margin-left: 1em;
  }
}