diff --git a/src/App.scss b/src/App.scss
index 69c568ec..bbf231ce 100644
--- a/src/App.scss
+++ b/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 {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index f3babc1c..73ec90f1 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -385,6 +385,12 @@
:fallback="previewTheme.colors.topBar"
:label="$t('settings.background')"
/>
+
.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;
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 29474512..26cc7c85 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/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',