@charset "UTF-8";

/*
 * Ansichten innerhalb eines Repositories: Kopfbereich, Dateibrowser,
 * Commit-Liste und Vergleichsansicht.
 */

/* ------------------------------------------------------------ Kopfbereich */

.repo-head {
  margin-bottom: .8rem;
}

.repo-title {
  display: flex;
  gap: .3rem;
  align-items: center;
  margin: 0;
  font-size: 1.3rem;
}

.repo-title .sep {
  color: var(--muted);
}

.repo-title a {
  color: var(--text);
}

.repo-title a:last-of-type {
  font-weight: 700;
  color: var(--accent);
}

.repo-description {
  margin: .2rem 0 0;
  color: var(--muted);
}

/* --------------------------------------------------------------- Werkzeug */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: .8rem;
}

.toolbar-right {
  margin-left: auto;
}

.ref-select {
  width: auto;
  min-width: 160px;
  max-width: 260px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  align-items: center;
  font-size: .95rem;
}

.breadcrumbs .sep {
  color: var(--muted);
}

.clone-menu .menu-panel {
  min-width: 340px;
}

/* ------------------------------------------------------------ Commit-Kopf */

.commit-bar {
  display: flex;
  gap: .55rem;
  align-items: center;
  padding: .5rem .9rem;
  margin-bottom: -1px;
  font-size: .9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.commit-subject {
  overflow: hidden;
  font-weight: 500;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commit-bar time {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Dateiliste */

.table-files td {
  padding: .42rem .9rem;
}

.table-files tbody tr:last-child td {
  border-bottom: 0;
}

.table-files tr:hover td {
  background: var(--surface-2);
}

.entry {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  color: var(--text);
}

.entry:hover {
  color: var(--accent);
  text-decoration: none;
}

/* Verzeichnisse bekommen die Akzentfarbe, Dateien bleiben ruhig - so
   ordnet sich eine lange Liste beim Ueberfliegen von selbst. */
.entry-icon {
  color: var(--muted);
}

.entry-dir .entry-icon {
  color: var(--accent);
}

/* --------------------------------------------------------- Dateianzeige */

.file-view .file-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.file-actions {
  display: flex;
  gap: .4rem;
}

.file-notice {
  padding: 2rem 1rem;
  text-align: center;
}

.file-switch {
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--border);
}

/* Beide Spalten MUESSEN dieselbe Zeilenhoehe haben - sonst laufen
   Nummern und Code auseinander, und zwar umso weiter, je laenger die
   Datei ist. Deshalb steht sie hier gemeinsam und nicht je Spalte. */
.code-view {
  display: flex;
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.6;
  background: var(--surface);
}

.code-view .line-numbers {
  padding: .7rem .75rem;
  margin: 0;
  font: inherit;
  color: var(--muted);
  text-align: right;
  user-select: none;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

.code-view .line-numbers a {
  display: block;
  color: var(--muted);
}

.code-view .line-numbers a:target {
  font-weight: 700;
  color: var(--accent);
}

.code-view .code {
  flex: 1;
  padding: .7rem .9rem;
  margin: 0;
  font: inherit;
  overflow-x: auto;
  white-space: pre;
}

.code-view .line-numbers a:hover {
  color: var(--accent);
  text-decoration: none;
}

/* --------------------------------------------------------- Commit-Liste */

.commit-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.commit-day {
  padding: .4rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.commit-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
}

.commit-item:last-child {
  border-bottom: 0;
}

.commit-main {
  flex: 1;
  min-width: 0;
}

.commit-sha {
  color: var(--muted);
  white-space: nowrap;
}

.commit-body summary {
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
}

/* ------------------------------------------------------- Commit-Detail */

.commit-detail-head {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.commit-detail-head h2 {
  margin: 0;
}

.commit-detail-actions {
  margin-left: auto;
}

.commit-message {
  margin-top: .8rem;
}

.commit-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .2rem .9rem;
  margin: .9rem 0 0;
  font-size: .88rem;
}

.commit-facts dt {
  color: var(--muted);
}

.commit-facts dd {
  margin: 0;
}

/* -------------------------------------------------------------- Vergleich */

.diff-stats {
  padding: .5rem .9rem;
  margin-bottom: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.additions { color: var(--success); font-weight: 600; }
.deletions { color: var(--error); font-weight: 600; }

.diff-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .5rem .9rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.diff-counts {
  margin-left: auto;
}

.diff-body {
  overflow-x: auto;
  font-size: .82rem;
  line-height: 1.5;
}

.diff-line {
  padding: 0 .9rem;
  white-space: pre;
}

.diff-line.add {
  color: var(--add-text);
  background: var(--add-bg);
}

.diff-line.del {
  color: var(--del-text);
  background: var(--del-bg);
}

.diff-line.hunk {
  color: var(--muted);
  background: var(--hunk-bg);
}

.diff-lazy {
  padding: 1rem;
  text-align: center;
}

/* ------------------------------------------------------------ Ref-Listen */

.ref-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ref-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border);
}

.ref-item:last-child {
  border-bottom: 0;
}

.ref-main {
  flex: 1;
  min-width: 0;
}

.ref-name {
  font-weight: 600;
}

.ref-meta {
  white-space: nowrap;
}

.distance {
  font-size: .82rem;
}

/* ------------------------------------------------- Farbtoene je Dateiart
   Das Zeichen sagt, WAS eine Datei ist; der Ton sagt, WOMIT man es zu
   tun hat. Alle Toene sind gedaempft und liegen dicht beieinander: eine
   Liste, in der jede Zeile leuchtet, ist keine Hilfe mehr. Wer keinen
   Ton hat (Fliesstext, Archive, git-Dateien), bleibt in der Textfarbe -
   das ist die Mehrheit und soll die Ruhe halten. */

.tone-code     { color: #6f7dd6; }
.tone-markup   { color: #c0803f; }
.tone-style    { color: #3f93b8; }
.tone-data     { color: #8a7bbd; }
.tone-image    { color: #4f9a72; }
.tone-database { color: #a06a9c; }
.tone-shell    { color: #7a8794; }
.tone-lock     { color: #b0743f; }

/* Im dunklen Modus liegen dieselben Toene heller, sonst verschwinden
   sie im Hintergrund. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tone-code     { color: #93a0ea; }
  :root:not([data-theme="light"]) .tone-markup   { color: #dda368; }
  :root:not([data-theme="light"]) .tone-style    { color: #63b6d9; }
  :root:not([data-theme="light"]) .tone-data     { color: #ab9de0; }
  :root:not([data-theme="light"]) .tone-image    { color: #6fbd94; }
  :root:not([data-theme="light"]) .tone-database { color: #c48cbf; }
  :root:not([data-theme="light"]) .tone-shell    { color: #9aa7b5; }
  :root:not([data-theme="light"]) .tone-lock     { color: #d29663; }
}

:root[data-theme="dark"] .tone-code     { color: #93a0ea; }
:root[data-theme="dark"] .tone-markup   { color: #dda368; }
:root[data-theme="dark"] .tone-style    { color: #63b6d9; }
:root[data-theme="dark"] .tone-data     { color: #ab9de0; }
:root[data-theme="dark"] .tone-image    { color: #6fbd94; }
:root[data-theme="dark"] .tone-database { color: #c48cbf; }
:root[data-theme="dark"] .tone-shell    { color: #9aa7b5; }
:root[data-theme="dark"] .tone-lock     { color: #d29663; }

/* Das Zeichen im Kopf eines Dateivergleichs. Etwas kleiner als in der
   Dateiliste, damit der Pfad die Hauptsache bleibt. */
.diff-file-icon {
  flex: 0 0 auto;
  margin-right: .1rem;
  vertical-align: -2px;
}