sovereign_browser/www/sovereign-base.css

/* Shared sovereign:// page CSS (theme variables, base elements, buttons).
 * Mirrors sovereign_page_css() in src/nostr_bridge.c so the embedded
 * file-based pages stay consistent with the legacy C-string pages.
 * Linked by settings.html, bookmarks.html, profile.html, agents/config.html. */
:root {
  --font: monospace;
  --primary: #000000;
  --secondary: #ffffff;
  --accent: #ff0000;
  --muted: #dddddd;
  --border: var(--muted);
  --radius: 5px;
  --bg: var(--secondary);
  --fg: var(--primary);
  --img-gray: 100%;
  --img-gray-hover: 20%;
  color-scheme: light;
}
html.dark {
  --primary: #ffffff;
  --secondary: #000000;
  --accent: #ff0000;
  --muted: #777777;
  --border: var(--muted);
  color-scheme: dark;
}
* { font-family: var(--font); margin: 0; padding: 0; box-sizing: border-box; }
html { transition: background-color 0.2s ease, color 0.2s ease; }
body {
  color: var(--fg); background: var(--bg);
  max-width: 800px; margin: 40px auto; padding: 20px;
  line-height: 1.5;
}
h1 {
  color: var(--primary); text-align: center;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 8px; margin-bottom: 20px;
}
h2 {
  color: var(--primary); margin-top: 30px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 4px;
}
h3 { color: var(--primary); margin-top: 20px; margin-bottom: 8px; }
a { color: var(--accent); text-decoration: none; transition: 0.2s; }
a:hover { text-decoration: underline; }
img { filter: grayscale(var(--img-gray)); transition: filter 0.2s; }
img:hover { filter: grayscale(var(--img-gray-hover)); }
.note { color: var(--muted); font-size: 12px; margin: 10px 0; }
.info { color: var(--muted); font-size: 12px; word-break: break-all; }
.missing { color: var(--muted); font-style: italic; }
.info-row {
  display: flex; justify-content: space-between;
  gap: 20px; padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.info-row span:first-child { font-weight: bold; flex-shrink: 0; }
.setting, .field {
  display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-name { font-weight: bold; }
.setting-desc { color: var(--muted); font-size: 12px; margin-top: 4px; }
.toggle {
  position: relative; width: 50px; height: 24px;
  background: var(--muted); border-radius: 12px; cursor: pointer;
  transition: background 0.2s; flex-shrink: 0;
}
.toggle.on  { background: var(--primary); }
.toggle.off { background: var(--muted); }
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--secondary);
  transition: transform 0.2s;
}
.toggle.on::after { transform: translateX(26px); }
input, select, textarea {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; font-family: var(--font); font-size: 13px;
  min-width: 200px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); outline: none;
}
.btn, .save-btn, button.btn {
  background: var(--bg); color: var(--primary);
  -webkit-appearance: none !important; appearance: none !important;
  border-width: 1px !important; border-style: solid !important;
  border-color: var(--primary) !important; border-radius: var(--radius);
  padding: 6px 16px; cursor: pointer; font-family: var(--font);
  font-size: 13px; font-weight: bold; margin-left: 8px;
  display: inline-block; text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.btn:hover, .save-btn:hover, button.btn:hover { border-color: var(--accent) !important; text-decoration: none; }
.btn:active, .save-btn:active { background: var(--accent); color: var(--secondary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-del { border-color: var(--accent); color: var(--accent); }
.btn-del:hover { background: var(--accent); color: var(--secondary); }
.status {
  padding: 8px; margin: 10px 0; border-radius: var(--radius);
  display: none; border: 1px solid var(--border);
}
.status.show { display: block; }
.status.ok  { border-color: var(--primary); color: var(--primary); }
.status.err { border-color: var(--accent);  color: var(--accent);  }
.shortcut-display {
  display: inline-block; min-width: 120px;
  padding: 4px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); font-family: var(--font); font-size: 13px;
  text-align: center;
}
.shortcut-display.capturing {
  border-color: var(--accent);
  animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.shortcut-row.duplicate .shortcut-display { border-color: var(--accent); }
.sc-change, .sc-reset { min-width: 70px; }
.qr { text-align: center; margin: 12px 0; }
.qr img {
  image-rendering: pixelated; border: 4px solid var(--secondary);
  border-radius: 4px;
}
.theme-toggle {
  position: fixed; top: 20px; right: 20px;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  text-decoration: none; user-select: none;
  font-size: 12px; color: var(--muted); user-select: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 4px 10px; background: var(--bg); z-index: 10;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.bm {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.bm-url { color: var(--accent); text-decoration: none; word-break: break-all; }
.bm-url:hover { text-decoration: underline; }
.bm-title { color: var(--primary); font-weight: bold; }
.bm-meta { color: var(--muted); font-size: 11px; }
.actions { display: flex; gap: 8px; flex-shrink: 0; }
.form { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.empty { color: var(--muted); font-style: italic; padding: 8px 0; }
.dir-header {
  display: flex; justify-content: space-between;
  align-items: center; gap: 20px;
}