Frontend/src/pages/Novel/Novel.sass

@import "../../Constants"

.Novel
  .Novel__Main
    display: flex
    padding: $primaryPadding
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius

    @media (max-width: 600px)
      flex-direction: column

    &_Left
      display: flex
      flex-direction: column

      .Novel__Main_Image
        max-width: 350px
        max-height: 200px
        margin-right: .5rem
        border-radius: $borderRadius

      .Novel__Main_Status
        margin-bottom: 1rem

        &_Mark
          margin-top: .5rem
          width: 100%
          display: flex
          justify-content: space-between

          .Selected
            background-color: var(--block-sec-color)

          &_Element
            padding: .5rem
            background-color: var(--block-color)
            width: 100%
            text-align: center
            cursor: pointer

            &:hover
              background-color: var(--sec-bg-color)

        &_Primary
          display: flex
          justify-content: space-between
          background-color: var(--block-color)
          font-size: 1rem
          margin-top: .5rem
          padding: .25rem

        &_Extended
          background-color: var(--block-color)
          font-size: 1rem

          .Novel__Main_Status_Element
            padding: .25rem
            border-top: var(--sec-bg-color) 2px solid

        .Novel__Main_Status_Element
          cursor: pointer

    .Novel__Info_Title
      @media (max-width: 600px)
        margin-top: 1rem

      font-size: 1.7rem
      font-weight: 600
      margin-bottom: 1rem

    .Novel__Info_Description
      margin-top: .5rem
      @media (min-width: 600px)
        margin-left: 1rem
      font-size: 1rem

    .Novel__Info_Genres
      display: flex
      align-items: center
      font-size: 1rem

      .Genre
        margin: .2rem
        border: #992222 1px solid
        padding: .1rem
        border-radius: 3px
        font-weight: 300

  .Novel__Comments
    margin-top: 1rem
    padding: $primaryPadding
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius

    form
      width: 100%
      margin-bottom: .5rem

      .Novel__Comments_BBCodes
        font-size: 1.3rem
        margin-bottom: .2rem

        svg
          cursor: pointer

        svg:first-child
          padding-right: .5rem

        svg:last-child
          padding-left: .5rem

        svg:not(:first-child):not(:last-child)
          padding: 0 .5rem

      .Novel__Comments_TextArea
        width: 100%
        background-color: var(--block-color)
        font-size: 1rem
        padding: .25rem
        border: none
        border-radius: $borderRadius
        box-sizing: border-box
        min-height: 4rem
        resize: none
        margin-bottom: .5rem

      .Novel__Comments_Submit
        background-color: var(--block-color) !important
        border-radius: $borderRadius
        border: none
        font-size: 1rem
        padding: .5rem

  .Novel__Characters
    margin-top: 1rem
    padding: $primaryPadding 0
    background-color: var(--sec-bg-color)
    border-radius: $borderRadius

    .Novel__Characters_Title
      margin-left: .5rem
      font-size: 1.2rem
      font-weight: bold

    .Novel__Characters_List
      width: 100%
      display: flex
      flex-wrap: wrap

      @media (max-width: 600px)
        justify-content: center

      .Novel__Character
        box-sizing: border-box
        width: 150px
        height: 250px
        border-radius: $borderRadius
        background-color: var(--block-color)
        margin: 0 .5rem
        padding-bottom: .2rem

        .Novel__Character_Name
          text-align: center

        .Character_Image
          border-radius: $borderRadius $borderRadius 0 0
          width: 100%
          height: calc(100% - 1.5rem)
          background-size: cover
          background-position: center
          margin-bottom: .2rem