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 editNewer edit →
No edit summary
No edit summary
Line 1: Line 1:
/* ===== FIXED NAVIGATION BUTTONS LAYOUT ===== */
/* Actions bar — escape inherited box styles and force full-width row */
 
/* Actions container - better integration with conservation panel */
.lw-actions {
.lw-actions {
   /* Reset inherited styles */
   /* hard 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 */
   /* layout */
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;
Line 17: Line 15:
   width: 100%;
   width: 100%;
   max-width: 1080px;
   max-width: 1080px;
 
   margin: 18px auto 32px auto;
  /* KEY FIX: Move buttons inside the conservation panel */
   margin: 20px 0 0 0; /* Remove auto margins, just top spacing */
   clear: both;
   clear: both;
}
}


/* Enhanced button styling to match the conservation panel aesthetic */
/* Enhanced pill buttons */
.lw-actions a {
.lw-actions a {
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
 
   padding: 10px 16px;
  /* Better proportions */
   min-width: 13ch;
   padding: 10px 18px;
   border: 1px solid #c1d1bb;
   min-width: 140px;
   border-radius: 999px;
  height: 40px; /* Consistent height */
   background: #fff;
 
   color: #2d5016;
  /* 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-weight: 600;
   font-size: 13px;
   font-size: 13px;
   line-height: 1.2;
   line-height: 1.1;
   text-decoration: none;
   text-decoration: none;
  white-space: nowrap;
   box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
 
   transition:
  /* Subtle shadow that matches KPI cards */
    background-color .15s ease,
   box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
    color .15s ease,
    
    border-color .15s ease,
  /* Smooth transitions */
    box-shadow .15s ease,
  transition: all 0.15s ease;
    transform .08s ease;
}
}


/* Hover state that matches the site theme */
/* Hover / active */
.lw-actions a:hover {
.lw-actions a:hover {
   background: #f8faf9; /* Very subtle green tint */
   background: #2d5016;
   border-color: #9ca3af;
   color: #fff;
   color: #2d5016;
   border-color: #2d5016;
   box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
   box-shadow: 0 2px 8px rgba(45,80,22,.18);
   transform: translateY(-1px);
   transform: translateY(-1px);
}
}
/* Active/pressed state */
.lw-actions a:active {
.lw-actions a:active {
   transform: translateY(0);
   transform: translateY(0);
   box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
   box-shadow: 0 1px 3px rgba(0,0,0,.10) inset;
  background: #f1f5f9;
}
}


/* Fix visited link styling */
/* Keep visited links styled as buttons */
.lw-actions a:visited {  
.lw-actions a:visited { color: #2d5016; }
  color: #374151;  
.lw-actions a:hover:visited { color: #fff; }
}
.lw-actions a:hover:visited {  
  color: #2d5016;  
}


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


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


/* Make the primary action (first button) stand out */
/* Make the first action a subtle primary */
.lw-actions a:first-child {
.lw-actions a:first-child {
   background: #2d5016;
   background: #2d5016;
   color: #ffffff;
   color: #fff;
   border-color: #2d5016;
   border-color: #2d5016;
}
}
Line 103: Line 81:
   background: #3d6b1f;
   background: #3d6b1f;
   border-color: #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 */
/* Responsive wrap */
@media (max-width: 480px) {
@media (max-width: 720px) {
   .lw-actions {
   .lw-actions { gap: 10px; }
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
  }
 
   .lw-actions a {
   .lw-actions a {
     flex: none;
     flex: 1 1 calc(50% - 10px);
     width: 100%;
     min-width: auto;
     max-width: none;
     padding: 12px 14px;
     text-align: center;
     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;
}
*/

Revision as of 09:07, 24 August 2025

/* Actions bar — escape inherited box styles and force full-width row */
.lw-actions {
  /* hard reset */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  /* layout */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin: 18px auto 32px auto;
  clear: both;
}

/* Enhanced pill buttons */
.lw-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-width: 13ch;
  border: 1px solid #c1d1bb;
  border-radius: 999px;
  background: #fff;
  color: #2d5016;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .08s ease;
}

/* Hover / active */
.lw-actions a:hover {
  background: #2d5016;
  color: #fff;
  border-color: #2d5016;
  box-shadow: 0 2px 8px rgba(45,80,22,.18);
  transform: translateY(-1px);
}
.lw-actions a:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.10) inset;
}

/* Keep visited links styled as buttons */
.lw-actions a:visited { color: #2d5016; }
.lw-actions a:hover:visited { color: #fff; }

/* Keyboard focus */
.lw-actions a:focus {
  outline: 2px solid #98c28b;
  outline-offset: 2px;
}

/* Neutralize MediaWiki redlink styling */
.lw-actions a.new,
.lw-actions a.new:visited { color: #2d5016; }
.lw-actions a.new:hover { color: #fff; }

/* Make the first action a subtle primary */
.lw-actions a:first-child {
  background: #2d5016;
  color: #fff;
  border-color: #2d5016;
}

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

/* Responsive wrap */
@media (max-width: 720px) {
  .lw-actions { gap: 10px; }
  .lw-actions a {
    flex: 1 1 calc(50% - 10px);
    min-width: auto;
    padding: 12px 14px;
    text-align: center;
  }
}
Retrieved from "https://landrace.wiki/index.php?title=Template:Home/Actions.css&oldid=226"