chore: bootstrap independent git workflow
Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Paperclip CTO
53
gui/prototype/app.js
vendored
Normal file
53
gui/prototype/app.js
vendored
Normal file
@@ -0,0 +1,53 @@
|
||||
const connectionCards = document.querySelectorAll(".connection-card");
|
||||
const activeConnection = document.getElementById("active-connection");
|
||||
const detailTarget = document.getElementById("detail-target");
|
||||
const runQueryButton = document.getElementById("run-query");
|
||||
const executionBanner = document.getElementById("execution-banner");
|
||||
const executionTitle = document.getElementById("execution-title");
|
||||
const executionCopy = document.getElementById("execution-copy");
|
||||
const durationValue = document.getElementById("duration-value");
|
||||
const rowCount = document.getElementById("row-count");
|
||||
const bottomTabs = document.querySelectorAll(".bottom-tab");
|
||||
const tabContents = document.querySelectorAll(".tab-content");
|
||||
|
||||
connectionCards.forEach((card) => {
|
||||
card.addEventListener("click", () => {
|
||||
connectionCards.forEach((item) => item.classList.remove("is-active"));
|
||||
card.classList.add("is-active");
|
||||
|
||||
const target = card.dataset.connection;
|
||||
activeConnection.textContent = target;
|
||||
detailTarget.textContent = target;
|
||||
});
|
||||
});
|
||||
|
||||
runQueryButton.addEventListener("click", () => {
|
||||
const isError = executionBanner.classList.contains("is-error");
|
||||
|
||||
if (isError) {
|
||||
executionBanner.classList.remove("is-error");
|
||||
executionTitle.textContent = "Last run succeeded";
|
||||
executionCopy.textContent = "50 rows returned in 182 ms. Export is available.";
|
||||
durationValue.textContent = "182 ms";
|
||||
rowCount.textContent = "50";
|
||||
return;
|
||||
}
|
||||
|
||||
executionBanner.classList.add("is-error");
|
||||
executionTitle.textContent = "Last run failed";
|
||||
executionCopy.textContent = "Syntax error near `form`. The error summary should stay visible in the workspace.";
|
||||
durationValue.textContent = "21 ms";
|
||||
rowCount.textContent = "0";
|
||||
});
|
||||
|
||||
bottomTabs.forEach((tab) => {
|
||||
tab.addEventListener("click", () => {
|
||||
bottomTabs.forEach((item) => item.classList.remove("is-active"));
|
||||
tabContents.forEach((item) => item.classList.remove("is-active"));
|
||||
|
||||
tab.classList.add("is-active");
|
||||
document
|
||||
.querySelector(`[data-content="${tab.dataset.tab}"]`)
|
||||
.classList.add("is-active");
|
||||
});
|
||||
});
|
||||
293
gui/prototype/index.html
Normal file
293
gui/prototype/index.html
Normal file
@@ -0,0 +1,293 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>dbtool-cli-v1 GUI Foundation Prototype</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
<header class="topbar">
|
||||
<div class="topbar__brand">
|
||||
<div class="brand-mark">DB</div>
|
||||
<div>
|
||||
<p class="eyebrow">dbtool future desktop</p>
|
||||
<h1>Query Workspace Foundation</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topbar__context">
|
||||
<button class="ghost-button">⌘K Commands</button>
|
||||
<button class="ghost-button">Theme</button>
|
||||
<div class="connection-pill">
|
||||
<span class="status-dot status-dot--ok"></span>
|
||||
<span id="active-connection">pg-prod-readonly</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="workspace">
|
||||
<aside class="panel panel--nav">
|
||||
<section class="panel-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Connection Manager</p>
|
||||
<h2>Saved Targets</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small">+ New</button>
|
||||
</div>
|
||||
|
||||
<div class="connection-list">
|
||||
<button class="connection-card is-active" data-connection="pg-prod-readonly">
|
||||
<div>
|
||||
<strong>pg-prod-readonly</strong>
|
||||
<p>PostgreSQL · Production</p>
|
||||
</div>
|
||||
<span class="pill pill--success">Healthy</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="mysql-staging">
|
||||
<div>
|
||||
<strong>mysql-staging</strong>
|
||||
<p>MySQL · Staging</p>
|
||||
</div>
|
||||
<span class="pill pill--muted">Idle</span>
|
||||
</button>
|
||||
<button class="connection-card" data-connection="sqlite-local">
|
||||
<div>
|
||||
<strong>sqlite-local</strong>
|
||||
<p>SQLite · Local file</p>
|
||||
</div>
|
||||
<span class="pill pill--muted">Ready</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<div class="section-head">
|
||||
<div>
|
||||
<p class="eyebrow">Schema Browser</p>
|
||||
<h2>Catalog</h2>
|
||||
</div>
|
||||
<button class="ghost-button ghost-button--small">Filter</button>
|
||||
</div>
|
||||
|
||||
<div class="search-field">Search tables, views, columns</div>
|
||||
|
||||
<div class="tree">
|
||||
<details open>
|
||||
<summary>public</summary>
|
||||
<details open>
|
||||
<summary>orders</summary>
|
||||
<ul>
|
||||
<li>id · uuid</li>
|
||||
<li>customer_id · uuid</li>
|
||||
<li>status · text</li>
|
||||
<li>created_at · timestamptz</li>
|
||||
</ul>
|
||||
</details>
|
||||
<details>
|
||||
<summary>customers</summary>
|
||||
<ul>
|
||||
<li>id · uuid</li>
|
||||
<li>email · text</li>
|
||||
<li>country · text</li>
|
||||
</ul>
|
||||
</details>
|
||||
</details>
|
||||
<details>
|
||||
<summary>analytics</summary>
|
||||
<ul>
|
||||
<li>daily_orders</li>
|
||||
<li>top_customers</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
<section class="panel panel--main">
|
||||
<div class="editor-toolbar">
|
||||
<div class="toolbar-tabs">
|
||||
<button class="toolbar-tab is-active">orders audit.sql</button>
|
||||
<button class="toolbar-tab">empty result.sql</button>
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<span class="pill pill--muted">PostgreSQL</span>
|
||||
<button class="action-button action-button--primary" id="run-query">Run Query</button>
|
||||
<button class="action-button">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="editor">
|
||||
<div class="editor-gutter">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
<pre class="editor-code"><code>select
|
||||
id,
|
||||
customer_id,
|
||||
status,
|
||||
created_at
|
||||
from public.orders
|
||||
where created_at > now() - interval '7 days'
|
||||
order by created_at desc
|
||||
limit 50;</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="execution-banner" id="execution-banner">
|
||||
<div>
|
||||
<p class="eyebrow">Execution</p>
|
||||
<strong id="execution-title">Last run succeeded</strong>
|
||||
<p id="execution-copy">50 rows returned in 182 ms. Export is available.</p>
|
||||
</div>
|
||||
<div class="banner-metrics">
|
||||
<div>
|
||||
<span>Duration</span>
|
||||
<strong id="duration-value">182 ms</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Rows</span>
|
||||
<strong id="row-count">50</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bottom-panel">
|
||||
<div class="bottom-tabs">
|
||||
<button class="bottom-tab is-active" data-tab="results">Results</button>
|
||||
<button class="bottom-tab" data-tab="history">History</button>
|
||||
<button class="bottom-tab" data-tab="export">Export</button>
|
||||
<button class="bottom-tab" data-tab="problems">Problems</button>
|
||||
</div>
|
||||
|
||||
<div class="tab-content is-active" data-content="results">
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>id</th>
|
||||
<th>customer_id</th>
|
||||
<th>status</th>
|
||||
<th>created_at</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>8ec1...</td>
|
||||
<td>7cb3...</td>
|
||||
<td>paid</td>
|
||||
<td>2026-03-25 13:55:01 UTC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>80f8...</td>
|
||||
<td>5d10...</td>
|
||||
<td>processing</td>
|
||||
<td>2026-03-25 13:44:15 UTC</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5aa2...</td>
|
||||
<td>9ab1...</td>
|
||||
<td>failed</td>
|
||||
<td>2026-03-25 13:12:48 UTC</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="history">
|
||||
<div class="log-list">
|
||||
<div class="log-row">
|
||||
<strong>orders audit.sql</strong>
|
||||
<span>Success · 182 ms · 50 rows</span>
|
||||
</div>
|
||||
<div class="log-row">
|
||||
<strong>empty result.sql</strong>
|
||||
<span>Success · 95 ms · 0 rows</span>
|
||||
</div>
|
||||
<div class="log-row">
|
||||
<strong>bad syntax.sql</strong>
|
||||
<span>Error · syntax error near `form`</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="export">
|
||||
<div class="export-box">
|
||||
<div>
|
||||
<p class="eyebrow">Export Status</p>
|
||||
<strong>Ready to export the current result set</strong>
|
||||
<p>`/tmp/orders-last-7-days.csv` is available as the default target.</p>
|
||||
</div>
|
||||
<div class="export-actions">
|
||||
<button class="action-button">CSV</button>
|
||||
<button class="action-button">JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content" data-content="problems">
|
||||
<div class="problem-box">
|
||||
<strong>No blocking problem</strong>
|
||||
<p>When a query fails, this area should show the error summary, SQL fragment, and next action.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="panel panel--side">
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Inspector</p>
|
||||
<h2>Current Selection</h2>
|
||||
<div class="info-card">
|
||||
<span>Object</span>
|
||||
<strong>public.orders</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Primary Key</span>
|
||||
<strong>id</strong>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<span>Columns</span>
|
||||
<strong>12</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Execution Detail</p>
|
||||
<div class="detail-list">
|
||||
<div>
|
||||
<span>Target</span>
|
||||
<strong id="detail-target">pg-prod-readonly</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Mode</span>
|
||||
<strong>Read-only</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Last export</span>
|
||||
<strong>Not started</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel-section">
|
||||
<p class="eyebrow">Acceptance Focus</p>
|
||||
<ul class="focus-list">
|
||||
<li>Schema tree remains scannable on wide catalogs</li>
|
||||
<li>Execution state is visible without reading the table</li>
|
||||
<li>Result region supports empty, success, and error states</li>
|
||||
<li>Export action stays adjacent to query outcome</li>
|
||||
</ul>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
423
gui/prototype/styles.css
Normal file
423
gui/prototype/styles.css
Normal file
@@ -0,0 +1,423 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0f1115;
|
||||
--panel: #141821;
|
||||
--panel-muted: #10141c;
|
||||
--panel-strong: #1a202b;
|
||||
--border: #273041;
|
||||
--text: #e6e8ee;
|
||||
--muted: #9da7b8;
|
||||
--accent: #7dd3fc;
|
||||
--accent-soft: rgba(125, 211, 252, 0.12);
|
||||
--success: #7dd3a0;
|
||||
--warning: #f5c26b;
|
||||
--danger: #f09c9c;
|
||||
--shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
|
||||
--radius: 14px;
|
||||
--radius-sm: 10px;
|
||||
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--mono: "SFMono-Regular", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(125, 211, 252, 0.07), transparent 25%),
|
||||
linear-gradient(180deg, #0d1016 0%, #0f1115 100%);
|
||||
color: var(--text);
|
||||
font-family: var(--font);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 18px 22px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.82);
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.topbar__brand,
|
||||
.topbar__context,
|
||||
.section-head,
|
||||
.editor-toolbar,
|
||||
.toolbar-tabs,
|
||||
.toolbar-actions,
|
||||
.bottom-tabs,
|
||||
.export-box,
|
||||
.export-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar__brand h1,
|
||||
.section-head h2,
|
||||
.panel-section h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.3);
|
||||
border-radius: 12px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 4px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: 280px minmax(640px, 1fr) 280px;
|
||||
gap: 16px;
|
||||
min-height: calc(100vh - 124px);
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(20, 24, 33, 0.9);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel--nav,
|
||||
.panel--side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(240px, 1fr) auto minmax(260px, 0.9fr);
|
||||
}
|
||||
|
||||
.panel-section,
|
||||
.editor-toolbar,
|
||||
.execution-banner,
|
||||
.bottom-panel {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.panel-section + .panel-section {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.connection-pill,
|
||||
.pill,
|
||||
.ghost-button,
|
||||
.action-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab,
|
||||
.search-field,
|
||||
.info-card,
|
||||
.log-row,
|
||||
.problem-box {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.action-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ghost-button,
|
||||
.toolbar-tab,
|
||||
.bottom-tab,
|
||||
.search-field {
|
||||
padding: 8px 12px;
|
||||
background: var(--panel-muted);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.ghost-button--small {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
padding: 9px 13px;
|
||||
background: var(--panel-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.action-button--primary {
|
||||
border-color: rgba(125, 211, 252, 0.28);
|
||||
background: rgba(125, 211, 252, 0.16);
|
||||
color: #dff6ff;
|
||||
}
|
||||
|
||||
.connection-pill,
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 7px 11px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.pill--success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.pill--muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.status-dot--ok {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.connection-list,
|
||||
.tree,
|
||||
.detail-list,
|
||||
.focus-list,
|
||||
.log-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.connection-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.connection-card p,
|
||||
.export-box p,
|
||||
.problem-box p,
|
||||
.focus-list,
|
||||
.detail-list span,
|
||||
.info-card span,
|
||||
.log-row span {
|
||||
margin: 4px 0 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.connection-card.is-active {
|
||||
border-color: rgba(125, 211, 252, 0.4);
|
||||
background: rgba(125, 211, 252, 0.08);
|
||||
}
|
||||
|
||||
.tree details {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.tree summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tree ul {
|
||||
margin: 10px 0 0 18px;
|
||||
padding: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
border-top: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #10141b;
|
||||
}
|
||||
|
||||
.editor-gutter,
|
||||
.editor-code {
|
||||
padding: 18px 16px;
|
||||
margin: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.editor-gutter {
|
||||
color: #697386;
|
||||
border-right: 1px solid var(--border);
|
||||
background: #0d1016;
|
||||
}
|
||||
|
||||
.editor-gutter span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editor-code {
|
||||
color: #d7e2f0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.execution-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
background: linear-gradient(90deg, rgba(125, 211, 160, 0.12), rgba(125, 211, 252, 0.04));
|
||||
}
|
||||
|
||||
.execution-banner.is-error {
|
||||
background: linear-gradient(90deg, rgba(240, 156, 156, 0.16), rgba(240, 156, 156, 0.06));
|
||||
}
|
||||
|
||||
.banner-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(88px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.banner-metrics div,
|
||||
.detail-list div,
|
||||
.info-card {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(15, 18, 24, 0.7);
|
||||
}
|
||||
|
||||
.banner-metrics span,
|
||||
.detail-list span,
|
||||
.info-card span {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.bottom-panel {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toolbar-tab.is-active,
|
||||
.bottom-tab.is-active {
|
||||
border-color: rgba(125, 211, 252, 0.3);
|
||||
background: rgba(125, 211, 252, 0.14);
|
||||
color: #e4f7ff;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
th {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
background: #121722;
|
||||
}
|
||||
|
||||
.log-row,
|
||||
.export-box,
|
||||
.problem-box {
|
||||
padding: 16px;
|
||||
background: var(--panel-muted);
|
||||
}
|
||||
|
||||
.focus-list {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
.focus-list li + li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1320px) {
|
||||
.workspace {
|
||||
grid-template-columns: 250px minmax(520px, 1fr) 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.panel--main {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.panel--nav {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.panel--side {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user