feat(client): add transparent background for status bar on tablets with desktop view

This commit is contained in:
Elian Doran
2025-01-04 20:04:02 +02:00
parent 657fa9402c
commit 11631687ff
3 changed files with 19 additions and 1 deletions

View File

@@ -55,7 +55,18 @@ body.mobile.context-menu-shown * {
-webkit-user-select: none !important;
}
#root-widget {
body.mobile #root-widget {
padding-top: env(safe-area-inset-top);
}
body.desktop #root-widget.horizontal-layout {
padding-top: env(safe-area-inset-top);
background-color: var(--launcher-pane-background-color);
}
body.desktop #root-widget.vertical-layout #launcher-pane,
body.desktop #root-widget.vertical-layout #left-pane,
body.desktop #root-widget.vertical-layout #rest-pane {
padding-top: env(safe-area-inset-top);
}

View File

@@ -688,6 +688,10 @@ body.layout-horizontal .tab-row-widget-container {
overflow: hidden;
}
body.desktop #root-widget.horizontal-layout {
background-color: var(--root-background) !important;
}
#root-widget.horizontal-layout .tab-row-widget .note-tab .note-tab-wrapper {
border: 1px solid transparent;
border-bottom-color: transparent;

View File

@@ -3,6 +3,9 @@
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
<title>TriliumNext Notes</title>
</head>