Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 35 Wiki Activity

style(ui): Move Buttons under the Repo selection

Browse Source
This commit is contained in:
Christoph
2026-07-11 18:04:49 +02:00
parent a6e7e991dd
commit fdbff8175e
4 changed files with 259 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+36 -8
View File
@@ -541,6 +541,7 @@
.shell {
--app-titlebar-height: 42px;
--app-toolbar-height: 34px;
display: flex;
flex-direction: column;
height: 100%;
@@ -562,7 +563,7 @@
position: relative;
z-index: 500;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-columns: auto 1fr auto auto;
align-items: center;
height: var(--app-titlebar-height);
background:
@@ -639,8 +640,30 @@
.tb-no-repo { color: var(--color-bar-muted); font-size: 12px; font-style: italic; }
.titlebar-right { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); }
.titlebar-actions { display: flex; align-items: stretch; }
/* App-global actions (help, settings) that must stay reachable in every view,
including Repository Management where the repo toolbar is hidden. */
.titlebar-globals {
display: flex;
align-items: stretch;
height: 100%;
}
/* Repo action toolbar: its own row under the repo tab bar (hidden in Repository
Management). Its own row means a narrow window can never push the window
controls out of the titlebar; overflow-x is the last-resort safety net. */
.repo-toolbar {
display: flex;
align-items: stretch;
height: var(--app-toolbar-height);
border: 1px solid var(--color-border-subtle);
border-radius: 10px;
background: rgba(16, 17, 29, 0.9);
flex-shrink: 0;
overflow-x: auto;
scrollbar-width: none;
user-select: none;
}
.repo-toolbar::-webkit-scrollbar { display: none; }
.tb-action {
display: flex;
@@ -655,6 +678,7 @@
color: var(--color-bar-muted);
font-size: 12px;
cursor: pointer;
flex-shrink: 0;
transition: background 120ms ease, color 120ms ease;
-webkit-app-region: no-drag;
}
@@ -664,9 +688,9 @@
.tb-action.auto-toggle.active:hover:not(:disabled) { color: #6ee090; background: rgba(78,202,118,0.1); }
.tb-action-label { font-size: 12px; font-weight: 600; }
.titlebar-divider { width: 1px; margin: 8px 0; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.titlebar-divider { width: 1px; margin: 8px 6px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.titlebar-controls { display: flex; align-items: stretch; height: 100%; }
.titlebar-controls { display: flex; align-items: stretch; height: 100%; border-left: 1px solid rgba(255,255,255,0.06); }
.tb-btn {
display: flex;
@@ -4720,10 +4744,15 @@
}
:root[data-theme="light"] .titlebar-brand,
:root[data-theme="light"] .titlebar-right {
:root[data-theme="light"] .titlebar-controls {
border-color: rgba(34,49,78,0.1);
}
:root[data-theme="light"] .repo-toolbar {
border-color: var(--color-border);
background: rgba(255,255,255,0.78);
}
:root[data-theme="light"] .titlebar-brand-icon img {
filter: drop-shadow(0 1px 2px rgba(28,44,74,0.18));
}
@@ -5198,8 +5227,7 @@
body { overflow: auto; }
.shell-body { min-height: 100%; gap: 6px; }
.titlebar-info { padding: 0 8px; }
.titlebar-actions .tb-action:not(.auto-toggle):not(:last-child) { display: none; }
.tb-action { width: 36px; padding: 0 8px; }
.tb-action { padding: 0 9px; }
.tb-btn { width: 34px; }
.workspace { grid-template-columns: 1fr; gap: 6px; }
.left-sidebar-resize-handle { display: none; }