kitematic/styles/header.less

@import "bootstrap/bootstrap.less";

.header {
  position: absolute;
  min-width: 100%;
  flex: 0;
  min-height: 30px;
  -webkit-app-region: drag;
  -webkit-user-select: none;
  // border-bottom: 1px solid #efefef;

  &.no-drag {
    -webkit-app-region: no-drag;
  }

  .buttons {
    display: inline-block;
    position: relative;
    top: 10px;
    left: 15px;

    &:hover {
      .button-minimize.enabled {
        .at2x('minimize.png', 10px, 10px);
      }
      .button-close.enabled {
        .at2x('close.png', 10px, 10px);
      }
      .button-fullscreen.enabled {
        .at2x('fullscreen.png', 10px, 10px);
      }
      .button-fullscreenclose.enabled {
        .at2x('fullscreenclose.png', 10px, 10px);
      }
    }

    .button {
      box-sizing: border-box;
      display: inline-block;
      background: white;
      margin-right: 9px;
      height: 12px;
      width: 12px;
      border: 1px solid #CCD3D5;
      border-radius: 6px;
      box-shadow: 0px 1px 1px 0px rgba(234,234,234,0.50);
      -webkit-app-region: no-drag;
      &.red {
        background-color: #FF5F52;
        border-color: #E33E32;
      }
      &.yellow {
        background-color: #FFBE05;
        border-color: #E2A100;
      }
      &.green {
        background-color: #15CC35;
        border-color: #17B230;
      }
      &.disabled {
        border: 1px solid #E8EEEF;
      }

      &.enabled:hover {
        box-shadow: 0px 1px 1px 0px rgba(195,198,201,0.50);
      }

      &.enabled:hover:active {
        cursor: default;
        -webkit-filter: brightness(92%);
      }
    }
  }
}