thunderbird-paperless-connector/ui/gemeinsam.css

/* Gemeinsames Aussehen der Dialoge.
   Bewusst zurückhaltend, damit sie sich in die Oberfläche von
   Thunderbird einfügen statt sich abzuheben. */

:root {
  --gruen: #175420;
  --rand: #c8ccd0;
  --hell: #f6f6f4;
  color-scheme: light dark;
}

* { box-sizing: border-box; }

/* Muss VOR den Anzeigearten stehen und !important tragen: Eine Regel wie
   ".wahl { display: flex }" überstimmt sonst das eingebaute
   "[hidden] { display: none }", und ausgeblendete Elemente erscheinen. */
[hidden] { display: none !important; }

body {
  font: message-box;
  font-size: 13px;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  /* Feste Höhe UND overflow:hidden. Mit min-height wuchs die Seite über
     das Fenster hinaus, und die Fußzeile lag unerreichbar darunter.
     Gestaucht wird stattdessen innen: Die Listen blättern selbst. */
  height: 100vh;
  overflow: hidden;
}

h1 { font-size: 14px; margin: 0 0 2px; font-weight: 600; }

fieldset {
  border: 1px solid var(--rand);
  border-radius: 4px;
  margin: 0;
  padding: 8px 10px 10px;
  min-width: 0;
}
legend { padding: 0 4px; font-weight: 600; }

label { display: block; margin: 4px 0 2px; }

input[type=text], input[type=password], input[type=number], select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: Field;
  color: FieldText;
}

.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile > input[type=text] { flex: 1; }

/* Kompakte Zahlenfelder mit vorangestellter Beschriftung. */
.masse { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mass { display: flex; gap: 5px; align-items: center; }
.mass label { margin: 0; white-space: nowrap; }
.mass input { width: 68px; }

.wahl { display: flex; gap: 6px; align-items: center; margin: 3px 0; }
.wahl input { width: auto; margin: 0; }

/* Dateiliste mit Wahl der Ablageart je Datei. */
.dateizeile {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0; flex-wrap: wrap;
}
.dateizeile .name { flex: 1; min-width: 200px; }
.dateizeile .art { display: flex; gap: 12px; align-items: center; }
.dateizeile .art label { margin: 0; white-space: nowrap; font-size: 12px; }
.dateizeile .art input { width: auto; margin: 0; }
.dateizeile .art label.aus { color: GrayText; }

button {
  padding: 5px 14px;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: ButtonFace;
  color: ButtonText;
  cursor: pointer;
}
button.haupt {
  background: var(--gruen); color: #fff; border-color: var(--gruen);
}
button:disabled { opacity: .5; cursor: default; }

.fuss {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: auto;
}

.liste {
  border: 1px solid var(--rand);
  border-radius: 3px;
  overflow: auto;
  background: Field;
  flex: 1;
  min-height: 80px;
}

table {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th, td { padding: 3px 8px; text-align: left; white-space: nowrap; }
th {
  position: sticky; top: 0;
  background: var(--hell);
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
}
td.zahl, th.zahl { text-align: right; }
tr.gewaehlt { background: SelectedItem; color: SelectedItemText; }
tbody tr { cursor: default; }

.hinweis { color: GrayText; font-size: 12px; }
.fehler { color: #b32; }
.trefferHervor { background: color-mix(in srgb, Mark 60%, transparent); }

.wachsen {
  flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0;
}

/* --------------------------------------------------- Zweispaltig */

/* KEIN flex-wrap.
   Mit Umbruch bemisst sich die Hoehe einer Flexzeile nach ihrem INHALT,
   nicht nach dem Behaelter - die Spalten wachsen dann, statt sich zu
   stauchen, und die Liste laeuft wieder aus dem Fenster.
   Der urspruengliche Dialog hatte genau deshalb keinen Umbruch. Das
   Fenster ist ohnehin 980 px breit; zwei Spalten zu 340 px passen
   immer. */
.spalten {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* KEIN fieldset für wachsende Bereiche.
   Ein fieldset taugt nicht als Flex-Behälter: Browser behandeln seinen
   inneren anonymen Kasten gesondert, height:100% löst sich darin nicht
   verlässlich auf, und eine Liste darin wächst über den Rahmen hinaus.
   Ein gewöhnliches Element verhält sich wie erwartet.
   Der einzige sichtbare Unterschied: Die Überschrift steht innen statt
   auf dem Rahmen. */
.kasten {
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 10px;
  /* Grundbreite 0 statt 340 px: Bei nowrap wuerde eine Grundbreite die
     Spalten ueber das Fenster hinausschieben. Die Aufteilung ergibt
     sich aus flex-grow zu gleichen Teilen. */
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  min-width: 0;
}
.kasten > h2 {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 4px;
}

/* Die Liste füllt, was nach den festen Elementen übrig bleibt, und
   blättert selbst. Genau das war das Ziel - es scheiterte bisher am
   fieldset, nicht an der Vorgehensweise. */
.kasten .liste {
  flex: 1;
  min-height: 80px;
}