/*登录页专用样式 —— 只有 templates/login.html 用得到。
登录页没引 common.css，所以品牌图标那种共用的样式要在这里自己再写一遍。 */


/* 中间那张白卡片 */
.login-card {
  /* 卡片宽度。想让登录框宽一点或窄一点，改这个数字。
     用 max-width 而不是 width，是为了手机上能自动变窄，
     不会宽出屏幕、把页面撑出一条横向滚动条 */
  width: 100%;
  max-width: 380px;
}

/* 卡片最上面那个蓝色小方块图标。
   这段和 common.css 里的 .brand-badge 是一样的，
   因为登录页没引 common.css，所以要在这里再写一遍 */
.login-badge {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  /* 从浅蓝到深蓝的渐变 */
  background: linear-gradient(135deg, #5c9dff, #0d6efd);
  color: #fff;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(13, 110, 253, .3);
}

/*输入框获得焦点时，边框变蓝并带一圈淡淡的光晕。 */
.login-card .form-control:focus {
  border-color: #5c9dff;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);
}

/* 「登录」按钮鼠标移上去时，颜色深一点、轻轻往上抬一下 */
.login-card .btn-primary {
  transition: transform .12s, filter .12s;
}
.login-card .btn-primary:hover {
  filter: brightness(.94);
  transform: translateY(-1px);
}