summaryrefslogtreecommitdiff
path: root/api/static/css/components.css
diff options
context:
space:
mode:
Diffstat (limited to 'api/static/css/components.css')
-rw-r--r--api/static/css/components.css269
1 files changed, 269 insertions, 0 deletions
diff --git a/api/static/css/components.css b/api/static/css/components.css
new file mode 100644
index 0000000..e576b3a
--- /dev/null
+++ b/api/static/css/components.css
@@ -0,0 +1,269 @@
+/* Buttons */
+.btn {
+ appearance: none;
+ border: none;
+ font-family: inherit;
+ font-size: 0.875rem;
+ font-weight: 600;
+ padding: 10px 16px;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ transition: var(--transition-fast);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-sm);
+ text-transform: uppercase;
+ letter-spacing: 0.02em;
+}
+
+.btn-primary {
+ background-color: var(--color-accent);
+ color: var(--color-accent-text);
+}
+.btn-primary:hover:not(:disabled) {
+ background-color: var(--color-accent-hover);
+}
+
+.btn-danger {
+ background-color: transparent;
+ border: var(--border-width) solid var(--color-danger);
+ color: var(--color-danger);
+}
+.btn-danger:hover:not(:disabled) {
+ background-color: var(--color-danger);
+ color: white;
+}
+
+.btn-ghost {
+ background-color: transparent;
+ color: var(--color-text-secondary);
+ border: var(--border-width) solid var(--color-bg-3);
+}
+.btn-ghost:hover:not(:disabled) {
+ background-color: var(--color-bg-3);
+ color: var(--color-text-primary);
+}
+
+.btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ filter: grayscale(1);
+}
+
+/* Forms */
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-xs);
+ margin-bottom: var(--space-md);
+}
+
+.form-label {
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+}
+
+.input-field {
+ background-color: var(--color-bg-2);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ padding: 10px 12px;
+ color: var(--color-text-primary);
+ font-size: 0.9375rem;
+ width: 100%;
+ transition: border-color var(--transition-fast);
+}
+
+.input-field:focus {
+ outline: none;
+ border-color: var(--color-accent);
+}
+
+/* Tabs */
+.tab-nav {
+ display: flex;
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ padding: 0 var(--space-lg);
+ background-color: var(--color-bg-1);
+}
+
+.tab-trigger {
+ background: none;
+ border: none;
+ padding: 14px 20px;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ font-weight: 600;
+ cursor: pointer;
+ border-bottom: 2px solid transparent;
+ transition: var(--transition-fast);
+}
+
+.tab-trigger:hover {
+ color: var(--color-text-primary);
+}
+
+.tab-trigger.active {
+ color: var(--color-accent);
+ border-bottom-color: var(--color-accent);
+}
+
+.tab-panel {
+ display: none;
+ padding: var(--space-lg);
+}
+
+.tab-panel.active {
+ display: block;
+}
+
+/* Cards */
+.card {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ overflow: hidden;
+}
+
+.card-header {
+ padding: var(--space-md);
+ border-bottom: var(--border-width) solid var(--color-bg-3);
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ color: var(--color-text-muted);
+}
+
+.card-body {
+ padding: var(--space-md);
+}
+
+/* Badges */
+.badge {
+ font-size: 0.7rem;
+ font-weight: 800;
+ padding: 2px 8px;
+ border-radius: 2px;
+ text-transform: uppercase;
+}
+
+.badge-idle { background: var(--color-bg-3); color: var(--color-text-secondary); }
+.badge-running { background: var(--color-accent); color: white; animation: blink 1.5s infinite; }
+.badge-complete { background: var(--color-success); color: white; }
+
+/* Checkbox Groups for Filtering */
+.checkbox-group {
+ background-color: var(--color-bg-0);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ padding: var(--space-xs) 0;
+ max-height: 160px;
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.checkbox-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: 6px 10px;
+ cursor: pointer;
+ transition: var(--transition-fast);
+ font-size: 0.8rem;
+ user-select: none;
+}
+
+.checkbox-item:hover {
+ background-color: var(--color-bg-3);
+}
+
+.checkbox-item input[type="checkbox"] {
+ accent-color: var(--color-accent);
+ cursor: pointer;
+}
+
+.checkbox-item span {
+ color: var(--color-text-secondary);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.checkbox-item:has(input:checked) span {
+ color: var(--color-text-primary);
+ font-weight: 600;
+}
+
+.filter-actions {
+ display: flex;
+ gap: 8px;
+}
+
+.filter-link {
+ font-size: 0.6rem;
+ font-weight: 800;
+ text-transform: uppercase;
+ color: var(--color-accent);
+ cursor: pointer;
+ transition: var(--transition-fast);
+}
+
+.filter-link:hover {
+ color: var(--color-text-primary);
+ text-decoration: underline;
+}
+
+/* Modal */
+.modal-overlay {
+ position: fixed;
+ top: 0; left: 0; right: 0; bottom: 0;
+ background-color: rgba(0, 0, 0, 0.85);
+ backdrop-filter: blur(4px);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: var(--space-xl);
+}
+
+.modal-content {
+ background-color: var(--color-bg-1);
+ border: var(--border-width) solid var(--color-bg-3);
+ border-radius: var(--border-radius);
+ width: 90vw;
+ max-width: 1200px;
+ position: relative;
+ padding: var(--space-lg);
+ box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+}
+
+.btn-close {
+ position: absolute;
+ top: 10px;
+ right: 15px;
+ background: none;
+ border: none;
+ color: var(--color-text-muted);
+ font-size: 1.5rem;
+ cursor: pointer;
+ transition: var(--transition-fast);
+}
+
+.btn-close:hover {
+ color: var(--color-danger);
+}
+
+/* Make chart containers clickable */
+.chart-container canvas {
+ cursor: pointer;
+}
+
+@keyframes blink {
+ 0% { opacity: 1; }
+ 50% { opacity: 0.6; }
+ 100% { opacity: 1; }
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-10-01 07:08:19 +0000