Kavita/UI/Web/src/_series-detail-common.scss

@use './theme/variables' as theme;

.main-container {
  overflow: unset !important;
  margin-top: 0.9375rem;
  
  .info-container {
    .info-grid-container {
      display: grid;
      grid-template-columns: 20% 80%;
      grid-template-rows: auto auto;
      .image-container {
        grid-column: 1;
        grid-row: 1 / 3;
        margin-right: 1.5rem;
      }
      .metadata-details-upper {
        display: flex;
        flex-direction:  column;
        justify-content: center;
        grid-column: 2;
        grid-row: 1;
        .title {
          color: white;
          font-weight: bold;
          font-size: 1.75rem;
        }
        .subtitle {
          color: var(--detail-subtitle-color);;
          font-weight: bold;
          font-size: 0.8rem;
        }
      }
      .metadata-details-lower {
        grid-column: 2;
        grid-row: 2;
        .continue-container {
          display: flex;

          .actions-row {
            display: flex;
            width: unset;
          }
        }
        .upper-details {
          font-size: 0.9rem;
        }
      }
    }
  }

  .carousel-tabs-container {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    scrollbar-width: none;
    box-shadow: inset -0.0625rem -0.125rem 0.0rem -0.0625rem var(--elevation-layer9);
    .nav-tabs {
      flex-wrap: nowrap;
    }
  }
}

.carousel-tabs-container::-webkit-scrollbar {
  display: none;
}

:host ::ng-deep {
  .main-container {
    .info-container {
      .info-grid-container {
        .image-container {
          app-image {
            img {
              max-height: 100dvh !important;
              object-fit: cover !important;
            }
          }
          .progress-banner {
            display: block;
          }
          .under-image {
            display: block;
          }
          .overlay-information {
            left: 0;
            width: 100%;
          }
        }
        .metadata-details-lower {
          .continue-container {
            .btn-group {
              >.btn {
                border: unset;
                background-color: var(--primary-color-dark-shade);
                &:hover {
                  border: unset;
                  background-color: var(--primary-color-darker-shade);
                }
                span {
                  i {
                    padding-right: 0.2rem;
                  }
                }
              }
              .dropdown {
                .dropdown-toggle-split {
                  border-top-right-radius: var(--bs-border-radius);
                  border-bottom-right-radius: var(--bs-border-radius);
                  background-color: var(--primary-color-dark-shade);
                  border: unset;
                  box-shadow: inset 1px 0 1px 0 rgba(0,0,0,0.1);
                  &:hover {
                    background-color: var(--primary-color-darker-shade);
                  }
                  &::after {
                    vertical-align: 0.11rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: theme.$grid-breakpoints-lg) {
  .main-container {
    .info-container {
      .info-grid-container {
        grid-template-columns: 30% 70%;
        overflow: hidden;
        padding-bottom: 1.5rem;
      }
    }
    .carousel-tabs-container {
      mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent, black 0%, black 90%, transparent 100%);
    }
  }
}

@media (max-width: 760px) {
  .main-container {
    .info-container {
      .info-grid-container {
        grid-template-columns: 35% 65%;
      }
    }
  }
}

@media (max-width: theme.$grid-breakpoints-sm) {
  .main-container {
    .info-container {
      .info-grid-container {
        grid-template-columns: 35% 65%;
        grid-template-rows: auto auto;
        padding-bottom: unset;

        .image-container {
          display: block !important;
          grid-column: 1;
          grid-row: 1;
          margin-right: 1rem;
        }

        .metadata-details-upper {
          display: flex;
          flex-direction: column;
          justify-content: center;
          grid-column: 2;
          grid-row: 1;
          .title {
            font-size: 1.375rem;
          }
          .subtitle {
            font-size: 0.625rem;
          }
        }

        .metadata-details-lower {
          grid-column: 1 / 3;
          grid-row: 2;
          margin-top: 2rem;
        }
      }
    }
  }
  :host ::ng-deep {
    .read-more-cont {
      div {
        max-width: unset !important;
      }
    }
  }
}

@media (max-width: theme.$grid-breakpoints-smm) {
  .main-container {
    .info-container {
      .info-grid-container {
        .image-container.mobile-background {
          width: 100vw;
          top: calc(var(--nav-offset) - 1.25rem);
          left: 0;
          pointer-events: none;
          position: fixed !important;
          display: block !important;
          max-height: unset !important;
          max-width: unset !important;
          height: 100dvh !important;
        }
        .metadata-details-upper {
          grid-column: 1 / 3;
        }
        .metadata-details-lower {
          margin-top: 0rem;
          .continue-container {
            flex-direction: column;
            .actions-row {
              margin-top: 0.5rem;
            }
          }
        }
      }
    }
  }
  :host ::ng-deep {
    .main-container {
      .info-container {
        .info-grid-container {
          .image-container.mobile-background {
            app-image {
              img {
                max-height: unset !important;
                opacity: 0.05 !important;
                filter: blur(0.3125rem) !important;
                max-width: 100dvw;
                height: 100dvh !important;
                overflow: hidden;
                position: absolute;
                top: 0;
                left: 0;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
  
  :host ::ng-deep {
    .main-container {
      .info-container {
        .info-grid-container {
          .image-container {
            .progress-banner {
              display: none;
            }
            .under-image {
              display: none;
            }
          }
        }
      }
    }
  }
}