Window Glass Generator

/* Windows 7 Aero Glass Window CSS */
/* Based on 7.css — https://github.com/khang-nd/7.css */

.aero-window {
  font-family: "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;
  font-size: 9pt;
  width: 500px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  box-shadow:
    2px 2px 10px 1px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.98);
  position: relative;
  z-index: 0;
}

/* Full-window colored glass layer */
.aero-window::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background:
    linear-gradient(transparent 20%, rgba(255, 255, 255, 0.7) 40%, transparent 41%),
    linear-gradient(to right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)),
    hsl(210, 55%, 45%);
  background-color: hsl(210, 55%, 45%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.99);
  opacity: 0.6;
}

/* Blur backdrop */
.aero-window::after {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* Title bar — authentic diagonal glass stripe texture */
.aero-title-bar {
  padding: 6px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px 6px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.99),
    inset 1px 0 0 rgba(255, 255, 255, 0.99),
    inset -1px 0 0 rgba(255, 255, 255, 0.99);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.33) 70px, transparent 100px),
    linear-gradient(225deg, rgba(255, 255, 255, 0.33) 70px, transparent 100px),
    linear-gradient(
      54deg,
      rgba(0,0,0,0.13) 0 4%, rgba(102,102,102,0.07) 6%, rgba(0,0,0,0.13) 8% 10%,
      rgba(0,0,0,0.13) 15% 16%, rgba(170,170,170,0.07) 17% 18%, rgba(0,0,0,0.13) 23% 24%,
      rgba(187,187,187,0.13) 25% 26%, rgba(0,0,0,0.13) 31% 33%,
      rgba(0,0,0,0.13) 34% 34.5%, rgba(187,187,187,0.13) 36% 40%,
      rgba(0,0,0,0.13) 41% 41.5%, rgba(187,187,187,0.13) 44% 45%,
      rgba(187,187,187,0.13) 46% 47%, rgba(0,0,0,0.13) 48% 49%, rgba(0,0,0,0.13) 50% 50.5%,
      rgba(0,0,0,0.13) 56% 56.5%, rgba(187,187,187,0.13) 57% 63%, rgba(0,0,0,0.13) 67% 69%,
      rgba(187,187,187,0.13) 69.5% 70%, rgba(0,0,0,0.13) 73.5% 74%,
      rgba(187,187,187,0.13) 74.5% 79%, rgba(0,0,0,0.13) 80% 84%,
      rgba(170,170,170,0.13) 85% 86%, rgba(0,0,0,0.13) 87%, rgba(187,187,187,0.07) 90%
    ) left center / 100vw 100vh no-repeat fixed;
}

/* Title icon */
.aero-title-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  padding-top: 6px;
  flex-shrink: 0;
  display: block;
}

/* Title text — black with white glow for glass legibility */
.aero-title-bar-text {
  color: #000000;
  letter-spacing: 0;
  line-height: 15px;
  padding-top: 6px;
  text-shadow:
    0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,
    0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Window controls strip — capsule hanging from top */
.aero-title-bar-controls {
  display: flex;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.98),
    1px 0 0 rgba(255, 255, 255, 0.98),
    -1px 0 0 rgba(255, 255, 255, 0.98);
}

.aero-title-bar-controls button {
  position: relative;
  min-width: 29px;
  min-height: 19px;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 0;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 9px;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.3) 45%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.1) 75%,
    rgba(255, 255, 255, 0.5)
  );
  transition: box-shadow 0.1s;
}

.aero-title-bar-controls button:first-child {
  border-bottom-left-radius: 5px;
}

.aero-title-bar-controls button:last-child {
  border-right: 0;
  border-bottom-right-radius: 5px;
  min-width: 48px;
}

/* Hover — cyan radial glow */
.aero-title-bar-controls button:not(.close):hover {
  background:
    radial-gradient(circle at bottom, #2aceda, transparent 65%),
    linear-gradient(#b6d9ee 50%, #1a6ca1 50%);
  box-shadow: 0 0 7px 3px #5dc4f0, inset 0 0 0 1px rgba(255, 255, 255, 0.98);
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.aero-title-bar-controls button:not(.close):active {
  background:
    radial-gradient(circle at bottom, #0bfdfa, transparent 65%),
    linear-gradient(#86a7bc 50%, #092747 50%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.98);
}

/* Close button */
.aero-title-bar-controls button.close {
  background:
    radial-gradient(circle at -60% 50%, rgba(0, 0, 0, 0.44) 5% 10%, transparent 50%),
    radial-gradient(circle at 160% 50%, rgba(0, 0, 0, 0.44) 5% 10%, transparent 50%),
    linear-gradient(rgba(224, 161, 151, 0.9), #cf796a 25% 50%, #d54f36 50%);
}

.aero-title-bar-controls button.close:hover {
  background:
    radial-gradient(circle at bottom, #ff8a7a, transparent 65%),
    linear-gradient(#ffbdb3 50%, #d40000 50%);
  box-shadow: 0 0 7px 3px #ff5030, inset 0 0 0 1px rgba(255, 255, 255, 0.98);
  color: white;
}

.aero-title-bar-controls button.close:active {
  background:
    radial-gradient(circle at bottom, #ff3300, transparent 65%),
    linear-gradient(#d45050 50%, #8b0000 50%);
}

/* Menu bar */
.aero-window-menubar {
  background: #f0f0f0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 20px;
  font-size: 9pt;
  color: #000;
  font-family: "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;
}

.aero-window-menubar span {
  display: inline-block;
  padding: 1px 6px;
  cursor: default;
  border: 1px solid transparent;
  border-radius: 2px;
}

.aero-window-menubar span:hover {
  background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);
  border-color: #3c7fb1;
}

/* Window body — solid #f0f0f0 surface, inset 6px from glass border */
.aero-window-body {
  margin: 6px;
  margin-top: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background: #f0f0f0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
  padding: 6px;
}