Issue #467: style changes: smaller toolbox borders, layout fixes

src/css/layout.css

@@ -13,6 +13,8 @@
 .column-wrapper {
   text-align: center;
   font-size: 0;
+  display: flex;
+
   position: absolute;
   left: 100px; /* Reserve room for tools on the left edge of the screen. */
   top: 0;
@@ -20,10 +22,6 @@
   bottom: 0;
 }
 
-.column {
-  display: inline-block;
-}
-
 .left-column {
   vertical-align: top;
   height: 100%;
@@ -40,7 +38,7 @@
   vertical-align: top;
   height: 100%;
 
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
   position: relative;
 

src/css/toolbox-layers-list.css

@@ -3,7 +3,7 @@
  * Layers container
  */
 .layers-list-container {
-  min-height: 83px;
+  min-height: 85px;
   display: flex;
   flex-direction: column;
 }
@@ -42,21 +42,10 @@
  * Layers buttons
  */
 
-.layers-button-container {
-  overflow : hidden;
-  flex-shrink: 0;
-}
-
 .layers-button {
   margin: 0;
   width: 16.66667%;
   float : left;
-  /* Override border propery on .button elements from form.css */
-  border-left-width: 0;
-}
-
-.layers-button:last-child {
-  border-right-width: 0;
 }
 
 /**

src/css/toolbox-palettes-list.css

@@ -15,13 +15,10 @@
  * Palettes action buttons
  */
 
-.palettes-list-actions {
-  flex-shrink: 0;
+.palettes-list-container .toolbox-buttons {
   background-color: #3f3f3f;
-  border-bottom-color: #222;
   height: 24px;
   padding: 0;
-  overflow: hidden;
 }
 
 .palettes-list-button,
@@ -39,9 +36,6 @@
   height: 100%;
   padding: 0 5px 0 5px;
 
-  border-style: solid;
-  border-width: 1px 0 1px 0;
-
   color: #aaa;
   font-size : 0.75em;
 

src/css/toolbox.css

@@ -1,9 +1,9 @@
 .toolbox-container {
-  border: 4px solid #888;
+  border: 2px solid #888;
   font-size: medium;
   color: white;
   text-align: left;
-  border-radius: 4px;
+  border-radius: 2px;
   margin-top: 5px;
   overflow: hidden;
 }
@@ -16,3 +16,19 @@
   height: 17px;
   background: #222;
 }
+
+.toolbox-buttons {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-top: 1px solid #666;
+  border-bottom: 1px solid #222;
+}
+
+.toolbox-buttons .button {
+  /* Override border propery on .button elements from form.css */
+  border-width: 0 1px 0 0;
+}
+
+.toolbox-buttons button:last-child {
+  border-right-width: 0;
+}

src/templates/layers-list.html

@@ -4,7 +4,7 @@
          data-placement="left"
          class="layers-toggle-preview piskel-icon-eye"></div>
   </h3>
-  <div class="layers-button-container">
+  <div class="toolbox-buttons">
     <button data-action="add"
       class="button layers-button piskel-icon-plus"
       title="Create a new layer" rel="tooltip" data-placement="top" ></button>

src/templates/palettes-list.html

@@ -1,6 +1,6 @@
 <div class="toolbox-container palettes-list-container">
   <h3 class="toolbox-title palettes-title">Palettes</h3>
-  <div class="palettes-list-actions">
+  <div class="toolbox-buttons">
     <button
       class="button palettes-list-button create-palette-button piskel-icon-plus" data-action="add"
       title="Create a new palette" rel="tooltip" data-placement="top" ></button>