u/Extension_Anteater56

At first, I wasn't a fan of Nova because I thought it forced theme colors on the background. But after applying transparency, it actually turned out quite nice. I think it would look even better if the sidebar and web content window were rounded/transparent too, but standard CSS tweaks don't seem to work anymore due to Nova's new structure. Any workarounds?

I tweaked Liquid Fox a little bit for my taste

/* ==========================================================================
   [1] 맥 OS 시스템 블러 및 변수 세팅 (Liquid Fox 기반)
   ========================================================================= */
:root {
  appearance: -moz-sidebar !important;
  --liquid-radius: 12px;
  --liquid-padding: 0px;
  --urlbar-collapsed-width: 200px;
  --urlbar-open-width: 300px;
}

/* 최상위 전역 레이어 관통 */
body, #navigator-toolbox, #browser {
  background: transparent !important;
}

/* ==========================================================================
   [2] Nova 순정 세로탭 외부 컨테이너 안전 투명화 (웹페이지 간섭 원천 차단)
   ========================================================================= */
tabbrowser-sidebar,
sidebar-main,
#sidebar-box,
#sidebar,
.sidebar-panel {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 세로탭 사용자 지정 패널 영역만 정밀 타격하여 블러 이식 */
:root:has(tabbrowser-sidebar) tabbrowser-sidebar,
:root:has(sidebar-main) sidebar-main,
:root:has(#sidebar-box) #sidebar-box {
  margin-inline-start: 0px !important;
  margin-bottom: calc(var(--liquid-padding) - 2px) !important;
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 경계선 제거 */
#sidebar-splitter, .sidebar-splitter {
  display: none !important;
}

/* ==========================================================================
   [3] 북마크 바(개인 Toolbar) 완전 투명화 및 레이아웃 동기화
   ========================================================================== */
#PersonalToolbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#PersonalToolbar toolbarbutton {
  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.15) !important;
  --toolbarbutton-active-background: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================================================
   [1] 맥 OS 시스템 블러 및 변수 세팅 (Liquid Fox 기반)
   ========================================================================= */
:root {
  appearance: -moz-sidebar !important;
  --liquid-radius: 12px;
  --liquid-padding: 0px;
  --urlbar-collapsed-width: 200px;
  --urlbar-open-width: 300px;
}

/* 최상위 전역 레이어 관통 */
body, #navigator-toolbox, #browser {
  background: transparent !important;
}

/* ==========================================================================
   [2] Nova 순정 세로탭 외부 컨테이너 안전 투명화 (웹페이지 간섭 원천 차단)
   ========================================================================= */
tabbrowser-sidebar,
sidebar-main,
#sidebar-box,
#sidebar,
.sidebar-panel {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 세로탭 사용자 지정 패널 영역만 정밀 타격하여 블러 이식 */
:root:has(tabbrowser-sidebar) tabbrowser-sidebar,
:root:has(sidebar-main) sidebar-main,
:root:has(#sidebar-box) #sidebar-box {
  margin-inline-start: 0px !important;
  margin-bottom: calc(var(--liquid-padding) - 2px) !important;
  background: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* 경계선 제거 */
#sidebar-splitter, .sidebar-splitter {
  display: none !important;
}

/* ==========================================================================
   [3] 북마크 바(개인 Toolbar) 완전 투명화 및 레이아웃 동기화
   ========================================================================== */
#PersonalToolbar {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

#PersonalToolbar toolbarbutton {
  --toolbarbutton-hover-background: rgba(255, 255, 255, 0.15) !important;
  --toolbarbutton-active-background: rgba(255, 255, 255, 0.25) !important;
}

u/media (prefers-color-scheme: dark) {
  #PersonalToolbar toolbarbutton {
    --toolbarbutton-hover-background: rgba(0, 0, 0, 0.2) !important;
    --toolbarbutton-active-background: rgba(0, 0, 0, 0.3) !important;
  }
}

/* ==========================================================================
   [4] 하얀 툴바 영역에 시스템 블러 강제 이식
   ========================================================================= */
#navigator-toolbox {
  background: rgba(255, 255, 255, 0.3) !important; 
  backdrop-filter: blur(20px) saturate(180%) !important; 
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: none !important;
}

#nav-bar, #TabsToolbar {
  background: transparent !important;
} (prefers-color-scheme: dark) {
  #PersonalToolbar toolbarbutton {
    --toolbarbutton-hover-background: rgba(0, 0, 0, 0.2) !important;
    --toolbarbutton-active-background: rgba(0, 0, 0, 0.3) !important;
  }
}

/* ==========================================================================
   [4] 하얀 툴바 영역에 시스템 블러 강제 이식
   ========================================================================= */
#navigator-toolbox {
  background: rgba(255, 255, 255, 0.3) !important; 
  backdrop-filter: blur(20px) saturate(180%) !important; 
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: none !important;
}

#nav-bar, #TabsToolbar {
  background: transparent !important;
}