/* ========================================================================== Feedback System Styles Loaded in to prevent FOUC ========================================================================== */ /* CSS Variables */ :root { --feedback-card: #232323; --feedback-border: #333; --feedback-text: #e0e0e0; --feedback-text-muted: #888; --feedback-primary: #064780; --feedback-danger: #dc3545; --feedback-success: #28a745; --feedback-warning: #ffc107; } body.lightmode { --feedback-card: #fff; --feedback-border: #e0e0e0; --feedback-text: #232323; --feedback-text-muted: #666; } /* ========================================================================== Card Component ========================================================================== */ .imrp-card { background: var(--feedback-card); border-radius: 3px; padding: 1.2em 1.5em; margin-bottom: 1em; } body.lightmode .imrp-card { border: 1px solid var(--feedback-border); } /* ========================================================================== Badge Components ========================================================================== */ .imrp-badge { padding: 0.15em 0.5em; border-radius: 3px; font-size: 0.75em; font-weight: 500; text-transform: uppercase; display: inline-block; } /* Type badges */ .imrp-badge-suggestion { background: rgba(40, 167, 69, 0.2); color: #28a745; } .imrp-badge-bug { background: rgba(220, 53, 69, 0.2); color: #dc3545; } /* Status badges */ .imrp-badge-new { background: rgba(0, 123, 255, 0.2); color: #007bff; } .imrp-badge-in_progress { background: rgba(255, 193, 7, 0.2); color: #ffc107; } .imrp-badge-resolved { background: rgba(40, 167, 69, 0.2); color: #28a745; } .imrp-badge-closed { background: rgba(108, 117, 125, 0.2); color: #6c757d; } .imrp-badge-wont_fix { background: rgba(108, 117, 125, 0.2); color: #6c757d; } /* Priority badges */ .imrp-badge-critical { background: rgba(220, 53, 69, 0.3); color: #dc3545; } .imrp-badge-high { background: rgba(255, 193, 7, 0.3); color: #ffc107; } .imrp-badge-normal { background: rgba(108, 117, 125, 0.2); color: #888; } .imrp-badge-low { background: rgba(108, 117, 125, 0.2); color: #888; } /* Role badges */ .imrp-badge-developer { background: rgba(111, 66, 193, 0.2); color: #7c4dff; } .imrp-badge-admin { background: rgba(220, 53, 69, 0.2); color: #dc3545; } .imrp-badge-helper { background: rgba(0, 123, 255, 0.2); color: #007bff; } /* ========================================================================== Vote Button Component ========================================================================== */ /* Vote Display (non-interactive, for list views) */ .imrp-feedback-vote-display { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 0.5em; background: #1a1a1a; border: 1px solid var(--feedback-border); border-radius: 3px; } body.lightmode .imrp-feedback-vote-display { background: #f8f8f8; } /* Vote Button (interactive, for issue view) */ .imrp-vote-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 50px; padding: 0.5em; background: #1a1a1a; border: 1px solid var(--feedback-border); border-radius: 3px; cursor: pointer; transition: all 0.15s; } .imrp-vote-btn:hover { border-color: var(--feedback-primary); background: rgba(6, 71, 128, 0.1); } .imrp-vote-btn.voted { background: rgba(6, 71, 128, 0.2); border-color: var(--feedback-primary); } .imrp-vote-count { font-size: 1.1em; font-weight: 600; color: #fff; } .imrp-vote-label { font-size: 0.7em; color: #666; text-transform: uppercase; } body.lightmode .imrp-vote-btn { background: #f8f8f8; } body.lightmode .imrp-vote-count { color: #232323; } /* ========================================================================== Button Components ========================================================================== */ .imrp-btn { padding: 0.6em 1.2em; border-radius: 3px; font-size: 0.9em; font-weight: 500; cursor: pointer; transition: all 0.15s; border: none; display: inline-block; text-decoration: none; text-align: center; } .imrp-btn-primary { background: var(--feedback-primary); color: #fff; } .imrp-btn-primary:hover { background: #0a5ea8; color: #fff; } .imrp-btn-secondary { background: #333; color: var(--feedback-text); } .imrp-btn-secondary:hover { background: #444; color: #fff; } body.lightmode .imrp-btn-secondary { background: #e0e0e0; color: #333; } body.lightmode .imrp-btn-secondary:hover { background: #d0d0d0; } /* ========================================================================== Filter Components ========================================================================== */ .imrp-filters-container { background: var(--feedback-card); border-radius: 3px; padding: 1.2em 1.5em; margin-bottom: 1.2em; } body.lightmode .imrp-filters-container { border: 1px solid var(--feedback-border); } .imrp-filters-header { margin-bottom: 1em; } .imrp-filters-title { font-size: 0.9em; font-weight: 600; color: var(--feedback-text-muted); text-transform: uppercase; letter-spacing: 0.02em; } .imrp-filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1em; margin-bottom: 1em; } .imrp-filter-group { display: flex; flex-direction: column; gap: 0.4em; } .imrp-filter-label { font-size: 0.85em; color: var(--feedback-text-muted); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .imrp-filter-select, .imrp-filter-input { padding: 8px 12px; background: #1a1a1a; border: 1px solid var(--feedback-border); border-radius: 3px; color: var(--feedback-text); font-size: 0.95em; transition: all 0.15s; } .imrp-filter-select:focus, .imrp-filter-input:focus { outline: none; border-color: var(--feedback-primary); box-shadow: 0 0 0 2px rgba(6, 71, 128, 0.1); } body.lightmode .imrp-filter-select, body.lightmode .imrp-filter-input { background: #f8f8f8; } /* ========================================================================== Pagination Components ========================================================================== */ .imrp-pagination-wrapper { display: flex; justify-content: space-between; align-items: center; padding: 1em; background: var(--feedback-card); border-radius: 3px; gap: 1em; } body.lightmode .imrp-pagination-wrapper { border: 1px solid var(--feedback-border); } .imrp-pagination-pages { display: flex; gap: 0.3em; } .imrp-page-link { padding: 0.4em 0.8em; background: #1a1a1a; border: 1px solid var(--feedback-border); border-radius: 3px; color: var(--feedback-text); font-size: 0.9em; cursor: pointer; transition: all 0.15s; text-decoration: none; } .imrp-page-link:hover { background: #2a2a2a; border-color: #444; color: #fff; } .imrp-page-link.active { background: var(--feedback-primary); border-color: var(--feedback-primary); color: #fff; } .imrp-page-ellipsis { padding: 0.4em 0.5em; color: #666; } .imrp-pagesize-group { display: flex; align-items: center; gap: 0.5em; font-size: 0.9em; color: var(--feedback-text-muted); } .imrp-pagesize-select { padding: 0.4em 0.6em; background: #1a1a1a; border: 1px solid var(--feedback-border); border-radius: 3px; color: var(--feedback-text); font-size: 0.9em; } body.lightmode .imrp-page-link { background: #f8f8f8; } body.lightmode .imrp-page-link:hover { background: #f0f0f0; } body.lightmode .imrp-pagesize-select { background: #f8f8f8; } /* ========================================================================== No Results / Empty State ========================================================================== */ .imrp-no-results { padding: 3em 2em; text-align: center; background: var(--feedback-card); border-radius: 3px; } body.lightmode .imrp-no-results { border: 1px solid var(--feedback-border); } .imrp-no-results-icon { font-size: 2.5em; margin-bottom: 0.5em; } .imrp-no-results-title { font-size: 1.1em; font-weight: 600; color: #fff; margin-bottom: 0.5em; } .imrp-no-results-message { color: var(--feedback-text-muted); font-size: 0.95em; } body.lightmode .imrp-no-results-title { color: #232323; } /* ========================================================================== Issue List Item - Simplified Design ========================================================================== */ .imrp-feedback-issue-item { cursor: pointer; display: flex; gap: 1em; padding: 1em 1.2em; border-bottom: 1px solid var(--feedback-border); transition: background 0.15s; } .imrp-feedback-issue-item:hover { background: #2a2a2a; } body.lightmode .imrp-feedback-issue-item:hover { background: #f8f8f8; } .imrp-feedback-issue-item:last-child { border-bottom: none; } .imrp-feedback-issue-content { flex: 1; min-width: 0; } .imrp-feedback-issue-header { display: flex; align-items: center; gap: 0.6em; margin-bottom: 6px; } .imrp-feedback-type-indicator { font-size: 0.7em; font-weight: 600; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; letter-spacing: 0.03em; flex-shrink: 0; } .imrp-feedback-type-bug { color: #dc3545; background: rgba(220, 53, 69, 0.15); } .imrp-feedback-type-suggestion { color: #28a745; background: rgba(40, 167, 69, 0.15); } .imrp-feedback-issue-title { font-size: 1em; font-weight: 600; color: #e0e0e0; text-decoration: none; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .imrp-feedback-issue-title:hover { color: #fff; } body.lightmode .imrp-feedback-issue-title { color: #232323; } body.lightmode .imrp-feedback-issue-title:hover { color: #064780; } .imrp-feedback-issue-meta { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; font-size: 0.8em; color: #666; } .imrp-feedback-separator { color: #444; } body.lightmode .imrp-feedback-separator { color: #ccc; } /* Status - subtle inline text */ .imrp-feedback-status { font-weight: 500; text-transform: capitalize; } .imrp-feedback-status-new { color: #007bff; } .imrp-feedback-status-in_progress { color: #ffc107; } .imrp-feedback-status-resolved { color: #28a745; } .imrp-feedback-status-closed { color: #6c757d; } .imrp-feedback-status-wont_fix { color: #6c757d; } /* Priority - only shown if not normal, subtle text */ .imrp-feedback-priority { font-weight: 500; text-transform: capitalize; } .imrp-feedback-priority-critical { color: #dc3545; } .imrp-feedback-priority-high { color: #fd7e14; } .imrp-feedback-priority-low { color: #6c757d; } /* Visibility indicator - subtle */ .imrp-feedback-visibility { font-weight: 500; color: #7c4dff; } .imrp-feedback-issue-category { color: #888; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 700px) { .imrp-card { padding: 1em; } .imrp-filters-container { padding: 1em; } .imrp-filters-grid { grid-template-columns: 1fr; } .imrp-pagination-wrapper { flex-direction: column; gap: 1em; } .imrp-pagination-pages { justify-content: center; flex-wrap: wrap; } .imrp-pagesize-group { justify-content: center; } .imrp-vote-btn { flex-direction: row; gap: 0.3em; min-width: auto; padding: 0.4em 0.8em; } }