qmining-page/src/components/comments.module.css

.comment_bttn {
  font-size: 15px;
  padding-top: 4px !important;
  transition: width 0.5s, height 0.5s, ease-in 0.5s;
}

.comment_bttn:hover {
  transition: width 0.5s, height 0.5s, ease-out 0.5s;
  color: gainsboro;
}

.reply_bttn {
  font-size: 15px;
  margin-top: 14.5px !important;
  margin-left: 6px !important;
  padding-top: 4px !important;
  transition: width 0.5s, height 0.5s, ease-in 0.5s;
}

.reply_bttn:hover {
  transition: width 0.5s, height 0.5s, ease-out 0.5s;
  color: gainsboro;
}

.delete_bttn {
  font-size: 15px;
  margin-top: 14.5px !important;
  margin-left: 6px !important;
  padding-top: 4px !important;
  transition: width 0.5s, height 0.5s, ease-in 0.5s;
}

.delete_bttn:hover {
  transition: width 0.5s, height 0.5s, ease-out 0.5s;
  color: gainsboro;
}

.comment {
  margin-left: 10px;
  margin-right: 30px;
  padding: 8px 0px;
}

.commentData {
  padding: 5px 2px;
  border-left: 3px solid azure;
}

.commentDate {
  text-align: right;
}

.commentHeader {
  display: flex;
  /*justify-content: space-between;*/
}

.commentHeader > div {
  font-weight: bold;
  margin: 2px;
}

.userContainer {
  display: flex;
  flex-direction: row;
}

.userContainer > div {
  padding: 0px 3px;
}

.commentText {
  margin: 2px;
  padding: 10px 5px;
}

.ownComment {
  border-left: 5px dotted azure;
}

.showHide {
  cursor: pointer;
}

.hidden {
  display: none;
}

.commentAreaContainer {
  margin: 0px 8px 3px 8px;
}

.commentAreaContainer > textarea {
  width: 99%;
}

.commentAreaContainer > div {
  margin: 5px 0px;
}

.adminComment {
  border-left: 3px solid gold;
}