mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-10-30 15:23:01 +08:00
1 parent
b9f3274967
commit
e519bb0527
2 files changed
+48
-8
No files matched your search
+32
-8
@@ -15,6 +15,7 @@
|
|||||||
--focus: #087f6d;
|
--focus: #087f6d;
|
||||||
--sidebar-width: clamp(220px, 20vw, 292px);
|
--sidebar-width: clamp(220px, 20vw, 292px);
|
||||||
--bar-bg: #fafbfc;
|
--bar-bg: #fafbfc;
|
||||||
|
--bar-line: var(--line);
|
||||||
--titlebar-background: #e8edee;
|
--titlebar-background: #e8edee;
|
||||||
--titlebar-foreground: #263238;
|
--titlebar-foreground: #263238;
|
||||||
--titlebar-inactive-background: var(--base);
|
--titlebar-inactive-background: var(--base);
|
||||||
@@ -51,6 +52,7 @@
|
|||||||
--input: #2d353b;
|
--input: #2d353b;
|
||||||
--panel: #242b30;
|
--panel: #242b30;
|
||||||
--bar-bg: #272e33;
|
--bar-bg: #272e33;
|
||||||
|
--bar-line: #30383e;
|
||||||
--line: #374047;
|
--line: #374047;
|
||||||
--line-strong: #505d66;
|
--line-strong: #505d66;
|
||||||
--text-muted: #9aa8b1;
|
--text-muted: #9aa8b1;
|
||||||
@@ -194,10 +196,14 @@
|
|||||||
inset: 0 0 auto;
|
inset: 0 0 auto;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: var(--line);
|
background: var(--bar-line);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.document-titlebar[data-maximized]::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.document-tabs {
|
.document-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -276,10 +282,27 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.document-titlebar :is(.close-icon, .new-icon, .settings-icon, .update-icon) {
|
.document-titlebar :is(.close-icon, .new-icon, .settings-icon, .update-icon) {
|
||||||
width: 16px;
|
position: relative;
|
||||||
height: 16px;
|
width: var(--titlebar-icon-size, 10px);
|
||||||
flex: 0 0 16px;
|
height: var(--titlebar-icon-size, 10px);
|
||||||
mask-size: 12px 12px;
|
flex: 0 0 var(--titlebar-icon-size, 10px);
|
||||||
|
mask-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-titlebar .close-icon {
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.15 2.15 19.7 19.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18M21 3 3 21'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-titlebar .new-icon {
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.15 2.15 19.7 19.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-titlebar .settings-icon {
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.15 2.15 19.7 19.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 3-.7 2.4-2 .9L5 5.7 3 9l1.9 1.7v2.6L3 15l2 3.3 2.3-.6 2 .9L10 21h4l.7-2.4 2-.9 2.3.6 2-3.3-1.9-1.7v-2.6L21 9l-2-3.3-2.3.6-2-.9L14 3z'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.document-titlebar .update-icon {
|
||||||
|
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.15 3.15 17.7 17.7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.9-3M4 4v4h4M4 13a8 8 0 0 0 14.9 3M20 20v-4h-4'/%3E%3C/svg%3E");
|
||||||
}
|
}
|
||||||
|
|
||||||
.document-title-drag {
|
.document-title-drag {
|
||||||
@@ -730,8 +753,8 @@ a:focus-visible {
|
|||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
background: var(--bar-bg);
|
background: var(--bar-bg);
|
||||||
border-top: 1px solid var(--line);
|
border-top: 1px solid var(--bar-line);
|
||||||
border-bottom: 1px solid var(--line);
|
border-bottom: 1px solid var(--bar-line);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-frame > .toolbar {
|
.toolbar-frame > .toolbar {
|
||||||
@@ -4425,7 +4448,8 @@ audio.page-media {
|
|||||||
z-index: 12;
|
z-index: 12;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-top: 1px solid var(--line);
|
border-top: 1px solid var(--bar-line);
|
||||||
|
box-shadow: none;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1873,7 +1873,9 @@ el.pageInput.addEventListener("change", () => {
|
|||||||
window.addEventListener("resize", resizeViewer);
|
window.addEventListener("resize", resizeViewer);
|
||||||
window.addEventListener("resize", () => {
|
window.addEventListener("resize", () => {
|
||||||
for (const tabs of document.querySelectorAll(".panel-tabs, .document-tabs")) revealPanelTab(tabs);
|
for (const tabs of document.querySelectorAll(".panel-tabs, .document-tabs")) revealPanelTab(tabs);
|
||||||
|
updateTitleBarIcons();
|
||||||
});
|
});
|
||||||
|
el.documentTabs.addEventListener("scroll", updateTitleBarIcons);
|
||||||
window.addEventListener("blur", () => pageView.endPan());
|
window.addEventListener("blur", () => pageView.endPan());
|
||||||
COMPACT_LAYOUT.addEventListener("change", syncLayoutMode);
|
COMPACT_LAYOUT.addEventListener("change", syncLayoutMode);
|
||||||
el.viewerPanel.addEventListener("scroll", () => {
|
el.viewerPanel.addEventListener("scroll", () => {
|
||||||
@@ -2646,7 +2648,20 @@ function applyTitleBarInfo(info) {
|
|||||||
updateTitleBarRegions();
|
updateTitleBarRegions();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updateTitleBarIcons() {
|
||||||
|
const scale = window.devicePixelRatio;
|
||||||
|
el.documentTitleBar.style.setProperty("--titlebar-icon-size", `${Math.floor(10 * scale) / scale}px`);
|
||||||
|
const icons = [...el.documentTitleBar.querySelectorAll(".close-icon, .new-icon, .settings-icon, .update-icon")];
|
||||||
|
for (const icon of icons) icon.style.inset = "";
|
||||||
|
const offsets = icons.map(icon => {
|
||||||
|
const bounds = icon.getBoundingClientRect();
|
||||||
|
return `${Math.round(bounds.y * scale) / scale - bounds.y}px auto auto ${Math.round(bounds.x * scale) / scale - bounds.x}px`;
|
||||||
|
});
|
||||||
|
icons.forEach((icon, index) => icon.style.inset = offsets[index]);
|
||||||
|
}
|
||||||
|
|
||||||
function updateTitleBarRegions() {
|
function updateTitleBarRegions() {
|
||||||
|
updateTitleBarIcons();
|
||||||
if (!nativeHost || !workspace.titleBarReady) return;
|
if (!nativeHost || !workspace.titleBarReady) return;
|
||||||
const bounds = el.documentTitleBar.querySelector(".document-title-drag").getBoundingClientRect();
|
const bounds = el.documentTitleBar.querySelector(".document-title-drag").getBoundingClientRect();
|
||||||
const regions = bounds.width > 0 && bounds.height > 0 ? [{x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height}] : [];
|
const regions = bounds.width > 0 && bounds.height > 0 ? [{x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height}] : [];
|
||||||
@@ -5682,6 +5697,7 @@ function watchApplicationUpdates(checksum) {
|
|||||||
}
|
}
|
||||||
} else if (latest) {
|
} else if (latest) {
|
||||||
el.refreshAppButton.hidden = latest === checksum;
|
el.refreshAppButton.hidden = latest === checksum;
|
||||||
|
updateTitleBarIcons();
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
Reference in new issue
Block a user