Add glassmorphic custom.css and custom background image for public and admin instances

config-admin/custom.css

@@ -0,0 +1,39 @@
+/* Glassmorphism theme override */
+.theme-dark {
+  --theme-bg: transparent !important;
+}
+
+body {
+  background-image: url('/background.png') !important;
+  background-size: cover !important;
+  background-position: center !important;
+  background-attachment: fixed !important;
+}
+
+/* Semi-transparent blur cards */
+.card, .widget, .resource-widget {
+  background-color: rgba(15, 23, 42, 0.45) !important;
+  backdrop-filter: blur(14px) saturate(140%) !important;
+  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.3s ease !important;
+}
+
+.card:hover {
+  background-color: rgba(30, 41, 59, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.16) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Style headers and category names */
+h2, h3 {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Resources widget style matching the glass theme */
+.resource-widget {
+  padding: 12px !important;
+}

config-public/custom.css

@@ -0,0 +1,39 @@
+/* Glassmorphism theme override */
+.theme-dark {
+  --theme-bg: transparent !important;
+}
+
+body {
+  background-image: url('/background.png') !important;
+  background-size: cover !important;
+  background-position: center !important;
+  background-attachment: fixed !important;
+}
+
+/* Semi-transparent blur cards */
+.card, .widget, .resource-widget {
+  background-color: rgba(15, 23, 42, 0.45) !important;
+  backdrop-filter: blur(14px) saturate(140%) !important;
+  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.3s ease !important;
+}
+
+.card:hover {
+  background-color: rgba(30, 41, 59, 0.6) !important;
+  border: 1px solid rgba(255, 255, 255, 0.16) !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.6) !important;
+}
+
+/* Style headers and category names */
+h2, h3 {
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Resources widget style matching the glass theme */
+.resource-widget {
+  padding: 12px !important;
+}

docker-compose.yml

@@ -9,6 +9,7 @@ services:
       HOMEPAGE_ALLOWED_HOSTS: mischlabs.de,www.mischlabs.de,192.168.178.88,192.168.178.88:8085,localhost,127.0.0.1
     volumes:
       - ./config-public:/app/config
+      - ./config-public/background.png:/app/public/background.png:ro
       - mischlabs_data:/app/data
 
   mischlabs-admin:
@@ -24,6 +25,7 @@ services:
       - /volume1:/host/volume1:ro
       - /volume2:/host/volume2:ro
       - ./config-admin:/app/config
+      - ./config-admin/background.png:/app/public/background.png:ro
       - mischlabs_admin_data:/app/data
 
 volumes: