enable translucency on top bar & titles

src/App.scss

@@ -22,6 +22,7 @@ body {
   overscroll-behavior-y: none;
   overflow-x: clip;
   overflow-y: scroll;
+  background: var(--bg);
 
   &.hidden {
     display: none;
@@ -54,8 +55,9 @@ nav {
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
-  height: var(--navbar-height);
+  height: calc(var(--navbar-height) + 1px);
   position: fixed;
+  backdrop-filter: blur(12px) saturate(1.2);
 }
 
 #sidebar {

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -385,6 +385,12 @@
               :fallback="previewTheme.colors.topBar"
               :label="$t('settings.background')"
             />
+            <OpacityInput
+              v-model="topBarOpacityLocal"
+              name="topBarOpacity"
+              :fallback="previewTheme.opacity.topBar"
+              :disabled="topBarColorLocal === 'transparent'"
+            />
             <ColorInput
               v-model="topBarTextColorLocal"
               name="topBarTextColor"

src/panel.scss

@@ -29,7 +29,7 @@
   padding: var(--panel-body-padding, 0);
 
   &:empty::before {
-    content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
+    content: '¯\\_(ツ)_/¯'; // Could use words but it'd require translations
     display: block;
     margin: 1em;
     text-align: center;
@@ -46,7 +46,9 @@
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
   --__panel-heading-height: 3.2em;
-  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
+  --__panel-heading-height-inner: calc(
+    var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding)
+  );
 
   position: relative;
   box-sizing: border-box;
@@ -124,20 +126,22 @@
 
 .panel-heading {
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-radius: var(--panelRadius, $fallback--panelRadius)
+    var(--panelRadius, $fallback--panelRadius) 0 0;
   border-width: 0 0 1px 0;
   align-items: start;
   // panel theme
   color: var(--panelText);
   background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  background-color: var(--topBar, $fallback--bg);
 
   &::after {
     background-color: $fallback--fg;
     background-color: var(--panel, $fallback--fg);
     z-index: -2;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius)
+      var(--panelRadius, $fallback--panelRadius) 0 0;
     box-shadow: var(--panelHeaderShadow);
   }
 
@@ -159,11 +163,12 @@
   }
 
   &:not(.-flexible-height) {
+    backdrop-filter: blur(12px) saturate(1.2);
     > .button-default {
       flex-shrink: 0;
 
       &,
-      i[class*=icon-] {
+      i[class*='icon-'] {
         color: $fallback--text;
         color: var(--btnPanelText, $fallback--text);
       }
@@ -190,7 +195,8 @@
 
 .panel-footer {
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius)
+    var(--panelRadius, $fallback--panelRadius);
   align-items: center;
   border-width: 1px 0 0 0;
   border-style: solid;

src/services/theme_data/pleromafe.js

@@ -431,7 +431,10 @@ export const SLOT_INHERITANCE = {
   },
 
   // Top bar
-  topBar: '--fg',
+  topBar: {
+    depends: ['fg'],
+    opacity: 'topBar'
+  },
   topBarText: {
     depends: ['fgText'],
     layer: 'topBar',