Unable to get rid of transparent status bar because of too complex variables

[lightbluepoppy]

I inspedted Computed tab on chrome and spent about 5 hours applying background-color and etc. I was not able to override opacity setting of status bar.

Where is the variable and how can I solve this problem?

[lightbluepoppy]

I could not change the opacity. However, the right side bar have to dodge the status bar anyway. So, I managed to compensate the problem by adding paddings to the editor and right side bar.

.status-bar {
  background-image: url("data:image/svg+xml,%3Csvg%20%0A%20%20%20%20%20viewBox%3D%270%200%201200%201200%27%0A%20%20%20%20%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%0A%20%20%20%20%20overflow%3D%22auto%22%0A%20%20%20%20%20width%3D%221200px%22%0A%20%20%20%20%20height%3D%221200px%22%0A%20%20%20%20%20%3E%0A%20%20%3Cfilter%20id%3D%27noiseFilter%27%3E%0A%20%20%20%20%3CfeTurbulence%20%0A%20%20%20%20%20%20type%3D%27fractalNoise%27%0A%20%20%20%20%20%20baseFrequency%3D%270.75%27%0A%20%20%20%20%20%20numOctaves%3D%271%27%0A%20%20%20%20%20%20stitchTiles%3D%27stitch%27%0A%20%20%2F%3E%0A%20%20%20%20%0A%20%20%3C%2Ffilter%3E%0A%20%20%0A%20%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27rgb%287%2C%2034%2C%2033%29%27%20opacity%3D%271%27%20%2F%3E%0A%20%20%20%20%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23noiseFilter%29%27%20opacity%3D%220.15%22%2F%3E%0A%3C%2Fsvg%3E");
  padding: 2px 2.5px 2px 0 !important;
  width: fit-content !important;
}

.status-bar-item {
  height: 16px !important;
}

/* Left side bar */
body:not(.is-mobile).card-layout-open-dark.theme-dark
  .workspace.is-left-sidedock-open
  .workspace-split.mod-horizontal.mod-left-split {
  margin-right: 0 !important;
}

/* Editor */
body:not(.is-mobile).card-layout-open-dark.theme-dark .workspace-split.mod-vertical {
  padding-bottom: 20px !important;
}

/* Right side bar */
body:not(.is-mobile).card-layout-open-dark.theme-dark
  .workspace.is-right-sidedock-open
  .workspace-split.mod-horizontal.mod-right-split {
  margin-left: 0 !important;
  padding-bottom: 20px !important;
}

.mod-left-split .workspace-tab-header-container-inner,
.mod-right-split .workspace-tab-header-container-inner {
  padding: 0 !important;
}

body:not(.is-mobile) .horizontal-main-container {
  padding-bottom: 7px !important;
}

body:not(.is-mobile) .workspace {
  margin-right: 7px !important;
}

.workspace-tabs {
  gap: 0 !important;
}

[lightbluepoppy]

I found the culprit. You can set the status bar opaque.

.status-bar {
  mix-blend-mode: unset !important;
}