diff --git a/assets/css/admin.css b/assets/css/admin.css index c971a31..c0bfcbe 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -7,23 +7,32 @@ gap: 20px; } .statpress-infographic-card { - background: #fff; - border: 1px solid #e0e0e0; - border-radius: 5px; - padding: 15px; + background: #f8f9fa; + border: 1px solid #e8eaed; + border-radius: 8px; + padding: 24px 16px; text-align: center; - box-shadow: 0 2px 4px rgba(0,0,0,0.05); + box-shadow: none; + transition: background-color 0.2s; +} +.statpress-infographic-card:hover { + background: #f1f3f4; } .statpress-infographic-card h3 { margin-top: 0; - color: #555; - font-size: 1.1em; + color: #5f6368; + font-size: 12px; + text-transform: uppercase; + font-weight: 500; + letter-spacing: 0.5px; + margin-bottom: 12px; } .statpress-infographic-card p { - font-size: 1.8em; - font-weight: bold; - color: #333; + font-size: 32px; + font-weight: 400; + color: #1a73e8; margin-bottom: 0; + line-height: 1; } /* Chart Controls */ diff --git a/includes/admin/pages/page-infographic.php b/includes/admin/pages/page-infographic.php index bad342f..0a7fab2 100644 --- a/includes/admin/pages/page-infographic.php +++ b/includes/admin/pages/page-infographic.php @@ -77,6 +77,8 @@ function statpress_infographic_page() { 'statpress-infographic-chart-loader', ' document.addEventListener("DOMContentLoaded", function() { + Chart.defaults.font.family = "\'Roboto\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif"; + Chart.defaults.color = "#5f6368"; const ctx = document.getElementById("statpressCategoryPieChart"); if (!ctx) return; new Chart(ctx, {