signal-desktop.tera

---
whiskers:
  version: "2.5.1"
  matrix:
    - flavor
  filename: "themes/catppuccin-{{ flavor.identifier }}.css"
---
/*
 _   _               ____
| \ | | __ ___   __ | __ )  __ _ _ __ ___
|  \| |/ _` \ \ / / |  _ \ / _` | '__/ __|
| |\  | (_| |\ V /  | |_) | (_| | |  \__ \
|_| \_|\__,_| \_/   |____/ \__,_|_|  |___/
*/

/* left most bar */
.NavTabs {
  background-color: #{{mantle.hex}} !important;
}

.NavTabs__ItemButton:hover {
  background-color: #{{surface0.hex}} !important;
}

.NavTabs__Item[aria-selected="true"] > span > .NavTabs__ItemButton {
  background-color: #{{surface1.hex}} !important;
}

/* buttons in qr and link section of personal user profile */
.UsernameLinkModalBody__actions__save,
.UsernameLinkModalBody__actions__color {
  background-color: #{{surface1.hex}} !important;
}

/* second to left bar */
.NavSidebar {
  background-color: #{{mantle.hex}} !important;
}

/* view archive button when clicking on ... */
.ContextMenu__popper--single-item {
  background-color: #{{surface0.hex}} !important;
}

.module-conversation-list__item--contact-or-conversation--is-selected {
  background-color: #{{surface1.hex}} !important;
}

/* no archived chat text */
.module-left-pane__archive-helper-text {
  background-color: #{{surface0.hex}} !important;
}

.module-conversation-list__item--contact-or-conversation:hover,
.module-conversation-list__item--contact-or-conversation:focus,
.module-conversation-list__item--archive-button:hover,
.module-conversation-list__item--archive-button:focus {
  background-color: #{{surface0.hex}} !important;
}

/*
 _   _                        ____
| | | | ___  _ __ ___   ___  |  _ \ __ _  __ _  ___
| |_| |/ _ \| '_ ` _ \ / _ \ | |_) / _` |/ _` |/ _ \
|  _  | (_) | | | | | |  __/ |  __/ (_| | (_| |  __/
|_| |_|\___/|_| |_| |_|\___| |_|   \__,_|\__, |\___|
                                         |___/
*/

.Inbox__no-conversation-open {
  background-color: #{{base.hex}} !important;
}

/*
 _____         _   _                  _
|_   _|____  _| |_(_)_ __   __ _     / \   _ __ ___  __ _
  | |/ _ \ \/ / __| | '_ \ / _` |   / _ \ | '__/ _ \/ _` |
  | |  __/>  <| |_| | | | | (_| |  / ___ \| | |  __/ (_| |
  |_|\___/_/\_\\__|_|_| |_|\__, | /_/   \_\_|  \___|\__,_|
                           |___/
*/

/* the bar at the top containing your contact name */
.module-ConversationHeader {
  background-color: #{{crust.hex}} !important;
}

/* call, search, etc button present at conversation header */
.module-ConversationHeader__button:hover,
.module-ConversationHeader__button:focus {
  background-color: #{{surface0.hex}} !important;
}

/* ... menu at conversation header */
.react-contextmenu {
  background-color: #{{surface0.hex}} !important;
}

/* ... menu hover */
.react-contextmenu-item--selected {
  background-color: #{{surface1.hex}} !important;
}

/* the vm player that appears at top */
.MiniPlayer {
  background-color: #{{surface1.hex}} !important;
}

/* conversation area */
.module-timeline {
  background-color: #{{base.hex}} !important;
}

/* messages */
.module-message__container--incoming {
  background-color: #{{surface0.hex}} !important;
}

/* replying box */
.module-quote--incoming > .module-quote__primary,
.module-quote--incoming > .module-quote__icon-container {
  background-color: #{{surface1.hex}} !important;
  border: 0px !important;
}

/* call again button */
.module-Button--system-message {
  background-color: #{{surface1.hex}} !important;
}

/* the area where you write message, attach file, send vm, etc. */
.CompositionArea {
  background-color: #{{crust.hex}} !important;
}

/* the actual typing box */
.module-composition-input__input {
  background-color: #{{surface0.hex}} !important;
}

/* the today or yesterday thing that appears when you scroll up */
.TimelineDateHeader--floating {
  background-color: #{{surface0.hex}} !important;
}

.TimelineFloatingHeader__spinner-container {
  background-color: #{{surface0.hex}} !important;
}

.ScrollDownButton {
  background-color: #{{surface0.hex}} !important;
}

/*
  ____      _ _ _                  _
 / ___|__ _| | (_)_ __   __ _     / \   _ __ ___  __ _
| |   / _` | | | | '_ \ / _` |   / _ \ | '__/ _ \/ _` |
| |__| (_| | | | | | | | (_| |  / ___ \| | |  __/ (_| |
 \____\__,_|_|_|_|_| |_|\__, | /_/   \_\_|  \___|\__,_|
                        |___/
*/

/* background when contact isn't selected */
.CallsTab__EmptyState {
  background-color: #{{base.hex}} !important;
}

/* background when contact is selected */
.CallsTab__ConversationCallDetails {
  background-color: #{{base.hex}} !important;
}

/* contact list sidebar item */
.CallsList__ItemTile:hover {
  background-color: #{{surface0.hex}} !important;
}

.CallsList__ItemTile[aria-selected="true"] {
  background-color: #{{surface1.hex}} !important;
}

.CallsNewCall_ItemActionButton {
  background-color: #{{surface2.hex}} !important;
}

/*
 ____  _                        _
/ ___|| |_ ___  _ __ _   _     / \   _ __ ___  __ _
\___ \| __/ _ \| '__| | | |   / _ \ | '__/ _ \/ _` |
 ___) | || (_) | |  | |_| |  / ___ \| | |  __/ (_| |
|____/ \__\___/|_|   \__, | /_/   \_\_|  \___|\__,_|
                     |___/
*/

.Stories__placeholder {
  background-color: #{{base.hex}} !important;
}

/*
 _   _                 ____             __ _ _
| | | |___  ___ _ __  |  _ \ _ __ ___  / _(_) | ___
| | | / __|/ _ \ '__| | |_) | '__/ _ \| |_| | |/ _ \
| |_| \__ \  __/ |    |  __/| | | (_) |  _| | |  __/
 \___/|___/\___|_|    |_|   |_|  \___/|_| |_|_|\___|
*/

/* background of user details panel */
.ConversationPanel,
.ConversationPanel__header {
  background-color: #{{base.hex}} !important;
}

/* disappering message timer */
.module-select > select {
  background-color: #{{surface0.hex}} !important;
}

/* nickname, chatcolor, add to group and other button */
.ConversationDetails-panel-row__root--button:hover {
  background-color: #{{surface0.hex}} !important;
}

/* nickname edit menu*/
.Input__container {
  background-color: #{{surface0.hex}} !important;
  border-color: #{{overlay2.hex}} !important;
}

/* add to group button background color */
.ConversationDetails-groups__add-to-group-icon {
  background-color: #{{surface0.hex}} !important;
}

/* the user profile, signal connection and safety number popup */
.module-Modal {
  background-color: #{{base.hex}} !important;
}

/* mark as varified or clear verification button */
.module-SafetyNumberViewer__button > button {
  background-color: #{{surface1.hex}} !important;
}

/*
           _
 _ __ ___ (_)___  ___
| '_ ` _ \| / __|/ __|
| | | | | | \__ \ (__
|_| |_| |_|_|___/\___|
*/

/* background when viewing image */
.Lightbox__animated {
  background-color: #{{base.hex}} !important;
}

/* many of the buttons */
.module-Button {
  background-color: #{{surface1.hex}} !important;
}

.module-Button:hover {
  background-color: #{{surface0.hex}} !important;
}

/*
 ____       _   _   _
/ ___|  ___| |_| |_(_)_ __   __ _ ___
\___ \ / _ \ __| __| | '_ \ / _` / __|
 ___) |  __/ |_| |_| | | | | (_| \__ \
|____/ \___|\__|\__|_|_| |_|\__, |___/
                            |___/
*/

/* side pannel of settings */
.Preferences__page-selector {
  background-color: #{{crust.hex}} !important;
}

/* main settings pannel */
.Preferences__settings-pane {
  background-color: #{{base.hex}} !important;
}

/* page selector selected background */
.Preferences__button--selected {
  background-color: #{{surface1.hex}} !important;
}

.Preferences__button:focus {
  background-color: #{{surface0.hex}} !important;
}

/* language and chat color button */
.Preferences__control--clickable:hover {
  background-color: #{{surface0.hex}} !important;
}

.module-Button--secondary--destructive {
  color: #{{red.hex}} !important;
}

/*
  ____      _ _
 / ___|__ _| | |
| |   / _` | | |
| |__| (_| | | |
 \____\__,_|_|_|
*/

.module-calling__container {
  background-color: #{{base.hex}} !important;
}

/* cancel and settings button */
.CallSettingsButton__Button {
  background-color: #{{surface0.hex}} !important;
}

/* the bar at the bottom during calls */
.CallControls {
  background-color: #{{surface0.hex}} !important;
}

/* mike and camera button */
.CallingButton__icon {
  background-color: #{{surface2.hex}} !important;
}

/* your pfp box during call */
.module-calling__background {
  background-color: #{{surface0.hex}} !important;
}