/**
 * Jinx Epaper: viewer colors, fonts and the look of buttons
 *
 * Loaded with the setting "Farben im Viewer", the variables are set from the plugin settings.
 */

.jinx-epaper-viewer {
  --bg: #1e1f24;
  --panel: #26282e;
  --text: #e8e9ec;
  --accent: #4f8cff;
  --muted: color-mix(in srgb, var(--text) 62%, var(--panel));
}

body.jinx-epaper-viewer {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.jinx-epaper-viewer button,
.jinx-epaper-viewer .close,
.jinx-epaper-viewer .download {
  appearance: none; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text);
  font-family: inherit;
}
.jinx-epaper-viewer button:hover,
.jinx-epaper-viewer .close:hover,
.jinx-epaper-viewer .download:hover { background: color-mix(in srgb, var(--text) 16%, transparent); }

.jinx-epaper-viewer__bar {
  background: var(--panel);
  border-bottom: 1px solid #0003;
}

.jinx-epaper-viewer .side-btn { border-radius: 50%; background: #0006; color: #fff; }
.jinx-epaper-viewer .side-btn:hover { background: #0009; }

#status { background: var(--bg); color: var(--muted); }

.jinx-epaper-viewer__nav {
  background: var(--panel);
  border-top: 1px solid #0003;
}
.jinx-epaper-viewer .scrub input[type=range] { accent-color: var(--accent); }
.jinx-epaper-viewer .counter { color: var(--muted); }
.jinx-epaper-viewer .counter input {
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); border-radius: 6px;
}

.jinx-epaper-viewer .thumb,
.jinx-epaper-viewer .thumb:hover { background: none; color: var(--muted); }
.jinx-epaper-viewer .thumb:not(.active) { opacity: 1; }
.jinx-epaper-viewer .thumb .ph { background: color-mix(in srgb, var(--text) 12%, transparent); }
.jinx-epaper-viewer .thumb.active { color: var(--text); }
.jinx-epaper-viewer .thumb.active .ph { outline-color: var(--accent); }

.jinx-epaper-viewer .search { background: var(--panel); color: var(--text); }
.jinx-epaper-viewer .search input {
  background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent); border-radius: 6px;
}
.jinx-epaper-viewer .search-status { color: var(--muted); }
.jinx-epaper-viewer .search-results button { background: none; border-radius: 6px; }
.jinx-epaper-viewer .search-results button:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.jinx-epaper-viewer .search-results span { color: var(--muted); }
.jinx-epaper-viewer .search-results mark { background: var(--accent); color: #fff; border-radius: 2px; padding: 0 1px; }

.jinx-epaper-viewer .overview { background: var(--bg); color: var(--muted); }
.jinx-epaper-viewer .overview-page,
.jinx-epaper-viewer .overview-page:hover { background: none; color: var(--muted); }
.jinx-epaper-viewer .overview-page.active { color: var(--text); }
.jinx-epaper-viewer .overview-page.active .ph { outline-color: var(--accent); }

.jinx-epaper-viewer .toc { background: var(--panel); color: var(--text); }
.jinx-epaper-viewer .toc-list button { background: none; border-radius: 6px; }
.jinx-epaper-viewer .toc-list button:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.jinx-epaper-viewer .toc-list button.active { color: var(--accent); }