Template:Home/Actions.css: Difference between revisions

Revision as of 09:05, 24 August 2025

/* ===== FIXED NAVIGATION BUTTONS LAYOUT ===== */

/* Actions container - better integration with conservation panel */
.lw-actions {
  /* Reset inherited styles */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* Improved layout */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  
  /* KEY FIX: Move buttons inside the conservation panel */
  margin: 20px 0 0 0; /* Remove auto margins, just top spacing */
  clear: both;
}

/* Enhanced button styling to match the conservation panel aesthetic */
.lw-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Better proportions */
  padding: 10px 18px;
  min-width: 140px;
  height: 40px; /* Consistent height */
  
  /* Visual styling that matches the conservation panel */
  border: 1px solid #d1d5db;
  border-radius: 8px; /* Slightly less rounded than pill */
  background: #ffffff;
  color: #374151;
  
  /* Typography */
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  
  /* Subtle shadow that matches KPI cards */
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  
  /* Smooth transitions */
  transition: all 0.15s ease;
}

/* Hover state that matches the site theme */
.lw-actions a:hover {
  background: #f8faf9; /* Very subtle green tint */
  border-color: #9ca3af;
  color: #2d5016;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  transform: translateY(-1px);
}

/* Active/pressed state */
.lw-actions a:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
  background: #f1f5f9;
}

/* Fix visited link styling */
.lw-actions a:visited { 
  color: #374151; 
}
.lw-actions a:hover:visited { 
  color: #2d5016; 
}

/* Enhanced focus state for accessibility */
.lw-actions a:focus {
  outline: 2px solid #a7d1b0;
  outline-offset: 2px;
}

/* Fix MediaWiki redlinks within actions */
.lw-actions a.new,
.lw-actions a.new:visited { 
  color: #374151; 
}
.lw-actions a.new:hover { 
  color: #2d5016; 
}

/* Make the primary action (first button) stand out */
.lw-actions a:first-child {
  background: #2d5016;
  color: #ffffff;
  border-color: #2d5016;
}

.lw-actions a:first-child:hover {
  background: #3d6b1f;
  border-color: #3d6b1f;
  color: #ffffff;
}

/* ===== BETTER INTEGRATION WITH CONSERVATION PANEL ===== */

/* Option 1: Put buttons INSIDE the conservation panel */
.lw-cons-panel .lw-actions {
  margin: 16px 0 0 0; /* Just top margin within panel */
  padding-top: 16px;
  border-top: 1px solid #f3f4f6; /* Subtle divider */
}

/* Option 2: Make buttons look like they belong with the panel */
.lw-cons-panel + .lw-actions {
  margin: 16px auto 0 auto; /* Tighter spacing after panel */
  
  /* Create visual connection */
  position: relative;
}

.lw-cons-panel + .lw-actions::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: #e5e7eb;
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */

/* Tablet - maintain horizontal layout but tighten spacing */
@media (max-width: 768px) {
  .lw-actions {
    gap: 8px;
  }
  
  .lw-actions a {
    padding: 9px 14px;
    min-width: 120px;
    font-size: 12px;
  }
}

/* Mobile - better stacking */
@media (max-width: 640px) {
  .lw-actions {
    gap: 8px;
    /* Keep horizontal but allow wrapping */
  }
  
  .lw-actions a {
    flex: 1 1 calc(50% - 4px); /* Two per row */
    min-width: 0;
    max-width: 160px;
  }
}

/* Small mobile - stack vertically */
@media (max-width: 480px) {
  .lw-actions {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
  
  .lw-actions a {
    flex: none;
    width: 100%;
    max-width: none;
    text-align: center;
  }
}

/* ===== ALTERNATIVE: COMPACT BUTTON BAR STYLE ===== */
/* Uncomment this section for a more compact, integrated look */

/*
.lw-actions {
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  margin: 12px 0 0 0;
}

.lw-actions a {
  padding: 6px 12px;
  height: 32px;
  font-size: 12px;
  border-radius: 6px;
  min-width: 100px;
}
*/