/* Priority Badge Styles for Requirements Documentation */
/* ========================================
ICON CONFIGURATION (Easy to Change!)
========================================
To change an icon:
1. Find your new icon at https://primer.style/foundations/icons
2. Copy the SVG code
3. Replace the SVG path in the custom property below
======================================== */
:root {
/* Draft - Paintbrush icon (Octicons paintbrush-16) */
--status-icon--draft: url('data:image/svg+xml;charset=utf-8,');
/* Original: Pencil icon (Octicons pencil-24) */
/* --status-icon--draft: url('data:image/svg+xml;charset=utf-8,'); */
/* In Review - People icon (Octicons people-24) */
--status-icon--in-review: url('data:image/svg+xml;charset=utf-8,');
/* Previous: Star icon (Octicons star-16) */
/* --status-icon--in-review: url('data:image/svg+xml;charset=utf-8,'); */
/* Original: Eye icon (Octicons eye-24) */
/* --status-icon--in-review: url('data:image/svg+xml;charset=utf-8,'); */
/* Approved - Verified icon (Octicons verified-24) */
--status-icon--approved: url('data:image/svg+xml;charset=utf-8,');
/* Original: Check circle icon (Octicons check-circle-24) */
/* --status-icon--approved: url('data:image/svg+xml;charset=utf-8,'); */
/* Implemented - Rocket icon (Octicons rocket-16) */
--status-icon--implemented: url('data:image/svg+xml;charset=utf-8,');
/* Original: Rocket icon (Octicons rocket-24) */
/* --status-icon--implemented: url('data:image/svg+xml;charset=utf-8,'); */
}
/* Base badge styling */
.priority-badge {
display: inline-flex; /* Flexbox for better alignment control */
align-items: center; /* Vertically center content */
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
border-radius: 0.375rem;
margin-left: 0.5rem;
letter-spacing: 0.025em;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
flex-shrink: 0; /* Prevent badge from shrinking */
vertical-align: middle; /* Align with surrounding text baseline */
}
/* Priority levels with garden-themed colors */
/* CRITICAL - Red/urgent (matches tomato red) */
.priority-critical {
background-color: #ef4444;
color: #ffffff;
border: 2px solid #dc2626;
}
/* HIGH - Orange (matches carrot orange) */
.priority-high {
background-color: #f97316;
color: #ffffff;
border: 2px solid #ea580c;
}
/* MEDIUM - Yellow/Gold (matches sunflower) */
.priority-medium {
background-color: #eab308;
color: #1f2937;
border: 2px solid #ca8a04;
}
/* LOW - Green (matches garden green) */
.priority-low {
background-color: #22c55e;
color: #ffffff;
border: 2px solid #16a34a;
}
/* Hover effects */
.priority-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out;
}
/* Phase badge (optional companion to priority) */
.phase-badge {
display: inline-flex; /* Flexbox for better alignment control */
align-items: center; /* Vertically center content */
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
margin-left: 0.5rem;
background-color: #6366f1;
color: #ffffff;
border: 2px solid #4f46e5;
flex-shrink: 0; /* Prevent badge from shrinking */
vertical-align: middle; /* Align with surrounding text baseline */
}
/* Status badge */
.status-badge {
display: inline-flex;
align-items: center; /* Vertically center icon and text */
gap: 0.375rem; /* Space between icon and text */
padding: 0.25rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
margin-left: 0.5rem;
flex-shrink: 0; /* Prevent badge from shrinking */
vertical-align: middle; /* Align with surrounding text baseline */
}
/* Status badge icons using same Octicons as navigation */
.status-badge::before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
.status-draft {
background-color: #9ca3af;
color: #ffffff;
border: 2px solid #6b7280;
}
.status-draft::before {
mask-image: var(--status-icon--draft);
-webkit-mask-image: var(--status-icon--draft);
}
.status-in-review {
background-color: #3b82f6;
color: #ffffff;
border: 2px solid #2563eb;
}
.status-in-review::before {
mask-image: var(--status-icon--in-review);
-webkit-mask-image: var(--status-icon--in-review);
}
.status-approved {
background-color: #10b981;
color: #ffffff;
border: 2px solid #059669;
}
.status-approved::before {
mask-image: var(--status-icon--approved);
-webkit-mask-image: var(--status-icon--approved);
}
.status-implemented {
background-color: #8b5cf6;
color: #ffffff;
border: 2px solid #7c3aed;
}
.status-implemented::before {
mask-image: var(--status-icon--implemented);
-webkit-mask-image: var(--status-icon--implemented);
}
/* Hover effects for phase and status badges (matching priority badge behavior) */
.phase-badge:hover,
.status-badge:hover {
transform: translateY(-1px); /* Subtle lift on hover */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s ease-in-out; /* Smooth animation */
}
/* Priority filter/legend section */
.priority-legend {
display: flex;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem;
background-color: #f9fafb;
border-radius: 0.5rem;
margin: 1rem 0;
}
.priority-legend-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Priority card in index pages */
.requirement-card {
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
background-color: #ffffff;
transition: box-shadow 0.2s ease-in-out;
}
.requirement-card:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.requirement-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.requirement-card-title {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
}
.requirement-card-meta {
display: flex;
gap: 0.5rem;
align-items: center;
}
.requirement-card-description {
color: #6b7280;
font-size: 0.875rem;
}
/* Dark mode support */
[data-md-color-scheme="slate"] .priority-badge {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
[data-md-color-scheme="slate"] .requirement-card {
background-color: #1e293b;
border-color: #334155;
}
[data-md-color-scheme="slate"] .requirement-card-title {
color: #f1f5f9;
}
[data-md-color-scheme="slate"] .requirement-card-description {
color: #94a3b8;
}
[data-md-color-scheme="slate"] .priority-legend {
background-color: #1e293b;
}
/* Responsive design */
@media (max-width: 768px) {
.priority-badge,
.phase-badge,
.status-badge {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
}
.requirement-card-header {
flex-direction: column;
align-items: flex-start;
}
.requirement-card-meta {
margin-top: 0.5rem;
}
}