🎨: Smaller buttons, smaller toolbar, smaller text

This should not be considered final, but we do plan to shrink the size of the entire UI slightly to match platform conventions.

internal_packages/attachments/stylesheets/attachments.less

@@ -16,8 +16,8 @@
     color: @text-color;
     background: @background-off-primary;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
-    padding: 13px @spacing-standard 13px @spacing-standard;
-    height:54px;
+    padding: 0 @spacing-standard;
+    height:46px;
   }
 
   &:hover {

internal_packages/composer/stylesheets/composer.less

@@ -10,12 +10,6 @@
 
 body.platform-win32 {
   .composer-inner-wrap {
-    .composer-action-bar-wrap {
-      .btn {
-        height: 30px;
-        padding-top: 1px;
-      }
-    }
     .composer-drop-cover {
       border-radius: 0;
     }
@@ -59,10 +53,6 @@ body.platform-win32 {
     background: transparent;
     border-bottom: 0;
 
-    .btn {
-      // Yes, 4px taller than in the rest of the app: https://phab.nylas.com/T2418
-      height:28px;
-    }
     .composer-action-bar-content {
       display:flex;
       margin: 0 auto;
@@ -93,7 +83,7 @@ body.platform-win32 {
     width: 100%;
     max-width: @compose-width;
     margin: 0 auto;
-    padding-top:@spacing-standard;
+    padding-top: @spacing-standard * 0.7;
   }
   .text-actions {
     text-align: right;
@@ -147,7 +137,7 @@ body.platform-win32 {
     border-bottom: 1px solid @border-color-divider;
     flex-shrink:0;
     color: @text-color-very-subtle;
-    padding: 16px 0 10px 0;
+    padding: 10px 0 10px 0;
 
     .collapsed-contact {
       padding-right: 0.25em;
@@ -164,8 +154,6 @@ body.platform-win32 {
       color: @text-color;
       padding-right: 12px;
       margin-left: 0;
-      padding-top: 6px;
-      padding-bottom: 6px;
     }
 
     .num-remaining-wrap {
@@ -314,11 +302,13 @@ body.platform-win32 {
   margin: 0 8+@spacing-standard;
   flex-shrink: 0;
   border-bottom: 1px solid @border-color-divider;
-  min-height: 49px;
+  min-height: 46px;
   color: @text-color;
 
   .button-dropdown {
     margin-left: 10px;
+    vertical-align: -webkit-baseline-middle;
+
     &:hover {
       .primary-item,
       .only-item {

internal_packages/message-list/stylesheets/message-list.less

@@ -155,7 +155,7 @@ body.platform-win32 {
        background: @text-color-subtle;
      }
      div + div {
-       margin-left: @padding-xs-horizontal;
+       margin-left: @padding-small-horizontal;
      }
   }
   .message-list-headers {
@@ -356,8 +356,6 @@ body.platform-win32 {
       transition: opacity 100ms, width 150ms;
       transition-delay: 50ms, 0ms;
       transition-timing-function: ease-in-out;
-      width: 99px;
-      height: 32px;
       opacity: 1;
       text-align: left;
     }
@@ -392,7 +390,7 @@ body.platform-win32 {
     }
 
     .message-time {
-      padding-top: 5px;
+      padding-top: 4px;
       z-index: 2; position: relative;
       display: inline-block;
       min-width: 125px;
@@ -479,13 +477,12 @@ body.platform-win32 {
       width: 100%;
       max-width: @message-max-width;
       margin: 0 auto;
-      padding: 20px @spacing-double;
+      padding: 12px @spacing-standard * 1.5;
     }
     .reply-text {
       display: inline-block;
+      vertical-align: middle;
       margin-left: 0.5em;
-      position: relative;
-      top: 2px;
     }
   }
 
@@ -535,7 +532,7 @@ body.platform-win32 {
 
     .collapsed-participants {
       width: 100%;
-      margin-top: -8px;
+      margin-top: -6px;
     }
   }
 

internal_packages/mode-switch/stylesheets/mode-switch.less

@@ -1,15 +1,14 @@
 @import 'ui-variables';
 
-.mode-toggle {
+.btn-toolbar.mode-toggle {
     z-index: 1000;
     position: relative;
-    padding-top:4px;
-    .content-mask {
+    img.content-mask {
       background-color: @text-color-subtle;
     }
 }
-.mode-toggle.mode-false {
-  .content-mask {
+.btn-toolbar.mode-toggle.mode-false {
+  img.content-mask {
     background-color: @component-active-color;
   }
 }

internal_packages/plugins/lib/package.cjsx

@@ -24,18 +24,18 @@ class Package extends React.Component
     if @props.package.installed
       if @props.package.category in ['user' ,'dev', 'example']
         if @props.package.enabled
-          actions.push <div className="btn btn-small" onClick={@_onDisablePackage}>Disable</div>
+          actions.push <div className="btn" onClick={@_onDisablePackage}>Disable</div>
         else
-          actions.push <div className="btn btn-small" onClick={@_onEnablePackage}>Enable</div>
+          actions.push <div className="btn" onClick={@_onEnablePackage}>Enable</div>
       if @props.package.category is 'user'
-        actions.push <div className="btn btn-small" onClick={@_onUninstallPackage}>Uninstall</div>
+        actions.push <div className="btn" onClick={@_onUninstallPackage}>Uninstall</div>
       if @props.package.category is 'dev'
-        actions.push <div className="btn btn-small" onClick={@_onShowPackage}>Show...</div>
+        actions.push <div className="btn" onClick={@_onShowPackage}>Show...</div>
 
     else if @props.package.installing
-      actions.push <div className="btn btn-small">Installing...</div>
+      actions.push <div className="btn">Installing...</div>
     else
-      actions.push <div className="btn btn-small" onClick={@_onInstallPackage}>Install</div>
+      actions.push <div className="btn" onClick={@_onInstallPackage}>Install</div>
 
     {name, description, title} = @props.package
 
@@ -43,7 +43,7 @@ class Package extends React.Component
       extras.push(
         <div className="padded update-info">
           A newer version is available: {@props.package.newerVersion}
-          <div className="btn btn-small btn-emphasis" onClick={@_onUpdatePackage}>Update</div>
+          <div className="btn btn-emphasis" onClick={@_onUpdatePackage}>Update</div>
         </div>
       )
 

internal_packages/preferences/lib/tabs/workspace-section.cjsx

@@ -85,7 +85,7 @@ class AppearanceModeSwitch extends React.Component
 
   render: ->
     hasChanges = @state.value isnt @props.config.get('core.workspace.mode')
-    applyChangesClass = "btn btn-small"
+    applyChangesClass = "btn"
     applyChangesClass += " btn-disabled" unless hasChanges
 
     <div className="appearance-mode-switch">

internal_packages/preferences/stylesheets/preferences-accounts.less

@@ -31,8 +31,9 @@
         }
 
         .btn-editable-list {
-          height: 35px;
-          width: 35px;
+          height: 29px;
+          width: 29px;
+          line-height: 29px;
           font-size: 1.3em;
         }
       }

internal_packages/preferences/stylesheets/preferences-mail-rules.less

@@ -74,13 +74,13 @@
           vertical-align: middle;
           .btn {
             padding: 0;
-            padding-top: 3px;
-            padding-bottom: 6px;
             border-radius: 100%;
             text-align: center;
             margin-left:10px;
             margin-top:1px;
             width:24px;
+            line-height: 24px;
+            height: 24px;
           }
         }
       }

internal_packages/search-bar/stylesheets/search-bar.less

@@ -7,21 +7,23 @@
   overflow: visible;
   z-index: 100;
   width:450px;
-  margin-top: (50px - 30px) / 2;
+  margin-top: (38px - 23px) / 2;
   margin-left: 12px;
   margin-right: 12px;
 
   .menu .header-container {
     padding:0;
-    height:30px;
+    height:23px;
     background-color: transparent;
     border:none;
 
     input {
-      padding-left: 30px;
+      padding-left: 26px;
       padding-right: 26px;
       width: 100%;
-      height: 30px;
+      height: 23px;
+      border: 0;
+      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
     }
     input.empty {
       text-align: left;
@@ -67,16 +69,23 @@
 
     &.search {
       position: absolute;
-      top: floor(40px - 16px)/2;
+      top: 8px;
       left: @padding-base-horizontal;
     }
 
     &.clear {
       position: absolute;
-      top: 4px;
+      top: 0px;
       right: 4px;
       color: @input-accessory-color;
       display: none;
     }
   }
 }
+
+body.is-blurred {
+  .search-bar .menu .header-container input {
+    background: none;
+    box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
+  }
+}

spec/n1-spec-reporter.coffee

@@ -40,7 +40,7 @@ class N1SpecReporter extends View
   @content: ->
     @div class: 'spec-reporter', =>
       @div class: 'padded pull-right', =>
-        @button outlet: 'reloadButton', class: 'btn btn-small reload-button', 'Reload Specs'
+        @button outlet: 'reloadButton', class: 'btn reload-button', 'Reload Specs'
       @div outlet: 'coreArea', class: 'symbol-area', =>
         @div outlet: 'coreHeader', class: 'symbol-header'
         @ul outlet: 'coreSummary', class: 'symbol-summary list-unstyled'

src/components/newsletter-signup.cjsx

@@ -69,7 +69,7 @@ class NewsletterSignup extends React.Component
     if @state.status is 'Pending'
       <RetinaImg name='inline-loading-spinner.gif' mode={RetinaImg.Mode.ContentDark} style={width:14, height:14}/>
     else if @state.status is 'Error'
-      <button onClick={@_onGetStatus} className="btn btn-small">Retry</button>
+      <button onClick={@_onGetStatus} className="btn">Retry</button>
     else if @state.status in ['Subscribed', 'Active']
       <input id="subscribe-check" type="checkbox" checked={true} style={marginTop:3} onChange={@_onUnsubscribe} />
     else

static/buttons.less

@@ -47,13 +47,15 @@ body.platform-win32 {
 }
 
 .btn {
-  padding: 0.33em 1em;
+  padding: 0 0.8em;
   border-radius: @border-radius-base;
   border: 0;
   cursor: default;
   display:inline-block;
-  color:      @btn-default-text-color;
-  img.content-mask { background-color:@btn-default-text-color; }
+  color: @btn-default-text-color;
+
+  img.content-mask { background-color: @btn-default-text-color; }
+
   .btn-gradient;
 
   // Use 4 box shadows to create a 0.5px hairline around the button, and another
@@ -61,32 +63,33 @@ body.platform-win32 {
   // Yes, 1px border looks really bad on retina.
   box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
 
-  height: auto;
-  line-height: 1;
+  height: 1.9em;
+  line-height: 1.9em;
+
+  .text {
+    margin-left: 6px;
+  }
 
   &:active {
     cursor: default;
-    background-color: darken(@btn-default-bg-color, 9%);
-    box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -1px 1px rgba(0, 0, 0, 0.21);
+    background: darken(@btn-default-bg-color, 9%);
   }
   &:focus {
     outline: none
   }
 
-  font-size: @font-size-base;
-  &.btn-smaller {
+  font-size: @font-size-small;
+
+  &.btn-small {
     font-size: @font-size-smaller;
   }
-  &.btn-small {
-    font-size: @font-size-small;
-  }
   &.btn-large {
-    font-size: @font-size-large;
-    padding: 0.5em 1.3em;
+    font-size: @font-size-base;
+    padding: 0 1.3em;
   }
   &.btn-larger {
-    font-size: @font-size-larger;
-    padding: 0.66em 1.6em;
+    font-size: @font-size-large;
+    padding: 0 1.6em;
   }
 
   &.btn-action {
@@ -111,27 +114,14 @@ body.platform-win32 {
       width: calc(~"100% + 2px");
       height: calc(~"100% + 2px");
       border-radius: 5px;
-      padding: 0;
       top: -1px;
       left: -1px;
       position: absolute;
       z-index: -1;
       background: linear-gradient(to bottom, #4ca2f9 0%, #015cff 100%);
     }
-  }
-
-  &.btn-emphasis:active {
-    background-image: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-emphasis-bg-color,10%)), to(darken(@btn-emphasis-bg-color, 4%)));
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.21);
-  }
-
-  &.btn-text {
-    font-size: 13px;
-    padding: 2px 14px 2px 7px;
-    .text {
-      position: relative;
-      top: 1px;
-      margin-left: 6px;
+    &:active {
+      background: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-emphasis-bg-color,10%)), to(darken(@btn-emphasis-bg-color, 4%)));
     }
   }
 
@@ -143,15 +133,14 @@ body.platform-win32 {
 }
 
 .btn-toolbar {
-  height: 24px;
-  padding: 2px 13px;
+  padding: 0 13px;
   &.narrow {
-    padding: 2px 9px;
+    padding: 0 9px;
   }
 }
 
 .btn-gradient {
-  background: -webkit-gradient(linear, left top, left bottom, from(@btn-default-bg-color), to(darken(@btn-default-bg-color, 4.5%)));
+  background: -webkit-gradient(linear, left top, left bottom, from(@btn-default-bg-color), to(darken(@btn-default-bg-color, 4.8%)));
 }
 .btn-gradient:active {
   background: -webkit-gradient(linear, left top, left bottom, from(darken(@btn-default-bg-color, 9%)), to(darken(@btn-default-bg-color, 13.5%)));

static/components/button-dropdown.less

@@ -15,7 +15,7 @@
       border-radius: 4px 4px 0 4px;
       box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.20);
       top: -100%;
-      transform:translate(0, -2px);
+      transform:translate(0, -8px);
     }
     .secondary-picker {
       border-top-right-radius: 0;
@@ -32,68 +32,22 @@
   }
 
 
-  &.bordered,
-  &:hover {
-    .primary-item,
-    .only-item {
-      .btn();
-      height: 32px;
-      padding-top: 7px;
-      line-height: 18px;
-      border-radius: 4px 0 0 4px;
-    }
-  }
-
   &.btn-emphasis {
     .primary-item,
     .secondary-picker,
     .only-item {
-      .btn.btn-emphasis;
+      .btn.btn-emphasis();
     }
     .primary-item {
       border-right:0;
     }
   }
 
-  &.btn-text {
-    .primary-item,
-    .secondary-picker,
-    .only-item {
-      .btn.btn-text;
-      height: 28px;
-      line-height: 1;
-    }
-    .primary-item, .only-item {
-      padding-top: 5px;
-    }
-    .secondary-picker {
-      padding: 4px 8px 2px 8px;
-    }
-    .secondary-items {
-      .menu {
-        .item {
-          font-size: 13px;
-          padding: 6px 11px;
-          &:first-child {
-            padding-top: 6px;
-          }
-          &:last-child {
-            padding-bottom: 6px;
-          }
-        }
-      }
-    }
-  }
-
   .primary-item,
   .only-item {
-    padding: 0.33em 1em;
+    .btn();
     cursor: default;
     color: @btn-default-text-color;
-    height: 32px;
-    padding-top: 7px;
-    line-height: 18px;
-    vertical-align:top;
   }
   .primary-item {
     border-radius: 4px 0 0 4px;
@@ -101,12 +55,9 @@
 
   .secondary-picker {
     .btn();
-    height: 32px;
     border-radius: 0 4px 4px 0;
     border-left: 0;
-    padding: 7px 8px 3px 8px;
-    vertical-align:top;
-    img { vertical-align: baseline; }
+    padding: 0 8px;
   }
   .secondary-items {
     &:hover {
@@ -121,7 +72,6 @@
     border: 1px solid rgba(0, 0, 0, 0.15);
     z-index: 2;
     background-color: @background-primary;
-    line-height: 14px;
     position: absolute;
     right: -1px; // -1, because of the border above
     white-space:nowrap;
@@ -137,7 +87,14 @@
         margin-top:0;
       }
       .item {
-        padding: 6px 15px;
+        font-size: 13px;
+        padding: 4px 11px;
+        &:first-child {
+          padding-top: 6px;
+        }
+        &:last-child {
+          padding-bottom: 6px;
+        }
         img {
           margin-right:4px;
           vertical-align: text-bottom;
@@ -148,11 +105,9 @@
         }
       }
       .item:first-child {
-        padding-top: 9px;
         border-top-left-radius: 4px;
       }
       .item:last-child {
-        padding-bottom: 9px;
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       }
@@ -173,16 +128,11 @@ body.platform-win32 {
       .windows-btn-bg;
       .windows-btn-border;
       border-radius: 0;
-      height: 34px;
-      padding-top: 5px;
     }
     .secondary-picker {
       .windows-btn-bg;
       .windows-btn-border;
       border-left: 0;
-      height: 34px;
-      padding-top: 5px;
-      box-shadow: 0 0 0;
     }
     .secondary-picker,
     .secondary-items {
@@ -200,21 +150,8 @@ body.platform-win32 {
         }
         &:active {
           background: @btn-emphasis-bg-color;
-          box-shadow: 0 0 0;
         }
       }
     }
-    &.btn-text {
-      .primary-item,
-      .secondary-picker,
-      .only-item {
-        .btn.btn-text;
-        padding-top: 5px;
-        height: 28px;
-      }
-      .secondary-picker {
-        padding: 4px 8px 2px 8px;
-      }
-    }
   }
 }

static/components/editable-list.less

@@ -106,6 +106,7 @@
       justify-content: center;
       height: 25px;
       width: 25px;
+      line-height: 25px;
       border-right: 1px solid @border-secondary-bg;
       font-size: 1em;
       cursor: default;

static/components/extra.less

@@ -43,7 +43,7 @@ body.platform-win32 {
 
 .mail-label {
   font-size: 0.9em;
-  padding: 2px 8px;
+  padding: 1px 8px;
   margin-right: 6px;
   flex-shrink: 0;
   border-radius: 3px;

static/components/tokenizing-text-field.less

@@ -52,13 +52,12 @@
     display: inline-block;
     position: relative;
     color: @text-color;
-    padding: 0.5em @spacing-three-quarters 0.5em @spacing-three-quarters;
+    padding: 0 @spacing-three-quarters;
     padding-right: 1.5em;
-    margin: 3px 6px 6px 1px;
+    margin: 1px 5px 1px 1px;
     border-radius: @border-radius-base * 0.8;
     max-width: 100%;
-    font-size: 15px;
-    line-height: 17px;
+    line-height: 1.9em;
 
     background: linear-gradient(to bottom, @token-top 0%, @token-bottom 100%);
     box-shadow: 0 0.5px 0 rgba(0,0,0,0.17), 0 -0.5px 0 rgba(0,0,0,0.17), 0.5px 0 0 rgba(0,0,0,0.17), -0.5px 0 0 rgba(0,0,0,0.17), 0 1px 1px rgba(0, 0, 0, 0.1);
@@ -105,7 +104,7 @@
       // Note: we switch from 0.5px borders with box shadows to a real border,
       // because the 0.5px shadows can't be as dark as we want. This means
       // margins / border radius change by 1px.
-      margin: 2px 5px 5px 0;
+      margin: 0 4px 0 0;
 
       color: @text-color-inverse;
       .action {
@@ -126,7 +125,7 @@
     color: @text-color-very-subtle;
     float: left;
     text-transform: capitalize;
-    padding-top: 9px;
+    padding-top: 4px;
     display: block;
   }
 
@@ -152,8 +151,7 @@
       // The padding-left and padding-right must be 0 so we can manually
       // set the width properly to always match the size of the input
       // test.
-      padding: 0.4em 0 0.4em 0;
-      margin: 2px 0 3px 0;
+      padding: 0.3em 0 0.3em 0;
 
       &.noop-input {
         position: absolute;

static/email-frame.less

@@ -50,7 +50,7 @@
 
   html, body {
     font-family: "Nylas-Pro", "Helvetica", "Lucidia Grande", sans-serif;
-    font-size: 16px;
+    font-size: 14.5px;
     line-height: 1.5;
     color: @text-color;
     background-color: transparent !important;

static/inputs.less

@@ -53,12 +53,14 @@ body.platform-win32 {
   input[type="tel"],
   input[type="time"],
   input[type="url"] {
-    border: 2px solid @input-border;
+    border: 0;
     border-radius: 0;
+    box-shadow: 0 0 0 2px @input-border;
 
     &:focus {
-      box-shadow: 0 0 0;
-      border: 2px solid darken(@input-border, 20%);
+      border: 0;
+      border-radius: 0;
+      box-shadow: 0 0 0 2px darken(@input-border, 20%);
     }
   }
 }

static/mixins/windows.less

@@ -7,6 +7,6 @@
   }
 }
 .windows-btn-border {
-  border: 2px solid #e5e5e5;
-  box-shadow: 0 0 0;
+  border: 0;
+  box-shadow: 0 0 0 2px #e5e5e5;
 }

static/variables/ui-variables.less

@@ -104,7 +104,7 @@
 @headings-font-weight:    600;
 
 // ----- Font Sizes -----
-@font-size-base:          15px;
+@font-size-base:          14px;
 
 @font-size-tiny:          @font-size-base * 0.70; // 10.5px
 @font-size-smaller:       @font-size-base * 0.80; // 12px
@@ -153,13 +153,13 @@
 @spacing-super-double:      @spacing-standard * 2.25;
 
 
-@padding-base-vertical:     6px;
+@padding-base-vertical:     5px;
 @padding-base-horizontal:   12px;
 
-@padding-large-vertical:    10px;
+@padding-large-vertical:    9px;
 @padding-large-horizontal:  16px;
 
-@padding-small-vertical:    5px;
+@padding-small-vertical:    4px;
 @padding-small-horizontal:  10px;
 
 @padding-xs-vertical:       1px;
@@ -181,7 +181,7 @@
 
 @btn-shadow: @standard-shadow;
 
-@btn-default-bg-color:    @background-primary;
+@btn-default-bg-color:    darken(@background-primary, 0.5%);
 @btn-default-text-color:  @text-color;
 
 @btn-action-bg-color:     @success-color;

static/workspace.less

@@ -70,7 +70,7 @@ nylas-workspace {
 }
 
 .toolbar-window-controls {
-  margin-top:14px;
+  margin-top:9px;
   margin-left:@spacing-half;
   order: -1000;
   min-width: 72px;
@@ -147,6 +147,7 @@ body.is-blurred {
 
     .btn.btn-toolbar {
       background: none;
+      box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15);
       img { opacity:0.5; }
     }
     .item-container {
@@ -180,12 +181,12 @@ body.is-blurred {
   -webkit-app-region: drag;
   border-bottom: 1px solid darken(@toolbar-background-color, 9%);
   width:  100%;
-  height: 50px;
+  height: 38px;
 
   // prevent flexbox from ever, ever resizing toolbars, no matter
   // how much it thinks other content is being squished
-  min-height: 50px;
-  max-height: 50px;
+  min-height: 38px;
+  max-height: 38px;
 
   // cover up the vertical resizing separators, so the toolbar appears
   // to be one continuous bar.
@@ -218,8 +219,6 @@ body.is-blurred {
 
   .item-back {
     order:-999;
-    padding-top: 5px;
-    padding-left: @spacing-three-quarters;
     img.content-mask { background-color: @text-color-heading; }
     flex-grow: 0;
     flex-shrink: 0;
@@ -236,13 +235,18 @@ body.is-blurred {
   }
 
   .btn-toolbar {
-    margin-top: @spacing-three-quarters;
+    margin-top: 8px;
     margin-left: @spacing-three-quarters;
     margin-right: 0;
     flex-shrink: 0;
-    height:28px;
+    line-height: 1.75em;
+    height: 1.75em;
+    box-shadow: 0 0.5px 0.05px rgba(0,0,0,0.4), 0 -0.5px 0 rgba(0,0,0,0.12);
+    img.content-mask { background-color: fadeout(@text-color-heading, 10%); }
+  }
+  .btn-toolbar:active {
+    img.content-mask { background-color: fadeout(@text-color-heading, 3%); }
   }
-
   .btn-toolbar:only-of-type {
     margin-right: @spacing-three-quarters;
   }
@@ -298,7 +302,6 @@ body.is-blurred {
   cursor: row-resize;
   div {
     width:100%;
-    // border-top: 1px solid @border-color-divider;
   }
   &.flexbox-handle-top {
     top:-3px;
@@ -339,14 +342,14 @@ body.platform-win32 {
     .toolbar-menu-control {
       display:inherit;
       order:10000;
-      .btn { margin-left: 0; }
       .btn-toolbar {
+        margin-left: 0;
         padding: 0 17px;
-      }
-      img.content-mask {
-        position: relative;
-        top: 30px;
-        background-color: @text-color-heading;
+        line-height: 36px;
+        img.content-mask {
+          vertical-align: middle;
+          background-color: @text-color-heading;
+        }
       }
     }
 
@@ -377,8 +380,9 @@ body.platform-win32 {
     .btn-toolbar {
       transition: background 300ms;
       margin: 0 0 0 1px;
-      height: 49px;
+      height: 37px;
       padding: 0 14px;
+      padding-bottom: 2px;
       border: 0;
       box-shadow: none;
       background: none;
@@ -398,6 +402,9 @@ body.platform-win32.is-blurred {
   .sheet-toolbar-container {
     background-image: none;
     background: @background-primary;
+    .btn-toolbar {
+      box-shadow: none;
+    }
   }
 }