diff options
Diffstat (limited to 'data-viewer/data-viewer.css')
-rw-r--r-- | data-viewer/data-viewer.css | 87 |
1 files changed, 75 insertions, 12 deletions
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css index fd5c3e7..508d34f 100644 --- a/data-viewer/data-viewer.css +++ b/data-viewer/data-viewer.css @@ -346,18 +346,7 @@ body { /* Clear list button styling */ .clear-list-button { - margin-top: 8px; - margin-bottom: 16px; - background-color: var(--secondary-bg); - border-color: var(--border-color); - font-size: 12px; - padding: 6px 12px; -} - -.clear-list-button:hover { - background-color: rgba(220, 53, 69, 0.1); - border-color: var(--danger-color); - color: var(--danger-color); + margin-bottom: 20px; } /* Null and object value styling */ @@ -446,3 +435,77 @@ body { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } + +/* Styling for the website lists section */ +.tables-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + margin-top: 16px; +} + +.list-title-section { + margin-bottom: 16px; +} + +.list-title-section h3 { + margin-top: 0; + margin-bottom: 12px; + color: var(--text-primary); + font-size: 18px; +} + +.list-section { + background-color: var(--bg-color); + border-radius: var(--radius-sm); + padding: 16px; +} + +.list-section h4 { + margin-top: 0; + margin-bottom: 8px; + color: var(--accent-color); +} + +.list-description { + margin-top: 0; + margin-bottom: 16px; + font-size: 13px; + color: var(--text-secondary); + font-style: italic; +} + +.remove-site-button { + background-color: var(--danger-color); + color: white; + border: none; + border-radius: 50%; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: var(--transition); +} + +.remove-site-button:hover { + background-color: var(--danger-hover-color); + transform: scale(1.1); +} + +.remove-site-button i { + font-size: 12px; +} + +.clear-list-button { + margin-bottom: 20px; +} + +/* Responsive handling for mobile */ +@media (max-width: 768px) { + .tables-container { + grid-template-columns: 1fr; + gap: 16px; + } +} |