bg-color in details, padding-y tabs, messages align table and preview area

public/css/Studentenverwaltung.css

@@ -189,6 +189,7 @@ html.fs_huge {
 /* slim begin */
 .stv .form-label {
 	margin-bottom: .15rem;
+	font-weight: bold;
 }
 
 .stv .form-control,
@@ -196,11 +197,10 @@ html.fs_huge {
 .stv .input-group-text {
 	padding-top: .15rem;
 	padding-bottom: .15rem;
-	line-height: 1.25;
 }
 
 :root {
-	--bs-body-line-height: 1.25;
+	--bs-body-line-height: 1.2;
 }
 
 .stv .tabulator-row .tabulator-cell,
@@ -214,12 +214,55 @@ html.fs_huge {
 }
 
 .stv .btn {
-	--bs-btn-padding-y: 0.15rem;
-	--bs-btn-line-height: 1.25;
+	--bs-btn-padding-y: 0.25rem;
+	--bs-btn-line-height: 1.2;
 }
 
 .stv .p-button.p-button-icon-only {
 	padding-top: 0;
 	padding-bottom: 0;
 }
+
+.stv .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+	padding: 0.25rem .5rem;
+}
+
+.stv .p-tabview .p-tabview-panels {
+	background-color: #e5eff5;
+}
+
+.stv .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+	background: #e5eff5;
+	border-color: #dee2e6 #dee2e6 #e5eff5 #dee2e6;
+}
+
+.stv-details-details-foto img {
+	max-height: 120px;
+}
+
+.stv .tabulator-row .tabulator-frozen,
+.stv .tabulator-row .tabulator-cell {
+	border-bottom: none;
+}
+
+/*
+.stv .p-treetable .p-treetable-thead > tr > th,
+.stv .p-treetable .p-treetable-tbody > tr {
+	background-color: #e5eff5;
+}
+
+.stv .p-treetable .p-treetable-tbody > tr.p-highlight {
+	background: #007bff;
+	color: #fff;
+}
+
+.stv .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+	background: #fff;
+	color: #212529;
+}
+
+.tabulator-row.tabulator-row-even .tabulator-cell {
+	background-color: #e5eff5;
+}
+*/
 /* slim ende */

public/js/components/Messages/Details/TableMessages.js

@@ -392,7 +392,7 @@ export default {
 
 			<div class="row">
 				<!--table-->
-				<div class="col-sm-6 pt-6">
+				<div class="col-sm-6 pt-1">
 					<core-filter-cmpt
 						ref="table"
 						:tabulator-options="tabulatorOptions"
@@ -408,9 +408,9 @@ export default {
 				</div>
 
 				<!--preview wysiwyg-window-->
-				<div class="col-sm-6 pt-6">
-				<br><br><br><br>
-					<div ref="preview">
+				<div class="col-sm-6 pt-5">
+					<div class="msg-preview-spacer pt-2" aria-hidden="true"></div>
+					<div ref="preview" class="bg-white">
 						<div v-html="previewBody" class="p-3 border rounded overflow-scroll twoColumns"></div>
 					</div>
 

public/js/components/Tabs.js

@@ -226,7 +226,7 @@ export default {
 				v-for="tab in tabs"
 				:key="tab.key"
 				:header="tab.title + ((tab.value.showSuffix && tab.value.suffix !== '') ? ' ' + tab.value.suffix : '')"
-				:pt="{headerAction:{class: 'p-2'}}"
+				:pt="{headerAction:{class: 'px-2 py-1'}}"
 			>
 				<keep-alive>
 					<component