💄 Adds configurable CSS variables to the Minimal view

src/components/MinimalView/MinimalHeading.vue

@@ -30,19 +30,19 @@ export default {
 div.minimal-section-heading {
   cursor: pointer;
   padding: 0.5rem 0.25rem;
-  border-radius: var(--curve-factor);
-  border: 1px solid var(--primary);
+  margin-bottom: 0;
+  background: var(--minimal-view-section-heading-background);
+  border: 1px solid var(--minimal-view-section-heading-color);
   border-bottom: none;
   border-radius: var(--curve-factor) var(--curve-factor) 0 0;
-  margin-bottom: 0;
   h3 {
     margin: 0;
-    color: var(--primary);
+    color: var(--minimal-view-section-heading-color);
   }
   &.selected {
-    background: var(--primary);
+    background: var(--minimal-view-section-heading-color);
     h3 {
-      color: var(--item-group-heading-text-color);
+      color: var(--minimal-view-section-heading-background);
     }
   }
 }

src/components/MinimalView/MinimalSearch.vue

@@ -4,6 +4,7 @@
       id="filter-tiles"
       v-model="input"
       ref="filter"
+      class="minimal-search"
       :placeholder="$t('search.search-placeholder')"
       v-on:input="userIsTypingSomething"
       @keydown.esc="clearFilterInput" />
@@ -84,12 +85,6 @@ export default {
   form {
     display: flex;
     align-items: center;
-    label {
-        display: inline;
-        color: var(--search-label-color);
-        margin: 0.5rem;
-        display: inline;
-    }
     input {
       display: inline-block;
       width: 80%;
@@ -100,17 +95,17 @@ export default {
       outline: none;
       border: 1px solid var(--outline-color);
       border-radius: var(--curve-factor);
-      background: var(--background-darker);
-      color: var(--settings-text-color);
+      background: var(--minimal-view-search-background);
+      color: var(--minimal-view-search-color);
       &:focus {
-        border-color: var(--settings-text-color);
+        border-color: var(--minimal-view-search-color);
         opacity: var(--dimming-factor);
       }
     }
     .clear-search {
       //position: absolute;
-      color: var(--settings-text-color);
-      padding: 0 0.4rem;
+      color: var(--minimal-view-search-color);
+      padding: 0.15rem 0.5rem 0.2rem 0.5rem;
       font-style: normal;
       font-size: 1rem;
       opacity: var(--dimming-factor);
@@ -118,12 +113,13 @@ export default {
       cursor: pointer;
       right: 0.5rem;
       top: 1rem;
-      border: 1px solid var(--settings-text-color);
+      border: 1px solid var(--minimal-view-search-color);
       font-size: 1rem;
       margin: 0.5rem;
       &:hover {
         opacity: 1;
-        background: var(--background-darker);
+        color: var(--minimal-view-search-background);
+        background: var(--minimal-view-search-color);
       }
     }
   }

src/components/MinimalView/MinimalSection.vue

@@ -93,7 +93,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
-  background: var(--item-group-background);
+  background: var(--minimal-view-group-background);
   border-radius: 0 0 var(--curve-factor) var(--curve-factor);
   .section-items {
     display: grid;
@@ -105,7 +105,7 @@ export default {
     @include big-screen-up { grid-template-columns: repeat(6, 1fr); }
   }
   &.selected {
-    border: 1px solid var(--primary);
+    border: 1px solid var(--minimal-view-group-color);
     grid-column-start: span var(--col-count, 3);
   }
   &.show-all {

src/styles/color-palette.scss

@@ -35,54 +35,74 @@
   * all variables are optional, since they inherit initial values from above*
   * Using specific variables makes overriding for custom themes really easy */
   --heading-text-color: var(--primary);
+  // Nav-bar links 
   --nav-link-text-color: var(--primary);
   --nav-link-background-color: #607d8b33;
   --nav-link-text-color-hover: var(--primary);
   --nav-link-background-color-hover: #607d8b33;
   --nav-link-border-color: transparent;
   --nav-link-border-color-hover: var(--primary);
+  // Link items and sections
   --item-text-color: var(--primary);
   --item-text-color-hover: var(--item-text-color);
   --item-group-outer-background: var(--primary);
   --item-group-heading-text-color: var(--item-group-background);
   --item-group-heading-text-color-hover: var(--background);
+  // Settings and config
   --settings-background: var(--background);
   --settings-text-color: var(--primary);
-  --search-container-background: var(--background-darker);
-  --search-field-background: var(--background);
-  --search-label-color: var(--settings-text-color);
-  --footer-text-color: var(--medium-grey);
-  --footer-text-color-link:  var(--primary);
-  --footer-background: var(--background-darker);
-  --welcome-popup-background: var(--background-darker);
-  --welcome-popup-text-color: var(--primary);
   --config-code-background: #fff;
   --config-code-color: var(--background);
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
-  --toast-background: var(--primary);
-  --toast-color: var(--background);
+  --code-editor-color: var(--black);
+  --code-editor-background: var(--white);
+  // Search bar (on homepage)
+  --search-container-background: var(--background-darker);
+  --search-field-background: var(--background);
+  --search-label-color: var(--settings-text-color);
+  // Page footer
+  --footer-text-color: var(--medium-grey);
+  --footer-text-color-link:  var(--primary);
+  --footer-background: var(--background-darker);
+  // Right-click context menu
+  --context-menu-background: var(--background);
+  --context-menu-color: var(--primary);
+  --context-menu-secondary-color: var(--background-darker);
+  // Workspace view
+  --side-bar-background: var(--background-darker);
+  --side-bar-background-lighter: var(--background);
+  --side-bar-color: var(--primary);
+  // Minimal view
+  --minimal-view-background-color: var(--background);
+  --minimal-view-title-color: var(--primary);
+  --minimal-view-settings-color: var(--primary);
+  --minimal-view-section-heading-color: var(--primary);
+  --minimal-view-section-heading-background: var(--background-darker);
+  --minimal-view-search-background: var(--background-darker);
+  --minimal-view-search-color: var(--primary);
+  --minimal-view-group-color: var(--primary);
+  --minimal-view-group-background: var(--background-darker);
+  // Login page
+  --login-form-color: var(--primary);
+  --login-form-background: var(--background);
+  --login-form-background-secondary: var(--background-darker);
+  // About page
+  --about-page-color: var(--white);
+  --about-page-background: var(--background);
+  --about-page-accent: var(--primary);
+  // Webpage colors, highlight, scrollbar
   --scroll-bar-color: var(--primary);
   --scroll-bar-background: var(--background-darker);
   --highlight-color: var(--background);
   --highlight-background: var(--primary);
+  // Misc components
   --loading-screen-color: var(--primary);
   --loading-screen-background: var(--background);
-  --login-form-color: var(--primary);
-  --login-form-background: var(--background);
-  --login-form-background-secondary: var(--background-darker);
-  --about-page-color: var(--white);
-  --about-page-background: var(--background);
-  --about-page-accent: var(--primary);
-  --side-bar-background: var(--background-darker);
-  --side-bar-background-lighter: var(--background);
-  --side-bar-color: var(--primary);
   --status-check-tooltip-background: var(--background-darker);
   --status-check-tooltip-color: var(--primary);
-  --code-editor-color: var(--black);
-  --code-editor-background: var(--white);
-
-  --context-menu-background: var(--background);
-  --context-menu-color: var(--primary);
-  --context-menu-secondary-color: var(--background-darker);
+  --welcome-popup-background: var(--background-darker);
+  --welcome-popup-text-color: var(--primary);
+  --toast-background: var(--primary);
+  --toast-color: var(--background);
 }

src/styles/color-themes.scss

@@ -481,7 +481,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
 
 html[data-theme='material'] {
   --primary: #363636;
-  --background: #f5f5f5;
+  --background: #eee;
   --background-darker: #5c90eb;
   --item-group-outer-background: none;
   --item-group-shadow: none;
@@ -501,7 +501,7 @@ html[data-theme='material'] {
   --config-settings-background: #f5f5f5;
   --config-settings-color: #473f3f;
   --heading-text-color: #fff;
-  --curve-factor: 4px;
+  --curve-factor: 3px;
   --curve-factor-navbar: 8px;
   --search-container-background: #4285f4;
   --welcome-popup-text-color: #f5f5f5;
@@ -510,6 +510,30 @@ html[data-theme='material'] {
   --context-menu-secondary-color: #f5f5f5;
   --transparent-white-50: #00000080;
 
+  --minimal-view-background-color: var(--background);
+  --minimal-view-title-color: var(--background-darker);
+  --minimal-view-settings-color: var(--primary);
+  --minimal-view-section-heading-color: var(--primary);
+  --minimal-view-section-heading-background: #f6f6f6;
+  --minimal-view-search-background: #fff;
+  --minimal-view-search-color: var(--primary);
+  --minimal-view-group-color: var(--primary);
+  --minimal-view-group-background: #fff;
+
+  .minimal-section-inner.selected, div.minimal-section-heading  {
+    border: none;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  }
+  .title-and-search form input {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  }
+  div.minimal-section-heading.selected {
+    background: #5c90eb;
+  }
+  div.minimal-section-inner {
+    background: #ffffff80;
+  }
+
   div.jsoneditor div.jsoneditor-menu {
     background: #5c90eb !important;
   }
@@ -585,6 +609,25 @@ html[data-theme='material-dark'] {
   // --login-form-color: #131a1f;
   --login-form-background-secondary: #131a1f;
 
+  // --minimal-view-background-color: var(--background);
+  // --minimal-view-title-color: var(--primary);
+  // --minimal-view-settings-color: var(--primary);
+  --minimal-view-section-heading-color: #131a1f;
+  --minimal-view-section-heading-background: var(--background);
+  --minimal-view-search-background: #131a1f;
+  // --minimal-view-search-color: var(--primary);
+  // --minimal-view-group-color: var(--primary);
+  --minimal-view-group-background: #131a1f;
+
+  div.minimal-section-heading h3, div.minimal-section-heading.selected h3 {
+    color: #d5d5d5;
+  }
+  div.minimal-section-heading, .minimal-section-inner.selected, input.minimal-search {
+    box-shadow: 2px 2px 4px #000000, 0 1px 3px #000000cc;
+    border-color: #131a1f80;
+  }
+
+
   &::-webkit-scrollbar-thumb {
     border-left: 1px solid #131a1f;
   }
@@ -812,6 +855,10 @@ html[data-theme="oblivion-scotch"] {
     border: 1px solid #313d4f;
     box-shadow: 0 1px 5px #0c0d0e;
   }
+
+  .minimal-home div.item-group-container, input.minimal-search {
+    box-shadow: 0 1px 6px #00000099, 0 1px 1px #000000cc;
+  }
 }
 
 html[data-theme="oblivion-blue"] {

src/views/Minimal.vue

@@ -211,13 +211,13 @@ export default {
   min-height: calc(99vh - var(--footer-height));
   width: 90%;
   max-width: 1000px;
-  background: var(--background);
+  background: var(--minimal-view-background-color);
 }
 
 .title-and-search {
   text-align: center;
   h1 {
-    color: var(--heading-text-color);
+    color: var(--minimal-view-title-color);
     margin: 0;
     font-size: 3rem;
   }
@@ -253,7 +253,7 @@ export default {
 
 .no-data {
     font-size: 2rem;
-    color: var(--background);
+    color: var(--minimal-view-background-color);
     background: #ffffffeb;
     width: fit-content;
     margin: 2rem auto;
@@ -267,7 +267,7 @@ export default {
     right: 1rem;
     display: flex;
     .home-page-icon {
-      color: var(--primary);
+      color: var(--minimal-view-settings-color);
       width: 1.5rem;
       height: 1.5rem;
       @extend .svg-button;