Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-16 21:29:56 +01:00
Code Issues Packages Projects Releases Activity

fix(layout): classic toolbar in zen mode

Browse Source
This commit is contained in:
Elian Doran
2025-12-15 12:41:34 +02:00
parent ad8e52f744
commit 7edfd5d7b4
1 changed files with 97 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
apps/client/src/stylesheets/style.css
View File

@@ -2116,7 +2116,8 @@ body.zen:not(.backdrop-effects-disabled) .note-split.type-text .scrolling-contai
/* Fixed formatting toolbar */ /* Fixed formatting toolbar */
body.zen .note-split .ribbon-container { body.zen:not(.experimental-feature-new-layout) {
.note-split .ribbon-container {
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 20px; bottom: 20px;
@@ -2127,15 +2128,15 @@ body.zen .note-split .ribbon-container {
transition: opacity 100ms linear; transition: opacity 100ms linear;
} }
body.zen .note-split:focus-within .ribbon-container { .note-split:focus-within .ribbon-container {
opacity: 1; /* Show when the note split is focused */ opacity: 1; /* Show when the note split is focused */
} }
body.zen .note-split .ribbon-container .ribbon-body { .note-split .ribbon-container .ribbon-body {
border: 0; border: 0;
} }
body.zen .note-split .ribbon-container .classic-toolbar-widget { .note-split .ribbon-container .classic-toolbar-widget {
margin: auto; margin: auto;
width: fit-content; width: fit-content;
box-shadow: 0px 10px 20px rgba(0, 0, 0, .1); box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
@@ -2145,31 +2146,78 @@ body.zen .note-split .ribbon-container .classic-toolbar-widget {
background: var(--menu-background-color); background: var(--menu-background-color);
} }
body.zen .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) { .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
/* Hide the toolbar wrapper if the toolbar is missing */ /* Hide the toolbar wrapper if the toolbar is missing */
display: none; display: none;
} }
body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget { .note-split:focus-within .ribbon-container .classic-toolbar-widget {
pointer-events: all; pointer-events: all;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
body.zen .note-split .ribbon-container .classic-toolbar-widget { .note-split .ribbon-container .classic-toolbar-widget {
/* Set the toolbar to full with */ /* Set the toolbar to full with */
width: 100%; width: 100%;
} }
body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw, .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw, .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme, .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s { .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
/* Force toolbar items overflow dropdowns open upwards */ /* Force toolbar items overflow dropdowns open upwards */
top: auto; top: auto;
bottom: 100%; bottom: 100%;
} }
} }
}
body.zen.experimental-feature-new-layout {
.status-bar {
display: none;
}
.classic-toolbar-widget {
position: fixed;
left: 50%;
bottom: 20px;
z-index: 1000;
opacity: 0; /* Hidden unless the current note split is focused */
pointer-events: none;
transition: opacity 100ms linear;
width: fit-content;
box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
border-radius: 8px;
border: 1px solid var(--main-border-color);
padding: 4px;
background: var(--menu-background-color);
transform: translateX(-50%);
}
#root-widget:has(.note-split.type-text:focus-within) .classic-toolbar-widget,
.classic-toolbar-widget:focus-within {
opacity: 1; /* Show when the note split is focused */
pointer-events: all;
}
@media (max-width: 1300px) {
.classic-toolbar-widget {
/* Set the toolbar to full with */
width: 100%;
}
.classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
.classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
.classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
.classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
.classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
/* Force toolbar items overflow dropdowns open upwards */
top: auto;
bottom: 100%;
}
}
}
/* Content renderer */ /* Content renderer */