Tightened existing markdown editor styles

resources/icons/image.svg

@@ -1,4 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"/></svg>
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
-</svg>

resources/sass/_forms.scss

@@ -64,14 +64,6 @@
     flex: 1;
     position: relative;
   }
-  .markdown-editor-wrap {
-    display: flex;
-    flex-direction: column;
-    border: 1px solid #DDD;
-    @include lightDark(border-color, #ddd, #000);
-    width: 50%;
-    max-width: 50%;
-  }
   &.fullscreen {
     position: fixed;
     top: 0;
@@ -81,6 +73,21 @@
   }
 }
 
+.markdown-editor-wrap {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid #DDD;
+  border-bottom: 1px solid #DDD;
+  @include lightDark(border-color, #ddd, #000);
+  width: 50%;
+  max-width: 50%;
+}
+
+.markdown-editor-wrap + .markdown-editor-wrap {
+  border-inline-start: 1px solid;
+  @include lightDark(border-color, #ddd, #000);
+}
+
 @include smaller-than($m) {
   #markdown-editor {
     flex-direction: column;
@@ -98,7 +105,7 @@
   }
   .editor-toolbar-label {
     float: none !important;
-    border-bottom: 1px solid #DDD;
+    @include lightDark(border-color, #DDD, #555);
     display: block;
   }
   .markdown-editor-wrap:not(.active) .editor-toolbar + div,
@@ -113,10 +120,6 @@
   }
 }
 
-.markdown-display {
-  margin-inline-start: -1px;
-}
-
 .markdown-editor-display {
   background-color: #fff;
   body {
@@ -138,8 +141,8 @@ html.markdown-editor-display.dark-mode {
 }
 
 .editor-toolbar {
+  height: 32px;
   width: 100%;
-  padding: $-xs $-m;
   font-size: 11px;
   line-height: 1.6;
   border-bottom: 1px solid #DDD;
@@ -147,11 +150,6 @@ html.markdown-editor-display.dark-mode {
   @include lightDark(background-color, #eee, #111);
   @include lightDark(border-color, #ddd, #000);
   flex: none;
-  &:after {
-    content: '';
-    display: block;
-    clear: both;
-  }
   @include whenDark {
     button {
       color: #AAA;
@@ -159,6 +157,20 @@ html.markdown-editor-display.dark-mode {
   }
 }
 
+.editor-toolbar .buttons button {
+  font-size: .9rem;
+  width: 2rem;
+  text-align: center;
+  border-left: 1px solid;
+  @include lightDark(border-color, #DDD, #555);
+  svg {
+    margin-inline-end: 0;
+  }
+  &:hover {
+    @include lightDark(background-color, #DDD, #222);
+  }
+}
+
 
 label {
   @include lightDark(color, #666, #ddd);

resources/sass/_layout.scss

@@ -198,6 +198,9 @@ body.flexbox {
 .items-center {
   align-items: center;
 }
+.items-stretch {
+  align-items: stretch;
+}
 
 /**
  * Min width utilities

resources/sass/_text.scss

@@ -5,7 +5,7 @@
 body, button, input, select, label, textarea {
   font-family: $text;
 }
-.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
+.Codemirror, pre, #markdown-editor-input, .text-mono, .code-base {
   font-family: $mono;
 }
 

resources/views/pages/parts/markdown-editor.blade.php

@@ -6,18 +6,17 @@
      class="flex-fill flex code-fill">
 
     <div class="markdown-editor-wrap active">
-        <div class="editor-toolbar">
+        <div class="editor-toolbar flex-container-row items-stretch justify-space-between">
-            <span class="float left editor-toolbar-label">{{ trans('entities.pages_md_editor') }}</span>
+            <div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
-            <div class="float right buttons">
+                <span>{{ trans('entities.pages_md_editor') }}</span>
+            </div>
+            <div class="buttons flex-container-row items-stretch">
                 @if(config('services.drawio'))
-                    <button class="text-button" type="button" data-action="insertDrawing">@icon('drawing'){{ trans('entities.pages_md_insert_drawing') }}</button>
+                    <button class="text-button" type="button" data-action="insertDrawing" title="{{ trans('entities.pages_md_insert_drawing') }}">@icon('drawing')</button>
-                    <span class="mx-xs text-muted">|</span>
                 @endif
-                <button class="text-button" type="button" data-action="insertImage">@icon('image'){{ trans('entities.pages_md_insert_image') }}</button>
+                <button class="text-button" type="button" data-action="insertImage" title="{{ trans('entities.pages_md_insert_image') }}">@icon('image')</button>
-                <span class="mx-xs text-muted">|</span>
+                <button class="text-button" type="button" data-action="insertLink" title="{{ trans('entities.pages_md_insert_link') }}">@icon('link')</button>
-                <button class="text-button" type="button" data-action="insertLink">@icon('link'){{ trans('entities.pages_md_insert_link') }}</button>
+                <button class="text-button" type="button" data-action="fullscreen" title="{{ trans('common.fullscreen') }}">@icon('fullscreen')</button>
-                <span class="mx-xs text-muted">|</span>
-                <button class="text-button" type="button" data-action="fullscreen">@icon('fullscreen'){{ trans('common.fullscreen') }}</button>
             </div>
         </div>
 
@@ -33,7 +32,7 @@
 
     <div class="markdown-editor-wrap">
         <div class="editor-toolbar">
-            <div class="editor-toolbar-label">{{ trans('entities.pages_md_preview') }}</div>
+            <div class="editor-toolbar-label text-mono px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
         </div>
         <iframe src="about:blank"
                 refs="markdown-editor@display"