/* ======================================== FWCFL Common Styles Shared styles used across multiple pages ======================================== */ /* Theme variables - sensible defaults for light mode, with dark overrides See Pico.css color-schemes docs: https://picocss.com/docs/color-schemes */ :root { /* Background / surface */ --pico-background-color: #ffffff; --pico-card-background-color: #ffffff; --pico-border-color: rgba(0,0,0,0.08); --pico-muted-border-color: rgba(0,0,0,0.06); /* Text colors */ --pico-color: #111827; /* primary body text (dark enough) */ --pico-muted-color: #374151; /* secondary/muted text */ /* Primary / accents */ --pico-primary: #0d6efd; --pico-primary-background: #0d6efd; --pico-primary-inverse: #ffffff; --pico-primary-border: rgba(13,110,253,0.15); /* Secondary */ --pico-secondary-background: #f3f4f6; --pico-secondary-inverse: #111827; --pico-secondary-border: rgba(0,0,0,0.06); /* Misc */ --pico-box-shadow: 0 6px 18px rgba(16,24,40,0.06); } /* Respect user's dark preference */ @media (prefers-color-scheme: dark) { :root { --pico-background-color: #071027; --pico-card-background-color: #0b1320; --pico-border-color: rgba(255,255,255,0.06); --pico-muted-border-color: rgba(255,255,255,0.04); --pico-color: #e6f0ff; /* light body text */ --pico-muted-color: #cfe7ff; --pico-primary: #66b4ff; --pico-primary-background: #66b4ff; --pico-primary-inverse: #071027; --pico-primary-border: rgba(102,180,255,0.15); --pico-secondary-background: #071a2b; --pico-secondary-inverse: #cfe7ff; --pico-secondary-border: rgba(255,255,255,0.03); --pico-box-shadow: 0 8px 28px rgba(0,0,0,0.6); } } /* Allow forcing dark mode by adding data-theme="dark" to */ html[data-theme="dark"] { --pico-background-color: #071027; --pico-card-background-color: #0b1320; --pico-border-color: rgba(255,255,255,0.06); --pico-muted-border-color: rgba(255,255,255,0.04); --pico-color: #e6f0ff; --pico-muted-color: #cfe7ff; --pico-primary: #66b4ff; --pico-primary-background: #66b4ff; --pico-primary-inverse: #071027; } /* Navigation Styles - Using Pico.css with proper positioning */ nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px 0; } /* Global background and text color to use Pico variable tokens */ body { background: var(--pico-background-color); color: var(--pico-color); } /* Make muted text use the pico muted token */ .muted, .secondary-text { color: var(--pico-muted-color); } nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } /* nav ul:first-child removed empty ruleset (logo container handled implicitly) */ .nav-logo { height: 62px; /* 48px * 1.3 = 62.4px, rounded to 62px */ width: auto; } nav ul:last-child { /* Navigation items container */ justify-content: flex-end; } /* Make navigation buttons uniform width */ nav ul:last-child li a[role="button"] { min-width: 120px; text-align: center; white-space: nowrap; } /* Desktop navigation - show nav links, hide mobile dropdown */ @media (min-width: 769px) { .nav-mobile-menu { display: none; } } /* Mobile navigation - custom button dropdown */ @media (max-width: 768px) { nav { flex-direction: row; /* Keep logo and menu on the same line */ justify-content: space-between; /* Space them out */ align-items: center; /* Vertically align them */ } nav ul:first-child { margin-bottom: 0; /* Remove bottom margin */ } nav ul:last-child { width: auto; /* Allow the menu to size itself */ justify-content: flex-end; } .nav-logo { height: 52px; /* 40px * 1.3 = 52px */ } /* Hide desktop nav items on mobile, but not dropdown items */ nav ul:last-child > li:not(.nav-mobile-menu) { display: none; } /* Show mobile menu */ .nav-mobile-menu { display: block !important; width: 100%; } /* Custom dropdown button */ .nav-mobile-menu { position: relative; width: 100%; } .mobile-menu-button { width: 100%; text-align: center; padding: 12px 16px; background: var(--pico-primary-background); color: var(--pico-primary-inverse); border: var(--pico-border-width) solid var(--pico-primary-border); border-radius: var(--pico-border-radius); cursor: pointer; font-weight: 600; font-size: inherit; } .mobile-menu-button:hover { background: var(--pico-primary-hover-background); } .mobile-menu-button .arrow { font-size: 12px; margin-left: 8px; transition: transform 0.2s ease; } .mobile-menu-button.open .arrow { transform: rotate(180deg); } /* Dropdown content - default hidden state with high specificity */ nav ul:last-child .nav-mobile-menu .mobile-dropdown-content { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--pico-background-color); border: var(--pico-border-width) solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); box-shadow: var(--pico-box-shadow); z-index: 1050; /* Ensure it's above other content */ padding: 8px; margin-top: 4px; } /* Show dropdown when open with highest specificity */ nav ul:last-child .nav-mobile-menu .mobile-dropdown-content.show, nav ul:last-child .nav-mobile-menu .mobile-dropdown-content[data-open="true"] { display: flex; flex-direction: column; gap: 4px; } nav ul:last-child .nav-mobile-menu .mobile-dropdown-content li { display: block; width: 100%; margin-bottom: 0; /* Remove margin as gap is used */ } nav ul:last-child .nav-mobile-menu .mobile-dropdown-content li a { display: block; width: 100%; text-align: center; padding: 8px 12px; border-radius: var(--pico-border-radius); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s ease; } /* Style the dropdown buttons like the desktop nav buttons */ nav ul:last-child .nav-mobile-menu .mobile-dropdown-content li a[role="button"] { background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); border: var(--pico-border-width) solid var(--pico-secondary-border); } nav ul:last-child .nav-mobile-menu .mobile-dropdown-content li a[role="button"]:not(.secondary) { background: var(--pico-primary-background); color: var(--pico-primary-inverse); border: var(--pico-border-width) solid var(--pico-primary-border); } nav ul:last-child .nav-mobile-menu .mobile-dropdown-content li a[role="button"]:hover { background: var(--pico-secondary-hover-background); color: var(--pico-secondary-hover); } } /* Ensure the buttons take up the full width of their grid cells */ nav button { width: 100%; } /* Team name styling */ .teamName { text-align: center; } /* Container for points display */ .points-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; max-width: 800px; margin: 0 auto; } /* Adjust gameweek alignment */ .gameweek-number { text-align: left; flex: 1; } /* Center weekly points */ .weekly-points { flex: 1; text-align: center; } /* Align total points to the right */ .total-points { flex: 1; text-align: right; } /* Color the weekly points in red */ .red-text { color: red; font-weight: bold; } /* Error and loading message styles */ .error-message { color: #d63384; background-color: #f8d7da; border: 1px solid #f5c2c7; border-radius: 8px; padding: 12px 16px; margin: 16px 0; text-align: center; } .loading-message { text-align: center; padding: 20px; color: #666; font-style: italic; } /* Success message styling */ .success-message { color: #0f5132; background-color: #d1e7dd; border: 1px solid #badbcc; border-radius: 8px; padding: 12px 16px; margin: 16px 0; text-align: center; } /* ======================================== SHARED PITCH AND PLAYER STYLES Common styles used across multiple pages ======================================== */ /* Pitch Container - Shared across all pages */ .pitch-container { max-width: 900px; margin: 20px auto; text-align: center; position: relative; overflow: hidden; border-radius: 20px; border: 2px solid #ccc; height: 600px; } /* Pitch Styles - Shared across all pages */ .pitch { width: 85%; position: relative; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: 0; border: none; } /* Locked overlay used when transfers / team edits are disabled Shared between transfers and pick-team pages. */ .transfers-locked-overlay { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0; */ display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)); z-index: 50; pointer-events: none; /* allow underlying non-interactive elements to remain inert */ } .transfers-locked-overlay .locked-content { pointer-events: auto; /* allow interaction with buttons/links */ background: var(--pico-card-background-color); color: var(--pico-color); border-radius: 12px; padding: 18px 22px; max-width: 520px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid var(--pico-muted-border-color); } .transfers-locked-overlay .locked-content h3 { margin-top: 0; margin-bottom: 8px; } .transfers-locked-overlay .locked-content p { margin: 6px 0; } .transfers-locked-overlay .locked-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .transfers-locked-overlay .locked-actions .button { pointer-events: auto; } .pitch-image { width: 100%; height: auto; transform: scale(1) translate(0, 0%); transform-origin: center center; object-fit: cover; } /* Player Card Base Styles - Shared across all pages */ .player-card { width: 70px; aspect-ratio: 1 / 1; background-color: #008000 !important; /* Green background - force override */ border-radius: 10px; text-align: center; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); z-index: 2; transition: width 0.3s ease, height 0.3s ease; cursor: pointer; /* Clickable cards */ } /* Player Card Interaction Styles - Shared across all pages */ .player-card:hover { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } /* Selected player card styling - Shared across all pages */ .player-card.selected { border: 3px solid #087cc4; box-shadow: 0 0 10px rgba(8, 124, 196, 0.5); } /* Player Position overlay - Shared across all pages */ .player-position { background-color: #087cc4; /* Blue background to match player-price */ color: white; font-size: 8px; padding: 0px 0; font-weight: bold; position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; height: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; } /* Player Price & Points overlay - unified shared styling */ .player-price, .player-points { /* points page uses player-points class via shared createPlayerCard context */ background-color: #087cc4; /* Blue background for consistency */ color: #fff; font-size: 8px; font-weight: bold; position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; height: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; /* ensure no extra gap */ } /* Substitute specific colour for points overlay (mirrors substitute badge styling) */ .substitute-player .player-points { background-color: #ffc107; color: #000; } /* Player Shirt Styles - Shared across all pages */ .player-shirt { width: 100%; max-height: 60px; object-fit: contain; background: transparent; opacity: 0.7; transition: opacity 0.3s ease-in-out; } .player-shirt.loaded { opacity: 1; } /* Player Name Styles - Shared across all pages */ .player-name { background-color: #ffffff; font-weight: bold; font-size: 8px; color: black; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: absolute; bottom: 12px; /* Position directly above the price/position overlay */ left: 0; width: 100%; padding: 0; line-height: 1; margin: 0; z-index: 2; height: 12px; display: flex; align-items: center; justify-content: center; } /* Badge Styles - Shared across all pages */ .substitute-player::before { content: "SUB"; position: absolute; top: 2px; right: 2px; background-color: #ffc107; color: #000; font-size: 7px; font-weight: bold; padding: 1px 4px; border-radius: 3px; z-index: 4; line-height: 1; border: 1px solid #000; } .captain-player::before, .player-card.captain-player::before { content: "C" !important; position: absolute !important; top: 2px !important; left: 2px !important; background-color: #dc3545 !important; color: #fff !important; font-size: 14px !important; font-weight: bold !important; padding: 2px 8px !important; border-radius: 3px !important; z-index: 4 !important; line-height: 1 !important; border: 1px solid #000 !important; } /* Error Message Styles - Shared across all pages */ .error-message { color: #e74c3c; text-align: center; padding: 20px; font-weight: bold; background-color: #f8f9fa; border-radius: 8px; margin: 20px; } /* ======================================== SHARED MODAL AND SELECTION STYLES Used by both create-team and transfers pages ======================================== */ /* Enhanced Player Selection Modal Styles */ .player-selection-option { display: flex; align-items: center; padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.3s ease; background: var(--pico-card-background-color); box-shadow: 0 6px 18px rgba(16,24,40,0.04); } .player-selection-option:hover { border-color: #4CAF50; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); } .player-selection-option img { width: 52px; height: 52px; object-fit: contain; margin-right: 1rem; flex-shrink: 0; } .player-selection-info { flex: 1; display: flex; justify-content: space-between; align-items: center; } .player-selection-details { flex: 1; } .player-selection-details h4 { margin: 0 0 0.25rem 0; font-size: 1rem; } .player-selection-stats { font-size: 0.875rem; color: #666; margin: 0.25rem 0; } /* Team name shown under player name in the player-selection modal Improve contrast against white background by using the primary text color token and a slightly bolder weight. This respects dark mode via the CSS variables defined at the top of the file. */ .player-selection-team { display: block; color: var(--pico-color); font-size: 0.875rem; font-weight: 600; line-height: 1; margin-top: 0.125rem; opacity: 0.98; } .player-selection-price { font-weight: bold; color: #28a745; font-size: 1rem; min-width: 72px; text-align: right; margin-left: 1rem; } /* Make the whole option keyboard-focusable and show visible outline */ .player-selection-option:focus, .player-selection-option:focus-visible { outline: 3px solid rgba(13,110,253,0.12); outline-offset: 2px; } /* Slightly stronger separation for the card on dark backgrounds */ .player-selection-option:hover { /* keep position stable to avoid clipping while still showing emphasis */ box-shadow: 0 10px 24px rgba(16,24,40,0.08); } /* Sort controls for player selection modal */ .player-sort-controls { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.75rem 0; } .sort-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--pico-muted-color); padding: 6px 10px; border-radius: 6px; font-size: 0.9rem; line-height: 1; cursor: pointer; transition: all 0.15s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .sort-btn svg { width: 14px; height: 14px; display: block; } .sort-btn:hover { border-color: var(--pico-primary); color: var(--pico-color); } .sort-btn.active { background: var(--pico-primary-background); color: var(--pico-primary-inverse); border-color: var(--pico-primary-border); box-shadow: var(--pico-box-shadow); } @media (max-width: 420px) { .player-sort-controls { gap: 0.25rem; } .sort-btn { padding: 6px 8px; font-size: 0.85rem; } } /* Team Selection Modal Styles */ .team-option { display: flex; align-items: center; padding: 1rem; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: all 0.3s ease; background: white; } .team-option:hover { border-color: #4CAF50; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2); transform: translateY(-1px); } .team-option img { width: 40px; height: 40px; object-fit: contain; margin-right: 1rem; } .team-option h4 { margin: 0; font-size: 1rem; } /* Base modal styling */ #playerModal, #teamSelectionModal, #playerSelectionModal, #errorModal, #confirmationModal { z-index: 1000; } /* Position close buttons in dialog headers consistently */ dialog article header { position: relative; z-index: 1100; /* keep header above modal content */ } dialog article header button[aria-label="Close"], dialog article header button[rel="prev"] { position: absolute; top: 6px; /* closer to the top edge */ right: 6px; /* closer to the right edge */ width: 34px; height: 34px; border-radius: 50%; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 1200; } /* Render a centered × inside the button */ dialog article header button[aria-label="Close"]::before, dialog article header button[rel="prev"]::before { content: "✕"; display: inline-block; font-size: 18px; line-height: 1; color: var(--pico-muted-color); } dialog article header button[aria-label="Close"]:hover::before, dialog article header button[rel="prev"]:hover::before { color: var(--pico-color); } /* Ensure dialog header doesn't visually overlap the scrollable list, and the first player isn't clipped under the header/close button. */ dialog article header { position: relative; z-index: 1100; /* keep header above modal content */ } /* Container inside modal main to hold header-adjacent controls (sort etc.) */ .player-modal-controls { display: flex; justify-content: space-between; /* title left, controls right */ align-items: center; gap: 0.5rem; } /* If a dedicated sort container exists, keep controls compact and right-aligned */ #playerSortContainer { display: flex; justify-content: flex-end; align-items: center; } /* Make the sort controls visually sit to the right when inside the header area */ .player-sort-controls { margin: 0; /* controlled by parent layout */ } @media (max-width: 420px) { .player-modal-controls { flex-direction: column; align-items: stretch; } #playerSortContainer { justify-content: flex-start; margin-top: 0.5rem; } } /* Give the scroll container some breathing room from the header */ .player-selection-list { max-height: 400px; overflow-y: auto; padding-top: 0.75rem; /* prevent first item from being covered by header */ box-sizing: border-box; } /* Team list grid */ .team-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-height: 400px; overflow-y: auto; } /* Player selection list */ .player-selection-list { max-height: 400px; overflow-y: auto; } /* ======================================== SHARED RESPONSIVE DESIGN Common breakpoints used across all pages ======================================== */ /* Mobile screens (up to 610px) */ @media (max-width: 610px) { .pitch-container { height: 400px; margin: 10px auto; } .player-card { width: 45px; } .player-card .player-name { font-size: 6px; height: 10px; bottom: 10px; /* Position directly above the 10px overlay */ } .player-shirt { max-height: 35px; } .substitute-player::before { font-size: 5px; padding: 1px 2px; } .captain-player::before, .player-card.captain-player::before { font-size: 10px !important; padding: 1px 4px !important; } .team-list { grid-template-columns: 1fr; } .action-buttons, .draft-actions .action-buttons { flex-direction: column; gap: 0.5rem; } .action-buttons button, .draft-actions .action-buttons button { width: 100%; } .player-price, .player-points { font-size: 6px; height: 10px; } .player-position { font-size: 6px; height: 10px; } } /* Tablet screens (611px to 900px) */ @media (min-width: 611px) and (max-width: 900px) { .pitch-container { height: 500px; } .player-card { width: 50px; } .player-card .player-name { font-size: 7px; height: 12px; } .player-shirt { max-height: 40px; } .substitute-player::before { font-size: 6px; padding: 1px 3px; } .captain-player::before, .player-card.captain-player::before { font-size: 12px !important; padding: 2px 5px !important; } .player-price, .player-points { font-size: 7px; } .player-position { font-size: 7px; } } /* Desktop screens (901px and above) */ @media (min-width: 901px) { .pitch-container { height: 600px; } .player-card { width: 55px; } .player-card .player-name { font-size: 8px; height: 14px; } .player-shirt { max-height: 45px; } .substitute-player::before { font-size: 7px; padding: 2px 4px; } .captain-player::before, .player-card.captain-player::before { font-size: 14px !important; padding: 2px 6px !important; } .player-price, .player-points { font-size: 10px; height: 14px; } .player-position { font-size: 10px; height: 14px; } } /* Tablet screens (611px to 900px) */ @media (min-width: 611px) and (max-width: 900px) { .pitch-container { height: 500px; } .player-card { width: 60px; } .player-card .player-name { font-size: 7px; } } /* Desktop screens (901px and up) */ @media (min-width: 901px) { .player-card { width: 90px; } .player-card .player-name { font-size: 10px; height: 14px; bottom: 14px; /* Position directly above the 14px overlay */ } .player-shirt { max-height: 75px; } } /* ======================================== SHARED EMPTY SLOT STYLING Used by both create-team and transfers pages ======================================== */ /* Empty slot styling for positions that need to be filled */ .player-card.empty-slot { background-color: white !important; /* Override the green background from base player-card */ border: 2px dashed #ccc; opacity: 0.7; cursor: pointer; } .player-card.empty-slot:hover { border-color: #4CAF50; opacity: 1; } .player-card.empty-slot .player-name { background-color: transparent; color: #666; font-style: italic; } /* Plus symbol for empty slots */ .plus-symbol { font-size: 24px; color: #4CAF50; font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: -10px; /* Adjust for position text below */ } /* Position text for empty slots */ .empty-slot-position { background-color: transparent; color: #666; font-size: 10px; font-weight: bold; text-align: center; position: absolute; bottom: 15%; left: 0; width: 100%; font-style: italic; } /* ======================================== EMPTY SLOT RESPONSIVE DESIGN ======================================== */ /* Mobile screens */ @media (max-width: 768px) { .plus-symbol { font-size: 18px; } .empty-slot-position { font-size: 8px; } } /* Tablet screens */ @media (min-width: 611px) and (max-width: 900px) { .plus-symbol { font-size: 20px; } .empty-slot-position { font-size: 9px; } } /* Desktop screens */ @media (min-width: 901px) { .plus-symbol { font-size: 30px; } .empty-slot-position { font-size: 10px; } } /* ======================================== SHARED TOAST NOTIFICATIONS Moved from transfers.css so all pages (e.g. pick-team) have styling ======================================== */ .toast-container { position: fixed; top: 16px; right: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; max-width: 280px; } .toast { background: #1e1e1e; color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); font-size: 0.9rem; line-height: 1.3; opacity: 0; transform: translateY(-8px); animation: toast-in 120ms ease-out forwards, toast-out 300ms ease-in forwards; animation-delay: 0s, var(--toast-duration, 3500ms); } .toast-success { background: #2e7d32; } .toast-info { background: #0277bd; } .toast-warning { background: #ed6c02; } .toast-error { background: #c62828; } @keyframes toast-in { to { opacity: 1; transform: translateY(0); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } } /* Player "best-in-position" star (top-right of player card) */ .player-star { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; background: #071027; /* dark circle */ display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 6; pointer-events: none; /* allow clicks to pass through to the card */ border: 1px solid rgba(0,0,0,0.12); } /* Ensure the inline SVG scales and is centered inside the circular badge */ .player-star svg { display: block; width: 60%; height: 60%; } /* Color override for SVG path - keep contrast in dark mode */ .player-star svg path { fill: #08e485; /* green star */ } /* Responsive sizing for the star */ @media (max-width: 610px) { .player-star { width: 14px; height: 14px; font-size: 10px; top: 4px; right: 4px; } } @media (min-width: 611px) and (max-width: 900px) { .player-star { width: 16px; height: 16px; font-size: 11px; top: 5px; right: 5px; } } @media (min-width: 901px) { .player-star { width: 22px; height: 22px; font-size: 14px; top: 6px; right: 6px; } }