diff options
Diffstat (limited to 'data-viewer')
| -rw-r--r-- | data-viewer/data-viewer.css | 30 | ||||
| -rw-r--r-- | data-viewer/data-viewer.html | 22 |
2 files changed, 38 insertions, 14 deletions
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css index f16bb00..eef5d95 100644 --- a/data-viewer/data-viewer.css +++ b/data-viewer/data-viewer.css @@ -359,8 +359,8 @@ body { .danger-zone { margin-top: 24px; padding: 16px; - background-color: rgba(220, 53, 69, 0.1); - border: 1px solid rgba(220, 53, 69, 0.3); + background-color: var(--danger-bg-color); + border: 1px solid var(--danger-border-color); border-radius: var(--radius-md); } @@ -380,13 +380,37 @@ body { .action-button.danger { background-color: var(--danger-color); color: white; + border: none; + padding: 10px 16px; } .action-button.danger:hover { - background-color: #e03444; + background-color: var(--danger-hover-color); box-shadow: 0 0 8px rgba(220, 53, 69, 0.5); } +/* Ensure the delete button has proper dimensions and appearance */ +#delete-all-data { + min-width: 160px; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: var(--transition); + cursor: pointer; +} + +#delete-all-data i { + font-size: 14px; +} + +/* Override any potential conflicting styles */ +.action-button.danger:disabled { + opacity: 0.6; + cursor: not-allowed; +} + /* Responsive adjustments */ @media (max-width: 768px) { .app-content { diff --git a/data-viewer/data-viewer.html b/data-viewer/data-viewer.html index ddc31aa..a9934d7 100644 --- a/data-viewer/data-viewer.html +++ b/data-viewer/data-viewer.html @@ -23,6 +23,12 @@ </header> <main class="app-content"> + <div class="actions"> + <button id="back-button" class="action-button secondary"> + <i class="fas fa-arrow-left"></i> Back to Extension + </button> + </div> + <div class="data-section"> <h2 class="section-title">Global Settings</h2> <div id="global-settings-data" class="data-container"></div> @@ -33,17 +39,6 @@ <div id="skip-list-data" class="data-container"></div> </div> - <div class="data-section"> - <h2 class="section-title">Websites and CSS</h2> - <div id="combined-websites-data" class="data-container"></div> - </div> - - <div class="actions"> - <button id="back-button" class="action-button secondary"> - <i class="fas fa-arrow-left"></i> Back to Extension - </button> - </div> - <div class="danger-zone"> <h3 class="danger-title">Danger Zone</h3> <div class="danger-actions"> @@ -52,6 +47,11 @@ </button> </div> </div> + + <div class="data-section"> + <h2 class="section-title">Websites and CSS</h2> + <div id="combined-websites-data" class="data-container"></div> + </div> </main> <footer class="app-footer"> |