diff --git a/templates/_admin_base.html b/templates/_admin_base.html
index 4ed0a96..958121a 100644
--- a/templates/_admin_base.html
+++ b/templates/_admin_base.html
@@ -84,7 +84,9 @@
}
/* ===== BUTTONS ===== */
- .btn {
+ .btn,
+ .btn-primary,
+ .btn-secondary {
padding: 8px 16px;
border: none;
border-radius: 6px;
@@ -94,25 +96,43 @@
transition: all 0.2s;
text-decoration: none;
display: inline-block;
+ text-align: center;
+ border: 1px solid transparent;
}
.btn-primary {
background: var(--primary-color);
color: white;
+ border-color: var(--primary-color);
}
.btn-primary:hover {
background: var(--primary-hover);
+ border-color: var(--primary-hover);
+ transform: translateY(-1px);
}
.btn-secondary {
background: var(--surface-elevation-1);
color: var(--text-primary);
- border: 1px solid var(--divider-color);
+ border-color: var(--divider-color);
}
.btn-secondary:hover {
background: var(--surface-elevation-2);
+ border-color: var(--divider-color);
+ transform: translateY(-1px);
+ }
+
+ .btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none !important;
+ }
+
+ .btn:disabled:hover {
+ background: var(--primary-color) !important;
+ border-color: var(--primary-color) !important;
}
.action-btn {
@@ -331,20 +351,152 @@
color: var(--text-primary);
}
- .form-control {
+ .form-control,
+ .form-input {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--divider-color);
border-radius: 6px;
font-size: 0.9rem;
+ transition: border-color 0.2s ease;
}
- .form-control:focus {
+ .form-control:focus,
+ .form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
+ .form-select {
+ width: 100%;
+ padding: 8px 12px;
+ border: 1px solid var(--divider-color);
+ border-radius: 6px;
+ font-size: 0.9rem;
+ background-color: var(--surface-color);
+ cursor: pointer;
+ transition: border-color 0.2s ease;
+ }
+
+ .form-select:focus {
+ outline: none;
+ border-color: var(--primary-color);
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+ }
+
+ .form-label {
+ display: block;
+ margin-bottom: 4px;
+ font-weight: 500;
+ color: var(--text-primary);
+ }
+
+ .help-text {
+ margin-top: 4px;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
+ }
+
+ .add-source-form {
+ background: var(--surface-color);
+ border-radius: 12px;
+ padding: 24px;
+ margin-bottom: 24px;
+ border: 1px solid var(--divider-color);
+ }
+
+ .add-source-form h3 {
+ margin: 0 0 20px 0;
+ color: var(--text-primary);
+ font-size: 1.2rem;
+ }
+
+ /* ===== MODALS ===== */
+ .modal-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+ backdrop-filter: blur(2px);
+ }
+
+ .modal-overlay.active {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .modal {
+ background: var(--surface-color);
+ border-radius: 12px;
+ padding: 24px;
+ max-width: 500px;
+ width: 90%;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+ border: 1px solid var(--divider-color);
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid var(--divider-color);
+ }
+
+ .modal-title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-primary);
+ margin: 0;
+ }
+
+ .modal-close {
+ background: none;
+ border: none;
+ font-size: 1.5rem;
+ cursor: pointer;
+ color: var(--text-secondary);
+ padding: 4px;
+ border-radius: 4px;
+ transition: all 0.2s ease;
+ }
+
+ .modal-close:hover {
+ background: var(--surface-elevation-1);
+ color: var(--text-primary);
+ }
+
+ .modal-body {
+ margin-bottom: 20px;
+ }
+
+ .modal-footer {
+ display: flex;
+ gap: 12px;
+ justify-content: flex-end;
+ padding-top: 16px;
+ border-top: 1px solid var(--divider-color);
+ }
+
+ .modal-alert {
+ background: #fff3cd;
+ border: 1px solid #ffeaa7;
+ border-radius: 8px;
+ padding: 12px;
+ margin-bottom: 16px;
+ color: #856404;
+ font-size: 0.9rem;
+ }
+
/* ===== UTILITIES ===== */
.back-link {
display: inline-block;