Customization based on Obsidian Style Settings Plugin

src/main.ts

@@ -320,34 +320,41 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab {
 	display(): void {
 		const { containerEl } = this;
 
-		const plugins_pane = createFragment((frag) => {
+		const createPluginsPaneFragment = (): DocumentFragment => {
+			return createFragment((frag) => {
 				const em = frag.createEl('em');
 				const link = frag.createEl('a', { href: '#', text: 'Community plugins'});
 				link.onclick = () => {
 					this.app.setting.openTabById('community-plugins');
 				};
-				em.appendChild(link)
+				em.appendChild(link);
 			});
+		};
 
 		containerEl.empty();
 
 		new Setting(containerEl).setName('Annotations').setHeading();
 
 		const instructions = createFragment((frag) => {
-				frag.appendText('Please enter your personal annotations about the installed plugins directly in the ');
-				frag.appendChild(plugins_pane);
-				frag.appendText(' pane.');
-				});
+			const p = frag.createEl('p');
+			p.appendText('To add or edit your personal annotations for installed plugins, go to the ');
+			p.appendChild(createPluginsPaneFragment());
+			p.appendText(' pane and click over the ediable annotation field.');
+			frag.appendChild(p);
+		});
 
-		containerEl.appendChild(instructions);
+		// Append instructions right after the Annotations heading
+		const instructions_div = containerEl.createDiv();
+		instructions_div.classList.add('setting-item');
+		instructions_div.appendChild(instructions);
 
 		new Setting(containerEl).setName('Display').setHeading();
-		
+
 		new Setting(containerEl)
 			.setName('Hide empty annotations:')
 			.setDesc(createFragment((frag) => {
 				frag.appendText('If this option is enabled, only annotations set by the user will be shown. If you want to insert an annotation to a plugin for the first time, hover with the mouse over the chosen plugin in the ');
-				frag.appendChild(plugins_pane);
+				frag.appendChild(createPluginsPaneFragment());
 				frag.appendText(' pane. The annotation field will appear automatically.');
 			}))
 			.addToggle(toggle => toggle
@@ -357,7 +364,6 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab {
 					await this.plugin.debouncedSaveAnnotations();
 				}));
 
-
 		new Setting(containerEl)
 			.setName('Delete placeholder text when inserting a new annotation:')
 			.setDesc('If this option is enabled, the placeholder text will be deleted automatically when you start typing a new annotation. If disabled, the placeholder text will be selected for easier replacement. This is a minor customization.')

styles/styles.css

@@ -1,24 +1,35 @@
 /* styles.css */
 
 /* @settings
-
 name: Plugins Annotations stylesheet
 id: plugins-annotations-stylesheet
 settings:
-
-
+  -
+  	id: plugin-comment-font-size
+    title: Annotation Font Size
+    description: The font size of the annotation text.
+    type: variable-number
+    min: 6
+    max: 60
+    format: px
+  -
+  	id: plugin-comment-color
+    title: Annotations color
+    description: The color of the personal annotations.
+    type: variable-color
+    format: hex
 */
 
 /* Make sure the input field takes the full width of its parent */
 .plugin-comment {
 	width: 100%;
 	box-sizing: border-box; /* Ensure padding is included in the element's total width and height */
+	color: var(--plugin-comment-color,var(--text-muted));
 }
 
 .plugin-comment-annotation.plugin-comment-placeholder {
 	color: #CCCCCC; /* Standard placeholder color */
 	font-style: italic;
-	font-size: 20px;
 }
 
 .plugin-comment.plugin-comment-placeholder {