component.module.scss

.header {
  position: relative;
}

.row {
  display: flex;
  padding: 3px 10px;
}

.logo {
  padding: 20px;
  font-size: 36px;
  text-align: center;
  font-weight: bolder;
  color: #4e4e4e;
  text-shadow: 5px 5px 5px #f0f0f0;
  border: 1px solid #f0f0f0;
}

.nav {
  padding-left: 0px;
  padding-right: 0px;

  > div {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.alignCenter {
  align-items: center;
}

.col,
.col0,
.col1,
.col2,
.col3,
.col4,
.col5 {
  padding: 3px;
}

.col0 {
  flex: unset;
}

.col,
.col1 {
  flex: 1;
}

.col2 {
  flex: 2;
}

.col3 {
  flex: 3;
}

.col4 {
  flex: 4;
}

.col5 {
  flex: 5;
}

div {
  cursor: default;
}

.categoryName {
  border: 1px solid #f0f0f0;
  margin: 0px 5px 5px 0px;
  padding: 3px 10px;
  border-radius: 5px;
}

.username {
  margin-bottom: 10px;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid pink;
  padding-right: 10px;
  padding-left: 10px;
  > span {
    font-weight: bold;
    text-shadow: 5px 5px 5px pink;
  }
}

.myNav {
  .aLink {
    margin: 0px 10px;
  }
}

.bookItemCss {
  min-width: calc(20% - 12px);
  max-width: calc(20% - 12px);
  margin: 5px;
  border: 1px solid #f0f0f0;

  .bookImage {
    width: 100%;
    height: 190px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 10px;
  }

  .priceAndBorrow {
    display: flex;
  }

  .borrowFrom {
    text-decoration: line-through;
  }
}

.gCenter {
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

.dialogCss {
  background: rgba($color: #000000, $alpha: 0.2);
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;

  .dialogContent {
    position: relative;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 5px;
    min-width: 300px;
    max-width: 400px;

    .title {
      text-align: center;
      padding: 10px;
    }

    .content {
      display: flex;
      position: relative;

      textarea {
        flex: 1;
        height: 100px;
        resize: none;
        border: 1px solid #f0f0f0;
        padding: 5px;
        line-height: 1.78;

        &:focus {
          outline-offset: unset;
          outline: unset;
        }
      }
    }

    .dBtns {
      display: flex;

      > div {
        flex: 1;
        text-align: center;
        padding: 10px;
      }

      .bCancel {
        flex: 1;
      }

      .bConfirm {
        flex: 1;
      }
    }
  }
}

.message {
  position: relative;

  .label {
    position: relative;
  }

  textarea {
    height: 50px;
    border-radius: 5px;
    resize: none;
  }

  .reply {
    margin-top: 30;
  }

  .msgContent {
    max-height: 300px;
    overflow: auto;
  }

  button {
    width: 70px;
    margin-right: 10px;
    padding: 5px 10px;
  }

  .mine {
    text-align: right;
  }
}

.pageNavigation {
  position: relative;

  button {
    margin-right: 5px;
    padding: 5px 10px;
    font-size: 16px;
    width: 60px;
  }
}