unschön
This commit is contained in:
@@ -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,44 +83,92 @@
|
||||
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 */
|
||||
}
|
||||
|
||||
.bottom {
|
||||
#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 */
|
||||
}
|
||||
|
||||
#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 {
|
||||
@@ -74,3 +176,12 @@
|
||||
padding: 8px;
|
||||
text-align: center; /* Beispiel für Textzentrierung */
|
||||
}
|
||||
|
||||
colgroup col {
|
||||
background-color: var(--bg); /* Hintergrundfarbe als Beispiel */
|
||||
}
|
||||
|
||||
table th, table td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
<div class="container">
|
||||
<div id="bereich-a">
|
||||
<div class="top">
|
||||
<div>Formular 1</div> <!-- Entspricht der Breite der ersten 4 unteren Spalten -->
|
||||
<div>Formular 2</div>
|
||||
<div>Formular 3</div>
|
||||
<div>Formular 4</div>
|
||||
<input type="text" placeholder="A 1" />
|
||||
<input type="text" placeholder="B 2" />
|
||||
<input type="text" placeholder="C 3" />
|
||||
<input type="text" placeholder="D 4" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<table>
|
||||
@@ -65,10 +65,69 @@
|
||||
</div>
|
||||
<div id="bereich-b">
|
||||
<div class="top">
|
||||
<div>Formular 1</div>
|
||||
<input type="text" placeholder="E 5" />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div>Teil 1</div>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col style="width: 100%">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Spalte 1</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
<tr><td>Teil 1</td></tr>
|
||||
<tr><td>Teil 2</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user