op-packages/luci-theme-glass/less/sysauth.less

/* ==========================================================================
   Login Page (sysauth) — luci-theme-glass
   ========================================================================== */

.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl);
}

.login-card {
  /* True frosted glass — translucent, not white box */
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.20) 25%,
    rgba(245, 250, 255, 0.22) 50%,
    rgba(255, 255, 255, 0.18) 75%,
    rgba(240, 248, 255, 0.21) 100%
  );
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(30px) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(30px) saturate(var(--glass-saturate));
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 0 16px rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-3xl) var(--space-2xl);
  width: 100%;
  max-width: 380px;
  position: relative;
  text-align: center;
}

.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-lg);
}

.login-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.login-subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.login-version {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-2xl);
}

.login-form {
  text-align: left;

  .login-field {
    margin-bottom: var(--space-lg);

    label {
      display: block;
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      color: var(--color-text-secondary);
      margin-bottom: var(--space-xs);
    }

    input {
      width: 100%;
      max-width: none;
      padding: var(--space-md) var(--space-lg);
      background: rgba(255, 255, 255, 0.30);
      border: 0.5px solid rgba(255, 255, 255, 0.35);
      border-radius: var(--radius-md);
      font-size: var(--font-size-base);
      color: var(--color-text);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 4px rgba(255, 255, 255, 0.08);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

      &:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow:
          0 0 0 3px rgba(var(--color-primary-rgb), 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.25);
      }

      &::placeholder {
        color: var(--color-text-tertiary);
      }
    }
  }
}

.login-btn {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  /* Glass button — glass-ui .glass-bg pattern */
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.12) 25%,
    rgba(240, 248, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.11) 75%,
    rgba(230, 240, 255, 0.12) 100%
  );
  background-color: transparent;
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 4px rgba(0, 0, 0, 0.04),
    inset 0 0 0.5px rgba(255, 255, 255, 0.08),
    inset 0 0 12px rgba(255, 255, 255, 0.10);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);

  &:hover {
    opacity: 0.90;
  }

  &:active {
    transform: scale(0.98);
    opacity: 0.80;
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.15),
      inset 0 1px 2px rgba(0, 0, 0, 0.10);
  }
}

.login-error {
  background: rgba(255, 59, 48, 0.10);
  border: 1px solid rgba(255, 59, 48, 0.30);
  color: var(--color-danger);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
  text-align: center;
}