<commit_before>@import "../../mixins";

#desktop-app-title-bar {
  -webkit-app-region: drag;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;

  display: flex;
  flex-direction: row;

  @include darwin {
    height: var(--darwin-title-bar-height);
    background: linear-gradient(to bottom, #3b3f46 0%,#2b2e33 100%);
    border-bottom: 1px solid #000;
  }

  @include win32 {
    height: var(--win32-title-bar-height);
    background: var(--win32-title-bar-background-color);
    border-bottom: 1px solid #000;

    .app-icon {
      color: var(--toolbar-button-secondary-color);
      margin: 0 var(--spacing);
      align-self: center;
    }
  }

  .resize-handle {
    flex-grow: 1;
    height: 3px;
    -webkit-app-region: no-drag;
  }

  // Window controls is the container for the three buttons minimize,
  // maximize/restore and close. On macOS the controls are added
  // automatically even for borderless window so we only render
  // controls on Windows.
  .window-controls {

    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;

    // Each button contains a single SVG element with a Windows 10-replica
    // icon for the function it represents
    button {
      -webkit-app-region: no-drag;

      display: inline-block;
      position: relative;
      width: 45px;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;

      // Reset styles from global buttons
      border: none;
      box-shadow: none;
      border-radius: 0;

      color: #a0a0a0;
      background-color: transparent;
      transition: background-color 0.25s ease;

      &:focus { outline: none; }

      &:hover {
        background-color: #888;
        color: #fff;

        // Doing :hover:active as oposed to just :active is
        // a conscious choice to match how the real Windows
        // controls behave when someone hovers, clicks and then
        // moves away from the hitbox.
        &:active {
          background-color: #666;

          // Immediate feedback when clicking
          transition: none;
        }
      }

      // Close button is a special case, it needs to be red
      // on hover and slightly lighter red on active.
      &.close:hover {
        background-color: #e81123;
        color: #fff;

        &:active {
          background-color: #bf0f1d;

          // Immediate feedback when clicking
          transition: none;
        }
      }

      /* https://css-tricks.com/cascading-svg-fill-color/ */
      svg { fill: currentColor; }
    }
  }
}

#desktop-app-title-bar.light-title-bar {
  @include darwin {
    background: transparent;
    border-bottom: none;
  }

  @include win32 {
    background: transparent;
    border-bottom: none;
  }

  position: fixed;

  .window-controls {
    svg {
      fill: #000;
    }

    button {
      &:hover {
        background-color: #e5e5e5;

        &:active {
          background-color: #cccccc;
        }
      }

      &.close:hover {
        background-color: #e81123;

        svg {
          fill: #fff;
        }

        &:active {
          background-color: #f1707a;
        }
      }
    }
  }
}<commit_msg>Fix window controls on Windows<commit_after>@import "../../mixins";

#desktop-app-title-bar {
  -webkit-app-region: drag;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;

  display: flex;
  flex-direction: row;
  z-index: 1;

  @include darwin {
    height: var(--darwin-title-bar-height);
    background: linear-gradient(to bottom, #3b3f46 0%,#2b2e33 100%);
    border-bottom: 1px solid #000;
  }

  @include win32 {
    height: var(--win32-title-bar-height);
    background: var(--win32-title-bar-background-color);
    border-bottom: 1px solid #000;

    .app-icon {
      color: var(--toolbar-button-secondary-color);
      margin: 0 var(--spacing);
      align-self: center;
    }
  }

  .resize-handle {
    flex-grow: 1;
    height: 3px;
    -webkit-app-region: no-drag;
  }

  // Window controls is the container for the three buttons minimize,
  // maximize/restore and close. On macOS the controls are added
  // automatically even for borderless window so we only render
  // controls on Windows.
  .window-controls {

    flex-grow: 0;
    flex-shrink: 0;
    margin-left: auto;

    // Each button contains a single SVG element with a Windows 10-replica
    // icon for the function it represents
    button {
      -webkit-app-region: no-drag;

      display: inline-block;
      position: relative;
      width: 45px;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;

      // Reset styles from global buttons
      border: none;
      box-shadow: none;
      border-radius: 0;

      color: #a0a0a0;
      background-color: transparent;
      transition: background-color 0.25s ease;

      &:focus { outline: none; }

      &:hover {
        background-color: #888;
        color: #fff;

        // Doing :hover:active as oposed to just :active is
        // a conscious choice to match how the real Windows
        // controls behave when someone hovers, clicks and then
        // moves away from the hitbox.
        &:active {
          background-color: #666;

          // Immediate feedback when clicking
          transition: none;
        }
      }

      // Close button is a special case, it needs to be red
      // on hover and slightly lighter red on active.
      &.close:hover {
        background-color: #e81123;
        color: #fff;

        &:active {
          background-color: #bf0f1d;

          // Immediate feedback when clicking
          transition: none;
        }
      }

      /* https://css-tricks.com/cascading-svg-fill-color/ */
      svg { fill: currentColor; }
    }
  }
}

#desktop-app-title-bar.light-title-bar {
  @include darwin {
    background: transparent;
    border-bottom: none;
  }

  @include win32 {
    background: transparent;
    border-bottom: none;
  }

  position: fixed;

  .window-controls {
    svg {
      fill: #fff;
    }

    button {
      &:hover {
        background-color: #e5e5e5;

        svg {
          fill: #000;
        }

        &:active {
          background-color: #cccccc;
        }
      }

      &.close:hover {
        background-color: #e81123;

        svg {
          fill: #fff;
        }

        &:active {
          background-color: #f1707a;
        }
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.11738718838750395, 'fraction_numerical': 0.026033449037551278, 'mean_word_length': 1.8631436314363143, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5813918', 'n_tokens_mistral': 2146, 'n_tokens_neox': 1957, 'n_words': 537}