|
|
| (2 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ===== FIXED NAVIGATION BUTTONS LAYOUT ===== */
| | .mw-parser-output .lw-actions { |
| | | display:flex; |
| /* Actions container - better integration with conservation panel */
| | justify-content:center; |
| .lw-actions { | | align-items:center; |
| /* Reset inherited styles */
| | flex-wrap:wrap; |
| background: transparent !important;
| | gap:12px; |
| border: 0 !important;
| | margin:18px 0 28px 0; |
| 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 { | | .mw-parser-output .lw-actions .pill { |
| background: #3d6b1f; | | display:inline-flex; |
| border-color: #3d6b1f; | | align-items:center; |
| color: #ffffff; | | justify-content:center; |
| | padding:9px 14px; |
| | min-width:13ch; |
| | border:1px solid #cfd7c9; |
| | border-radius:999px; |
| | background:#fff; |
| | color:#2d5016; |
| | font-weight:600; |
| | line-height:1.1; |
| | text-decoration:none; |
| } | | } |
|
| |
|
| /* ===== BETTER INTEGRATION WITH CONSERVATION PANEL ===== */
| | .mw-parser-output .lw-actions a { |
| | | text-decoration:none !important; |
| /* 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 */
| |
| } | | } |
| | | .mw-parser-output .lw-actions a:hover .pill { |
| /* Option 2: Make buttons look like they belong with the panel */
| | border-color:#9fb39a; |
| .lw-cons-panel + .lw-actions { | | box-shadow:0 1px 4px rgba(0,0,0,.08); |
| 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;
| |
| } | | } |
| */
| |
