Toggle search
Toggle menu
2
17
5
293
Landrace.Wiki - The Landrace Cannabis Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Home/Actions.css: Difference between revisions

Template page
More actions
← Older edit
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* ===== FIXED NAVIGATION BUTTONS LAYOUT ===== */
/* Actions bar — STRONG OVERRIDE for all conflicting styles */
 
/* Actions container - better integration with conservation panel */
.lw-actions {
.lw-actions {
   /* Reset inherited styles */
   /* Aggressive reset */
   background: transparent !important;
   background: transparent !important;
   border: 0 !important;
   border: 0 !important;
Line 9: Line 7:
   padding: 0 !important;
   padding: 0 !important;


   /* Improved layout */
   /* Force horizontal layout */
   display: flex;
   display: flex !important;
   justify-content: center;
   justify-content: center !important;
   align-items: center;
   align-items: center !important;
   flex-wrap: wrap;
   flex-wrap: wrap !important;
   gap: 12px;
  flex-direction: row !important; /* Override any column forcing */
   width: 100%;
   gap: 12px !important;
   max-width: 1080px;
   width: 100% !important;
 
   max-width: 1080px !important;
  /* KEY FIX: Move buttons inside the conservation panel */
   margin: 18px auto 32px auto !important;
   margin: 20px 0 0 0; /* Remove auto margins, just top spacing */
   clear: both !important;
   clear: both;
}
}


/* Enhanced button styling to match the conservation panel aesthetic */
/* Override ANY styles that might affect the action buttons */
.lw-actions a {
.lw-actions a,
   display: inline-flex;
.lw-cons-panel .lw-actions a,
   align-items: center;
.mw-parser-output .lw-actions a {
   justify-content: center;
   display: inline-flex !important;
    
   align-items: center !important;
   /* Better proportions */
   justify-content: center !important;
   padding: 10px 18px;
  padding: 10px 16px !important;
   min-width: 140px;
  min-width: 13ch !important;
   height: 40px; /* Consistent height */
  border: 1px solid #c1d1bb !important;
  border-radius: 999px !important;
   background: #fff !important;
   color: #2d5016 !important;
   font-weight: 600 !important;
   font-size: 13px !important;
   line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04) !important;
  transition: all .15s ease !important;
    
    
   /* Visual styling that matches the conservation panel */
   /* Force inline display, not block */
   border: 1px solid #d1d5db;
   flex-direction: row !important;
  border-radius: 8px; /* Slightly less rounded than pill */
   width: auto !important;
   background: #ffffff;
   max-width: none !important;
   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 */
/* Hover states with strong specificity */
.lw-actions a:hover {
.lw-actions a:hover,
   background: #f8faf9; /* Very subtle green tint */
.lw-cons-panel .lw-actions a:hover,
   border-color: #9ca3af;
.mw-parser-output .lw-actions a:hover {
   color: #2d5016;
   background: #2d5016 !important;
   box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
   color: #fff !important;
   transform: translateY(-1px);
   border-color: #2d5016 !important;
   box-shadow: 0 2px 8px rgba(45,80,22,.18) !important;
   transform: translateY(-1px) !important;
}
}


/* Active/pressed state */
.lw-actions a:active,
.lw-actions a:active {
.lw-cons-panel .lw-actions a:active,
   transform: translateY(0);
.mw-parser-output .lw-actions a:active {
   box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
   transform: translateY(0) !important;
  background: #f1f5f9;
   box-shadow: 0 1px 3px rgba(0,0,0,.10) inset !important;
}
}


/* Fix visited link styling */
/* Fix visited links */
.lw-actions a:visited {  
.lw-actions a:visited,
   color: #374151;  
.lw-cons-panel .lw-actions a:visited,
.mw-parser-output .lw-actions a:visited {  
   color: #2d5016 !important;  
}
}
.lw-actions a:hover:visited {  
 
   color: #2d5016;  
.lw-actions a:hover:visited,
.lw-cons-panel .lw-actions a:hover:visited,
.mw-parser-output .lw-actions a:hover:visited {  
   color: #fff !important;  
}
}


/* Enhanced focus state for accessibility */
/* Focus states */
.lw-actions a:focus {
.lw-actions a:focus,
   outline: 2px solid #a7d1b0;
.lw-cons-panel .lw-actions a:focus,
   outline-offset: 2px;
.mw-parser-output .lw-actions a:focus {
   outline: 2px solid #98c28b !important;
   outline-offset: 2px !important;
}
}


/* Fix MediaWiki redlinks within actions */
/* Fix MediaWiki redlinks */
.lw-actions a.new,
.lw-actions a.new,
.lw-actions a.new:visited {
.lw-actions a.new:visited,
  color: #374151;
.lw-cons-panel .lw-actions a.new,
}
.lw-cons-panel .lw-actions a.new:visited,
.lw-actions a.new:hover {
.mw-parser-output .lw-actions a.new,
  color: #2d5016;
.mw-parser-output .lw-actions a.new:visited {  
}
   color: #2d5016 !important;  
 
/* 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-actions a.new:hover,
.lw-cons-panel + .lw-actions {
.lw-cons-panel .lw-actions a.new:hover,
  margin: 16px auto 0 auto; /* Tighter spacing after panel */
.mw-parser-output .lw-actions a.new:hover {
 
   color: #fff !important;  
  /* Create visual connection */
   position: relative;
}
}


.lw-cons-panel + .lw-actions::before {
/* Primary button (first child) */
  content: '';
.lw-actions a:first-child,
  position: absolute;
.lw-cons-panel .lw-actions a:first-child,
  top: -8px;
.mw-parser-output .lw-actions a:first-child {
  left: 50%;
   background: #2d5016 !important;
  transform: translateX(-50%);
   color: #fff !important;
   width: 60px;
   border-color: #2d5016 !important;
   height: 1px;
   background: #e5e7eb;
}
}


/* ===== RESPONSIVE IMPROVEMENTS ===== */
.lw-actions a:first-child:hover,
 
.lw-cons-panel .lw-actions a:first-child:hover,
/* Tablet - maintain horizontal layout but tighten spacing */
.mw-parser-output .lw-actions a:first-child:hover {
@media (max-width: 768px) {
  background: #3d6b1f !important;
  .lw-actions {
  border-color: #3d6b1f !important;
    gap: 8px;
  }
 
  .lw-actions a {
    padding: 9px 14px;
    min-width: 120px;
    font-size: 12px;
  }
}
}


/* Mobile - better stacking */
/* Responsive - maintain horizontal layout */
@media (max-width: 640px) {
@media (max-width: 720px) {
   .lw-actions {
   .lw-actions,
     gap: 8px;
  .lw-cons-panel .lw-actions,
     /* Keep horizontal but allow wrapping */
  .mw-parser-output .lw-actions {  
     gap: 10px !important;
     flex-direction: row !important; /* Force horizontal even on mobile */
   }
   }
    
    
   .lw-actions a {
   .lw-actions a,
     flex: 1 1 calc(50% - 4px); /* Two per row */
  .lw-cons-panel .lw-actions a,
     min-width: 0;
  .mw-parser-output .lw-actions a {
     max-width: 160px;
     flex: 1 1 calc(50% - 10px) !important;
     min-width: auto !important;
    padding: 12px 14px !important;
    text-align: center !important;
     max-width: 200px !important; /* Prevent buttons from getting too wide */
   }
   }
}
}


/* Small mobile - stack vertically */
/* Very small screens - still try to maintain horizontal */
@media (max-width: 480px) {
@media (max-width: 480px) {
   .lw-actions {
   .lw-actions a,
    flex-direction: column;
  .lw-cons-panel .lw-actions a,
    gap: 6px;
   .mw-parser-output .lw-actions a {
    align-items: stretch;
     flex: 1 1 calc(50% - 5px) !important;
  }
     padding: 10px 8px !important;
 
     font-size: 12px !important;
   .lw-actions a {
     min-width: 0 !important;
     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;
}
*/

Latest revision as of 09:08, 24 August 2025

/* Actions bar — STRONG OVERRIDE for all conflicting styles */
.lw-actions {
  /* Aggressive reset */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* Force horizontal layout */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  flex-direction: row !important; /* Override any column forcing */
  gap: 12px !important;
  width: 100% !important;
  max-width: 1080px !important;
  margin: 18px auto 32px auto !important;
  clear: both !important;
}

/* Override ANY styles that might affect the action buttons */
.lw-actions a,
.lw-cons-panel .lw-actions a,
.mw-parser-output .lw-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 16px !important;
  min-width: 13ch !important;
  border: 1px solid #c1d1bb !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #2d5016 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04) !important;
  transition: all .15s ease !important;
  
  /* Force inline display, not block */
  flex-direction: row !important;
  width: auto !important;
  max-width: none !important;
}

/* Hover states with strong specificity */
.lw-actions a:hover,
.lw-cons-panel .lw-actions a:hover,
.mw-parser-output .lw-actions a:hover {
  background: #2d5016 !important;
  color: #fff !important;
  border-color: #2d5016 !important;
  box-shadow: 0 2px 8px rgba(45,80,22,.18) !important;
  transform: translateY(-1px) !important;
}

.lw-actions a:active,
.lw-cons-panel .lw-actions a:active,
.mw-parser-output .lw-actions a:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) inset !important;
}

/* Fix visited links */
.lw-actions a:visited,
.lw-cons-panel .lw-actions a:visited,
.mw-parser-output .lw-actions a:visited { 
  color: #2d5016 !important; 
}

.lw-actions a:hover:visited,
.lw-cons-panel .lw-actions a:hover:visited,
.mw-parser-output .lw-actions a:hover:visited { 
  color: #fff !important; 
}

/* Focus states */
.lw-actions a:focus,
.lw-cons-panel .lw-actions a:focus,
.mw-parser-output .lw-actions a:focus {
  outline: 2px solid #98c28b !important;
  outline-offset: 2px !important;
}

/* Fix MediaWiki redlinks */
.lw-actions a.new,
.lw-actions a.new:visited,
.lw-cons-panel .lw-actions a.new,
.lw-cons-panel .lw-actions a.new:visited,
.mw-parser-output .lw-actions a.new,
.mw-parser-output .lw-actions a.new:visited { 
  color: #2d5016 !important; 
}

.lw-actions a.new:hover,
.lw-cons-panel .lw-actions a.new:hover,
.mw-parser-output .lw-actions a.new:hover { 
  color: #fff !important; 
}

/* Primary button (first child) */
.lw-actions a:first-child,
.lw-cons-panel .lw-actions a:first-child,
.mw-parser-output .lw-actions a:first-child {
  background: #2d5016 !important;
  color: #fff !important;
  border-color: #2d5016 !important;
}

.lw-actions a:first-child:hover,
.lw-cons-panel .lw-actions a:first-child:hover,
.mw-parser-output .lw-actions a:first-child:hover {
  background: #3d6b1f !important;
  border-color: #3d6b1f !important;
}

/* Responsive - maintain horizontal layout */
@media (max-width: 720px) {
  .lw-actions,
  .lw-cons-panel .lw-actions,
  .mw-parser-output .lw-actions { 
    gap: 10px !important;
    flex-direction: row !important; /* Force horizontal even on mobile */
  }
  
  .lw-actions a,
  .lw-cons-panel .lw-actions a,
  .mw-parser-output .lw-actions a {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: auto !important;
    padding: 12px 14px !important;
    text-align: center !important;
    max-width: 200px !important; /* Prevent buttons from getting too wide */
  }
}

/* Very small screens - still try to maintain horizontal */
@media (max-width: 480px) {
  .lw-actions a,
  .lw-cons-panel .lw-actions a,
  .mw-parser-output .lw-actions a {
    flex: 1 1 calc(50% - 5px) !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    min-width: 0 !important;
  }
}
Retrieved from "https://landrace.wiki/index.php?title=Template:Home/Actions.css&oldid=227"