Adds new material theme

src/components/LinkItems/Collapsable.vue

@@ -185,7 +185,7 @@ export default {
     }
 
     .toggle:checked + .lbl-toggle + .collapsible-content {
-        max-height: 1000px;
+        max-height: 3000px;
     }
 
     .toggle:checked + .lbl-toggle {

src/components/LinkItems/Item.vue

@@ -4,9 +4,9 @@
       :target="target === 'newtab' ? '_blank' : ''"
       :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       v-tooltip="getTooltipOptions()"
-      v-bind:style="customStyles"
       rel="noopener noreferrer" tabindex="0"
       :id="`link-${id}`"
+      :style="`--open-icon: ${getUnicodeOpeningIcon()}; ${customStyles}`"
     >
       <!-- Item Text -->
       <div class="tile-title" :id="`tile-${id}`" >
@@ -15,7 +15,8 @@
         <p class="description">{{ description }}</p>
       </div>
       <!-- Item Icon -->
-      <Icon :icon="icon" :url="url" :size="itemSize" :color="color" v-bind:style="customStyles" />
+      <Icon :icon="icon" :url="url" :size="itemSize" :color="color"
+        v-bind:style="customStyles" class="icon-container" />
       <!-- Small icon, showing opening method on hover -->
       <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
         :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
@@ -90,6 +91,14 @@ export default {
         delay: { show: 600, hide: 200 },
       };
     },
+    getUnicodeOpeningIcon() {
+      switch (this.target) {
+        case 'newtab': return '"\\f360"';
+        case 'sametab': return '"\\f24d"';
+        case 'iframe': return '"\\f2d0"';
+        default: return '"\\f054"';
+      }
+    },
   },
   mounted() {
     this.manageTitleEllipse();
@@ -233,6 +242,11 @@ export default {
   p.description {
     display: none;
   }
+  &:before {
+    display: none;
+    font-family: FontAwesome;
+    content: var(--open-icon, "\f054") !important;
+  }
 }
 
 </style>

src/components/PageStrcture/Footer.vue

@@ -29,12 +29,12 @@ export default {
 <style scoped lang="scss">
 
 footer {
-  padding: 0.5rem;
+  padding: 0.25rem;
   text-align: center;
   color: var(--medium-grey);
   opacity: var(--dimming-factor);
   background: var(--background-darker);
-  margin-top: 1rem;
+  margin-top: 7px;
   border-top: 1px solid var(--outline-color);
 }