diff --git a/static/css/main.css b/static/css/main.css index c1a51c5..8659079 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1,3 +1,55 @@ +/* ---------- Local Web‑Fonts ---------- */ +@font-face { + font-family: "Fira Code"; + src: url("/static/fonts/FiraCode-VariableFont.woff2") format("woff2"); + font-weight: 400 700; + font-style: normal; + font-display: swap; + } + @font-face { + font-family: "Inter"; + src: url("/static/fonts/InterVariable.woff2") format("woff2"); + font-weight: 100 900; + font-style: normal; + font-display: swap; + } + + /* ---------- Farbpalette ---------- */ +:root { + /* Light theme */ + --bg: #f5f7fa; + --bg-alt: #ffffff; + --card-bg: #ffffff; + --text: #000000; + --text-muted: #1f2933; + --accent: #2563eb; /* Indigo‑600 */ + --accent-light: #3b82f6; /* Indigo‑500 */ + --code-bg: #f1f5f9; + --code-border: #e2e8f0; + --radius: 0.75rem; + --gap: 2rem; + --shadow: 0 4px 16px rgba(0,0,0,.08); + font-size: 16px; + font-family: "Inter", system-ui, sans-serif; + color-scheme: light; + } + + /* Dark mode (optional) */ + @media (prefers-color-scheme: dark) { + :root { + --bg: #0d1117; + --bg-alt: #161b22; + --card-bg: #161b22; + --text: #ffffff; + --text-muted: #e4e8ec; + --accent: #3b82f6; + --accent-light:#60a5fa; + --code-bg: #1e242c; + --code-border: #30363d; + --shadow: 0 4px 16px rgba(0,0,0,.32); + } + } + * { margin: 0; padding: 0; @@ -7,6 +59,8 @@ body, html { height: 100%; width: 100%; + background: var(--bg); + color: var(--text); } .container { @@ -29,48 +83,105 @@ height: 100%; } - .top { - height: 80px; + #bereich-a .top { + margin-top: 10px; + height: 35px; display: grid; - grid-template-columns: 50% 5% 7.5% 10%; + width: 100%; + grid-template-columns: 68.96% 6.92% 10.34% 13.79%; } - .top > div { - background-color: #ccc; /* Beispiel für Formularfelder */ + #bereich-a .top > div { + background-color: var(--bg); /* Beispiel für Formularfelder */ + } + + #bereich-a .top input { + width: 100%; /* Das Textfeld nimmt die gesamte Breite der Spalte ein */ + padding: 8px; + border: 1px solid #ddd; + border-radius: var(--radius); /* Abgerundete Ecken */ + background-color: #fff; + font-size: 14px; + color: var(--text); + transition: all 0.3s ease; /* Für weiche Übergänge */ } - .bottom { + #bereich-a .top input::placeholder { + color: #aaa; /* Platzhalter in einer helleren Farbe */ + font-style: italic; + } + + #bereich-a .top input:focus { + border-color: var(--accent); /* Die Rahmenfarbe beim Fokus */ + outline: none; /* Entfernt den Standard-Fokusrahmen */ + } + + #bereich-a .bottom { flex-grow: 1; - display: grid; - grid-template-columns: 27.5% 7.5% 7.5% 7.5% 5% 7.5% 10%; - } - - .bottom > div { - background-color: #ddd; /* Beispiel für die Unterteile */ + background-color: var(--bg-alt); /* Beispiel für unteren Bereich */ + padding: 0px; + overflow: hidden; /* Verhindert, dass das untere Element aus dem Container herausragt */ } #bereich-b .top { - height: 80px; + margin-top: 10px; + height: 35px; display: grid; + width: 100%; grid-template-columns: 100%; } #bereich-b .top > div { - background-color: #bbb; /* Beispiel für Formularfelder */ + background-color: var(--bg); /* Beispiel für Formularfelder */ + } + + #bereich-b .top input { + width: 100%; /* Das Textfeld nimmt die gesamte Breite der Spalte ein */ + padding: 8px; + border: 1px solid #ddd; + border-radius: var(--radius); /* Abgerundete Ecken */ + background-color: #fff; + font-size: 14px; + color: var(--text); + transition: all 0.3s ease; /* Für weiche Übergänge */ + } + + #bereich-b .top input::placeholder { + color: #aaa; /* Platzhalter in einer helleren Farbe */ + font-style: italic; + } + + #bereich-b .top input:focus { + border-color: var(--accent); /* Die Rahmenfarbe beim Fokus */ + outline: none; /* Entfernt den Standard-Fokusrahmen */ } #bereich-b .bottom { flex-grow: 1; - background-color: #f5f5f5; /* Beispiel für unteren Bereich */ + background-color: var(--bg-alt); /* Beispiel für unteren Bereich */ + padding: 0px; + overflow-y: auto; /* Ermöglicht vertikales Scrollen im unteren Bereich von Bereich B */ + /*margin-top: 10px;*/ /* Abstand zwischen Top und Bottom */ } - + + /* Tabelle */ table { width: 100%; border-collapse: collapse; /* Für eine saubere Darstellung */ + table-layout: fixed; /* Die Breiten der Spalten werden strikt angewendet */ } th, td { border: 1px solid #ddd; /* Beispiel für einen Rahmen */ padding: 8px; text-align: center; /* Beispiel für Textzentrierung */ - } \ No newline at end of file + } + + colgroup col { + background-color: var(--bg); /* Hintergrundfarbe als Beispiel */ + } + + table th, table td { + text-align: left; + } + \ No newline at end of file diff --git a/static/templates/base.html b/static/templates/base.html index cd20ad0..f5727f2 100644 --- a/static/templates/base.html +++ b/static/templates/base.html @@ -1,77 +1,136 @@ {{ define "layout" }} - - - - - HiKoS - - - - -
-
-
-
Formular 1
-
Formular 2
-
Formular 3
-
Formular 4
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Spalte 1Spalte 2Spalte 3Spalte 4Spalte 5Spalte 6Spalte 7
Teil 1Teil 2Teil 3Teil 4Teil 5Teil 6Teil 7
Teil 8Teil 9Teil 10Teil 11Teil 12Teil 13Teil 14
-
-
-
-
-
Formular 1
-
-
-
Teil 1
-
-
-
- + + + + + HiKoS + + + + +
+
+
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Spalte 1Spalte 2Spalte 3Spalte 4Spalte 5Spalte 6Spalte 7
Teil 1Teil 2Teil 3Teil 4Teil 5Teil 6Teil 7
Teil 8Teil 9Teil 10Teil 11Teil 12Teil 13Teil 14
+
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Spalte 1
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
Teil 1
Teil 2
+
+
+
+ -{{ end }} \ No newline at end of file +{{ end }}