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 @@ + +