/* Community Suggestions Admin Styles */ .pc-admin-content { /* Admin-scoped palette to keep admin UI consistent */ --pc-admin-primary: #2271b1; --pc-admin-primary-strong: #135e96; --pc-admin-muted: #646970; --pc-admin-bg: #fff; margin-top: 20px; padding: 18px 0; } /* Admin button enforcement */ .pc-admin-content .pc-button { border-radius: 6px; } .pc-admin-content .pc-button-primary { background: var(--pc-admin-primary) !important; border-color: var(--pc-admin-primary) !important; color: #fff !important; } .wp-list-table .row-actions .view, .wp-list-table .row-actions .comment { color: var(--pc-admin-primary); } .pc-admin-controls { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 15px; gap: 15px; } .pc-sort-dropdown { display: flex; align-items: center; gap: 8px; } .pc-sort-dropdown label { font-weight: 600; color: #1d2327; font-size: 13px; } .pc-sort-dropdown select { padding: 6px 12px; border: 1px solid #8c8f94; border-radius: 4px; background: #fff; font-size: 13px; } .pc-sort-dropdown select:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; } .pc-comment-item { background: #2c3338; border-color: #3c434a; border-left-color: #2271b1; } .pc-add-comment textarea { background: #1d2327; border-color: #3c434a; color: #dcdcde; } .pc-add-comment textarea:focus { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2); } .pc-no-comments { background: #2c3338; border-color: #3c434a; color: #9ca1a7; } .pc-settings-stats { margin-top: 30px; border-top: 1px solid #ccd0d4; padding-top: 30px; } .pc-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .pc-stat-card { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; padding: 20px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .pc-stat-card h3 { font-size: 2em; font-weight: bold; color: #2271b1; margin: 0 0 10px 0; } .pc-stat-card p { color: #646970; margin: 0; font-size: 14px; } /* Status badges */ .pc-status { display: inline-block; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; line-height: 1; } .pc-status-pending { background: #fff0c2; color: #946c00; border: 1px solid #ffd54f; } .pc-status-approved { background: #e7f5e7; color: #2a6b2a; border: 1px solid #8bc34a; } .pc-status-rejected { background: #fbe7e7; color: #b32d2e; border: 1px solid #f44336; } /* Table improvements */ .wp-list-table .pc-status { margin-right: 8px; } .wp-list-table .row-actions { margin-top: 4px; } .wp-list-table .row-actions .view, .wp-list-table .row-actions .comment { color: #2271b1; } .wp-list-table .row-actions .comment { margin-left: 8px; } /* Comments styles */ .pc-comments-row { background: #f9f9f9 !important; } .pc-comments-cell { padding: 0 !important; } .pc-comments-container { padding: 20px; } .pc-comments-container h4 { margin: 0 0 15px 0; font-size: 14px; font-weight: 600; color: #111; } .pc-comments-list { margin-bottom: 20px; } .pc-comment-item { background: #fff; border: 1px solid #dcdcde; border-radius: 6px; padding: 15px; margin-bottom: 15px; border-left: 3px solid #2271b1; } /* Remove purple accents from admin comments: override public styles that use purple */ .pc-comments-container .pc-comment-card, .pc-comments-container .pc-comment-item, .pc-comments-container .pc-comments-section { border-left-color: var(--pc-admin-primary) !important; /* use admin blue */ border-color: #dcdcde !important; background: #fff !important; color: #111 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } /* Make comment headers readable */ .pc-comments-container .pc-comment-header strong, .pc-comments-container .pc-comment-content { color: #111 !important; } .pc-comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .pc-comment-header strong { font-weight: 600; color: #dcdcde; font-size: 13px; } .pc-sort-dropdown label { color: #dcdcde; } .pc-comment-date { color: #646970; font-size: 12px; font-style: italic; } .pc-comment-content { line-height: 1.5; color: #c3c4c7; font-size: 13px; margin-bottom: 10px; } .pc-comment-actions { text-align: right; } .pc-no-comments { text-align: center; color: #646970; font-style: italic; padding: 15px; background: #fff; border: 1px dashed #dcdcde; border-radius: 6px; } .pc-add-comment { border-top: 1px solid #e0e0e0; padding-top: 15px; } .pc-add-comment h5 { margin: 0 0 10px 0; font-size: 13px; font-weight: 600; color: #dcdcde; } .pc-add-comment textarea { width: 100%; min-height: 80px; padding: 10px; border: 1px solid #dcdcde; border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 10px; } .pc-add-comment textarea:focus { outline: none; border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1); } /* Form styles */ .pc-form-group { margin-bottom: 20px; } .pc-form-group label { display: block; font-weight: 600; margin-bottom: 5px; color: #1d2327; } .pc-form-group input[type="text"], .pc-form-group textarea { width: 100%; max-width: 400px; padding: 8px 12px; border: 1px solid #8c8f94; border-radius: 4px; font-size: 14px; line-height: 1.4; } .pc-form-group input[type="text"]:focus, .pc-form-group textarea:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; outline: none; } .pc-form-actions { display: flex; gap: 10px; margin-top: 20px; } /* Button styles */ .pc-button { display: inline-block; padding: 8px 16px; border: 1px solid #2271b1; border-radius: 4px; background: #2271b1; color: #fff; text-decoration: none; font-size: 13px; font-weight: 400; line-height: 1.4; cursor: pointer; transition: all 0.15s ease-in-out; } .pc-button:hover { background: #135e96; border-color: #135e96; color: #fff; } .pc-button:active { background: #0a4b78; border-color: #0a4b78; } .pc-button-primary { background: #2271b1; border-color: #2271b1; } .pc-button-primary:hover { background: #135e96; border-color: #135e96; } .pc-button-secondary { background: #f6f7f7; border-color: #dcdcde; color: #2c3338; } .pc-button-secondary:hover { background: #dcdcde; border-color: #c3c4c7; } /* Card styles */ .pc-card { background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .pc-card h3 { margin: 0 0 15px 0; color: #1d2327; font-size: 16px; font-weight: 600; } /* Responsive design */ @media screen and (max-width: 782px) { .pc-stats-grid { grid-template-columns: 1fr; gap: 15px; } .pc-stat-card { padding: 15px; } .pc-stat-card h3 { font-size: 1.5em; } .pc-form-group input[type="text"], .pc-form-group textarea { max-width: 100%; } .pc-form-actions { flex-direction: column; gap: 10px; } .wp-list-table { font-size: 14px; } .wp-list-table th, .wp-list-table td { padding: 8px 10px; } } /* Dark mode support */ @media (prefers-color-scheme: dark) { .pc-stat-card, .pc-card { background: #2c3338; border-color: #3c434a; } .pc-stat-card p, .pc-form-group label { color: #dcdcde; } .pc-form-group input[type="text"], .pc-form-group textarea { background: #1d2327; border-color: #3c434a; color: #dcdcde; } .pc-form-group input[type="text"]:focus, .pc-form-group textarea:focus { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; } .pc-button-secondary { background: #3c434a; border-color: #4f5660; color: #dcdcde; } .pc-button-secondary:hover { background: #4f5660; border-color: #646970; } } /* Print styles */ @media print { .pc-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; } .pc-stat-card { border: 1px solid #000; background: #fff !important; color: #000 !important; } .pc-stat-card h3 { color: #000 !important; } .pc-button { display: none; } } /* Animation for status changes */ @keyframes pc-fade-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .pc-stat-card, .pc-card { animation: pc-fade-in 0.3s ease-in-out; } /* Loading states */ .pc-loading { opacity: 0.6; pointer-events: none; } .pc-loading::after { content: ''; display: inline-block; width: 16px; height: 16px; border: 2px solid #f3f3f3; border-top: 2px solid #2271b1; border-radius: 50%; animation: pc-spin 1s linear infinite; margin-left: 8px; vertical-align: middle; } @keyframes pc-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Success/error messages */ .pc-notice { padding: 12px; border-radius: 4px; margin-bottom: 20px; border-left: 4px solid; } .pc-notice-success { background: #edfaef; border-color: #00a32a; color: #2a6b2a; } .pc-notice-error { background: #fcf0f1; border-color: #d63638; color: #b32d2e; } .pc-notice-info { background: #f0f6ff; border-color: #2271b1; color: #135e96; }