diff --git a/app/static/css/editor.css b/app/static/css/editor.css
index aac1850..4b1c951 100644
--- a/app/static/css/editor.css
+++ b/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;
}
\ No newline at end of file
diff --git a/app/static/css/themes/FK_dark_theme.css b/app/static/css/themes/FK_dark_theme.css
index 7936096..acd62c4 100644
--- a/app/static/css/themes/FK_dark_theme.css
+++ b/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;
diff --git a/app/static/css/themes/Tituya_v43_theme.css b/app/static/css/themes/Tituya_v43_theme.css
index 571176c..0d75a56 100644
--- a/app/static/css/themes/Tituya_v43_theme.css
+++ b/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 {
diff --git a/app/static/css/themes/default_theme.css b/app/static/css/themes/default_theme.css
index 404e517..0b2d169 100644
--- a/app/static/css/themes/default_theme.css
+++ b/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 {
diff --git a/app/static/less/editor.less b/app/static/less/editor.less
index f5a9f82..b9593ea 100644
--- a/app/static/less/editor.less
+++ b/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;
}
diff --git a/app/templates/widgets/editor.html b/app/templates/widgets/editor.html
index c95708e..a0363cf 100644
--- a/app/templates/widgets/editor.html
+++ b/app/templates/widgets/editor.html
@@ -112,6 +112,8 @@