oleh/astrolabe-nvc
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe-nvc.git synced 2025-12-21 21:22:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: modular css styles structure

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-10-15 15:28:07 +03:00
parent f2f3b2e9d1
commit 4cef8ec6f3
2 changed files with 123 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
index.html
View File

@@ -30,16 +30,16 @@
<div class="app-container"> <div class="app-container">
<!-- Toggle Button Strip --> <!-- Toggle Button Strip -->
<div class="toggle-strip"> <div class="toggle-strip">
<button class="toggle-btn active" id="toggle-snippet-panel" title="Toggle Snippets Panel"> <button class="btn btn-icon xlarge active" id="toggle-snippet-panel" title="Toggle Snippets Panel">
📄 📄
</button> </button>
<button class="toggle-btn active" id="toggle-editor-panel" title="Toggle Editor Panel"> <button class="btn btn-icon xlarge active" id="toggle-editor-panel" title="Toggle Editor Panel">
✏️ ✏️
</button> </button>
<button class="toggle-btn active" id="toggle-preview-panel" title="Toggle Preview Panel"> <button class="btn btn-icon xlarge active" id="toggle-preview-panel" title="Toggle Preview Panel">
👁️ 👁️
</button> </button>
<button class="toggle-btn" id="toggle-datasets" title="Datasets"> <button class="btn btn-icon xlarge" id="toggle-datasets" title="Datasets">
📁 📁
</button> </button>
</div> </div>
@@ -67,7 +67,7 @@
</div> </div>
<div class="search-controls"> <div class="search-controls">
<input type="text" id="snippet-search" placeholder="Search snippets..." /> <input type="text" id="snippet-search" placeholder="Search snippets..." />
<button class="search-clear-btn" id="search-clear" title="Clear search">×</button> <button class="btn btn-icon" id="search-clear" title="Clear search">×</button>
</div> </div>
<div class="panel-content"> <div class="panel-content">
<ul class="snippet-list"> <ul class="snippet-list">
@@ -78,10 +78,10 @@
</div> </div>
<div class="snippet-meta" id="snippet-meta" style="display: none;"> <div class="snippet-meta" id="snippet-meta" style="display: none;">
<div class="meta-header">Name</div> <div class="meta-header">Name</div>
<input type="text" id="snippet-name" placeholder="Snippet name..." /> <input type="text" id="snippet-name" class="input small" placeholder="Snippet name..." />
<div class="meta-header">Comment</div> <div class="meta-header">Comment</div>
<textarea id="snippet-comment" placeholder="Add a comment..." rows="3"></textarea> <textarea id="snippet-comment" class="input textarea medium" placeholder="Add a comment..." rows="3"></textarea>
<div class="meta-info"> <div class="meta-info">
<div class="meta-info-item"> <div class="meta-info-item">
@@ -95,8 +95,8 @@
</div> </div>
<div class="meta-actions"> <div class="meta-actions">
<button class="meta-btn" id="duplicate-btn">Duplicate</button> <button class="btn btn-standard flex" id="duplicate-btn">Duplicate</button>
<button class="meta-btn delete-btn" id="delete-btn">Delete</button> <button class="btn btn-standard flex danger" id="delete-btn">Delete</button>
</div> </div>
</div> </div>
<div class="storage-monitor" id="storage-monitor"> <div class="storage-monitor" id="storage-monitor">
@@ -119,12 +119,12 @@
<div class="panel-header"> <div class="panel-header">
<span>Editor</span> <span>Editor</span>
<div class="editor-controls"> <div class="editor-controls">
<button class="action-btn publish-btn" id="publish-btn">Publish</button> <button class="btn btn-action publish" id="publish-btn">Publish</button>
<button class="action-btn revert-btn" id="revert-btn">Revert</button> <button class="btn btn-action revert" id="revert-btn">Revert</button>
<span class="view-label">View:</span> <span class="view-label">View:</span>
<div class="view-toggle-group"> <div class="view-toggle-group">
<button class="view-toggle-btn active" id="view-draft">Draft</button> <button class="btn btn-toggle active" id="view-draft">Draft</button>
<button class="view-toggle-btn" id="view-published">Published</button> <button class="btn btn-toggle" id="view-published">Published</button>
</div> </div>
</div> </div>
</div> </div>
@@ -153,13 +153,13 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<span class="modal-title">Dataset Manager</span> <span class="modal-title">Dataset Manager</span>
<button class="modal-close" id="dataset-modal-close">×</button> <button class="btn btn-icon" id="dataset-modal-close">×</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<!-- List View (default) --> <!-- List View (default) -->
<div id="dataset-list-view" class="dataset-view"> <div id="dataset-list-view" class="dataset-view">
<div class="dataset-list-header"> <div class="dataset-list-header">
<button class="modal-btn primary" id="new-dataset-btn">New Dataset</button> <button class="btn btn-modal primary" id="new-dataset-btn">New Dataset</button>
</div> </div>
<div class="dataset-container"> <div class="dataset-container">
<div class="dataset-list" id="dataset-list"> <div class="dataset-list" id="dataset-list">
@@ -168,48 +168,48 @@
<div class="dataset-details" id="dataset-details" style="display: none;"> <div class="dataset-details" id="dataset-details" style="display: none;">
<div class="dataset-detail-section"> <div class="dataset-detail-section">
<div class="dataset-detail-header">Name</div> <div class="dataset-detail-header">Name</div>
<input type="text" id="dataset-detail-name" class="dataset-input" placeholder="Dataset name..." /> <input type="text" id="dataset-detail-name" class="input" placeholder="Dataset name..." />
<div class="dataset-detail-header">Comment</div> <div class="dataset-detail-header">Comment</div>
<textarea id="dataset-detail-comment" class="dataset-textarea" placeholder="Add a comment..." rows="3"></textarea> <textarea id="dataset-detail-comment" class="input textarea" placeholder="Add a comment..." rows="3"></textarea>
<div class="dataset-detail-header-row"> <div class="dataset-detail-header-row">
<span class="dataset-detail-header">Statistics</span> <span class="dataset-detail-header">Statistics</span>
<button class="dataset-refresh-btn" id="refresh-metadata-btn" style="display: none;" title="Refresh metadata from URL">🔄</button> <button class="btn btn-icon large" id="refresh-metadata-btn" style="display: none;" title="Refresh metadata from URL">🔄</button>
</div> </div>
<div class="dataset-stats"> <div class="stats-box">
<div class="dataset-stat-item"> <div class="stat-item">
<span class="dataset-stat-label">Rows:</span> <span class="stat-label">Rows:</span>
<span id="dataset-detail-rows">0</span> <span id="dataset-detail-rows">0</span>
</div> </div>
<div class="dataset-stat-item"> <div class="stat-item">
<span class="dataset-stat-label">Columns:</span> <span class="stat-label">Columns:</span>
<span id="dataset-detail-columns">0</span> <span id="dataset-detail-columns">0</span>
</div> </div>
<div class="dataset-stat-item"> <div class="stat-item">
<span class="dataset-stat-label">Size:</span> <span class="stat-label">Size:</span>
<span id="dataset-detail-size">0 B</span> <span id="dataset-detail-size">0 B</span>
</div> </div>
</div> </div>
<div class="dataset-detail-header">Timestamps</div> <div class="dataset-detail-header">Timestamps</div>
<div class="dataset-stats"> <div class="stats-box">
<div class="dataset-stat-item"> <div class="stat-item">
<span class="dataset-stat-label">Created:</span> <span class="stat-label">Created:</span>
<span id="dataset-detail-created">-</span> <span id="dataset-detail-created">-</span>
</div> </div>
<div class="dataset-stat-item"> <div class="stat-item">
<span class="dataset-stat-label">Modified:</span> <span class="stat-label">Modified:</span>
<span id="dataset-detail-modified">-</span> <span id="dataset-detail-modified">-</span>
</div> </div>
</div> </div>
<div class="dataset-detail-header">Preview</div> <div class="dataset-detail-header">Preview</div>
<pre id="dataset-preview" class="dataset-preview-box"></pre> <pre id="dataset-preview" class="preview-box large"></pre>
<div class="dataset-actions"> <div class="dataset-actions">
<button class="modal-btn" id="copy-reference-btn">Copy Reference</button> <button class="btn btn-modal" id="copy-reference-btn">Copy Reference</button>
<button class="modal-btn delete-btn" id="delete-dataset-btn">Delete</button> <button class="btn btn-modal danger" id="delete-dataset-btn">Delete</button>
</div> </div>
</div> </div>
</div> </div>
@@ -223,7 +223,7 @@
<div class="dataset-form-group"> <div class="dataset-form-group">
<label class="dataset-form-label">Name *</label> <label class="dataset-form-label">Name *</label>
<input type="text" id="dataset-form-name" class="dataset-input" placeholder="Enter dataset name..." /> <input type="text" id="dataset-form-name" class="input" placeholder="Enter dataset name..." />
</div> </div>
<div class="dataset-form-group"> <div class="dataset-form-group">
@@ -231,7 +231,7 @@
<div class="dataset-format-hint"> <div class="dataset-format-hint">
Paste your data (JSON, CSV, or TSV) or a URL. Format will be detected automatically. Paste your data (JSON, CSV, or TSV) or a URL. Format will be detected automatically.
</div> </div>
<textarea id="dataset-form-input" class="dataset-textarea" placeholder="Paste data or URL here..." rows="12"></textarea> <textarea id="dataset-form-input" class="input textarea" placeholder="Paste data or URL here..." rows="12"></textarea>
</div> </div>
<!-- Detection Confirmation UI --> <!-- Detection Confirmation UI -->
@@ -245,19 +245,19 @@
</div> </div>
</div> </div>
<div class="detection-preview-label">Preview:</div> <div class="detection-preview-label">Preview:</div>
<pre id="detected-preview" class="detection-preview-box"></pre> <pre id="detected-preview" class="preview-box medium"></pre>
</div> </div>
<div class="dataset-form-group"> <div class="dataset-form-group">
<label class="dataset-form-label">Comment</label> <label class="dataset-form-label">Comment</label>
<textarea id="dataset-form-comment" class="dataset-textarea" placeholder="Optional description..." rows="3"></textarea> <textarea id="dataset-form-comment" class="input textarea" placeholder="Optional description..." rows="3"></textarea>
</div> </div>
<div class="dataset-form-error" id="dataset-form-error"></div> <div class="dataset-form-error" id="dataset-form-error"></div>
<div class="dataset-form-actions"> <div class="dataset-form-actions">
<button class="modal-btn primary" id="save-dataset-btn">Save Dataset</button> <button class="btn btn-modal primary" id="save-dataset-btn">Save Dataset</button>
<button class="modal-btn" id="cancel-dataset-btn">Cancel</button> <button class="btn btn-modal" id="cancel-dataset-btn">Cancel</button>
</div> </div>
</div> </div>
</div> </div>

180
src/styles.css
View File

@@ -49,46 +49,28 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
/* Controls */ /* Controls */
.editor-controls { display: flex; align-items: center; gap: 6px; height: 20px; } .editor-controls { display: flex; align-items: center; gap: 6px; height: 20px; }
.view-label { font-size: 10px; margin-right: 4px; } .view-label { font-size: 10px; margin-right: 4px; }
.view-toggle-group { display: flex; } .view-toggle-group,
.dataset-toggle-group { display: flex; }
/* Buttons - Common Styles */ /* Base Button Styles */
.view-toggle-btn, .btn {
.dataset-toggle-btn,
.sort-btn,
.search-clear-btn,
.action-btn,
.toggle-btn,
.meta-btn,
.modal-btn,
.dataset-refresh-btn,
.modal-close {
background: var(--win-gray); background: var(--win-gray);
border: 2px outset var(--win-gray); border: 2px outset var(--win-gray);
color: #000; color: #000;
cursor: pointer; cursor: pointer;
font-family: var(--font-main); font-family: var(--font-main);
} }
.btn:hover { background: var(--win-gray-light); }
.btn:active { border-style: inset; }
.btn:disabled { opacity: 0.5; cursor: default; }
.view-toggle-btn, /* Toggle Buttons (small inline) */
.dataset-toggle-btn { border: 1px solid var(--win-gray-dark); padding: 2px 8px; font-size: 10px; height: 20px; } .btn-toggle { border: 1px solid var(--win-gray-dark); padding: 2px 8px; font-size: 10px; height: 20px; }
.view-toggle-btn:first-child, .btn-toggle:first-child { border-right: 1px solid var(--win-gray-dark); }
.dataset-toggle-btn:first-child { border-right: 1px solid var(--win-gray-dark); } .btn-toggle:last-child { border-left: none; }
.view-toggle-btn:last-child, .btn-toggle:hover:not(.active) { background: var(--win-gray-light); }
.dataset-toggle-btn:last-child { border-left: none; } .btn-toggle:active { background: var(--win-blue); color: var(--bg-white); }
.view-toggle-btn:hover:not(.active), .btn-toggle.active {
.dataset-toggle-btn:hover:not(.active),
.sort-btn:hover,
.search-clear-btn:hover,
.toggle-btn:hover,
.meta-btn:hover,
.modal-btn:hover,
.dataset-refresh-btn:hover,
.modal-close:hover { background: var(--win-gray-light); }
.view-toggle-btn:active,
.dataset-toggle-btn:active { background: var(--win-blue); color: var(--bg-white); }
.view-toggle-btn.active,
.dataset-toggle-btn.active,
.sort-btn.active {
background: var(--win-blue); background: var(--win-blue);
color: var(--bg-white); color: var(--bg-white);
border-top: 1px solid var(--win-blue-dark); border-top: 1px solid var(--win-blue-dark);
@@ -96,54 +78,69 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
border-bottom: 1px solid var(--win-blue-light); border-bottom: 1px solid var(--win-blue-light);
border-right: 1px solid var(--win-blue-light); border-right: 1px solid var(--win-blue-light);
} }
.view-toggle-btn.active:first-child, .btn-toggle.active:first-child { border-right: 1px solid var(--win-blue-light); }
.dataset-toggle-btn.active:first-child { border-right: 1px solid var(--win-blue-light); } .btn-toggle.active:last-child { border-left: 1px solid var(--win-blue-dark); }
.view-toggle-btn.active:last-child, .btn-toggle:not(:first-child) { border-left: none; }
.dataset-toggle-btn.active:last-child { border-left: 1px solid var(--win-blue-dark); } .btn-toggle.active:not(:first-child) { border-left: 1px solid var(--win-blue-dark); }
.dataset-toggle-btn:not(:first-child) { border-left: none; }
.dataset-toggle-btn.active:not(:first-child) { border-left: 1px solid var(--win-blue-dark); }
/* Action Buttons */ /* Action Buttons */
.action-btn { padding: 2px 8px; font-size: 10px; display: none; height: 20px; } .btn-action { padding: 2px 8px; font-size: 10px; display: none; height: 20px; }
.action-btn.visible { display: block; } .btn-action.visible { display: block; }
.action-btn:hover { filter: brightness(1.1); } .btn-action:hover { filter: brightness(1.1); }
.action-btn:active, .btn-action.publish { background: #90ee90; }
.sort-btn:active, .btn-action.publish:hover { background: #a0ffa0; }
.search-clear-btn:active, .btn-action.revert { background: #ffb080; }
.toggle-btn:active, .btn-action.revert:hover { background: #ffc090; }
.meta-btn:active,
.modal-btn:active, /* Icon Buttons */
.dataset-refresh-btn:active, .btn-icon { padding: 0; width: 20px; height: 20px; font-size: 14px; display: flex; align-items: center; justify-content: center; border: 1px outset var(--win-gray); }
.modal-close:active { border-style: inset; } .btn-icon:active { border: 1px inset var(--win-gray); }
.action-btn:disabled, .btn-icon.large { width: 24px; height: 24px; font-size: 12px; }
.search-clear-btn:disabled, .btn-icon.xlarge { width: 32px; height: 32px; font-size: 16px; padding: 6px; }
.dataset-refresh-btn:disabled { opacity: 0.5; cursor: default; } .btn-icon.xlarge.active { background: var(--win-gray-light); border: 2px inset var(--win-gray); }
.publish-btn { background: #90ee90; }
.publish-btn:hover { background: #a0ffa0; } /* Standard Buttons */
.revert-btn { background: #ffb080; } .btn-standard { padding: 4px 8px; font-size: 11px; }
.revert-btn:hover { background: #ffc090; } .btn-standard.flex { flex: 1; }
.btn-standard.primary { background: #90ee90; }
.btn-standard.primary:hover { background: #a0ffa0; }
.btn-standard.danger { background: #f88; border: 2px outset #f88; }
.btn-standard.danger:hover { background: #f99; }
.btn-standard.danger:active { border: 2px inset #f88; }
/* Modal Buttons */
.btn-modal { padding: 6px 12px; font-size: 11px; }
.btn-modal.primary { background: #90ee90; }
.btn-modal.primary:hover { background: #a0ffa0; }
.btn-modal.danger { background: #f88; border: 2px outset #f88; }
.btn-modal.danger:hover { background: #f99; }
.btn-modal.danger:active { border: 2px inset #f88; }
/* Sort Controls */ /* Sort Controls */
.sort-controls { padding: 6px 12px; background: var(--win-gray-light); border-bottom: 2px solid var(--win-gray-dark); display: flex; align-items: center; gap: 6px; font-size: 11px; } .sort-controls { padding: 6px 12px; background: var(--win-gray-light); border-bottom: 2px solid var(--win-gray-dark); display: flex; align-items: center; gap: 6px; font-size: 11px; }
.sort-label { font-size: 10px; margin-right: 4px; } .sort-label { font-size: 10px; margin-right: 4px; }
.sort-btn { border: 1px outset var(--win-gray); padding: 2px 6px; font-size: 10px; display: flex; align-items: center; gap: 3px; } .sort-btn { border: 1px outset var(--win-gray); padding: 2px 6px; font-size: 10px; display: flex; align-items: center; gap: 3px; }
.sort-btn:hover { background: var(--win-gray-light); }
.sort-btn:active { border: 1px inset var(--win-gray); }
.sort-text { flex: 1; } .sort-text { flex: 1; }
.sort-arrow { font-size: 9px; opacity: 0.7; } .sort-arrow { font-size: 9px; opacity: 0.7; }
.sort-btn.active { border: 1px inset var(--win-blue); } .sort-btn.active {
background: var(--win-blue);
color: var(--bg-white);
border: 1px inset var(--win-blue);
border-top: 1px solid var(--win-blue-dark);
border-left: 1px solid var(--win-blue-dark);
border-bottom: 1px solid var(--win-blue-light);
border-right: 1px solid var(--win-blue-light);
}
/* Search Controls */ /* Search Controls */
.search-controls { padding: 6px 12px; background: var(--win-gray-light); border-bottom: 2px solid var(--win-gray-dark); display: flex; align-items: center; gap: 4px; } .search-controls { padding: 6px 12px; background: var(--win-gray-light); border-bottom: 2px solid var(--win-gray-dark); display: flex; align-items: center; gap: 4px; }
#snippet-search { flex: 1; font-family: var(--font-main); font-size: 11px; border: 2px inset var(--win-gray); padding: 3px 6px; height: 20px; } #snippet-search { flex: 1; font-family: var(--font-main); font-size: 11px; border: 2px inset var(--win-gray); padding: 3px 6px; height: 20px; }
.search-clear-btn { border: 1px outset var(--win-gray); width: 20px; height: 20px; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; }
.search-clear-btn:active { border: 1px inset var(--win-gray); }
/* Panel Content */ /* Panel Content */
.panel-content { flex: 1; padding: 8px; overflow: hidden; background: var(--bg-white); border: 1px inset var(--win-gray); display: flex; flex-direction: column; } .panel-content { flex: 1; padding: 8px; overflow: hidden; background: var(--bg-white); border: 1px inset var(--win-gray); display: flex; flex-direction: column; }
/* Toggle Buttons */
.toggle-btn { padding: 6px; font-size: 16px; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; }
.toggle-btn.active { background: var(--win-gray-light); border: 2px inset var(--win-gray); }
/* Placeholder */ /* Placeholder */
.placeholder { color: var(--win-gray-dark); font-style: italic; text-align: center; margin-top: 40px; font-size: 12px; } .placeholder { color: var(--win-gray-dark); font-style: italic; text-align: center; margin-top: 40px; font-size: 12px; }
@@ -167,16 +164,19 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
/* Snippet Meta */ /* Snippet Meta */
.snippet-meta { margin-top: 12px; padding: 8px 8px 16px; border-top: 1px solid var(--win-gray-dark); background: var(--bg-light); border: 1px inset var(--win-gray); margin-left: -8px; margin-right: -8px; margin-bottom: 0; flex-shrink: 0; } .snippet-meta { margin-top: 12px; padding: 8px 8px 16px; border-top: 1px solid var(--win-gray-dark); background: var(--bg-light); border: 1px inset var(--win-gray); margin-left: -8px; margin-right: -8px; margin-bottom: 0; flex-shrink: 0; }
.meta-header { font-size: 11px; font-weight: bold; margin-bottom: 4px; } .meta-header { font-size: 11px; font-weight: bold; margin-bottom: 4px; }
#snippet-comment,
#snippet-name, /* Base Input Styles */
.dataset-input, .input {
.dataset-textarea { width: 100%; font-family: var(--font-main); font-size: 11px; border: 2px inset var(--win-gray); padding: 4px; margin-bottom: 8px; } width: 100%;
#snippet-comment, font-family: var(--font-main);
.dataset-textarea { resize: vertical; } font-size: 11px;
#snippet-comment { min-height: 40px; } border: 2px inset var(--win-gray);
#snippet-name { height: 20px; } padding: 4px;
.dataset-input, background: var(--bg-white);
.dataset-textarea { background: var(--bg-white); } }
.input.textarea { resize: vertical; }
.input.small { height: 20px; }
.input.medium { min-height: 40px; }
/* Meta Info */ /* Meta Info */
.meta-info { margin: 8px 0; padding: 6px; background: var(--bg-lighter); border: 1px inset var(--win-gray); font-size: 10px; } .meta-info { margin: 8px 0; padding: 6px; background: var(--bg-lighter); border: 1px inset var(--win-gray); font-size: 10px; }
@@ -187,13 +187,6 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
/* Meta Actions */ /* Meta Actions */
.meta-actions { display: flex; gap: 6px; margin-top: 8px; } .meta-actions { display: flex; gap: 6px; margin-top: 8px; }
.meta-btn { padding: 4px 8px; font-size: 11px; flex: 1; }
.delete-btn,
.modal-btn.delete-btn { background: #f88; border: 2px outset #f88; }
.delete-btn:hover,
.modal-btn.delete-btn:hover { background: #f99; }
.delete-btn:active,
.modal-btn.delete-btn:active { border: 2px inset #f88; }
/* Ghost Card */ /* Ghost Card */
.ghost-card { border: 2px dashed var(--win-gray-dark) !important; background: var(--bg-light) !important; font-style: italic; opacity: 0.8; } .ghost-card { border: 2px dashed var(--win-gray-dark) !important; background: var(--bg-light) !important; font-style: italic; opacity: 0.8; }
@@ -216,7 +209,6 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
.modal-content { background: var(--win-gray); border: 2px outset var(--win-gray); width: 90%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 4px 4px 8px rgba(0,0,0,0.3); } .modal-content { background: var(--win-gray); border: 2px outset var(--win-gray); width: 90%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 4px 4px 8px rgba(0,0,0,0.3); }
.modal-header { background: #008; color: var(--bg-white); padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; height: 24px; border-bottom: 2px solid var(--win-gray-dark); } .modal-header { background: #008; color: var(--bg-white); padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; height: 24px; border-bottom: 2px solid var(--win-gray-dark); }
.modal-title { font-size: 12px; font-weight: bold; } .modal-title { font-size: 12px; font-weight: bold; }
.modal-close { width: 20px; height: 20px; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; }
.modal-body { flex: 1; overflow: auto; background: var(--bg-white); border: 2px inset var(--win-gray); margin: 8px; min-height: 0; } .modal-body { flex: 1; overflow: auto; background: var(--bg-white); border: 2px inset var(--win-gray); margin: 8px; min-height: 0; }
/* Dataset Views */ /* Dataset Views */
@@ -239,15 +231,17 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
.dataset-detail-header { font-size: 11px; font-weight: bold; margin-bottom: 6px; margin-top: 12px; } .dataset-detail-header { font-size: 11px; font-weight: bold; margin-bottom: 6px; margin-top: 12px; }
.dataset-detail-header:first-child { margin-top: 0; } .dataset-detail-header:first-child { margin-top: 0; }
.dataset-detail-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; margin-top: 12px; } .dataset-detail-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; margin-top: 12px; }
.dataset-refresh-btn { width: 24px; height: 24px; font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 0; }
.dataset-stats { background: var(--bg-light); border: 1px inset var(--win-gray); padding: 8px; font-size: 10px; } /* Stats & Preview Boxes */
.dataset-stat-item { display: flex; justify-content: space-between; margin-bottom: 4px; } .stats-box { background: var(--bg-light); border: 1px inset var(--win-gray); padding: 8px; font-size: 10px; }
.dataset-stat-item:last-child { margin-bottom: 0; } .stat-item { display: flex; justify-content: space-between; margin-bottom: 4px; }
.dataset-stat-label { font-weight: bold; } .stat-item:last-child { margin-bottom: 0; }
.dataset-preview-box, .stat-label { font-weight: bold; }
.detection-preview-box { background: var(--bg-light); border: 2px inset var(--win-gray); padding: 8px; font-family: var(--font-mono); font-size: 10px; overflow: auto; margin: 0; }
.dataset-preview-box { max-height: 200px; } .preview-box { background: var(--bg-light); border: 2px inset var(--win-gray); padding: 8px; font-family: var(--font-mono); font-size: 10px; overflow: auto; margin: 0; }
.detection-preview-box { max-height: 150px; } .preview-box.medium { max-height: 150px; }
.preview-box.large { max-height: 200px; }
.dataset-actions { display: flex; gap: 8px; margin-top: 16px; } .dataset-actions { display: flex; gap: 8px; margin-top: 16px; }
/* Dataset Form */ /* Dataset Form */
@@ -258,7 +252,6 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
.dataset-toggle-row { display: flex; gap: 24px; padding: 8px; background: var(--bg-light); border: 1px inset var(--win-gray); flex-wrap: wrap; } .dataset-toggle-row { display: flex; gap: 24px; padding: 8px; background: var(--bg-light); border: 1px inset var(--win-gray); flex-wrap: wrap; }
.dataset-toggle-section { display: flex; align-items: center; gap: 8px; } .dataset-toggle-section { display: flex; align-items: center; gap: 8px; }
.dataset-toggle-label { font-size: 10px; } .dataset-toggle-label { font-size: 10px; }
.dataset-toggle-group { display: flex; }
.dataset-format-hint { font-size: 10px; color: var(--win-gray-darker); font-style: italic; margin-bottom: 4px; padding: 4px; background: #fffacd; border: 1px solid #e0e0a0; } .dataset-format-hint { font-size: 10px; color: var(--win-gray-darker); font-style: italic; margin-bottom: 4px; padding: 4px; background: #fffacd; border: 1px solid #e0e0a0; }
/* Detection Confirmation */ /* Detection Confirmation */
@@ -274,8 +267,3 @@ body { font-family: var(--font-main); height: 100vh; overflow: hidden; backgroun
.detection-preview-label { font-size: 10px; font-weight: bold; margin-bottom: 4px; } .detection-preview-label { font-size: 10px; font-weight: bold; margin-bottom: 4px; }
.dataset-form-error { color: #f00; font-size: 11px; margin-bottom: 12px; min-height: 16px; } .dataset-form-error { color: #f00; font-size: 11px; margin-bottom: 12px; min-height: 16px; }
.dataset-form-actions { display: flex; gap: 8px; margin-top: 16px; } .dataset-form-actions { display: flex; gap: 8px; margin-top: 16px; }
/* Modal Buttons */
.modal-btn { padding: 6px 12px; font-size: 11px; }
.modal-btn.primary { background: #90ee90; }
.modal-btn.primary:hover { background: #a0ffa0; }