MediaWiki:Common.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
.lw-map {
height: 70vh;
border: 1px solid #e5e7eb;
border-radius: 12px;
overflow: hidden;
margin: 24px 0;
}
/* ===== LANDRACE ACCESSION TEMPLATE STYLING ===== */
/* Main Accession Container */
.accession-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* ===== ACCESSION HEADER ===== */
.accession-header {
background: linear-gradient(135deg, #2c5530 0%, #3a6b3f 100%);
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
color: white;
box-shadow: 0 8px 32px rgba(44, 85, 48, 0.3);
}
.accession-id-banner {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
padding: 0.75rem 1.5rem;
margin-bottom: 1rem;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.5px;
}
.accession-title {
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 1rem 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
line-height: 1.2;
}
.accession-meta {
font-size: 1rem;
opacity: 0.9;
font-weight: 500;
}
/* ===== GEOGRAPHIC HIERARCHY ===== */
.geographic-hierarchy {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(226, 232, 240, 0.8);
}
.hierarchy-breadcrumb {
background: white;
border-radius: 8px;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.95rem;
font-weight: 600;
color: #2d3748;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.geographic-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.75rem;
font-size: 0.95rem;
}
/* ===== SECTION STYLING ===== */
.section {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.3s ease;
}
.section:hover {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.section h2 {
color: #2c5530;
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 1.5rem 0;
padding-bottom: 0.75rem;
border-bottom: 2px solid #e2e8f0;
position: relative;
}
.section h2::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, #2c5530, #3a6b3f);
border-radius: 1px;
}
.section h3 {
color: #4a5568;
font-size: 1.2rem;
font-weight: 600;
margin: 1.5rem 0 1rem 0;
}
/* ===== GRID LAYOUTS ===== */
.id-grid, .collection-grid, .morphology-grid, .flowering-grid,
.conservation-grid, .cannabinoid-grid, .terpene-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.id-item, .collection-item, .morph-item, .flower-item,
.conservation-item, .cannabinoid-item, .terpene-item {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border-radius: 8px;
padding: 1rem;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.id-item:hover, .collection-item:hover, .morph-item:hover,
.flower-item:hover, .conservation-item:hover,
.cannabinoid-item:hover, .terpene-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border-color: #3a6b3f;
}
/* ===== CONSERVATION STATUS ===== */
.conservation-item.priority-critical {
background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
border-color: #fc8181;
color: #742a2a;
}
.conservation-item.priority-high {
background: linear-gradient(135deg, #feebc8 0%, #fbd38d 100%);
border-color: #f6ad55;
color: #7b341e;
}
.conservation-item.priority-medium {
background: linear-gradient(135deg, #fefcbf 0%, #faf089 100%);
border-color: #ecc94b;
color: #744210;
}
.conservation-item.priority-low {
background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
border-color: #68d391;
color: #22543d;
}
/* ===== CHEMICAL PROFILES ===== */
.chemical-profile {
background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
border: 1px solid #81e6d9;
}
.cannabinoid-item.total, .terpene-item.total {
background: linear-gradient(135deg, #2c5530 0%, #3a6b3f 100%);
color: white;
font-weight: 700;
border-color: #2c5530;
}
.cannabinoid-item.total:hover, .terpene-item.total:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(44, 85, 48, 0.3);
}
/* ===== STEM CHARACTERISTICS ===== */
.stem-characteristics {
background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
border-left: 4px solid #48bb78;
}
/* ===== SELECTION DETAILS ===== */
.selection-details {
background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
border: 1px solid #d6bcfa;
}
.selection-details h3 {
color: #553c9a;
margin-top: 0;
}
/* ===== DOCUMENTATION QUALITY ===== */
.documentation-quality {
background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
border: 1px solid #f6ad55;
}
.completion-indicators, .photo-indicators, .verification-indicators,
.research-indicators, .gaps-indicators, .distribution-indicators {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 0.5rem;
margin: 1rem 0;
font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
font-size: 0.9rem;
}
.completion-indicators div, .photo-indicators div, .verification-indicators div,
.research-indicators div, .gaps-indicators div, .distribution-indicators div {
padding: 0.5rem;
background: rgba(255, 255, 255, 0.7);
border-radius: 6px;
border: 1px solid rgba(246, 173, 85, 0.3);
}
/* Checkmark and X styling */
.completion-indicators::before, .photo-indicators::before, .verification-indicators::before,
.research-indicators::before, .gaps-indicators::before, .distribution-indicators::before {
content: '';
}
/* ===== PRESERVATION STATUS ===== */
.preservation-status {
background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
border: 1px solid #93c5fd;
}
/* ===== ENVIRONMENTAL CONTEXT ===== */
.environmental-context {
background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
border: 1px solid #cbd5e0;
}
/* ===== CULTURAL CONTEXT ===== */
.cultural-context {
background: linear-gradient(135deg, #fef5e7 0%, #fed7aa 100%);
border: 1px solid #f6ad55;
}
/* ===== BOTANICAL DESCRIPTION ===== */
.botanical-description {
background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
border: 1px solid #68d391;
}
/* ===== COLLECTION DETAILS ===== */
.collection-details {
background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
border: 1px solid #cbd5e0;
}
/* ===== TRADITIONAL NOMENCLATURE ===== */
.traditional-nomenclature {
background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
border: 1px solid #b794f6;
}
/* ===== PRIMARY IDENTIFICATION ===== */
.primary-identification {
background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
border: 1px solid #4fd1c7;
}
/* ===== RELATED INFORMATION ===== */
.related-information {
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
border: 1px solid #e17055;
}
/* ===== RESEARCH MANAGEMENT ===== */
.research-management {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
border: 1px solid #42a5f5;
}
/* ===== FOOTER ===== */
.accession-footer {
text-align: center;
padding: 2rem 0;
border-top: 1px solid #e2e8f0;
margin-top: 2rem;
color: #718096;
font-size: 0.9rem;
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
.accession-header {
padding: 1.5rem;
}
.accession-title {
font-size: 2rem;
}
.id-grid, .collection-grid, .morphology-grid, .flowering-grid,
.conservation-grid, .cannabinoid-grid, .terpene-grid {
grid-template-columns: 1fr;
}
.completion-indicators, .photo-indicators, .verification-indicators,
.research-indicators, .gaps-indicators, .distribution-indicators {
grid-template-columns: 1fr;
}
.geographic-details {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.section {
padding: 1rem;
margin-bottom: 1rem;
}
.accession-header {
padding: 1rem;
}
.accession-title {
font-size: 1.5rem;
}
.section h2 {
font-size: 1.3rem;
}
}
/* ===== ANIMATION ENHANCEMENTS ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.section {
animation: fadeInUp 0.6s ease-out;
}
.section:nth-child(1) { animation-delay: 0.1s; }
.section:nth-child(2) { animation-delay: 0.2s; }
.section:nth-child(3) { animation-delay: 0.3s; }
.section:nth-child(4) { animation-delay: 0.4s; }
.section:nth-child(5) { animation-delay: 0.5s; }
/* ===== UTILITY CLASSES ===== */
.highlight {
background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
border: 1px solid #fc8181;
border-radius: 6px;
padding: 0.75rem;
margin: 0.5rem 0;
}
.success {
color: #22543d;
font-weight: 600;
}
.warning {
color: #744210;
font-weight: 600;
}
.error {
color: #742a2a;
font-weight: 600;
}
.info {
color: #2a4365;
font-weight: 600;
}
/* ===== PRINT STYLES ===== */
@media print {
.accession-header {
background: #f7fafc !important;
color: #2d3748 !important;
box-shadow: none !important;
}
.section {
box-shadow: none !important;
border: 1px solid #e2e8f0 !important;
break-inside: avoid;
}
.id-item, .collection-item, .morph-item, .flower-item,
.conservation-item, .cannabinoid-item, .terpene-item {
break-inside: avoid;
}
}
/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
.section {
background: #1a202c;
border-color: #2d3748;
color: #e2e8f0;
}
.section h2 {
color: #68d391;
}
.id-item, .collection-item, .morph-item, .flower-item,
.conservation-item, .cannabinoid-item, .terpene-item {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.hierarchy-breadcrumb {
background: #2d3748;
color: #e2e8f0;
border-color: #4a5568;
}
}