Various stylesheet fixes for background image support

dashboard/src/components/Headerbar.vue

@@ -112,6 +112,18 @@ onMounted(async () => {
   gap: 15px;
 }
 
+body.has-background .headerbar {
+  background-color: rgba(255,255,255,0.2);
+  filter: drop-shadow(0px 0px 14px white);
+}
+
+@media (prefers-color-scheme: dark) {
+  body.has-background .headerbar {
+    background-color: rgba(0,0,0,0.2);
+    filter: drop-shadow(0px 0px 14px black);
+  }
+}
+
 .headerbar a {
   display: flex;
   align-items: center;

dashboard/src/components/Section.vue

@@ -35,10 +35,18 @@ export default {
 
 body.has-background .section {
   background-color: rgba(255,255,255,0.2);
-  backdrop-filter: blur(10px);
+  filter: drop-shadow(0px 0px 14px white);
   border-radius: 10px;
 }
 
+@media (prefers-color-scheme: dark) {
+  body.has-background .section {
+    background-color: rgba(0,0,0,0.2);
+    filter: drop-shadow(0px 0px 14px black);
+    border-radius: 10px;
+  }
+}
+
 .section-header {
   display: flex;
   flex-wrap: wrap;
@@ -47,7 +55,7 @@ body.has-background .section {
   gap: 5px;
   padding-left: 15px;
   padding-right: 15px;
-  margin-top: 10px;
+  padding-top: 25px;
 }
 
 .section-divider {
@@ -63,15 +71,21 @@ body.has-background .section {
   }
 }
 
+body.has-background .section-divider {
+  border: none;
+}
+
 .section-body {
   position: relative;
   margin-bottom: 15px;
   padding: 10px 15px;
   border-radius: 10px;
+  padding-bottom: 25px;
 }
 
 .section-extra-padding .section-body {
-  padding: 10px 25px;
+  padding-left: 25px;
+  padding-right: 25px;
 }
 
 </style>

dashboard/src/views/AppsView.vue

@@ -392,10 +392,22 @@ onUnmounted(() => {
   background-color: var(--card-background);
 }
 
+body.has-background .grid-item {
+  background-color: rgba(255,255,255,0.3);
+  filter: drop-shadow(0px 0px 14px white);
+}
+
+@media (prefers-color-scheme: dark) {
+  body.has-background .grid-item {
+    background-color: rgba(0,0,0,0.3);
+    filter: drop-shadow(0px 0px 14px black);
+  }
+}
+
 .grid-item:focus,
 .grid-item:hover {
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
-  background-color: var(--pankow-color-background-hover);
+  background-color: var(--pankow-color-background-hover) !important;
   text-decoration: none;
 }