/* ========================================================= WINDOW — generic chrome shared by every app ========================================================= */ .window { position: absolute; display: flex; flex-direction: column; padding: 0.4rem; background: var(--face); box-shadow: var(--sh-window); } .title-bar { height: 2.8rem; flex: none; display: flex; align-items: center; gap: 0.6rem; padding: 0 0.3rem 0 0.5rem; color: #fff; background: linear-gradient(90deg, var(--title-a), var(--title-b)); } .window:not(.is-active) .title-bar { color: #d4d0c8; background: linear-gradient(90deg, var(--title-off-a), var(--title-off-b)); } .title-bar__icon .ico { width: 2rem; height: 2rem; } .title-bar__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 1.7rem; letter-spacing: 0.02em; } .title-bar__controls { display: flex; align-items: center; } .title-btn { width: 2.3rem; height: 2.05rem; display: grid; place-items: center; padding: 0; color: #000; } .title-btn svg { height: 1.05rem; width: auto; } .title-btn:active svg { transform: translate(1px, 1px); } .title-btn--close { margin-left: 0.5rem; } .window__body { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 0.2rem; } /* Resize handles */ .resize-handle { position: absolute; z-index: 2; } .resize-handle--n { top: -0.3rem; left: 0.8rem; right: 0.8rem; height: 0.7rem; cursor: ns-resize; } .resize-handle--s { bottom: -0.3rem; left: 0.8rem; right: 0.8rem; height: 0.7rem; cursor: ns-resize; } .resize-handle--e { right: -0.3rem; top: 0.8rem; bottom: 0.8rem; width: 0.7rem; cursor: ew-resize; } .resize-handle--w { left: -0.3rem; top: 0.8rem; bottom: 0.8rem; width: 0.7rem; cursor: ew-resize; } .resize-handle--ne { right: -0.3rem; top: -0.3rem; width: 1.2rem; height: 1.2rem; cursor: nesw-resize; } .resize-handle--sw { left: -0.3rem; bottom: -0.3rem; width: 1.2rem; height: 1.2rem; cursor: nesw-resize; } .resize-handle--nw { left: -0.3rem; top: -0.3rem; width: 1.2rem; height: 1.2rem; cursor: nwse-resize; } .resize-handle--se { right: -0.3rem; bottom: -0.3rem; width: 1.2rem; height: 1.2rem; cursor: nwse-resize; } .window.is-maximized .resize-handle, .window.is-maximized [data-resize] { display: none; } /* ========================================================= MOBILE — solo cuando scale.js marca , es decir en un dispositivo táctil cuyo lado corto es de teléfono. En escritorio ese atributo no existe y ninguna de estas reglas puede llegar a aplicarse. ========================================================= */ /* La barra crece para que quepan botones que un dedo pueda dar. El grafismo de dentro no cambia de proporción: es el mismo botón Win98 con más aire. */ [data-mobile] .title-bar { height: 4.2rem; gap: 0.8rem; padding: 0 0.5rem 0 0.8rem; } [data-mobile] .title-bar__icon .ico { width: 2.6rem; height: 2.6rem; } [data-mobile] .title-bar__text { font-size: 2rem; } [data-mobile] .title-btn { position: relative; width: 4rem; height: 3.4rem; } /* Y el área táctil se estira hacia arriba y hacia abajo, fuera de la barra, donde no hay nada que pueda solaparse. A lo ancho no se estira: minimizar, maximizar y cerrar están pegados y sus áreas quedarían una encima de otra. Hacia ARRIBA se estira 8 px, fuera de la ventana, donde no hay nada que pueda competir por el toque. En píxeles y no en rem a propósito: un dedo mide lo mismo en un teléfono de 320 que en uno de 430, así que la extensión no debe encoger con la escala. Hacia ABAJO se estira sólo hasta el borde de la propia barra de título (0,4rem, el hueco que ya existe bajo el botón). Medido: estirándose más, esos píxeles caen sobre el cuerpo de la ventana, que se pinta por encima; el toque no llegaba al botón y además le habría robado la primera fila de contenido a la app. Resultado medido: 36,3 px a 320 de ancho, 39,9 a 360, 42,4 a 390 y 46,0 a 430. */ [data-mobile] .title-btn::after { content: ""; position: absolute; inset: -8px 0 -0.4rem 0; } [data-mobile] .title-btn svg { height: 1.4rem; } [data-mobile] .title-btn--close { margin-left: 0.7rem; } /* La ventana ya abre del tamaño de la pantalla y se recoloca al girar el teléfono, así que no hay nada que redimensionar. Los tiradores miden 7 px: fuera. */ [data-mobile] .resize-handle, [data-mobile] [data-resize] { display: none; } /* Arrastrar por la barra es un gesto de la ventana, no del navegador. */ [data-mobile] .title-bar { touch-action: none; }