Add button to suggest a new mod

src/css/main.scss

@@ -19,28 +19,13 @@ All rights reserved.
 
 // Constants ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 
-$color-background:       #AAC9FF;
-$color-bedrock:          #0A0A0A;
-$color-brick-dark:       #7A7A7A;
-$color-brick-light:      #D9D9D9;
-$color-content:          rgba(230, 230, 230, 0.90);
-$color-dirt:             #906647;
-$color-error-new:        #CD0000;
-$color-error:            #F3C2C2;
-$color-ice:              #8AA7E6;
-$color-footer:           #3D1D09;
-$color-footer-text:      white;
-$color-gray-faint:       #F2F2F2;
-$color-gray-light:       #CCCCCC;
-$color-gray-medium:      #A6A6A6;
-$color-gray-dark:        #8B8B8B;
-$color-gray-shadow:      #444444;
-$color-table-background: white;
-$color-toolbar-background: rgba(255, 255, 255, 0.75);
+// Font Faces //////////////////////////////////////////////////////////////////////////////////////
 
 $font-family-header: 'PressStart';
 $font-family-normal: sans-serif;
-$font-family-input: monospace;
+$font-family-input:  monospace;
+
+// Font Sizes //////////////////////////////////////////////////////////////////////////////////////
 
 $font-size-small:    1.1em;
 $font-size-normal:   1.3em;
@@ -48,6 +33,37 @@ $font-size-large:    1.6em;
 $font-size-x-large:  2.0em;
 $font-size-xx-large: 3.0em;
 
+// Gray Palette ////////////////////////////////////////////////////////////////////////////////////
+
+$color-gray-faint:         #F2F2F2;
+$color-gray-light:         #CCCCCC;
+$color-gray-medium:        #A6A6A6;
+$color-gray-dark:          #8B8B8B;
+$color-gray-shadow:        #444444;
+
+// Object Background Colors ////////////////////////////////////////////////////////////////////////
+
+$color-bedrock:            #0A0A0A;
+$color-brick-dark:         #7A7A7A;
+$color-brick-light:        #D9D9D9;
+$color-dirt:               #906647;
+$color-ice:                #8AA7E6;
+
+// Style Colors ////////////////////////////////////////////////////////////////////////////////////
+
+$color-active:             #5C8AE6;
+$color-active-hover:       #2E6BE6;
+$color-background:         #AAC9FF;
+$color-background-panel:   #FFFFFF;
+$color-background-toolbar: rgba(255, 255, 255, 0.75);
+$color-content:            rgba(230, 230, 230, 0.90);
+$color-error-new:          #CD0000;
+$color-error:              #F3C2C2;
+$color-footer:             #3D1D09;
+$color-footer-text:        #FFFFFF;
+
+// Z-Index Layers //////////////////////////////////////////////////////////////////////////////////
+
 $layer-normal: 0;
 $layer-screen: 5;
 $layer-dialog: 10;
@@ -59,6 +75,22 @@ body {
     font-size: 10px;
 }
 
+button {
+    background: $color-gray-faint;
+    border: 0.1em solid $color-gray-medium;
+    border-radius: 1em;
+    color: $color-active;
+    cursor: pointer;
+    font-size: $font-size-normal;
+    font-weight: bold;
+    padding: 0.1em 1em;
+
+    &:hover {
+        background: white;
+        color: $color-active-hover;
+    }
+}
+
 h1 {
     margin-bottom: 1em;
 

src/css/templates/crafting_table.scss

@@ -12,7 +12,7 @@ All rights reserved.
 
     .panel {
         position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
-        background: $color-table-background;
+        background: $color-background-panel;
 
         .prev {
             background: url('/images/arrow-left-disabled.png');

src/css/templates/inventory.scss

@@ -15,7 +15,7 @@ All rights reserved.
 
     .panel {
         position: absolute; top: 5em; right: 2em; bottom: 0; left: 2em;
-        background: $color-table-background;
+        background: $color-background-panel;
         text-align: right;
     }
 
@@ -26,8 +26,8 @@ All rights reserved.
     }
 
     .toolbar {
-        position: absolute; right: 0; bottom: 0; left: 0; height: 3em;
-        background: $color-toolbar-background;
+        position: absolute; right: 0; bottom: 0; left: 0; height: 3.5em;
+        background: $color-background-toolbar;
         border-top: 1px solid $color-gray-light;
     }
 

src/css/templates/mod_pack.scss

@@ -6,15 +6,10 @@ All rights reserved.
 */
 
 .view__mod_pack {
-    button {
-        @include center-vertical;
-        position: absolute; right: 1em;
-    }
 
     input { border: 0; font-size: 1.5em; width: 90%; }
 
     table {
-        background: white;
         margin: 0 auto;
         width: 100%;
 
@@ -28,4 +23,19 @@ All rights reserved.
         td:nth-child(2) { width: 30%; }
         td:nth-child(3) { width: 65%; border-left: 0.1em solid $color-brick-light; }
     }
+
+    .panel {
+        background: white;
+    }
+
+    .toolbar {
+        position: relative; width: 35%;
+        margin-top: 1em;
+        padding: 1em 1em;
+        text-align: center;
+
+        button {
+            position: relative; width: 66%;
+        }
+    }
 }

src/css/templates/stack.scss

@@ -12,7 +12,7 @@ All rights reserved.
     .quantity {
         border-radius: 0.75em;
         background: $color-ice;
-        color: $color-table-background;
+        color: $color-background-panel;
         font-size: $font-size-normal;
         font-weight: bold;
         text-align: center;