Michael Schimmel
117 lines
4.3 KiB
CSS
117 lines
4.3 KiB
CSS
/* style.css */
|
|
|
|
/* Global box-sizing für konsistente Größenberechnung */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Allgemeine Styles für html und body, um den gesamten Viewport zu füllen */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%; /* Stellt sicher, dass html und body die volle Viewport-Höhe einnehmen */
|
|
font-family: sans-serif;
|
|
overflow: hidden; /* Verhindert Scrollbalken auf der Hauptebene des Bodys */
|
|
background-color: #F8F8F8; /* Optionale Hintergrundfarbe für den gesamten Body, falls gewünscht */
|
|
}
|
|
|
|
/* Body als Flex-Container, um Inhalte vertikal zu stapeln */
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Optional: Style für die Überschrift im Output-Bereich und allgemeine Überschriften/Paragraphen */
|
|
h1, h2, p {
|
|
margin: 0;
|
|
padding: 10px 0; /* Beispiel: Etwas vertikale Polsterung, keine horizontalen Ränder */
|
|
text-align: center; /* Überschriften zentrieren */
|
|
}
|
|
|
|
/* Styling für die Button-Leiste */
|
|
.button-bar {
|
|
margin-bottom: 0; /* Rand unten entfernen */
|
|
padding: 10px 0 0 0; /* Polsterung anpassen, um oberen Rand zu entfernen */
|
|
text-align: center; /* Buttons zentrieren */
|
|
}
|
|
|
|
.button-bar button {
|
|
margin: 0 5px; /* Kleiner Abstand zwischen den Buttons */
|
|
padding: 8px 15px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #e0e0e0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button-bar button:hover {
|
|
background-color: #d0d0d0;
|
|
}
|
|
|
|
/* Haupt-Container für Blockly-Workspace und Output-Bereich */
|
|
#container {
|
|
display: flex; /* Machen Sie den Container zu einem Flex-Container, um die Kinder nebeneinander anzuordnen */
|
|
flex-grow: 1; /* Lässt den Container den restlichen vertikalen Platz füllen */
|
|
padding: 0; /* Polsterung um den Inhalt herum vollständig entfernen */
|
|
box-sizing: border-box; /* Stellt sicher, dass Padding in der Größe enthalten ist */
|
|
}
|
|
|
|
/* Blockly-Workspace Bereich */
|
|
#blocklyDiv {
|
|
flex-grow: 1; /* Lässt BlocklyDiv den maximalen horizontalen Platz einnehmen */
|
|
min-width: 200px; /* Mindestbreite für Blockly, damit es nicht zu klein wird */
|
|
height: 100%; /* Füllt die Höhe des #container */
|
|
background-color: #FFF8E1; /* Sehr helles Beige für den Blockly-Hintergrund des Containers */
|
|
margin: 0; /* Rand entfernen */
|
|
}
|
|
|
|
/* WICHTIG: Regel für den Blockly SVG-Hintergrund */
|
|
#blocklyDiv .blocklySvg {
|
|
background-color: #FFF8E1; /* Hintergrundfarbe für das von Blockly generierte SVG-Element */
|
|
}
|
|
|
|
/* Optional: Sicherstellen, dass Blockly-Scrollbalken über anderen Elementen liegen */
|
|
#blocklyDiv .blocklyScrollbarHorizontal,
|
|
#blocklyDiv .blocklyScrollbarVertical {
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Flex-Container für Splitter und Output-Bereich */
|
|
#outputContainer {
|
|
display: none; /* Standardmäßig ausgeblendet, wird bei Bedarf von JS eingeblendet */
|
|
flex-shrink: 0; /* Verhindert, dass dieser Container schrumpft, wenn nicht im WebView */
|
|
flex-basis: auto; /* Initial flexible Basis */
|
|
}
|
|
|
|
/* Splitter-Element */
|
|
#splitter {
|
|
width: 8px; /* Breite des Splitters */
|
|
background-color: #ccc; /* Farbe des Splitters */
|
|
cursor: ew-resize; /* Zeigt den "Ost-West-Größenänderung"-Cursor */
|
|
flex-shrink: 0; /* Verhindert, dass der Splitter schrumpft */
|
|
margin-left: 0; /* Abstand zum Blockly-Bereich entfernen */
|
|
margin-right: 0; /* Abstand zum Output-Bereich entfernen */
|
|
}
|
|
|
|
/* Output-Bereich (mit Code-Textarea) */
|
|
#outputArea {
|
|
display: flex;
|
|
flex-direction: column; /* Überschrift und Textarea vertikal stapeln */
|
|
min-width: 200px; /* Mindestbreite für die OutputArea */
|
|
width: 500px; /* Startbreite für den Output-Bereich, wird von JS überschrieben */
|
|
box-sizing: border-box;
|
|
margin: 0; /* Rand entfernen */
|
|
}
|
|
|
|
/* Textarea für den generierten Code */
|
|
#codeOutput {
|
|
flex-grow: 1; /* Lässt die Textarea die verbleibende Höhe in outputArea füllen */
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 14px;
|
|
white-space: pre-wrap;
|
|
border: none; /* Deaktiviert den Rand der Textarea */
|
|
resize: none; /* Deaktiviert die eingebaute Resize-Funktion der Textarea */
|
|
overflow: auto; /* Notwendig, damit Scrollbalken erscheinen, wenn der Inhalt die Größe überschreitet */
|
|
padding: 10px; /* Optional: Innenabstand für den Text, damit er nicht direkt am Rand klebt */
|
|
}
|