44 lines
4.2 KiB
CSS
44 lines
4.2 KiB
CSS
/* 工作台整体网格布局与资源管理器样式 */
|
|
.workbench { --sidebar-width: 250px; --dock-height: 22vh; display: grid; grid-template: 34px minmax(0, 1fr) var(--dock-height) 22px / 48px var(--sidebar-width) minmax(0, 1fr); height: 100vh; min-height: 360px; position: relative; }
|
|
.titlebar { align-items: center; background: var(--bg-titlebar); display: flex; grid-column: 1 / -1; justify-content: space-between; padding: 0 6px 0 12px; }
|
|
.titlebar nav { display: flex; gap: 2px; }
|
|
.brand { align-items: center; display: inline-flex; gap: 7px; }
|
|
.activitybar { align-items: center; background: #333; color: var(--fg-muted); display: flex; flex-direction: column; gap: 18px; grid-column: 1; grid-row: 2 / 4; padding-top: 13px; }
|
|
.activitybar button { align-items: center; background: transparent; border: 0; color: inherit; display: flex; height: 28px; justify-content: center; padding: 0; width: 100%; }
|
|
.activitybar button:hover, .activitybar button:focus-visible { color: var(--fg-primary); }
|
|
.sidebar { background: var(--bg-elevated); border-right: 1px solid var(--border); grid-column: 2; grid-row: 2 / 4; min-width: 0; overflow: auto; }
|
|
.sidebar h2 { font-size: 12px; letter-spacing: .12em; margin: 0; padding: 11px 12px; text-transform: uppercase; }
|
|
.sectionTitle { align-items: center; display: flex; font-size: 11px; font-weight: 700; gap: 4px; letter-spacing: .08em; padding: 6px 8px; text-transform: uppercase; }
|
|
.treeRoot { align-items: center; display: flex; gap: 5px; height: 22px; padding-left: 19px; }
|
|
.tableList { list-style: none; margin: 0 0 8px; padding: 0; }
|
|
.treeItem, .activeTreeItem { align-items: center; background: transparent; border: 0; border-left: 2px solid transparent; color: var(--fg-primary); cursor: pointer; display: flex; font: inherit; gap: 6px; height: 22px; padding: 0 8px 0 32px; text-align: left; width: 100%; }
|
|
.treeItem:hover { background: var(--bg-active); }
|
|
.activeTreeItem { background: var(--bg-active); border-left-color: var(--accent); }
|
|
.treeItem small, .activeTreeItem small { color: var(--fg-muted); margin-left: auto; }
|
|
.historyList { list-style: none; margin: 0; padding: 0 8px 8px 32px; }
|
|
.historyList button { background: transparent; border: 0; color: var(--fg-muted); font: inherit; height: 22px; max-width: 100%; overflow: hidden; padding: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
|
|
.editor { background: var(--bg-base); grid-column: 3; grid-row: 2; min-height: 0; min-width: 0; overflow: hidden; }
|
|
.bottom { background: var(--bg-elevated); border-top: 1px solid var(--border); grid-column: 3; grid-row: 3; min-height: 0; overflow: auto; }
|
|
.statusbar { align-items: center; background: var(--bg-statusbar); color: #fff; display: flex; gap: 16px; grid-column: 1 / -1; padding: 0 8px; }
|
|
.splitterV { position: absolute; top: 34px; bottom: 22px; left: calc(48px + var(--sidebar-width) - 2px); width: 5px; cursor: col-resize; background: transparent; border: 0; padding: 0; z-index: 6; }
|
|
.splitterH { position: absolute; left: calc(48px + var(--sidebar-width)); right: 0; bottom: calc(22px + var(--dock-height) - 2px); height: 5px; cursor: row-resize; background: transparent; border: 0; padding: 0; z-index: 6; }
|
|
.splitterV:hover, .splitterV:focus-visible, .splitterV.dragging { background: var(--accent); }
|
|
.splitterH:hover, .splitterH:focus-visible, .splitterH.dragging { background: var(--accent); }
|
|
|
|
@media (max-width: 720px) {
|
|
.workbench { grid-template-columns: 40px minmax(0, 1fr); }
|
|
.sidebar { display: none; }
|
|
.splitterV { display: none; }
|
|
.splitterH { left: 40px; }
|
|
.editor, .bottom { grid-column: 2; }
|
|
.titlebar nav .iconButton span { display: none; }
|
|
}
|
|
.tableEntry { display: flex; align-items: center; padding-left: 16px; }
|
|
.tableEntry .treeItem, .tableEntry .activeTreeItem { padding-left: 4px; min-width: 0; }
|
|
.expandButton { display: flex; flex-shrink: 0; padding: 3px; background: transparent; border: 0; color: var(--fg-muted); cursor: pointer; }
|
|
.columnList { list-style: none; padding: 0 10px 4px 42px; }
|
|
.columnList li { display: flex; align-items: center; gap: 6px; min-height: 24px; }
|
|
.columnList svg { flex-shrink: 0; color: var(--info); }
|
|
.columnList svg[aria-label="Primary key"] { color: var(--modified); }
|
|
.columnList small { margin-left: auto; color: var(--fg-muted); }
|