From 227d7f59f93f8791a246b8aeced86b14784f40f6 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Thu, 30 May 2019 17:06:57 -0600
Subject: [PATCH] Make the default theme use Lexiconga colors!

---
 src/scss/_containers.scss     |   4 +-
 src/scss/_elements.scss       |  94 ++++++++++++++------
 src/scss/_structure.scss      |  10 ++-
 src/scss/themes/_default.scss | 162 +++++++++++++++++++++-------------
 4 files changed, 176 insertions(+), 94 deletions(-)

diff --git a/src/scss/_containers.scss b/src/scss/_containers.scss
index a07776a..9229b05 100644
--- a/src/scss/_containers.scss
+++ b/src/scss/_containers.scss
@@ -13,7 +13,7 @@ main {
   width: 90%;
   max-width: 1000px;
   min-height: 400px;
-  margin: 0 auto $header-height;
+  margin: 0 auto ($header-height * 1.25);
 
   #sideColumn,
   #mainColumn {
@@ -28,7 +28,7 @@ main {
 
   #mainColumn {
     width: 64%;
-    margin: 0;
+    margin: $general-padding 0 0;
   }
 
   article {
diff --git a/src/scss/_elements.scss b/src/scss/_elements.scss
index 9c5eb53..3f72c36 100644
--- a/src/scss/_elements.scss
+++ b/src/scss/_elements.scss
@@ -1,3 +1,7 @@
+a {
+  text-decoration: underline;
+}
+
 p, span {
   &.bold {
     font-weight: bold;
@@ -30,24 +34,42 @@ label {
   }
 
   .label-button {
-    @extend .button;
-
+    display: inline-block;
+    padding: 3px 9px;
+    border-radius: 3px;
+    line-height: 30px;
+    cursor: pointer;
+    user-select: none;
     font-size: 80%;
     font-weight: normal;
     float: right;
     cursor: pointer;
     line-height: 80% !important;
     padding: 3px 3px 5px;
+
+    &.small {
+      font-size: 80%;
+      line-height: 25px;
+    }
   }
 
   .label-help-button {
-    @extend .button;
-
+    display: inline-block;
+    padding: 3px 9px;
+    border-radius: 3px;
+    line-height: 30px;
+    cursor: pointer;
+    user-select: none;
     font-size: 70%;
     font-weight: normal;
     cursor: pointer;
     line-height: 70% !important;
     padding: 2px 2px 4px;
+
+    &.small {
+      font-size: 80%;
+      line-height: 25px;
+    }
   }
 }
 
@@ -55,34 +77,50 @@ ul {
   padding-left: $general-padding;
 }
 
-// .tag {
-//   display: inline-block;
-//   padding: 3px 9px;
-//   border-radius: 3px;
-//   line-height: 30px;
+.tag {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 3px;
+  line-height: 30px;
 
-//   &.small {
-//     font-size: 80%;
-//     line-height: 25px;
-//   }
-// }
+  &.small {
+    font-size: 80%;
+    line-height: 25px;
+  }
+}
 
-// span .tag {
-//   @extend .tag;
+span .tag {
+  border-radius: 3px 0 0 3px;
+
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 3px;
+  line-height: 30px;
+
+  &.small {
+    font-size: 80%;
+    line-height: 25px;
+  }
   
-//   border-radius: 3px 0 0 3px;
-  
-//   &+.tag {
-//     border-left: none;
-//     border-radius: 0 3px 3px 0;
-//   }
-// }
+  &+.tag {
+    border-left: none;
+    border-radius: 0 3px 3px 0;
+  }
+}
 
-// .button {
-//   @extend .tag;
-//   cursor: pointer;
-//   user-select: none;
-// }
+.button {
+  display: inline-block;
+  padding: 3px 9px;
+  border-radius: 3px;
+  line-height: 30px;
+  cursor: pointer;
+  user-select: none;
+
+  &.small {
+    font-size: 80%;
+    line-height: 25px;
+  }
+}
 
 .modal {
   position: fixed;
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index 3b80e30..3f1f8ef 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -99,14 +99,13 @@
 
 #wordForm {
   position: fixed;
-  top: auto;
+  top: $header-height + $general-padding;
   width: 31%;
   max-width: 320px;
   padding: 10px;
   border-radius: 5px;
   max-height: 80%;
   overflow-y: auto;
-  box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
 }
 
 .edit-form {
@@ -114,9 +113,12 @@
   max-width: 500px;
 }
 
-#detailsSection {
-  padding: $general-padding;
+#mainColumn {
   border-radius: 5px;
+}
+
+#detailsSection {
+  padding: $general-padding $general-padding 0;
 
   #dictionaryName {
     margin-top: 0;
diff --git a/src/scss/themes/_default.scss b/src/scss/themes/_default.scss
index c4d0fa0..d2aa970 100644
--- a/src/scss/themes/_default.scss
+++ b/src/scss/themes/_default.scss
@@ -4,27 +4,58 @@
   $light: #efefef;
   $white: #ffffff;
   $red: #b42032;
-  $border: 1px solid $dark;
 
+  $header-color: #eacc9d;
+  $background-color: #e6cfaa;
+  $footer-color: #cb6318;
+  $link-color: #a01000;
+  $button-color: #dcb078;
+  $message-color: #c0c088;
+  $word-form-color: #ba5536;
+  $dictionary-color: #bd7251;
+  $entry-color: #d7ad7d;
+  $input-color: #efdfc0;
+  $details-color: #f2d5b2;
+  $modal-color: #f2d5b2;
+  
+  $border: 1px solid $dark;
+  
+  background-color: $background-color;
+  
+  a {
+    color: $link-color;
+  }
+  
   p, span {
     &.red {
       color: $red;
     }
   }
 
-  .tag {
-    display: inline-block;
-    padding: 3px 9px;
-    border-radius: 3px;
-    line-height: 30px;
-    border: $border;
-    background-color: $light;
-
-    &.small {
-      font-size: 80%;
-      line-height: 25px;
+  label {
+    .label-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
     }
 
+    .label-help-button {
+      border: 1px solid darken($button-color, 2);
+      background-color: $button-color;
+      color: #000000;
+      text-decoration: none;
+    }
+  }
+
+  input, textarea, select, option {
+    background-color: $input-color;
+  }
+
+  .tag {
+    border: $border;
+    background-color: $button-color;
+
     &.red {
       background-color: $red;
       color: $white;
@@ -32,21 +63,25 @@
   }
 
   span .tag {
-    @extend .tag;
-    
-    border-radius: 3px 0 0 3px;
-    
+    border: $border;
+    background-color: $button-color;
     &+.tag {
-      background-color: $white;
+      background-color: lighten($button-color, 25);
       border-left: none;
-      border-radius: 0 3px 3px 0;
     }
   }
 
   .button {
-    @extend .tag;
-    cursor: pointer;
-    user-select: none;
+    border: 1px solid darken($button-color, 2);
+    background-color: $button-color;
+    color: #000000;
+    text-decoration: none;
+    font-weight: bold;
+
+    &.red {
+      background-color: $red;
+      color: $white;
+    }
   }
 
   .modal {
@@ -54,8 +89,8 @@
       background-color: #000000;
     }
     .modal-content {
-      background-color: $white;
-      border: $border;
+      background-color: $modal-color;
+      border: 1px solid darken($modal-color, 10);
     }
   }
 
@@ -67,11 +102,11 @@
       border-top: $border;
       border-left: $border;
       border-right: $border;
-      background-color: $mid;
+      background-color: $button-color;
 
       &.active {
-        background-color: $white;
-        border-bottom: 1px solid $white;
+        background-color: $modal-color;
+        border-bottom: 1px solid $modal-color;
       }
     }
   }
@@ -91,6 +126,10 @@
   }
 
   #top {
+    background-color: $header-color;
+    border-bottom: 1px solid darken($header-color, 2);
+    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.75);
+
     #title {
       display: inline-block;
       margin: 3px $general-padding 3px 0;
@@ -103,57 +142,75 @@
     #searchModal {
       .modal-content {
         section+footer {
-          background-color: $white;
+          background-color: $modal-color;
         }
       }
     }
   }
 
   #wordForm {
-    background-color: $light;
-    border: $border;
+    background-color: $word-form-color;
+    border: 1px solid darken($word-form-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
+  }
+
+  #mainColumn {
+    background-color: $dictionary-color;
+    border: 1px solid darken($dictionary-color, 2);
+    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
   }
 
   #detailsSection {
-    background-color: $white;
-    border: $border;
-
     nav ul {
       li {
-        border: $border;
-        background-color: $light;
+        border: 1px solid darken($button-color, 20);
+        background-color: $button-color;
 
         &.active {
-          background-color: #bababa;
+          background-color: lighten($button-color, 15);
         }
       }
     }
 
     #detailsPanel {
-      background-color: $white;
+      background-color: $details-color;
     }
   }
 
   .entry {
-    background-color: $light;
-
+    background-color: $entry-color;
+    border: 1px solid darken($entry-color, 20);
+    
     header {
+      border-bottom: 1px solid darken($entry-color, 20);
+      
+      .word-option-button {
+        background-color: darken($entry-color, 10);
+        border: 1px solid darken($entry-color, 20);
+      }
+      
       .word-option-list {
-        background-color: $white;
-        border: $border;
+        background-color: darken($entry-color, 5);
+        border: 1px solid darken($entry-color, 10);
         
         .word-option {
           &:hover {
-            background-color: $light;
+            background-color: lighten($entry-color, 5);
           }
         }
       }
     }
+
+    .edit-form {
+      .button {
+        background-color: darken($button-color, 10);
+      }
+    }
   }
 
   #messagingSection {
     .message {
-      background-color: $light;
+      background-color: $message-color;
       border: $border;
 
       &.error {
@@ -169,7 +226,9 @@
   }
 
   #bottom {
-    background-color: $light;
+    background-color: $footer-color;
+    border-top: 1px solid darken($footer-color, 2);
+    box-shadow: 0px -4px 5px 0px rgba(50, 50, 50, 0.75);
 
     a {
       color: #000000;
@@ -192,22 +251,5 @@
     border: $border;
     color: $white;
   }
-
-  .tag {
-    padding: 2px 6px;
-    font-size: 90%;
-    line-height: 120%;
-
-    &.small {
-      font-size: 70%;
-      line-height: 100%;
-    }
-  }
-
-  .button {
-    @extend .tag;
-    cursor: pointer;
-    user-select: none;
-  }
 }
 }
\ No newline at end of file