Zayden-Jung/Endoleap
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: size toolbar buttons to 32px including padding

Browse Source
This commit is contained in:
Codex Bot
2026-11-06 01:17:34 +08:00
parent 5046baff75
commit f1f4fcf3f6
7 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/dashboard.tsx
+1 -1
View File
@@ -157,7 +157,7 @@ export default function DashboardSidebar() {
<Link href="/" className={styles.logoLink} aria-label="啡跃 Endoleap 主页" title="返回主页">
<img src="/brand/png/logo-light/endoleap-32.png"
srcSet="/brand/png/logo-light/endoleap-32.png 1x, /brand/png/logo-light/endoleap-64.png 2x, /brand/png/logo-light/endoleap-128.png 4x"
width={32} height={32} alt="" />
width={20} height={20} alt="" />
</Link>
<h1 className={styles.floatingTitle} title={currentTitle}>{currentTitle}</h1>
<button type="button" className={styles.floatingAvatarButton} popoverTarget="workspace-account" aria-label="账户和工作空间">
src/components/canvas/canvas.module.css
+3 -3
View File
@@ -14,17 +14,17 @@
.toolbar button:disabled { cursor: not-allowed; }
.divider { flex: 0 0 1px; width: 1px; height: 16px; margin: 0 2px; background: #ece6df; }
.topRight { position: absolute; top: 12px; right: 12px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.toolbar .zoomValue { box-sizing: border-box; flex: 0 0 48px; width: 48px; height: var(--toolbar-control-height, 40px); padding: 0; border-radius: 5px; font: inherit; font-variant-numeric: tabular-nums; }
.toolbar .zoomValue { box-sizing: border-box; flex: 0 0 48px; width: 48px; height: var(--toolbar-control-height, 32px); padding: 0; border-radius: 5px; font: inherit; font-variant-numeric: tabular-nums; }
.toolbar .zoomValue:hover { background: #e9e7e3; }
.saveStatus { padding-right: 5px; font-size: 10px; color: #a59b90; }
.bottomToolbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 10; }
.helpPopup { position: fixed; inset: auto 12px 70px auto; margin: 0; width: 330px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 18px; border: 1px solid #e2dcd3; border-radius: 12px; background: white; color: #6d6054; box-shadow: 0 8px 30px #32251a14; font-size: 12px; line-height: 1.7; }
.helpPopup { position: fixed; inset: auto 12px 62px auto; margin: 0; width: 330px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 110px); overflow-y: auto; padding: 18px; border: 1px solid #e2dcd3; border-radius: 12px; background: white; color: #6d6054; box-shadow: 0 8px 30px #32251a14; font-size: 12px; line-height: 1.7; }
.helpPopup strong { color: #49372e; font-size: 13px; }
.helpPopup p { margin-top: 9px; }
.error { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); max-width: min(500px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #e5c7b8; border-radius: 8px; color: #a25439; background: #fff9f3; font-size: 12px; z-index: 15; }
.helpToolbar { position: absolute; right: 12px; bottom: 12px; z-index: 10; }
@media (max-width: 700px) {
.topRight { top: 70px; right: 12px; }
.topRight { top: 62px; right: 12px; }
.bottomToolbar { left: 12px; bottom: 12px; transform: none; max-width: calc(100vw - 92px); overflow-x: auto; overscroll-behavior-x: contain; }
}
src/components/ui/icon-button.module.css
+3 -3
View File
@@ -4,8 +4,8 @@
justify-content: center;
flex: 0 0 auto;
box-sizing: border-box;
width: var(--toolbar-control-width, 28px);
height: var(--toolbar-control-height, 24px);
width: var(--toolbar-control-width, 32px);
height: var(--toolbar-control-height, 32px);
padding: 4px 6px;
border: 0;
border-radius: 5px;
@@ -13,7 +13,7 @@
color: inherit;
cursor: pointer;
}
.button svg { width: var(--toolbar-icon-size, 16px); height: var(--toolbar-icon-size, 16px); flex: 0 0 var(--toolbar-icon-size, 16px); }
.button svg { width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); flex: 0 0 var(--toolbar-icon-size, 20px); }
.button:hover { background: #e9e7e3; }
.button:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
src/components/ui/toolbar.module.css
+3 -3
View File
@@ -1,7 +1,7 @@
.surface {
--toolbar-icon-size: 32px;
--toolbar-control-width: 44px;
--toolbar-control-height: 40px;
--toolbar-icon-size: 20px;
--toolbar-control-width: 32px;
--toolbar-control-height: 32px;
display: flex;
align-items: center;
gap: 2px;
src/components/workspace/workspace.module.css
+6 -6
View File
@@ -112,15 +112,15 @@
@media (max-width: 600px) { .shell { --sidebar-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .accountPopup:popover-open { animation: none; } }
.logoLink { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; width: var(--toolbar-control-width, 28px); height: var(--toolbar-control-height, 24px); padding: 4px 6px; border-radius: 5px; }
.logoLink img { display: block; width: var(--toolbar-icon-size, 16px); height: var(--toolbar-icon-size, 16px); }
.logoLink { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; box-sizing: border-box; width: var(--toolbar-control-width, 32px); height: var(--toolbar-control-height, 32px); padding: 4px 6px; border-radius: 5px; }
.logoLink img { display: block; width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); }
.logoLink:hover { background: #e9e7e3; }
.logoLink:focus-visible { outline: 2px solid #9d7d66; outline-offset: 2px; }
.floatingAvatarButton { display: grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; width: var(--toolbar-control-width, 28px); height: var(--toolbar-control-height, 24px); border-radius: 5px; }
.floatingAvatarButton { display: grid; place-items: center; flex: 0 0 auto; box-sizing: border-box; width: var(--toolbar-control-width, 32px); height: var(--toolbar-control-height, 32px); border-radius: 5px; }
.floatingAvatarButton:hover { background: #e9e7e3; }
.accountPopup[data-floating="true"] { inset: 70px auto auto 12px; max-height: calc(100dvh - 84px); transform-origin: top left; }
.accountPopup[data-floating="true"] { inset: 62px auto auto 12px; max-height: calc(100dvh - 76px); transform-origin: top left; }
.floatingAvatarButton .avatar { flex-basis: var(--toolbar-icon-size, 16px); width: var(--toolbar-icon-size, 16px); height: var(--toolbar-icon-size, 16px); font-size: 14px; }
.floatingTitle { flex: 1 1 auto; min-width: 0; max-width: 240px; margin: 0 4px; color: #37352f; font-size: 14px; line-height: var(--toolbar-control-height, 40px); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.floatingAvatarButton .avatar { flex-basis: var(--toolbar-icon-size, 20px); width: var(--toolbar-icon-size, 20px); height: var(--toolbar-icon-size, 20px); font-size: 14px; }
.floatingTitle { flex: 1 1 auto; min-width: 0; max-width: 240px; margin: 0 4px; color: #37352f; font-size: 14px; line-height: var(--toolbar-control-height, 32px); font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 700px) { .floatingTitle { max-width: 180px; } }