/* drive.colter.us: the skin for copyparty's non-browser pages.
   modern.css only reaches the file browser (css-browser). The login page, the
   share-unlock page (both splash.html, html#ht_spl) and the short message pages
   (msg.html, html#ht_msg, e.g. "wrong password") get this file through
   html-head-s in copyparty.conf. Everything is scoped to those two ids, so the
   browser page is untouched. No JS: those pages allow scripts only by nonce.
   The words and what a visitor sees are set in the templates (patches/0003);
   this file is only the look. */

html#ht_spl, html#ht_msg {
  --p-font: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --p-primary: #1a73e8;
  --p-primary-hover: #1557b0;
  --p-primary-text: #ffffff;
  --p-surface: #ffffff;
  --p-bg: #f8f9fa;
  --p-text: #202124;
  --p-text-secondary: #5f6368;
  --p-border: #dadce0;
  --p-error: #d93025;
  --p-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  --p-radius: 8px;
  --p-radius-lg: 16px;
}
@media (prefers-color-scheme: dark) {
  html#ht_spl, html#ht_msg {
    --p-primary: #8ab4f8;
    --p-primary-hover: #aecbfa;
    --p-primary-text: #202124;
    --p-surface: #2d2d2d;
    --p-bg: #1f1f1f;
    --p-text: #e8eaed;
    --p-text-secondary: #9aa0a6;
    --p-border: #3c4043;
    --p-error: #f28b82;
    --p-shadow: 0 4px 12px 0 rgba(0,0,0,.5);
  }
}

html#ht_spl, html#ht_msg,
html#ht_spl body, html#ht_msg body {
  background: var(--p-bg) !important;
  color: var(--p-text) !important;
  font-family: var(--p-font) !important;
  margin: 0;
  text-shadow: none;
}
html#ht_spl body, html#ht_msg body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

/* ---- the card ---- */
html#ht_spl #wrap, html#ht_msg #box {
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 40px 36px 32px;
  box-sizing: border-box;
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-lg);
  box-shadow: var(--p-shadow);
  line-height: 1.4;
}
@media (max-width: 480px) {
  html#ht_spl #wrap, html#ht_msg #box { padding: 32px 20px 24px; }
}

/* ---- heading and the line under it ---- */
html#ht_spl h1 {
  border: none;
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--p-text);
}
html#ht_spl .sub {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--p-text-secondary);
}

/* ---- the form ---- */
html#ht_spl form#lf {
  display: flex;
  flex-direction: column;
  gap: 16px;
  line-height: normal;
}
html#ht_spl #lp {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 13px 14px;
  font: 16px var(--p-font);
  color: var(--p-text) !important;
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius);
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
html#ht_spl #lp:focus {
  border-color: var(--p-primary) !important;
  box-shadow: 0 0 0 1px var(--p-primary);
}
html#ht_spl #lp::placeholder {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 0;
  opacity: 1;
  color: var(--p-text-secondary) !important;
}
html#ht_spl #ls {
  align-self: flex-end;
  margin: 0;
  padding: 10px 24px;
  font: 500 14px var(--p-font);
  letter-spacing: .01em;
  color: var(--p-primary-text) !important;
  background: var(--p-primary) !important;
  border: none !important;
  border-radius: var(--p-radius);
  cursor: pointer;
  transition: background 150ms;
}
html#ht_spl #ls:hover { background: var(--p-primary-hover) !important; }
html#ht_spl #lm:empty { display: none; }
html#ht_spl #lm { font-size: 14px; color: var(--p-error); }

/* ---- footer ---- */
html#ht_spl #pb {
  position: fixed;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  opacity: 1;
  color: var(--p-text-secondary);
}
html#ht_spl #pb a {
  color: var(--p-text-secondary) !important;
  background: none !important;
  border: none;
  padding: 0;
}

/* ---- message pages ("naw dude" after a wrong password, then a redirect) ---- */
html#ht_msg #box { text-align: center; }
html#ht_msg #box h1 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 400;
  color: var(--p-text);
}
html#ht_msg #box h2 { margin: 0; font-size: 14px; font-weight: 500; }
html#ht_msg #box a {
  display: inline-block;
  padding: 10px 24px;
  color: var(--p-primary-text) !important;
  background: var(--p-primary) !important;
  border-radius: var(--p-radius);
  text-decoration: none;
}
html#ht_msg pre {
  text-align: left;
  white-space: pre-wrap;
  color: var(--p-text-secondary);
}