/* Tauris: the menu column over the logo's starfield, the login page over space (taugate_skin.php) */

/* the menu column (the phone's menu is a popup list of its own - left as it is) */
@media screen and (min-width: 481px) {
  #layout-menu,
  html.dark-mode #layout-menu {
    background: #02040c url(images/menu.jpg) center / cover;
    border-right: 1px solid rgba(70, 150, 255, 0.45);
  }
  #layout-menu .popover-header,
  #taskmenu .special-buttons,
  html.dark-mode #layout-menu .special-buttons,
  html.dark-mode #layout-menu .special-buttons a:not(:focus) {
    background: transparent !important;
  }
  #taskmenu a { color: #e6eefc; }
  #taskmenu a:hover,
  #taskmenu a:focus,
  #taskmenu a.selected,
  #taskmenu a.selected:hover,
  html.dark-mode #taskmenu a:hover,
  html.dark-mode #taskmenu a.selected {
    color: #fff;
    background: rgba(55, 140, 255, 0.25);
  }
  #taskmenu .action-buttons a:hover { background: rgba(55, 140, 255, 0.25); }
}

/* the login page: space with the planet below, the form on a card */
body.task-login,
html.dark-mode body.task-login {
  background: #00030f url(images/login.jpg) center bottom / cover no-repeat fixed;
}
body.task-login #layout,
body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
  background: transparent;
}
body.task-login #login-form {
  max-width: 340px;
  padding: 1.75rem 1.5rem 1.25rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
html.dark-mode body.task-login #login-form {
  background: rgba(22, 27, 29, 0.92);
  border: 1px solid rgba(70, 150, 255, 0.35);
}
html.dark-mode body.task-login #logo { opacity: 1; }