From 55f7a26634ba0b1afe83be1ec35bbc9a8aca3ca5 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Mon, 3 Nov 2025 15:53:05 +0200 Subject: [PATCH] style/zen mode: use translucency for the title bar --- apps/client/src/stylesheets/style.css | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 48e52ed92..196fbf505 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -2117,9 +2117,29 @@ body.zen .note-split.type-text { font-size: 1.15em; } +body.zen .note-split.type-text .title-row { + --start-color: var(--main-background-color); + + position: absolute; + width: 100%; + background: linear-gradient(var(--start-color) 30%, transparent 100%); + z-index: 1000; +} + +@supports (background: color-mix(in srgb, white, transparent)) { + body.zen .note-split.type-text .title-row { + --start-color: color-mix(in srgb, var(--main-background-color), transparent 10%); + } +} + body.zen .note-split.type-text .scrolling-container { + --padding-top: 50px; /* Should be enough to cover the title row */ + --padding-bottom: 130px; /* Should be enough to avoid caret being hidden by the formatting toolbar */ + /* (Usually) keeps the caret above the fixed toolbar */ - scroll-padding-bottom: 130px; + padding-top: var(--padding-top); + scroll-padding-top: var(--padding-top); + scroll-padding-bottom: var(--padding-bottom); } /* Fixed formatting toolbar */