beeper-theme.css

body {
  font-family: 'Space Grotesk';
}

.rooms_filters p {
  font-size: 11px;
}

.favourites__row {
  padding-top: 12px;
}

.rooms_actions {
  margin-bottom: 0px;
  justify-content: center;
}

.favourites__row div {
  display: block;
}

.favourites__row span {
  display: none;
}

.mx_EventTile_messageOut .mx_EventTile_line {
  background: #064467a1 !important;
}

/* Will this work with https://developer.mozilla.org/en-US/docs/Web/CSS/@import ? I don't think so.. but maybe I was using it wrong..? */

/***************************************************************/
/* De-emphasise distracting chats - *Beeper* Community/Hackers */
/***************************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]):has(div[title*="Community"i], div[title*="Hackers"i]) {
  opacity: 0.5;
}

/*******************************************************/
/* De-emphasise distracting chats - UC Outdoors Club */
/*******************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_facebook, svg[data-src="img/beeper/color-facebook16.a8cac84.svg"]):has(div[title*="UC Outdoors Club"]) {
  opacity: 0.5;
}

/**********************************************/
/* Hide Left Panel/Sidebar While Chat Is Open */
/**********************************************/

/*.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > .bp_LeftPanel {
  display: none;
}

.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > div:has(.spaceBar) {
  display: none;
}*/

/*************************/
/* Counting Chat Types */
/************************/

/* Initialize counters */
.rooms {
  counter-reset: unread favourite pinned not-pinned;
}

/* Increment favorites */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/heart-filled16.b7ad82d.svg"] {
  counter-increment: favourite;
}

/* Increment pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] [data-src="img/beeper/pin-filled16.b7cb2af.svg"] {
  counter-increment: pinned;
}

/* Increment not pinned */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:not(:has([data-src="img/beeper/pin-filled16.b7cb2af.svg"])) {
  counter-increment: not-pinned;
}

/* Increment unread */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .favourite-avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon,
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] > div > .avatar+div > div > div > span:not(.bp_icon)+span > .bp_icon {
  counter-increment: unread;
}

/* Show Counters */
/*.rooms::after {
  content: "Counters: Unread (" counter(unread) "), Favourite (" counter(favourite) "), Pinned (" counter(pinned) "), Not-Pinned (" counter(not-pinned) ")"
}
.rooms::after {
  content: "Unread (" counter(unread) "), Not-Pinned (" counter(not-pinned) ")";

  font-size: 10px;

  position: absolute;
  top: calc(31vh - 2px);
  left: calc(8vw - 4px);

  background-color: dimgrey;
}*/

/* Set position to relative for the hovered element */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"] {
  position: relative;
}

/* Show the not-pinned counter on hover */
.rooms > .rooms_scroll-container [data-type="bp_RoomTile"]:hover::before {
  content: "Not-Pinned above: " counter(not-pinned);

  font-size: 10px;
  white-space: nowrap;

  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;

  border-radius: 3px;
  padding: 2px;

  background-color: dimgrey;
}

/******************************************************************/
/* Ensure 'report bug' dialog doesn't take over the entire screen */
/******************************************************************/
#mx_Dialog_Container div[aria-describedby="report_bug"] {
  /* Don't take up the entire screen */
  width: fit-content;
  height: fit-content;
  padding: 20px;
  border-radius: 20px;

  /* Center the dialog */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**********************/
/* Main Settings Menu */
/**********************/

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Mark All As Read"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Check for Update"] {
  display: none;
}

#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Download Mobile App"] {
  display: none;
}

/*******************/
/* Settings Dialog */
/*******************/

/* Settings Dialog - Tab - Chat Networks */

.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_chatSettingsIcon) > .mx_TabbedView_tabLabel_text::after {
  content: "🔗";
  margin-left: 16px;
}

/* Settings Dialog - Tab - Manage Subscription */

.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_manageSubscriptionIcon) > .mx_TabbedView_tabLabel_text::after {
  content: "🔗";
  margin-left: 16px;
}

/* Settings Dialog - Appearance - Custom CSS TextArea */

.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
  width: 100% !important;
  height: 500px !important;
}

.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea textarea {
  font-family: Menlo, monospace;
  font-size: 13px !important;
}

/**********************/
/* Inbox - Favourites */
/**********************/

/* Inbox - Favourites */

.bp_LeftPanel .rooms > .favourites {
  /* Custom Variables */
  --devalias-fav-section-max-height: 30vh;
  --devalias-fav-grid-row-gap: 6px;
  --devalias-fav-grid-col-gap: 6px;
  --devalias-fav-width: 100%;
  --devalias-fav-height: fit-content;
  --devalias-fav-max-width: 64px;
  --devalias-fav-avatar-width: 30px;
  --devalias-fav-avatar-height: 30px;
  --devalias-fav-avatar-font-size: 17px;
}

.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles {
  max-height: var(--devalias-fav-section-max-height, none) !important;
  overflow: auto;

  padding-left: unset;
  padding: 0;

  /* Favourites Grid Spacing */
  grid-row-gap: unset;
  grid-gap: unset;
  gap: unset;
  row-gap: var(--devalias-fav-grid-row-gap, 12px);
}

.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row {
  height: fit-content;

  /* Favourites Grid Spacing */
  grid-gap: unset;
  gap: unset;
  column-gap: var(--devalias-fav-grid-col-gap, 12px);
}

.bp_LeftPanel .rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > div {
  height: var(--devalias-fav-height, 60px) !important;
  flex: 0;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
  width: var(--devalias-fav-width, 100%) !important;
  height: var(--devalias-fav-height, 48px) !important;
  max-width: var(--devalias-fav-max-width, 100%) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
  width: var(--devalias-fav-avatar-width, 36px) !important;
  height: var(--devalias-fav-avatar-height, 36px) !important;
}

.mx_BaseAvatar_initial {
  font-size: 18px; max-width: 36px; max-height: 36px;
}

.mx_BaseAvatar_image {
  max-width: 36px; max-height: 36px;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
  font-size: var(--devalias-fav-avatar-font-size, 18px) !important;
  width: var(--devalias-fav-avatar-width, 36px) !important;
  line-height: var(--devalias-fav-avatar-width, 36px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline {
  max-width: var(--devalias-fav-max-width, 110px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline > span {
  max-width: var(--devalias-fav-max-width, 110px) !important;
}

/************************/
/* Beeper Space Sidebar */
/************************/

/* Beeper Space Sidebar - Collapsed - Hide Floating 'Open Archive' Button */

.mx_MatrixChat > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/archive16.2003809.svg"]) {
  display: none;
}

/* Beeper Space Sidebar - Show Floating 'Archive All Read Messages' Button */

.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  width: max-content !important;

  /*position: absolute;
  top: calc(38vh);
  left: 15vw;*/
}

.mx_MatrixChat > div > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  display: block !important;
}

.mx_MatrixChat > div > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
  opacity: unset;
}

/* Beeper Space Sidebar - Hide Original Icons */

#beeperSpaceBar svg:not(svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]):not(svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]):not(svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]):not(svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]):not(svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) {
  display: none
}

/* Beeper Space Sidebar - Use Lineart Icons */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg) > div > div > div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Beeper Space Sidebar - Use Lineart Icons - Facebook */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Instagram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - iMessage */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Twitter */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Telegram */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-telegram16.d011ded.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Signal */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - LinkedIn */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Discord */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-discord16.e91cca3.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - Beeper */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg");
}

/* Beeper Space Sidebar - Use Lineart Icons - WhatsApp */

#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]) > div > div > div {
    background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg");
}

/*****************/
/* Uncategorized */
/*****************/

/* Ensure full image preview is visible, rather than a zoomed part of it */
.mx_EventTile_image .mx_MImageBody img.mx_MImageBody_thumbnail {
  object-fit: contain !important;
}