src/components/dialogs/dialogs.module.css - master - LastBlast/social-network

src/components/dialogs/dialogs.module.css

104 строки2 KB

Victoria Rozhkova

fixed: change status, styling buttons & inputs

11 фев 2023, 18:08

11 фев 2023, 18:08536661b

.dialogs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
}

.dialogs a {
  color: black;
}

.dialogs a.active {
  color: gold;
}

.dialog {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dialog img {
  width: 40px;
}

.dialogsList {
  list-style-type: circle;
  color: #1890FF;
}

.dialogItem ul {
  gap: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: center;
}

.heading {
  margin: 0;
}

.messages {
  margin-bottom: 15px;
}

.message {
  gap: 10px;
  display: flex;
}

.message img {
  width: 55px;
  padding-bottom: 5px;
}

.newMessage {
  grid-column: 2;
}

.newMessage form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.messageTextarea {
  min-width: 380px;
  min-height: 80px;
  border-radius: 5px;
  padding: 5px;
  border: 1px solid #d8cece;
  font-size: 15px;
}

.messageTextarea:focus-visible {
  outline: 2px inset rgb(177 0 231);
  box-shadow: 4px 4px 8px 0px rgb(34 60 80 / 21%);
}

.submitMessage {
  background: url(https://olympus.crumina.net/wp-content/plugins/youzify/includes/public/assets/images/dotted-bg.png),
    -webkit-linear-gradient(right, #f35c44, #5c42c4);
  border: none;
  padding: 10px 25px;
  color: white;
  box-shadow: 0.872px 9.962px 20px 0px rgb(12 78 165 / 30%);
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  user-select: none;
}

.submitMessage:hover {
  opacity: 0.9;
  background: url(https://olympus.crumina.net/wp-content/plugins/youzify/includes/public/assets/images/dotted-bg.png), radial-gradient(circle, rgba(131, 58, 180, 1) 0%, rgba(150, 51, 162, 1) 45%, rgba(222, 121, 101, 1) 100%);
}

.submitMessage:active {
  box-shadow: 0 2px #696187fa;
  transform: translateY(2px);
}