fix: keep sidebar readable in reduced transparency

Author: Dimillian

src/styles/base.css

@@ -21,6 +21,7 @@
   --text-fainter: rgba(255, 255, 255, 0.45);
   --text-dim: rgba(255, 255, 255, 0.35);
   --surface-sidebar: rgba(18, 18, 18, 0.5);
+  --surface-sidebar-opaque: rgb(18, 18, 18);
   --surface-topbar: rgba(10, 14, 20, 0.45);
   --surface-right-panel: rgba(9, 12, 20, 0.4);
   --surface-composer: rgba(10, 14, 20, 0.45);
@@ -79,6 +80,7 @@
 
 .app.reduced-transparency {
   --surface-sidebar: rgba(18, 18, 18, 0.92);
+  --surface-sidebar-opaque: rgb(18, 18, 18);
   --surface-topbar: rgba(10, 14, 20, 0.94);
   --surface-right-panel: rgba(9, 12, 20, 0.92);
   --surface-composer: rgba(10, 14, 20, 0.94);
@@ -115,6 +117,7 @@
   --text-fainter: rgba(17, 20, 28, 0.45);
   --text-dim: rgba(17, 20, 28, 0.35);
   --surface-sidebar: rgba(246, 247, 250, 0.82);
+  --surface-sidebar-opaque: rgb(246, 247, 250);
   --surface-topbar: rgba(250, 251, 253, 0.9);
   --surface-right-panel: rgba(245, 247, 250, 0.82);
   --surface-composer: rgba(250, 251, 253, 0.9);
@@ -160,6 +163,7 @@
 
 :root[data-theme="light"] .app.reduced-transparency {
   --surface-sidebar: rgba(240, 242, 247, 0.98);
+  --surface-sidebar-opaque: rgb(240, 242, 247);
   --surface-topbar: rgba(244, 246, 250, 0.98);
   --surface-right-panel: rgba(242, 244, 248, 0.98);
   --surface-composer: rgba(244, 246, 250, 0.98);
@@ -197,6 +201,7 @@
     --text-fainter: rgba(17, 20, 28, 0.45);
     --text-dim: rgba(17, 20, 28, 0.35);
     --surface-sidebar: rgba(246, 247, 250, 0.82);
+    --surface-sidebar-opaque: rgb(246, 247, 250);
     --surface-topbar: rgba(250, 251, 253, 0.9);
     --surface-right-panel: rgba(245, 247, 250, 0.82);
     --surface-composer: rgba(250, 251, 253, 0.9);
@@ -242,6 +247,7 @@
 
   :root:not([data-theme]) .app.reduced-transparency {
     --surface-sidebar: rgba(240, 242, 247, 0.98);
+    --surface-sidebar-opaque: rgb(240, 242, 247);
     --surface-topbar: rgba(244, 246, 250, 0.98);
     --surface-right-panel: rgba(242, 244, 248, 0.98);
     --surface-composer: rgba(244, 246, 250, 0.98);

src/styles/sidebar.css

@@ -913,7 +913,7 @@
   }
 }
 .app.reduced-transparency .sidebar {
-  background: var(--surface-sidebar);
+  background: var(--surface-sidebar-opaque);
   backdrop-filter: none;
 }