Style the framed editor (#3596)

* style the framed editor

this makes the framed editor look a bit less ugly 😎

* Update framed.js

* Update base.tid

* Update base.tid

Author: BurningTreeC

core/modules/editor/engines/framed.js

@@ -39,9 +39,11 @@ function FramedEngine(options) {
 	this.iframeDoc.close();
 	// Style the iframe
 	this.iframeNode.className = this.dummyTextArea.className;
+	this.iframeNode.style["border-radius"] = "2px";
 	this.iframeNode.style.border = "none";
 	this.iframeNode.style.padding = "0";
 	this.iframeNode.style.resize = "none";
+	this.iframeNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"background");
 	this.iframeDoc.body.style.margin = "0";
 	this.iframeDoc.body.style.padding = "0";
 	this.widget.domNodes.push(this.iframeNode);
@@ -92,6 +94,12 @@ FramedEngine.prototype.copyStyles = function() {
 	this.domNode.style.display = "block";
 	this.domNode.style.width = "100%";
 	this.domNode.style.margin = "0";
+	this.domNode.style.resize = "none";
+	this.domNode.style.border = "none";
+	this.domNode.style["border-radius"] = "2px";
+	this.domNode.style["padding-left"] = "0.5em";
+	this.domNode.style["padding-top"] = "0.3em";
+	this.domNode.style["background-color"] = this.widget.wiki.extractTiddlerDataItem(this.widget.wiki.getTiddlerText("$:/palette"),"background");
 	// In Chrome setting -webkit-text-fill-color overrides the placeholder text colour
 	this.domNode.style["-webkit-text-fill-color"] = "currentcolor";
 };

themes/tiddlywiki/snowwhite/base.tid

@@ -50,6 +50,10 @@ textarea.tc-edit-texteditor {
 	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
 }
 
+.tc-tiddler-frame.tc-tiddler-edit-frame iframe.tc-edit-texteditor {
+	<<box-shadow "1px 1px 5px rgba(0, 0, 0, 0.3)">>
+}
+
 canvas.tc-edit-bitmapeditor  {
 	<<box-shadow "2px 2px 5px rgba(0, 0, 0, 0.5)">>
 }

themes/tiddlywiki/vanilla/base.tid

@@ -1027,6 +1027,11 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
 }
 
+.tc-tiddler-frame.tc-tiddler-edit-frame iframe.tc-edit-texteditor {
+border-radius: 2px;
+background-color: <<colour tiddler-background>>;
+}
+
 .tc-tiddler-frame .tc-binary-warning {
 	width: 100%;
 	height: 5em;