editor: improve layout and style of buttons

app/static/css/editor.css

@@ -1,11 +1,20 @@
 .editor .btn-group {
   display: flex;
   justify-content: space-between;
-  margin: 5px;
+  margin: 0 0 8px 0;
+}
+.editor .btn-group .filler {
+  flex-grow: 1;
 }
 .editor .btn-group button {
+  width: 32px;
+  height: 32px;
+  padding: 4px;
   background-color: var(--background);
 }
+.editor .btn-group button:hover {
+  background: var(--background-hover);
+}
 .editor .btn-group button > svg {
   width: 25px;
 }
@@ -13,8 +22,12 @@
 .editor .btn-group button > svg > rect {
   fill: var(--icons);
 }
+.editor .btn-group button,
+.editor .btn-group .separator {
+  margin: 0 8px 0 0;
+}
 .editor textarea {
-  min-height: 10rem;
+  min-height: 15rem;
 }
 .separator {
   display: inline-block;
@@ -23,5 +36,4 @@
   border-right: 1px solid #ffffff;
   color: transparent;
   text-indent: -10px;
-  margin: 0 6px;
 }

app/static/css/themes/FK_dark_theme.css

@@ -43,10 +43,12 @@
 }
 
 .editor button {
-    --background: #ffffff;
-    --text: #000000;
-    --border: 1px solid rgba(0, 0, 0, 0);
-    --border-focused: 1px solid rgba(0, 0, 0, .5);
+    --background: #1d2326;
+    --text: #ffffff;
+    --background-hover: #262c2f;
+}
+.editor svg {
+    --icons: #eeeeee;
 }
 
 #light-menu {
@@ -127,10 +129,6 @@ table tr:nth-child(odd) {
 table.codehilitetable {
     --background: #263238;
 }
-.editor svg, .editor button {
-    --icons: #fff;
-	--background: #0d1215;
-}
 
 div.editor-toolbar, div.CodeMirror {
     --border: #404040;

app/static/css/themes/Tituya_v43_theme.css

@@ -38,10 +38,9 @@
 }
 
 .editor button {
-    --background: #ffffff;
+    --background: #eee;
     --text: #030303;
-    --border: 1px solid rgba(0, 0, 0, 0);
-    --border-focused: 1px solid rgba(0, 0, 0, .5);
+    --background-hover: #ddd;
 }
 
 #light-menu {

app/static/css/themes/default_theme.css

@@ -46,10 +46,9 @@ table th {
 }
 
 .editor button {
-    --background: #fff;
+    --background: #eee;
     --text: #000;
-    --border: 1px solid rgba(0, 0, 0, 0);
-    --border-focused: 1px solid rgba(0, 0, 0, .5);
+    --background-hover: #ddd;
 }
 
 #light-menu {

app/static/less/editor.less

@@ -1,14 +1,25 @@
 @import "vars";
 
 .editor {
-	& .btn-group {
+	.btn-group {
 		display: flex;
 		justify-content: space-between;
-		margin: 5px;
+		margin: 0 0 8px 0;
 
-		& button {
+		.filler {
+			flex-grow: 1;
+		}
+		button {
+			width: 32px;
+			height: 32px;
+			/* This centers the 24x24 SVG in the button */
+			padding: 4px;
 			background-color: var(--background);
 
+			&:hover {
+				background: var(--background-hover);
+			}
+
 			& > svg {
 				width: 25px;
 
@@ -17,10 +28,14 @@
 				}
 			}
 		}
+
+		button, .separator {
+			margin: 0 8px 0 0;
+		}
 	}
 
-	& textarea {
-		min-height: 10rem;
+	textarea {
+		min-height: 15rem;
 	}
 }
 
@@ -32,5 +47,4 @@
 	border-right: 1px solid #fff;
 	color: transparent;
 	text-indent: -10px;
-	margin: 0 6px;
 }

app/templates/widgets/editor.html

@@ -112,6 +112,8 @@
 					<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
 				</svg>
 			</button>
+
+			<div class="filler"></div>
 		</div>
 
 		<!-- Field & desc -->