fractal/data/resources/stylesheet/_session_view.scss

// Session view.

@use 'vendor';
@use 'room_history';
@use 'room_details';

// Account switcher
.account-switcher {
  list {
    background-color: transparent;
  }

  .account-switcher-row {
    border-radius: vendor.$menu_radius;
    margin: 3px 0px;
    padding: 6px 12px;

    &:first-child {
      margin-top: 0px;
    }
  }

  button.account-switcher-row {
    font-weight: normal;
    margin-bottom: 0;
  }
}

#new-login-icon {
  padding: 12px; // 2 * padding + pixel-size = size (of avatar)
  background-color: vendor.$button_color;
  border-radius: 9999px;
}

// Sidebar
sidebar {
  .collapse-spacing {
    padding: 0;
  }

  searchbar > revealer > box {
    padding-top: 0;
    padding-bottom: 6px;
  }

  .sidebar-list row {
    margin: 0;
    padding: 0;
    border-radius: 0;

    // Reset focus effect.
    &:focus-within {
      outline: 0;
    }

    &:hover, &:selected {
      background: none;
    }

    &:active sidebar-row > *:not(popover) {
      background-color: vendor.$active_color;
    }

    &:selected sidebar-row > *:not(popover) {
      background-color: vendor.$selected_color;
    }

    &:selected sidebar-row:not(.drop-mode) > *:not(popover):hover {
      background-color: vendor.$selected_hover_color;
    }

    &:selected:active sidebar-row > *:not(popover) {
      background-color: vendor.$selected_active_color;
    }
  }

  sidebar-row {
    > *:not(popover) {
      margin: 2px 6px 0;
      padding: 9px;
      border-radius: vendor.$menu_radius;
    }

    @include vendor.focus-ring($target: '> *:not(popover)');

    &:not(.drop-mode) > *:not(popover):hover {
      background-color: vendor.$hover_color;
    }

    icon-item {
      background: none;
      font-weight: bold;

      image {
        min-width: 24px; /* Same width as avatars, so the text is aligned */
      }
    }

    sidebar-section {
      margin-top: 6px;
      font-size: 0.8em;
      font-weight: bold;

      image.arrow {
        transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }

      &:not(:checked) image.arrow {
        &:dir(ltr) {
          transform: rotate(-0.5turn);
        }

        &:dir(rtl) {
          transform: rotate(0.5turn);
        }
      }
    }

    .notification-count {
      font-weight: bold;
      font-size: 0.8em;
      border-radius: 9999px;
      min-width: 0.7em;
      padding: 2px 5px;
      color: currentColor;
      background-color: color-mix(in srgb, currentColor 15%, transparent);
    }

    .highlight {
      color: var(--accent-fg-color);
      background-color: var(--accent-bg-color);
    }

    &.drag > * {
      color: var(--accent-fg-color);
      background-color: var(--accent-bg-color);
      opacity: var(--disabled-opacity);
    }

    &.drop-disabled > *:not(popover) {
      opacity: var(--disabled-opacity);
    }

    &.drop-empty > *:not(popover) {
      color: var(--accent--color);
    }

    icon-item.forget {
      color: var(--error-color);
      background: none;
    }

    &.drop-active {
      background-color: color-mix(in srgb, var(--accent-color) 10%, transparent);

      category {
        color: var(--accent-color);
      }

      .dim-label, &.drop-empty .dim-label {
        opacity: 1;
      }
    }
  }
}

// Explore
.explore {
  .padded-button {
    min-width: 64px;
  }

  .public-rooms row {
    border-radius: vendor.$menu_radius;
    margin: 6px 0;
    padding: 12px;
  }
}

.explore-servers-popover list {
  background-color: transparent;
  color: inherit;

  row {
    min-height: 36px;
    padding: 0 8px;
    border-radius: vendor.$menu_radius;
    margin: 0 0 2px;

    button {
      min-height: 24px;
      min-width: 24px;
    }
  }
}

// Invite
.invite-room-name {
  font-size: 1.6em;
}

.invite-search-results {
	padding: 12px 0px;

  > row {
    border-radius: vendor.$menu_radius;
  }
}

// Event details dialog
.event-details-dialog .sourceview {
  font-family: monospace;
}

// Account settings
.account-settings listview {
	background: transparent;
}

// Account chooser dialog
.account-chooser list {
	background: transparent;

  row {
    margin-bottom: 6px;
    padding: 8px 12px;
    min-height: 32px;
    border-radius: vendor.$card_radius;
  }
}