From f08a4dfbad935615dd6e9349367e536c3e6fa182 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Wed, 2 Jun 2021 18:54:57 +0100
Subject: [PATCH] Adds material dark theme

---
 src/components/LinkItems/Item.vue |   4 +-
 src/styles/color-themes.scss      | 145 +++++++++++++++++++++---------
 src/utils/defaults.js             |   9 +-
 3 files changed, 108 insertions(+), 50 deletions(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 109587c7..5a89a00f 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -9,14 +9,14 @@
       :style="`--open-icon: ${getUnicodeOpeningIcon()}; ${customStyles}`"
     >
       <!-- Item Text -->
-      <div class="tile-title" :id="`tile-${id}`" >
+      <div :class="`tile-title  ${!icon? 'bounce': ''}`" :id="`tile-${id}`" >
         <span class="text">{{ title }}</span>
         <div class="overflow-dots">...</div>
         <p class="description">{{ description }}</p>
       </div>
       <!-- Item Icon -->
       <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
-        v-bind:style="customStyles" class="icon-container" />
+        v-bind:style="customStyles" class="bounce" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
         :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index f8e94c72..2f326aed 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -174,7 +174,7 @@ html[data-theme='material-original'] {
   --heading-text-color: #fff;
 }
 
-html[data-theme='material-dark'] {
+html[data-theme='material-dark-original'] {
   --primary: #08B0BB;
   --settings-text-color: #08B0BB;
   --background: #39434C;
@@ -275,50 +275,12 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'] {
   }
 }
 
-html[data-theme='material'] {
+html[data-theme='material'], html[data-theme='material-dark'] {
   --font-body: 'Raleway', serif;
   --font-headings: 'Francois One', serif;
-  --primary: #363636;
-  --background: #f5f5f5;
-  --background-darker: #4285f4;
-  --item-group-outer-background: none;
-  --item-group-shadow: none;
-  --item-group-background: none;
-  --item-background: #fff;
-  --item-background-hover: #fff;
-  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
-  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
-  --item-text-color: #363636;
-  --item-group-heading-text-color-hover: #363636;
-  --item-icon-transform-hover: none;
-  --nav-link-background-color: #0c4eba;
-  --nav-link-text-color: #fff;
-  --nav-link-border-color: #0c4eba;
-  --settings-text-color: #363636;
-  --config-code-color: #363636;
-  --config-settings-background: #fff;
-  --config-settings-color: #363636;
-  --heading-text-color: #fff;
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
-  --search-container-background: #4285f4;
-  header {
-    background: #4285f4;
-    color: #fff;
-    .page-titles span.subtitle {
-      text-shadow: none;
-    }
-  }
-  footer {
-    opacity: 1;
-    color: #fff;
-  }
-  section.filter-container form label {
-    color: #fff;
-  }
-  .prism-editor-wrapper {
-    background: #f5f5f5;
-  }
+
   .collapsable {
     margin: 0;
     padding: 0;
@@ -404,15 +366,15 @@ html[data-theme='material'] {
       left: 0px;
       height: 100%;
       width: 1rem;
-      background-color: #ccd3dd80;
+      background: #ccd3dd80;
       border-radius: 0 60% 60% 0;
       transform: scale(0,1);
       transform-origin: left center;
       transition: all 0.2s linear 0s;
       padding: 0 0.2rem;
     }
-    &:hover {
-      div.icon-container {
+    &:hover, &:focus-within {
+      div.bounce {
         text-indent: 1rem;
       }
       &:before {
@@ -446,6 +408,101 @@ html[data-theme='material'] {
   }
 }
 
+html[data-theme='material'] {
+  --primary: #363636;
+  --background: #f5f5f5;
+  --background-darker: #4285f4;
+  --item-group-outer-background: none;
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-background: #fff;
+  --item-background-hover: #fff;
+  --item-shadow: 0 1px 3px #0000001f, 0 1px 2px #0000003d;
+  --item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
+  --item-text-color: #363636;
+  --item-group-heading-text-color-hover: #363636;
+  --item-icon-transform-hover: none;
+  --nav-link-background-color: #0c4eba;
+  --nav-link-text-color: #fff;
+  --nav-link-border-color: #0c4eba;
+  --settings-text-color: #363636;
+  --config-code-color: #363636;
+  --config-settings-background: #fff;
+  --config-settings-color: #363636;
+  --heading-text-color: #fff;
+  --curve-factor: 4px;
+  --curve-factor-navbar: 8px;
+  --search-container-background: #4285f4;
+
+  header {
+    background: #4285f4;
+    color: #fff;
+    .page-titles span.subtitle {
+      text-shadow: none;
+    }
+  }
+  footer {
+    opacity: 1;
+    color: #fff;
+  }
+  section.filter-container form label {
+    color: #fff;
+  }
+  .prism-editor-wrapper {
+    background: #f5f5f5;
+  }
+}
+
+html[data-theme='material-dark'] {
+  --primary: #08B0BB;
+  --background: #313941;
+  --background-darker: #08B0BB;
+  --settings-background: #092b3a;
+  --settings-text-color: #08B0BB;
+
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  --item-group-shadow: none;
+  --item-group-padding: 5px 0 0;
+  --item-group-heading-text-color: #e0e0e0;
+  --item-group-heading-text-color-hover: #08B0BB;
+
+  --item-text-color: #e0e0e0;
+  --item-shadow: 2px 2px 3px #00000082, 0 1px 10px #00000040;
+  --item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
+  --item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
+  --item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
+  --item-background: #414B55;
+  --item-background-hover: #414B55;
+  
+  --settings-background: #131a1f;
+  --search-container-background: #131a1f;
+  --search-field-background: #39434c;
+  --heading-text-color: #131a1f;
+  --nav-link-text-color: #08B0BB;
+  --nav-link-background-color: #131a1f;
+  --nav-link-text-color-hover: #08B0BB;
+  --nav-link-background-color-hover: #131a1fc7;
+  --nav-link-border-color-hover: transparent;
+  --curve-factor: 2px;
+  --curve-factor-navbar: 0;
+  
+  --welcome-popup-background: #131a1f;
+  --welcome-popup-text-color: var(--primary);
+  --config-settings-background: #131a1f;
+  --config-settings-color: #41e2ed;
+  --scroll-bar-color: #08B0BB;
+  --scroll-bar-background: #131a1f;
+  &::-webkit-scrollbar-thumb {
+    border-left: 1px solid #131a1f;
+  }
+  .item {
+    &:before, &:active {
+      background: #131a1f !important;
+    }
+  }
+}
+
 html[data-theme='minimal-light'] {
   --primary: #a5a5a5;
   --background: #ffffff;
diff --git a/src/utils/defaults.js b/src/utils/defaults.js
index 1162fd36..876d363e 100644
--- a/src/utils/defaults.js
+++ b/src/utils/defaults.js
@@ -14,15 +14,16 @@ module.exports = {
   theme: 'default',
   fontAwesomeKey: '0821c65656',
   builtInThemes: [
-    'nord',
-    'nord-frost',
     'callisto',
     'thebe',
     'dracula',
     'material',
+    'material-dark',
+    'colorful',
+    'nord',
+    'nord-frost',
     'minimal-dark',
     'minimal-light',
-    'colorful',
     'matrix',
     'matrix-red',
     'hacker-girl',
@@ -30,7 +31,7 @@ module.exports = {
     'bee',
     'tiger',
     'material-original',
-    'material-dark',
+    'material-dark-original',
     'high-contrast-dark',
     'high-contrast-light',
   ],