Arc Boost for RocketChat

styles.css

:root {
  --f-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --rcx-color-foreground-info: #999 !important;
}

/* Ячейка чата в сайдбаре */
.rcx-sidebar-item {
  padding: .45rem 1.25rem !important;
}

/* Внутренняя обёртка ячейки чата */
.rcx-sidebar-item__wrapper {
  gap: .1rem;
}

/* Выбранная ячейка в сайдбаре */
.rcx-sidebar-item--selected {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Аватарки ячеек с каналами */
.rcx-sidebar-item[href^=\/channel]
.rcx-sidebar-item__avatar {
  display: none;
}

/* Ячейки  */
.rcx-sidebar-item[href^=\/channel] {
  padding: .5rem 1.25rem !important;
}

/* Аватарки чатов */
.rcx-avatar--x24,
.rcx-avatar--x28,
.rcx-avatar--x36,
.avatar {
  border-radius: 50% !important;
}

/* Аватарки внутри чата */
.avatar > * {
  background-size: cover !important;
}

/* Иконка типа чата (отображается рядом с аватаркой) */
.rcx-sidebar-item__icon .rcx-icon--name-hash,
.rcx-sidebar-item__icon .rcx-icon--name-hashtag-lock,
.rcx-sidebar-item__icon .rcx-icon--name-baloons,
.rcx-sidebar-item__icon .rcx-icon--name-team,
.rcx-sidebar-item__icon .rcx-icon--name-team-lock
{
  opacity: .3;
}

/* Текст в ячейке чата */
.rcx-sidebar-item__title {
  font-family: var(--f-family-system) !important;
  font-size: .9rem !important;
}

/* Бейдж со счётчиком непрочитанных сообщений */
.rcx-badge {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: .5rem !important;
  padding: .35rem .35rem !important;
  font-weight: 700 !important;
  font-family: var(--f-family-system) !important;
  font-size: .65rem !important;
  /* box-shadow: 0 1px 0 inset rgba(255, 255, 255, 0.1) */
}

/* Секция в сайдбаре */
.rcx-sidebar-section {
  margin-top: 1.5rem !important;
}

/* Заголовок секции в сайдбаре */
.rcx-sidebar-title {
  font-family: var(--f-family-system) !important;
  font-weight: 400 !important;
  opacity: .5;
  padding-left: .25rem !important;
}

/* Блок с кодом */
code {
  background-color: #fcfcfc !important;
  border: 1px solid #eaeaea !important;
  padding: .6rem .8rem !important;
  border-radius: .4rem !important;
  font-weight: 500 !important;
}

/* Ссылки в виде блоков с кодом в шапке чата */
.rcx-room-header code {
  padding: .25rem .5rem !important;
  display: inline-block !important;
  font-family: var(--f-family-system) !important;
  /* font-weight: 400 !important; */
  color: #000 !important;
}

/* Шапка чата */
.rcx-room-header {
  height: 5rem !important;
}

/* Шапка с владельцем чата */
.room-leader {
  position: relative;
  border: none;
  /* background-color: transparent !important; */
  overflow: visible;
}
.room-leader::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20rem;
  background-color: rgba(255,255,255,0.8) !important;
  backdrop-filter: blur(10px);
  z-index: -1;
}


/* Разделители в шапке */
.rcx-room-header hr {
  display: none;
}

/* Название чата в шапке */
.rcx-room-header div {
  color: black !important;
}

/* Аватарка чата в шапке */
.rcx-room-header .rcx-avatar,
.rcx-room-header .rcx-avatar--x36 {
  width: 3rem !important;
  height: 3rem !important;
}

/* Горизонтальный стек внутри шапки */
.rcx-room-header > .rcx-box {
  gap: 1rem !important;
}

/* Текст сообщения */
.body {
  color: #000 !important;
  line-height: 1.5;
}

/* Внешняя ссылка в сообщении */
.body a[target=_blank] {
  /* color: #00baff !important; */
  font-weight: 500;
}

/* Имя пользователя в чате */
.user {
  color: #000 !important;
}

/* Primary-кнопка */
.rcx-button--primary {
  /* background-color: rgba(0,0,0,.04) !important; */
  border: none !important;
  background-color: white !important;
  outline: 3px solid rgba(0,0,0,.04) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.1);
  color: black !important;
  font-weight: 500 !important;
  border-radius: .5rem !important;
  padding: .5rem 1rem !important;
  margin-right: .4rem !important;
}
.rcx-button--primary:hover {
  outline: 3px solid rgba(48, 16, 52, 0.08) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.1) !important;
  transition: 0s !important;
}
.rcx-button--primary:active {
  transform: translateY(1px);
  transition: 0s !important;
}

/* Сообщение в чате */
.message {
  margin-bottom: .7rem !important;
}
.message:last-child {
  margin-bottom: -1rem !important;
}

/* Строка с информацией под сообщением */
.message .reactions+* {
  margin-top: .6rem !important;
}

/* Поле ввода */
.rc-message-box__container {
  border-radius: 1rem !important;
  border: 2px solid #eee !important;
}

/* Реакции */
.reactions > li {
  height: 1.7rem !important;
  padding: 0 .6rem 0 .4rem !important;
  border-radius: 4rem !important;
  transition: all .8s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.reactions > li:hover {
  transform: scale(1.1) !important;
  transition: all .1s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Все реакции, кроме выделенных */
.reactions > li:not(.selected) {
  background-color: #fff !important;
  border: 1px solid rgba(0,0,0,.05) !important;
}

/* Тексты внутри реакций */
.reactions > li > span {
  font-family: var(--f-family-system) !important;
  font-weight: 600;
  line-height: 1.8;
}
.reactions > li:not(.selected) > span {
  color: #909090 !important;
}
.reactions > li > span:first-child {
  margin-right: .1rem !important;
}