.login-window { width: 420px; height: 248px; zoom: var(--ui-scale); } .login-form { display: flex; flex: 1; flex-direction: column; min-height: 0; } .login-panel { flex: 1; margin: 8px; padding: 12px; background-color: #dfdfdf; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 1px, transparent 1px 5px); border-top: 1px solid #ffffff; border-left: 1px solid #ffffff; border-right: 1px solid #808080; border-bottom: 1px solid #808080; } .login-alert { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 48px; margin-bottom: 12px; font-size: 13px; line-height: 15px; } .login-alert img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; } .login-alert p { margin: 0; } .login-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; line-height: 13px; } .login-input { width: 100%; height: 24px; padding: 2px 5px; color: #000000; background: #ffffff; border-top: 1px solid #808080; border-left: 1px solid #808080; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; font-family: inherit; font-size: 13px; line-height: 13px; } .login-input[readonly] { color: #555555; background: #dfdfdf; } .login-error { margin: 2px 0 0 90px; color: #800000; font-size: 12px; line-height: 12px; } .login-actions { display: flex; justify-content: flex-end; gap: 8px; height: 40px; padding: 0 8px 8px; } .login-actions .win98-button { text-decoration: none; } .login-statusbar { grid-template-columns: 1fr 96px; } @media (max-width: 600px) { main { display: block; min-height: 100dvh; padding: 0; } .login-window { width: 100vw; height: 100dvh; border: 0; box-shadow: none; zoom: 1; } .login-titlebar { height: 24px; margin: 0; } .login-panel { margin: 8px 6px; } .login-row { grid-template-columns: 1fr; gap: 4px; } .login-error { margin-left: 0; } }