fractal/fractal-gtk/res/app.css

.rooms {
  background-color: alpha(@borders, 0.25);
}

.notify-badge {
  background-color: #555;
  color: white;
  font-weight: bold;
  font-size: 0.8em;
  border-radius: 10px;
  min-width: 10px;
  padding: 2px 5px 1px;
}

.notify-highlight {
  background-color: @theme_selected_bg_color;
}

.notify-bold {
  font-weight: bold;
}

.room-row {
  padding: 6px 0px;
}

.noroom-title {
  font-size: larger;
  opacity: 0.5;
}

.noroom-description {
  font-size: smaller;
  opacity: 0.5;
}

.room-list list row:selected .notify-badge {
  background-color: white;
  color: @theme_selected_bg_color;
}

.sidebar {
  border: none;
}

.room-avatar-container .avatar {
  margin: 3px;
}

.room-menu {
  padding: 0 6px;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  border-top-style: none;
  border-bottom-style: none;
}

.room-menu:hover:not(:backdrop) {
  background-image: none;
  text-shadow: none;
}

.room-title {
  padding: 5px;
  padding-bottom: 2px;
  border-bottom: 1px solid @borders;
  margin-bottom: 5px;
  margin-left: 4px;
  margin-right: 4px;
  font-weight: bold;
  font-size: x-small;
  color: @insensitive_fg_color;
}

.room-empty-text {
  color: @insensitive_fg_color;
  padding: 10px;
  font-size: x-small;
}

.room-directory row {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: solid 1px rgba(0,0,0, 0.1);
}

.room-directoy row:last-child {
  padding-top: 18px;
  padding-bottom: 18px;
  border-bottom: none;
}

.list-with-separator row {
  border-bottom: solid 1px rgba(0,0,0, 0.1);
}

.list-with-separator row:last-child {
  border-bottom: none
}

.room-settings-name {
  font-size: xx-large;
}

.room-settings-type {
  color: @theme_selected_bg_color;
}

row:not(:selected) .member-uid {
  color: @insensitive_fg_color;
}

.member-uid {
  font-size: x-small;
}

.direct-chat {
  color: alpha(@theme_fg_color, 0.5);
}

.room-list list row:selected .direct-chat {
  color: alpha(@theme_selected_fg_color, 0.5);
}

.collapsed row:selected {
  background-color: transparent;
}

/** message history **/
.messages-history {
  background-color: @theme_base_color;
  padding: 0 18px 18px;
}

.messages-history > row:not(.msg-mention) {
  padding: 6px 9px;
}

.scroll_button {
  border-radius: 9999px;
  -gtk-outline-radius: 9999px;
}

row.msg-mention {
  background: alpha(@theme_selected_bg_color, 0.2);
  border-left: 3px solid @theme_selected_bg_color;
  padding: 6px;
  padding-right: 9px;
  padding-left: 6px;
  border-radius: 3px;
}

row.msg-tmp {
  color: alpha(@theme_fg_color, 0.4);
  background-color: alpha(@theme_bg_color, 0.8);
  border-radius: 3px;
}

row.msg-emote {
  font-size: small;
  padding: 12px 0px;
}

row .username {
  font-weight: bold;
  font-size: small;
}

row .username,
row.msg-emote,
.divider {
  color: @theme_selected_bg_color;
}

.divider separator {
  background: @theme_selected_bg_color;
}

row .timestamp {
  font-size: small;
}

/** autocomplete popover **/
.autocomplete {
  margin-left: 150px;
}

.autocomplete,
.autocomplete list,
.autocomplete row:not(:hover):not(:selected) {
  background-color: @theme_bg_color;
}

.autocomplete .frame {
  border: 0;
}

.autocomplete row {
  border-radius: 3px;
  padding: 6px;
}

.invite-selected,
.invite-selected row {
  background-color: @theme_bg_color;
}

.advanced_revealer {
  border-radius: 3px;
	border: 1px solid @borders;
  background-color: @theme_base_color;
}

.advanced_revealer_header {
  padding: 18px;
}

.advanced_revealer_divider {
  border-radius: 0px;
  border-bottom: 1px solid @borders;
}
.advanced_revealer_body {
  padding: 18px;
}

/*#FIXME css style to remove round corners in the header*/
stack headerbar:last-child:not(:only-child) {
  border-top-left-radius: 0px;
}
stack headerbar:first-child:not(:only-child) {
  border-top-right-radius: 0px;
}

stack.titlebar:not(headerbar) > box > separator {
  background-color: @borders;
}

@keyframes spin {
  to { -gtk-icon-transform: rotate(1turn); }
}

.image-spinner {
  background-color: @insensitive_bg_color;
  -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
  opacity: 1;
  animation: spin 1s linear infinite;
}

.spinner-background {
  background: alpha(@theme_fg_color, 0.8);
  margin: 25px;
  border-radius: 99999px;
  opacity: 1;
}