acklen-keystone/admin/client/App/isomorphic/style/youtubeSearch/youtube-search.less

Web Application Framework and Admin GUI / Content Management System built on Express.js and Mongoose

.isoYoutubeSearchResult {
  margin-top: 30px;

  .isoTotalResultFind {
    font-size: @isoFontSize + 4;
    font-weight: 700;
    color: @isoColor--Heading;
    line-height: 1.3;
    padding-bottom: 15px;
    border-bottom: 1px solid @isoColor--BorderLight;
  }

  .isoYoutubeResultList {
    width: 100%;
    display: flex;
    flex-direction: column;

    .isoSingleVideoResult {
      padding: 20px 0;
      border-bottom: 1px solid @isoColor--BorderLight;
      display: flex;
      width: 100%;

      &:last-of-type {
        border-bottom: 0;
      }

      .videoThumb {
        width: 100px;
        height: 100px;
        display: -webkit-inline-flex;
        display: -ms-inline-flex;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        overflow: hidden;

        @media only screen and (max-width: 420px) {
          width: 70px;
          height: 70px;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .videoDescription {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: 20px;
        cursor: pointer;

        h3.videoName {
          width: 70%;
          flex-shrink: 0;
          margin: 0;

          @media only screen and (max-width: 767px) {
            width: 100%;
          }

          @media only screen and (min-width: 768px) and (max-width: 1199px) {
            flex-shrink: 1;
          }

          a {
            font-size: @isoFontSize + 4;
            font-weight: 400;
            color: @isoColor--Heading;
            line-height: 1.3;
            word-break: break-word;
            display: inline-block;
            text-decoration: none;
            .isoTransition;

            &:hover {
              color: @primary-color;
            }
          }
        }

        .ChannelNameAndDate {
          width: 100%;
          display: flex;
          align-items: center;
          margin-top: 3px;

          @media only screen and (max-width: 420px) {
            flex-direction: column;
            align-items: flex-start;
          }

          .channelTitle {
            width: auto;
            flex-shrink: 0;
            display: inline-block;
            align-items: center;
            font-size: @isoFontSize - 1;
            font-weight: 400;
            color: @isoColor--Text;
            line-height: 1.3;
            .isoTransition;

            &:hover {
              color: #2b69e6;
            }
          }

          .uploadDate {
            font-size: @isoFontSize - 1;
            font-weight: 400;
            color: @isoColor--Text;
            line-height: 1.3;
            display: inline-block;
            padding-left: 20px;
            position: relative;

            &:before {
              content: '';
              width: 4px;
              height: 4px;
              display: inline-block;
              background-color: @isoColor--GreyShade;
              position: absolute;
              top: 6px;
              left: 8px;
              .isoBorderRadius(50%);
            }

            @media only screen and (max-width: 420px) {
              padding-left: 13px;

              &:before {
                left: 0;
              }
            }
          }
        }

        p {
          font-size: @isoFontSize;
          font-weight: 400;
          color: @isoColor--TextDark;
          line-height: 1.3;
          margin-bottom: 0;
          margin-top: 10px;
          display: block;
          word-break: break-word;
        }
      }
    }
  }

  .youtubeSearchPagination {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px 0 10px;

    button {
      margin: 0 10px;
    }
  }
}

.youtubeVideoModal {
  .ant-modal-close-x {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .ant-modal-body {
    padding: 15px;
    iframe {
      width: 100%;
    }
  }
}