electron-react-typescript-webpack-2022/misc/window/components/Titlebar.less

Custom boilerplate for writing Desktop Applications using Electron, React, Webpack, TypeScript in 2022

/**
 * Copyright (c) 2021, Guasam
 *
 * This software is provided "as-is", without any express or implied warranty. In no event
 * will the authors be held liable for any damages arising from the use of this software.
 * Read the LICENSE file for more details.
 *
 * @author  : guasam
 * @project : Electron Window
 * @package : Window Components Stylesheet
*/

@titlebar-baseSize: 16px;
@titlebar-height: 28px;
@titlebar-bg: #171b21;
@titlebar-iconSize: 16px;
@em: @titlebar-baseSize*1em;

//-----------------------------------------
// Mixins
//-----------------------------------------

.flex-strech() {
  display: flex;
  align-items: stretch;
}
.flex-align-center() {
  display: flex;
  align-items: center;
}

//-----------------------------------------
// Stylesheet
//-----------------------------------------

.window-content {
  position: relative;
  overflow: auto;
  flex: 1;
}

.window-titlebar {
  .flex-strech();
  font-size: @titlebar-baseSize;
  height: @titlebar-height;
  background: @titlebar-bg;
  -webkit-app-region: drag; // Draggable
  user-select: none;
  position: relative;

  & > section {
    .flex-align-center();
  }

  &-content {
    flex: 1;
    font-size: calc(@titlebar-baseSize - 3px);
    color: #a9b0bb;

    &.centered {
      width: 100%;
      height: 100%;
      position: absolute;
      justify-content: center;
    }
  }

  // Titlebar icon
  &-icon {
    padding: 0 0.75em;
    img {
      width: @titlebar-iconSize;
      height: @titlebar-iconSize;
    }
  }

  // Titlebar Menu
  &-menu {
    flex: 1;
  }

  .menu {
    &-item {
      position: relative;
    }

    &-item.active {
      .menu-title {
        background: #3c4043;
        color: #bfbfbf;
      }
    }

    &-title {
      padding: 4px 10px;
      font-size: 0.8125rem;
      text-shadow: 0px 1px 1px black;
      -webkit-app-region: no-drag;
      color: #97a0b1;

      &:hover {
        background-color: #1f252c;
      }
    }

    &-popup {
      display: none;
      position: fixed;
      background: #292a2d;
      min-width: 70px;
      border: 1px solid #3c4043;
      padding: 0.25rem 0;
      box-shadow: 2px 1px 4px hsla(0, 0%, 0%, 0.5);
      z-index: 10000;

      &.active {
        display: block;
      }

      &-item {
        display: flex;
        justify-content: space-between;
        font-size: 0.8125rem;
        text-shadow: 0px 1px 1px black;
        padding: 0.375rem 1rem;

        &:hover {
          background: #1761cb;

          .popup-item-shortcut {
            color: #8cbbff;
          }
        }
      }
    }
  }

  .popup-item {
    &-name {
      padding-right: 2rem;
      color: #d8d8d8;
    }
    &-shortcut {
      color: #73757c;
      text-shadow: none;
    }
    &-separator {
      height: 1px;
      background: #3c4043;
      margin: 4px 0;
    }
  }

  // Titlebar controls
  &-controls {
    .flex-strech();
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    color: #969799;

    &.type-windows {
      .control {
        padding: 0 1.15em;
        font-size: 0.875em;
        display: flex;
        height: 100%;
        align-items: center;
        -webkit-app-region: no-drag;

        &.close:hover {
          background: #e10000;
        }
        &:hover {
          background: #242d38;
          color: #d8d9db;
        }
      }
    }

    &.type-mac {
      .control {
        width: 16px;
        height: 16px;
        background: #0e0e0e99;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.675rem;
        color: transparent;
        -webkit-app-region: no-drag;
        opacity: 0.8;

        &:hover {
          opacity: 1;
        }
      }

      .control.close {
        background: #f46d60;
      }
      .control.maximize {
        background: #59ca56;
      }
      .control.minimize {
        background: #f9c04e;
      }
    }
  }
}