Implement the description editing (closes #150)

styles/v3/elements/text-input.scss

@@ -11,11 +11,11 @@
 	font-size: inherit;
 
 	&:hover {
-		@include material.elevate(6);
+		@include material.elevate(4);
 	}
 
 	&:focus-visible {
-		@include material.elevate(8);
+		@include material.elevate(6);
 	}
 
 	&.h1 {

styles/v3/elements/textarea.scss

@@ -0,0 +1,24 @@
+@use "../mixins/material" as material;
+
+.dotdungeon.style-v3 > .window-content textarea {
+	outline: none;
+	border: none;
+	@include material.elevate(3);
+	color: white;
+	transition: all 200ms ease-in-out;
+	font-family: inherit;
+	font-size: 0.9rem;
+
+	&:hover {
+		@include material.elevate(4);
+	}
+
+	&:focus-visible {
+		@include material.elevate(6);
+	}
+
+	&.no-resize {
+		@extend textarea;
+		resize: none;
+	}
+}

styles/v3/index.scss

@@ -5,6 +5,7 @@
 /* Element-Styling */
 @use "./elements/button.scss";
 @use "./elements/text-input.scss";
+@use "./elements/textarea.scss";
 @use "./elements/headers.scss";
 @use "./elements/hr.scss";
 @use "./elements/icons.scss";

templates/items/untyped/v2/tabs/general.v2.untyped.hbs

@@ -2,10 +2,16 @@
 	<div class="photo panel" style="background: yellowgreen"></div>
 	{{#if meta.isEditable}}
 		<input type="text" name="name" class="name panel h1" value="{{item.name}}">
+		<textarea
+			name="system.description"
+			class="description panel no-resize"
+		>{{system.description}}</textarea>
 	{{else}}
 		<h1 class="name panel--row">
 			{{item.name}}
 		</h1>
-	{{/if}}
-	<div class="description panel"></div>
+		<div class="description panel">
+			{{system.description}}
+		</div>
+	{{/if}}
 </div>