Wickedness/MBN_STOCK_WEBVIEW
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete Oracle and MariaDB WebView data layer

Browse Source
This commit is contained in:
Wickedness
2026-07-10 05:33:19 +09:00
parent 5aa90e4aaa
commit 39c4504b87
44 changed files with 3956 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
Web/styles.css
View File

@@ -85,6 +85,10 @@ button { color: inherit; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
.status-dot.ok { background: var(--mint); box-shadow: 0 0 0 3px rgba(50,213,164,.1); }
.status-dot.warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,186,85,.1); }
.status-dot.pending, .status-dot.unconfigured { background: var(--muted-2); box-shadow: 0 0 0 3px rgba(94,114,139,.1); }
.status-dot.healthy { background: var(--mint); box-shadow: 0 0 0 3px rgba(50,213,164,.1); }
.status-dot.partial { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,186,85,.1); }
.status-dot.error { background: var(--red); box-shadow: 0 0 0 3px rgba(255,102,128,.1); }
.runtime { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border-soft); color: var(--muted-2); font: 9px/1.4 Consolas, monospace; }
.workspace { min-width: 0; min-height: 0; overflow: auto; padding: 0 24px 22px; background: radial-gradient(circle at 76% -10%, rgba(44,104,132,.13), transparent 35%), var(--bg); }
@@ -119,6 +123,16 @@ h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.035em; }
.metric-icon.blue { background: rgba(86,168,255,.12); color: var(--blue); }
.metric-icon.amber { background: rgba(255,186,85,.12); color: var(--amber); }
.metric-icon.violet { background: rgba(155,140,255,.12); color: var(--violet); }
.metric-icon.database-icon.pending, .metric-icon.database-icon.unconfigured { background: rgba(94,114,139,.12); color: var(--muted); }
.metric-icon.database-icon.healthy { background: var(--mint-soft); color: var(--mint); }
.metric-icon.database-icon.partial { background: rgba(255,186,85,.12); color: var(--amber); }
.metric-icon.database-icon.error { background: rgba(255,102,128,.1); color: var(--red); }
.database-summary.healthy { border-color: rgba(50,213,164,.22); }
.database-summary.partial { border-color: rgba(255,186,85,.2); }
.database-summary.error { border-color: rgba(255,102,128,.24); }
.database-summary.healthy > b { color: var(--mint); }
.database-summary.partial > b { color: var(--amber); }
.database-summary.error > b { color: var(--red); }
.console-grid { display: grid; grid-template-columns: minmax(250px, .73fr) minmax(410px, 1.2fr) minmax(330px, 1fr); gap: 12px; min-height: 680px; height: calc(100vh - 188px); }
@@ -127,6 +141,7 @@ h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.035em; }
.panel-header h2 { margin: 0; font-size: 15px; font-weight: 650; }
.badge { padding: 4px 7px; border: 1px solid rgba(50,213,164,.22); border-radius: 10px; background: var(--mint-soft); color: var(--mint); font: 8px Consolas, monospace; letter-spacing: .05em; }
.badge.neutral { border-color: var(--border); background: var(--surface-2); color: var(--muted); }
.badge.live { border-color: rgba(50,213,164,.36); background: rgba(50,213,164,.16); box-shadow: 0 0 0 3px rgba(50,213,164,.04); }
.search-box { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; height: 40px; margin: 13px 13px 10px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #091522; }
.search-box > span { color: var(--muted); font-size: 17px; }
@@ -137,6 +152,52 @@ kbd { padding: 3px 5px; border: 1px solid #283c55; border-bottom-width: 2px; bor
.catalog-tabs { display: flex; gap: 5px; padding: 0 13px 11px; border-bottom: 1px solid var(--border-soft); }
.catalog-tabs button { padding: 5px 9px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.catalog-tabs button.active { border-color: var(--border); background: var(--surface-3); color: white; }
.live-data-panel { display: flex; min-height: 235px; max-height: 54%; flex: 0 1 365px; flex-direction: column; border-bottom: 1px solid var(--border); background: #091522; overflow: hidden; }
.live-data-header { display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 7px; border-bottom: 1px solid var(--border-soft); }
.live-data-header h3 { margin: 0; color: #dfe9f5; font-size: 11px; font-weight: 650; }
.live-data-header .panel-kicker { margin-bottom: 3px; }
.live-retry { min-height: 27px; padding: 0 9px; border: 1px solid #29415b; border-radius: 6px; background: var(--surface-2); color: #aebed0; font-size: 9px; cursor: pointer; }
.live-retry:hover { border-color: var(--mint); color: var(--mint); }
.database-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 10px 0; }
.database-source { display: grid; grid-template-columns: 7px auto minmax(0, 1fr); align-items: center; min-width: 0; gap: 5px; min-height: 28px; padding: 0 7px; border: 1px solid var(--border-soft); border-radius: 6px; background: rgba(17,31,50,.72); }
.database-source .source-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); }
.database-source strong { color: #aebed0; font-size: 8px; }
.database-source small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.database-source.healthy { border-color: rgba(50,213,164,.17); }
.database-source.healthy .source-dot { background: var(--mint); box-shadow: 0 0 0 2px rgba(50,213,164,.09); }
.database-source.healthy small { color: #79d9bd; }
.database-source.error { border-color: rgba(255,102,128,.2); }
.database-source.error .source-dot { background: var(--red); box-shadow: 0 0 0 2px rgba(255,102,128,.08); }
.database-source.error small { color: #dc8796; }
.database-source.pending .source-dot { animation: live-pulse 1.1s ease-in-out infinite; background: var(--blue); }
.database-source.unconfigured small { color: #657991; }
.live-data-state { display: flex; min-height: 42px; align-items: center; gap: 9px; margin: 7px 10px 0; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 7px; background: rgba(13,25,41,.76); color: #b7c6d7; }
.live-data-state:empty { display: none; }
.live-data-state strong, .live-data-state small { display: block; }
.live-data-state strong { margin-bottom: 2px; font-size: 9px; }
.live-data-state small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.live-data-state.error { border-color: rgba(255,102,128,.22); background: rgba(255,102,128,.055); }
.live-data-state.error strong { color: #ff9bad; }
.live-data-state.ready { border-color: rgba(50,213,164,.18); background: rgba(50,213,164,.055); }
.live-data-state.ready strong { color: #8bdcc4; }
.live-spinner { width: 16px; height: 16px; flex: 0 0 auto; border: 2px solid rgba(86,168,255,.2); border-top-color: var(--blue); border-radius: 50%; animation: live-spin .8s linear infinite; }
.live-error-icon { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(255,102,128,.13); color: var(--red); font: 700 10px Consolas, monospace; }
.live-data-tables { min-height: 0; flex: 1; overflow-y: auto; padding: 7px 10px 10px; }
.live-table-card { margin-bottom: 7px; border: 1px solid var(--border-soft); border-radius: 7px; background: rgba(13,25,41,.7); overflow: hidden; }
.live-table-card:last-child { margin-bottom: 0; }
.live-table-card > header { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; border-bottom: 1px solid var(--border-soft); }
.live-table-card h4 { margin: 0 0 2px; color: #cbd8e7; font-size: 9px; }
.live-table-card header small { display: block; color: var(--muted-2); font-size: 7px; }
.live-source-badge { padding: 3px 5px; border: 1px solid rgba(86,168,255,.2); border-radius: 5px; background: rgba(86,168,255,.08); color: #79b7f8; font: 7px Consolas, monospace; }
.live-table-scroll { max-height: 145px; overflow: auto; }
.live-table { width: max-content; min-width: 100%; table-layout: auto; }
.live-table th { height: 27px; min-width: 76px; padding: 0 7px; background: #0c1a29; color: #70849c; font-size: 7px; white-space: nowrap; }
.live-table td { max-width: 210px; height: 27px; padding: 0 7px; overflow: hidden; color: #adbdcf; font: 8px Consolas, "Malgun Gothic", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.live-table tbody tr { cursor: default; }
.live-table tbody tr:hover { background: rgba(86,168,255,.035); }
.live-table-empty { margin: 0; padding: 15px 8px; color: var(--muted-2); font-size: 8px; text-align: center; }
@keyframes live-spin { to { transform: rotate(360deg); } }
@keyframes live-pulse { 50% { opacity: .35; } }
.catalog-list { min-height: 0; flex: 1; overflow-y: auto; padding: 8px; }
.catalog-item { display: grid; grid-template-columns: 34px 1fr 27px; align-items: center; min-height: 50px; gap: 9px; padding: 6px 7px; border: 1px solid transparent; border-radius: 8px; }
.catalog-item:hover { border-color: var(--border); background: rgba(255,255,255,.025); }