lens/src/renderer/components/layout/top-bar/top-bar.module.scss

/**
 * Copyright (c) OpenLens Authors. All rights reserved.
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */

.topBar {
  display: flex;
  background-color: var(--layoutBackground);
  z-index: 2;
  width: 100%;
  grid-area: topbar;
  height: var(--main-layout-header);
  justify-content: space-between;

  /* Use topbar as draggable region */
  user-select: none;
  -webkit-app-region: drag;
}

.topBar .items {
  align-items: center;
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag;

  &:first-of-type {
    padding-left: calc(var(--padding) * 2);

    & > *:not(:empty) {
      margin-right: calc(var(--padding) * 1.5);
    }
  }

  &:last-of-type {
    padding-right: calc(var(--padding) * 2);

    & > *:not(:empty) {
      margin-left: calc(var(--padding) * 1.5);
    }
  }
}

:global(.is-mac) .topBar {
  padding-left: var(--hotbar-width);
}

.winMenu {
  width: var(--hotbar-width);

  > div {
    @apply flex items-center justify-center;
    width: 40px;
    height: 40px;

    &:hover {
      background-color: var(--borderFaintColor);
    }

    &:active {
      background-color: var(--borderColor);
    }
  }
}

.windowButtons {
  display: flex;
  margin-right: calc(var(--padding) * -2);

  > div {
    @apply flex items-center justify-center;
    width: 40px;
    height: 40px;

    svg {
      width: 12px;
      height: 12px;
    }
  }

  &.linuxButtons {
    > div {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      margin-right: var(--padding);
      color: var(--textColorAccent);

      svg {
        width: 8px;
        height: 8px;
      }
    }

    .close {
      color: white;
      background-color: #e63e02; /* Standard close button bg color on ubuntu */
    }

    .close:hover {
      background-color: #ff5a23;
    }
  }
}

.minimize,
.maximize {
  &:hover {
    background-color: var(--borderFaintColor);
  }

  &:active {
    background-color: var(--borderColor);
  }
}

.close {
  &:hover {
    color: white;
    background-color: #ef4b4e;
  }
}