Improve IME sample styling

Samples/basic/ime/data/ime.rml

@@ -4,45 +4,92 @@
 		<title>IME</title>
 		<style>
 			body {
-				width: 500dp;
-				height: 500dp;
+				width: 700dp;
+				height: 600dp;
 				max-width: 100%;
 				max-height: 100%;
-				padding: 10dp 15dp;
+				padding: 20dp;
 				box-sizing: border-box;
 				margin: auto;
-				background-color: white;
-				color: black;
+				background-color: #f0f0f0;
+				color: #333;
 				font-family: LatoLatin;
-				font-weight: normal;
-				font-style: normal;
 				font-size: 15dp;
 				overflow: auto;
+				border-radius: 15dp;
 			}
 
 			h1 {
 				font-size: 2em;
-				margin-bottom: .5em;
-				font-weight: bold;
+				color: #444;
+				text-align: center;
+				padding-bottom: 20dp;
 			}
 
 			p {
-				margin-bottom: .6em;
+				font-size: 1em;
+				line-height: 1.4;
+				margin-bottom: 10dp;
 			}
 
-			label {
+			.shortcut {
+				font-family: rmlui-debugger-font;
+				font-size: 0.95em;
+				padding: 3dp 3dp 0dp;
+				background: #e9e9e9;
+				border: 1dp #e0e0e0;
+			}
+
+			form {
 				display: block;
-				margin-bottom: 2dp;
+				background-color: #fff;
+				padding: 20dp;
+				margin-top: 15dp;
+				border-radius: 5dp;
 			}
 
-			input[type="text"], textarea {
+			label {
+				font-weight: bold;
+			}
+
+			input.text, textarea {
+				box-sizing: border-box;
 				width: 100%;
-				border: 1px gray;
-				margin-bottom: 10dp;
+				padding: 10dp;
+				border: 1dp #bbb;
+				border-radius: 3dp;
+				margin-top: 5dp;
+				margin-bottom: 20dp;
+				font-size: 1.1em;
+				line-height: 1.4;
+				cursor: text;
+			}
+
+			input.text:focus-visible, textarea:focus-visible {
+				border-color: #666;
+			}
+
+			textarea {
+				margin-bottom: 0dp;
 			}
 
 			scrollbarvertical {
-				width: 0;
+				width: 12dp;
+				cursor: arrow;
+				margin-right: -1dp;
+				padding-right: 1dp;
+			}
+
+			scrollbarvertical slidertrack {
+				background-color: #f0f0f0;
+			}
+
+			scrollbarvertical sliderbar {
+				background-color: #666;
+			}
+
+			textarea scrollbarvertical {
+				width: 10dp;
 			}
 		</style>
 	</head>
@@ -52,14 +99,14 @@
 			available on a standard QWERTY keyboard. This is crucial for languages using a writing system different
 			from Latin, such as Japanese, Chinese, Vietnamese, and others. You must add the language in the system
 			options to use such a keyboard.</p>
-		<p>IME is also used for emojis or clipboard history (on Windows).</p>
+		<p>IME is also used for emojis (<span class="shortcut">Win + .</span>) and the clipboard history (<span class="shortcut">Win + V</span>) on Windows.</p>
 
 		<form>
 			<label for="text">Input text</label>
 			<input id="text" name="text" type="text" maxlength=100 value="😁" />
 
 			<label for="text_area">Type multi-line text</label>
-			<textarea id="text_area" name="text_area" rows=10>English: Hello, how are you?
+			<textarea id="text_area" name="text_area" rows=8>English: Hello, how are you?
 Japanese: こんにちは、お元気ですか？
 Korean: 안녕하세요, 어떻게 지내세요?
 Chinese (Simplified): 你好，你好吗？