🔀 Merge pull request #1660 from Lissy93/theme/night-bat

🎨 New theme: NightBat

src/components/LinkItems/Item.vue

@@ -34,6 +34,8 @@
         :statusSuccess="statusResponse ? statusResponse.successStatus : undefined"
         :statusText="statusResponse ? statusResponse.message : undefined"
       />
+      <!-- URL of the item (shown on hover, only on some themes) -->
+      <p class="item-url">{{ item.url | shortUrl }}</p>
       <!-- Edit icon (displayed only when in edit mode) -->
       <EditModeIcon v-if="isEditMode" class="edit-mode-item" @click="openItemSettings()" />
     </a>
@@ -122,6 +124,26 @@ export default {
       }
     },
   },
+  filters: {
+    shortUrl(value) {
+      if (!value || typeof value !== 'string') {
+        return '';
+      }
+      try {
+        // Use URL constructor to parse the input
+        const url = new URL(value);
+        return url.hostname;
+      } catch (e) {
+        // If the input is not a valid URL, try to handle it as an IP address
+        const ipPattern = /^(\d{1,3}\.){3}\d{1,3}/;
+        const match = value.match(ipPattern);
+        if (match) {
+          return match[0];
+        }
+        return '';
+      }
+    },
+  },
   data() {
     return {
       editMenuOpen: false,
@@ -209,6 +231,9 @@ export default {
     &.span-7 { min-width: 14%; }
     &.span-8 { min-width: 12.5%; }
   }
+  .item-url {
+    display: none;
+  }
 }
 
 .item {

src/styles/color-themes.scss

@@ -1849,6 +1849,88 @@ html[data-theme='neomorphic'] {
 }
 
 
+html[data-theme="night-bat"] {
+  // Main colors
+  --primary: #4780ff;
+  --background: #252931;
+  --background-darker: #303540;
+  // Typography
+  --font-headings: 'Podkova', 'Roboto', serif;
+  --font-body: 'Roboto', serif;
+  --heading-text-color: #fff;
+  // Items
+  --item-background: #303540;
+  --item-background-hover: var(--item-background);
+  --item-shadow: 0px 3px 0px var(--primary), 2px 2px 6px var(--black);
+  --item-hover-shadow: 0px 20px 0px 0 var(--primary), 2px 2px 6px var(--black);
+  // Sections
+  --item-group-heading-text-color: var(--white);
+  --item-group-heading-text-color-hover: var(--white);
+  --item-group-shadow: none;
+  --item-group-background: none;
+  --item-group-outer-background: none;
+  // Nav Links
+  --nav-link-background-color: var(--background);
+  --nav-link-background-color-hover: var(--background);
+  --nav-link-border-color: transparent;
+  --nav-link-border-color-hover: transparent;
+  --nav-link-shadow: 4px 4px 0px var(--background-darker), -3px 0px 0px var(--primary), 2px 2px 6px var(--black);
+  --nav-link-shadow-hover: 6px 6px 0px var(--background-darker), -4px 0px 0px var(--primary), 2px 2px 9px var(--black);
+  // Misc
+  --curve-factor: 4px;
+  --curve-factor-navbar: 8px;
+
+  --widget-text-color: var(--white);
+
+  // Style overrides
+  label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
+  .content-inner { border-top: 1px dashed var(--primary); }
+  .item.size-large .tile-title p.description { height: 3rem; }
+  .item, .nav-outer nav .nav-item { border-radius: 1px; }
+  .item.size-large { margin: 0.5rem; }
+  // Show outline when collapsed
+  .is-collapsed {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    &:hover {
+      background: var(--item-background-hover);
+      box-shadow: var(--item-hover-shadow);
+    }
+  }
+  .widget-base {
+    background: var(--background-darker);
+    padding: 1rem 0.5rem;
+    margin: 0.5rem 0;
+  }
+
+  .item-wrapper {
+    .item-url {
+      display: block;
+      opacity: 0;
+      position: absolute;
+      bottom: -1.9rem;
+      font-size: 0.8rem;
+      color: var(--background);
+      transition: all 0.2s cubic-bezier(0.8, 0.8, 0.4, 1.4);
+    }
+    a {
+      transition: all 0.2s cubic-bezier(0.8, 0.8, 0.4, 1.4);
+      height: calc(100% - 1rem);
+    }
+    &:hover {
+      a { height: calc(100% - 2rem); }
+      .item-icon {
+        transform: scale(0.9);
+      }
+      .item-url {
+        display: block;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+
 html[data-theme='cherry-blossom'] {
   --primary: #e1e8ee;
   --background: #11171d;

src/utils/defaults.js

@@ -89,6 +89,7 @@ module.exports = {
     'tama',
     'neomorphic',
     'glass-2',
+    'night-bat',
   ],
   /* Default color options for the theme configurator swatches */
   swatches: [