Customization of the character sheet header

- Use of flexboxes
- New division of the components
- Logo changed

source/module/sheets/M5CharacterSheet.ts

@@ -8,7 +8,7 @@ export default class M5CharacterSheet extends ActorSheet {
 	static get defaultOptions() {
 		return mergeObject(super.defaultOptions, {
 			template: "systems/midgard5/templates/sheets/character/main.hbs",
-			width: 1200,
+			width: 1000,
 			height: 800,
 			classes: ["midgard5", "sheet", "character"],
 			tabs: [{ navSelector: ".sheet-navigation", contentSelector: ".sheet-content", initial: "base_values" }],

source/style/Character-sheet.less

@@ -9,8 +9,28 @@
 		flex-wrap: wrap
 	}
 
+	.flexcolumn {
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-1{
+		flex: 100%;
+		flex-wrap: wrap;
+	}
+
 	.flexcolumn-2 {
 		flex: 50%;
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-4 {
+		flex: 25%;
+		flex-wrap: wrap;
+	}
+
+	.flexcolumn-5 {
+		flex: 20%;
+		flex-wrap: wrap;
 	}
 
 	.flexpart {
@@ -46,6 +66,15 @@
 		color: white;
 	}
 
+	.profile-img {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		height: 100%;
+		width: auto;
+		border: 0px solid black;
+	}
+
 	.sheet.character {
 		form {
 			display: flex;
@@ -62,12 +91,6 @@
 			}
 		}
 
-		.profile-img {
-			max-width: 128px;
-			height: 128px;
-			border: 0px solid black;
-		}
-
 		.description {
 			flex: 0 0 100%;
 			margin: 0;
@@ -100,6 +123,13 @@
 	table {
 		background-color: beige;
 		border: 0px solid transparent;
+		&.bordered{
+			border-collapse: separate;
+			border: 2px solid black;
+			border-radius: 10px;
+			font-size: larger;
+			font-weight: bolder;
+		} 	
 	}
 
 	td,
@@ -146,6 +176,10 @@
 		border: 0px solid transparent;
 	}
 
+	input {
+		border: 0px solid black;
+	}
+
 	input.skill {
 		width: 5rem;
 	}