vmiller/Digital-Dabei-Hamburg-Job-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve CSS specificity and add vertical spacing

Browse Source 
- Add 1rem vertical padding to .ddhh-provider-dashboard for proper spacing
- Remove all !important declarations from button styles
- Use proper CSS specificity (.ddhh-jobs-table .button) instead
- Document CSS best practices in CLAUDE.md (avoid !important)

CSS specificity approach is more maintainable and prevents conflicts
with Elementor and other theme styles.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Viktor Miller
2026-01-29 13:23:03 +09:00
parent 38535b5edc
commit d907878143
2 changed files with 38 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
templates/provider-dashboard.php
View File

@@ -341,7 +341,7 @@ $job_query = new WP_Query( $args );
.ddhh-provider-dashboard {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
padding: 1rem 1rem;
}
.ddhh-dashboard-header {
@@ -365,11 +365,11 @@ $job_query = new WP_Query( $args );
font-weight: 600;
}
.logout-button {
.ddhh-dashboard-header .logout-button {
display: inline-block;
padding: 0.5rem 1.25rem;
background-color: #6b7280;
color: #fff !important;
color: #fff;
text-decoration: none;
border-radius: 0.375rem;
font-size: 0.875rem;
@@ -377,15 +377,15 @@ $job_query = new WP_Query( $args );
transition: background-color 0.2s;
}
.logout-button:hover {
.ddhh-dashboard-header .logout-button:hover {
background-color: #4b5563;
color: #fff !important;
color: #fff;
text-decoration: none;
}
.ddhh-job-submit-section {
margin-bottom: 3rem;
padding: 2.5rem 2rem;
padding: 2rem;
background: #f5f5f5;
border-radius: 8px;
}
@@ -428,9 +428,6 @@ $job_query = new WP_Query( $args );
.ddhh-job-listings-section {
margin-top: 3rem;
padding: 2.5rem 2rem;
background: #f5f5f5;
border-radius: 8px;
}
.ddhh-provider-dashboard h2 {
@@ -493,53 +490,53 @@ $job_query = new WP_Query( $args );
white-space: nowrap;
}
.button {
.ddhh-jobs-table .button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: #3b82f6;
color: #fff !important;
color: #fff;
text-decoration: none;
border-radius: 0.375rem;
font-size: 0.875rem;
transition: background-color 0.2s;
}
.button:hover {
.ddhh-jobs-table .button:hover {
background-color: #2563eb;
color: #fff !important;
color: #fff;
text-decoration: none;
}
.edit-link {
.ddhh-jobs-table .edit-link {
background-color: #6366f1;
color: #fff !important;
color: #fff;
}
.edit-link:hover {
.ddhh-jobs-table .edit-link:hover {
background-color: #4f46e5;
color: #fff !important;
color: #fff;
}
.view-link {
.ddhh-jobs-table .view-link {
background-color: #10b981;
margin-left: 0.5rem;
color: #fff !important;
color: #fff;
}
.view-link:hover {
.ddhh-jobs-table .view-link:hover {
background-color: #059669;
color: #fff !important;
color: #fff;
}
.deactivate-link {
.ddhh-jobs-table .deactivate-link {
background-color: #ef4444;
margin-left: 0.5rem;
color: #fff !important;
color: #fff;
}
.deactivate-link:hover {
.ddhh-jobs-table .deactivate-link:hover {
background-color: #dc2626;
color: #fff !important;
color: #fff;
}
.ddhh-empty-state,