@lovebowls/leagueelements
Version:
League Elements package for LoveBowls
4 lines • 24.5 kB
TypeScript
export const MOBILE_STYLES: "\n \n \n .panel {\n margin-bottom: var(--le-padding-m, 1.25em);\n border: 1px solid var(--le-border-color-light, #f0f0f0);\n border-radius: var(--le-border-radius-standard, 4px);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n .panel-header-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-header, #f9f9f9);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-medium, 1.1em);\n }\n\n .panel .panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--le-background-color-header, #f9f9f9);\n }\n\n .panel-content {\n padding: var(--le-padding-m, 1.25em);\n background-color: var(--le-background-color-panel, #fff);\n /* Common border for content area if needed\n border: 1px solid var(--le-border-color-light, #f0f0f0);\n */\n }\n\n .controls-panel {\n /* Layout properties moved to mobile/desktop sections */\n padding: 0;\n margin-bottom: var(--le-padding-s, 0.5rem);\n margin-top: var(--le-padding-s, 0.5rem);\n background: transparent;\n border: none;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--le-padding-m, 1rem);\n }\n\n .filter-controls {\n gap: var(--le-padding-s, 0.5rem);\n display: flex;\n align-items: center;\n flex: 1;\n }\n \n /* Enhanced dropdown styling for button-like appearance */\n .controls-panel .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \n .controls-panel .dropdown-select-shared {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--le-background-color-button, #f0f0f0);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n padding: var(--le-padding-xs, 0.25rem);\n font-size: var(--le-font-size-dropdown, 1em));\n color: var(--le-text-color-primary, #333);\n cursor: pointer;\n line-height: 1.4;\n min-width: 150px;\n transition: all 0.2s ease;\n font-weight: 500;\n }\n \n .controls-panel .dropdown-select-shared:hover {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #ccc);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n \n .controls-panel .dropdown-select-shared:focus {\n outline: none;\n border-color: var(--le-text-color-accent, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n background-color: var(--le-background-color-panel, #fff);\n }\n \n .controls-panel .dropdown-select-shared:active {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n transform: translateY(1px);\n }\n\n \n .button-shared {\n padding: 4px 8px;\n border: 1px solid var(--le-border-color-medium, #ccc);\n background-color: var(--le-background-color-button, #f0f0f0);\n color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n cursor: pointer;\n border-radius: var(--le-border-radius-standard, 4px);\n font-size: var(--le-font-size-button, var(--le-font-size-medium, 1.15em)); /* Use variable with fallback */\n text-decoration: none;\n display: inline-block;\n text-align: center;\n line-height: normal; /* Ensure consistent line height */\n white-space: nowrap; /* Prevent text wrapping */\n vertical-align: middle; /* Align nicely if next to text/icons */\n user-select: none; /* Prevent text selection on click */\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n }\n\n .button-shared:hover:not(:disabled) {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n }\n\n .button-shared:active:not(:disabled) {\n /* Optional: style for active (pressed) state */\n /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n }\n\n .button-shared:disabled,\n .button-shared.disabled { /* Allow class-based disabling too */\n background-color: var(--le-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n cursor: not-allowed;\n opacity: 0.7; /* Visually indicate disabled state */\n }\n\n /* Variations */\n .button-shared.button-primary {\n background-color: var(--le-color-primary, #007bff);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-primary, #007bff);\n }\n .button-shared.button-primary:hover:not(:disabled) {\n background-color: var(--le-color-primary-hover, #0056b3);\n border-color: var(--le-color-primary-hover, #0056b3);\n }\n\n .button-shared.button-secondary-light {\n background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n color: var(--le-text-color-secondary-light-text, #212529);\n border-color: var(--le-border-color-secondary-light, #ced4da);\n }\n .button-shared.button-secondary-light:hover:not(:disabled) {\n background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n color: var(--le-text-color-secondary-light-text-hover, #212529);\n }\n\n /* Example for a darker secondary button if needed elsewhere \n .button-shared.button-secondary {\n background-color: var(--le-color-secondary, #6c757d); \n color: var(--le-text-color-on-secondary, #fff);\n border-color: var(--le-color-secondary, #6c757d);\n }\n .button-shared.button-secondary:hover:not(:disabled) {\n background-color: var(--le-color-secondary-hover, #5a6268);\n border-color: var(--le-color-secondary-hover, #5a6268);\n }\n */\n\n \n .list-container {\n max-height: 200px;\n overflow-y: auto;\n }\n .list-panel {\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n background: var(--le-background-color-panel, #fff);\n }\n .list-panel h4 {\n margin: 0;\n padding: var(--le-padding-m, 1rem);\n background: var(--le-background-color-header, #f8f9fa);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n color: var(--le-text-color-primary, #333);\n }\n .list-panel.disabled {\n pointer-events: none;\n opacity: 0.6;\n }\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list-item{\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--le-padding-xs) var(--le-padding-s);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 2.5rem; /* Ensure consistent height for action buttons */\n box-sizing: border-box;\n }\n .list-panel.disabled .list-item {\n cursor: not-allowed;\n }\n .list-item:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.2em);\n text-align: left; /* Ensure text is left-aligned */\n display: flex;\n align-items: center; /* Center text vertically within its container */\n }\n\n /* Example of an actions container part within a list item */\n .list-item .list-item-actions {\n flex-shrink: 0; /* Prevent actions from shrinking */\n display: flex;\n gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n align-items: center;\n min-height: 2rem; /* Reserve space for buttons even when empty */\n }\n\n .list-item:hover {\n background-color: var(--le-background-color-hover, #f5f5f5);\n }\n\n .list-item.selected {\n background-color: var(--le-background-color-selected, #e3f2fd);\n border-left: 3px solid var(--le-border-color-primary, #2196f3);\n animation: highlightItem 0.6s ease-out;\n }\n\n @keyframes highlightItem {\n 0% {\n background-color: var(--le-background-color-accent, #108CFF);\n box-shadow: 0 0 0 2px rgba(16, 140, 255, 0.3), 0 2px 8px rgba(16, 140, 255, 0.2);\n }\n 100% {\n background-color: var(--le-background-color-selected, #e3f2fd);\n box-shadow: none;\n }\n }\n\n /* Mobile-specific list item adjustments */\n @media (max-width: 768px) {\n .list-item {\n min-height: 4rem; /* Slightly taller for mobile touch targets */\n padding: 0 var(--le-padding-xs, 1rem);;\n }\n \n .list-item .list-item-actions {\n min-height: 2.5rem; /* Larger touch targets for mobile */\n }\n \n .list-item .list-item-actions .button-shared {\n min-height: 2.5rem; /* Ensure buttons are touch-friendly */\n }\n }\n\n \n /* Paging Controls Styles */\n .paging-controls {\n display: flex;\n justify-content: flex-end;\n gap: var(--le-padding-s, 0.5rem);\n margin-top: var(--le-padding-s, 0.5rem);\n padding: var(--le-padding-xs, 0.25rem) 0;\n background-color: transparent;\n border: none;\n font-size: var(--le-font-size-xs, 0.75em);\n }\n\n .paging-btn {\n background: var(--le-background-color-button, #f5f5f5);\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n cursor: pointer;\n color: var(--le-text-color-primary, #333);\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n user-select: none;\n }\n\n .paging-btn:hover:not(:disabled) {\n background: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #bbb);\n }\n\n .paging-btn:disabled {\n background: var(--le-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n :host {\n display: block;\n font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif);\n box-sizing: border-box;\n color: var(--le-text-color-primary, #333);\n }\n .match-item {\n padding: var(--swal-padding-xs, 0.2rem) 0;\n display: flex;\n align-items: center;\n gap: var(--le-padding-xs, 0.25em);\n }\n .match-date {\n color: var(--le-text-color-secondary, #666);\n margin-bottom: var(--le-padding-xs, 0.2em);\n }\n .error {\n color: var(--le-text-color-error, #ff0000);\n padding: var(--le-padding-s, 0.5rem);\n background-color: var(--le-background-color-error, #fff0f0);\n border-radius: var(--swal-border-radius-standard, 4px);\n }\n .warning-icon-future-result { color: var(--le-color-status-warning, #f39c12); }\n .warning-icon-conflict { color: var(--le-color-status-conflict, #e67e22); }\n .warning-icon-pending-result { color: var(--le-color-status-pending, #e74c3c); }\n .warning-icon-no-date { color: var(--le-color-status-info, #2196f3); }\n .warning-icon {\n flex-shrink: 0;\n }\n \n .match-item {\n padding: var(--swal-padding-xs, 0.2rem) 0;\n }\n /* Mobile: Ensure no height constraints for dynamic content-based height */\n .attention-matches {\n max-height: none;\n overflow-y: visible;\n }\n ";
export const DESKTOP_STYLES: "\n \n \n .panel {\n margin-bottom: var(--le-padding-m, 1.25em);\n border: 1px solid var(--le-border-color-light, #f0f0f0);\n border-radius: var(--le-border-radius-standard, 4px);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n .panel-header-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-header, #f9f9f9);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-medium, 1.1em);\n }\n\n .panel .panel-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n background-color: var(--le-background-color-header, #f9f9f9);\n }\n\n .panel-content {\n padding: var(--le-padding-m, 1.25em);\n background-color: var(--le-background-color-panel, #fff);\n /* Common border for content area if needed\n border: 1px solid var(--le-border-color-light, #f0f0f0);\n */\n }\n\n .controls-panel {\n /* Layout properties moved to mobile/desktop sections */\n padding: 0;\n margin-bottom: var(--le-padding-s, 0.5rem);\n margin-top: var(--le-padding-s, 0.5rem);\n background: transparent;\n border: none;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: var(--le-padding-m, 1rem);\n }\n\n .filter-controls {\n gap: var(--le-padding-s, 0.5rem);\n display: flex;\n align-items: center;\n flex: 1;\n }\n \n /* Enhanced dropdown styling for button-like appearance */\n .controls-panel .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n \n .controls-panel .dropdown-select-shared {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--le-background-color-button, #f0f0f0);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n padding: var(--le-padding-xs, 0.25rem);\n font-size: var(--le-font-size-dropdown, 1em));\n color: var(--le-text-color-primary, #333);\n cursor: pointer;\n line-height: 1.4;\n min-width: 150px;\n transition: all 0.2s ease;\n font-weight: 500;\n }\n \n .controls-panel .dropdown-select-shared:hover {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #ccc);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n }\n \n .controls-panel .dropdown-select-shared:focus {\n outline: none;\n border-color: var(--le-text-color-accent, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n background-color: var(--le-background-color-panel, #fff);\n }\n \n .controls-panel .dropdown-select-shared:active {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n transform: translateY(1px);\n }\n\n \n .button-shared {\n padding: 4px 8px;\n border: 1px solid var(--le-border-color-medium, #ccc);\n background-color: var(--le-background-color-button, #f0f0f0);\n color: var(--le-text-color-primary, #333); /* Ensure text color contrasts with button background */\n cursor: pointer;\n border-radius: var(--le-border-radius-standard, 4px);\n font-size: var(--le-font-size-button, var(--le-font-size-medium, 1.15em)); /* Use variable with fallback */\n text-decoration: none;\n display: inline-block;\n text-align: center;\n line-height: normal; /* Ensure consistent line height */\n white-space: nowrap; /* Prevent text wrapping */\n vertical-align: middle; /* Align nicely if next to text/icons */\n user-select: none; /* Prevent text selection on click */\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth transitions */\n }\n\n .button-shared:hover:not(:disabled) {\n background-color: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #bbb); /* Slightly darker border on hover */\n /* color: var(--le-text-color-accent-hover, inherit); Optional: change text color on hover */\n }\n\n .button-shared:active:not(:disabled) {\n /* Optional: style for active (pressed) state */\n /* background-color: var(--le-background-color-button-active, #d0d0d0); */\n }\n\n .button-shared:disabled,\n .button-shared.disabled { /* Allow class-based disabling too */\n background-color: var(--le-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n border-color: var(--le-border-color-medium, #ccc); /* Use medium border for disabled state */\n cursor: not-allowed;\n opacity: 0.7; /* Visually indicate disabled state */\n }\n\n /* Variations */\n .button-shared.button-primary {\n background-color: var(--le-color-primary, #007bff);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-primary, #007bff);\n }\n .button-shared.button-primary:hover:not(:disabled) {\n background-color: var(--le-color-primary-hover, #0056b3);\n border-color: var(--le-color-primary-hover, #0056b3);\n }\n\n .button-shared.button-secondary-light {\n background-color: var(--le-background-color-button-secondary-light, #f8f9fa);\n color: var(--le-text-color-secondary-light-text, #212529);\n border-color: var(--le-border-color-secondary-light, #ced4da);\n }\n .button-shared.button-secondary-light:hover:not(:disabled) {\n background-color: var(--le-background-color-button-secondary-light-hover, #e2e6ea);\n border-color: var(--le-border-color-secondary-light-hover, #dae0e5);\n color: var(--le-text-color-secondary-light-text-hover, #212529);\n }\n\n /* Example for a darker secondary button if needed elsewhere \n .button-shared.button-secondary {\n background-color: var(--le-color-secondary, #6c757d); \n color: var(--le-text-color-on-secondary, #fff);\n border-color: var(--le-color-secondary, #6c757d);\n }\n .button-shared.button-secondary:hover:not(:disabled) {\n background-color: var(--le-color-secondary-hover, #5a6268);\n border-color: var(--le-color-secondary-hover, #5a6268);\n }\n */\n\n \n .list-container {\n max-height: 200px;\n overflow-y: auto;\n }\n .list-panel {\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n background: var(--le-background-color-panel, #fff);\n }\n .list-panel h4 {\n margin: 0;\n padding: var(--le-padding-m, 1rem);\n background: var(--le-background-color-header, #f8f9fa);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n color: var(--le-text-color-primary, #333);\n }\n .list-panel.disabled {\n pointer-events: none;\n opacity: 0.6;\n }\n .list {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list-item{\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--le-padding-xs) var(--le-padding-s);\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n cursor: pointer;\n transition: background-color 0.2s ease;\n min-height: 2.5rem; /* Ensure consistent height for action buttons */\n box-sizing: border-box;\n }\n .list-panel.disabled .list-item {\n cursor: not-allowed;\n }\n .list-item:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.2em);\n text-align: left; /* Ensure text is left-aligned */\n display: flex;\n align-items: center; /* Center text vertically within its container */\n }\n\n /* Example of an actions container part within a list item */\n .list-item .list-item-actions {\n flex-shrink: 0; /* Prevent actions from shrinking */\n display: flex;\n gap: var(--le-padding-xs, 0.4em); /* Increased gap */\n align-items: center;\n min-height: 2rem; /* Reserve space for buttons even when empty */\n }\n\n .list-item:hover {\n background-color: var(--le-background-color-hover, #f5f5f5);\n }\n\n .list-item.selected {\n background-color: var(--le-background-color-selected, #e3f2fd);\n border-left: 3px solid var(--le-border-color-primary, #2196f3);\n animation: highlightItem 0.6s ease-out;\n }\n\n @keyframes highlightItem {\n 0% {\n background-color: var(--le-background-color-accent, #108CFF);\n box-shadow: 0 0 0 2px rgba(16, 140, 255, 0.3), 0 2px 8px rgba(16, 140, 255, 0.2);\n }\n 100% {\n background-color: var(--le-background-color-selected, #e3f2fd);\n box-shadow: none;\n }\n }\n\n /* Mobile-specific list item adjustments */\n @media (max-width: 768px) {\n .list-item {\n min-height: 4rem; /* Slightly taller for mobile touch targets */\n padding: 0 var(--le-padding-xs, 1rem);;\n }\n \n .list-item .list-item-actions {\n min-height: 2.5rem; /* Larger touch targets for mobile */\n }\n \n .list-item .list-item-actions .button-shared {\n min-height: 2.5rem; /* Ensure buttons are touch-friendly */\n }\n }\n\n \n /* Paging Controls Styles */\n .paging-controls {\n display: flex;\n justify-content: flex-end;\n gap: var(--le-padding-s, 0.5rem);\n margin-top: var(--le-padding-s, 0.5rem);\n padding: var(--le-padding-xs, 0.25rem) 0;\n background-color: transparent;\n border: none;\n font-size: var(--le-font-size-xs, 0.75em);\n }\n\n .paging-btn {\n background: var(--le-background-color-button, #f5f5f5);\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n cursor: pointer;\n color: var(--le-text-color-primary, #333);\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n user-select: none;\n }\n\n .paging-btn:hover:not(:disabled) {\n background: var(--le-background-color-button-hover, #e0e0e0);\n border-color: var(--le-border-color-dark, #bbb);\n }\n\n .paging-btn:disabled {\n background: var(--le-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n cursor: not-allowed;\n opacity: 0.7;\n }\n\n :host {\n display: block;\n font-family: var(--le-font-family-main, 'Open Sans', Helvetica, Arial, sans-serif);\n box-sizing: border-box;\n color: var(--le-text-color-primary, #333);\n }\n .match-item {\n padding: var(--swal-padding-xs, 0.2rem) 0;\n display: flex;\n align-items: center;\n gap: var(--le-padding-xs, 0.25em);\n }\n .match-date {\n color: var(--le-text-color-secondary, #666);\n margin-bottom: var(--le-padding-xs, 0.2em);\n }\n .error {\n color: var(--le-text-color-error, #ff0000);\n padding: var(--le-padding-s, 0.5rem);\n background-color: var(--le-background-color-error, #fff0f0);\n border-radius: var(--swal-border-radius-standard, 4px);\n }\n .warning-icon-future-result { color: var(--le-color-status-warning, #f39c12); }\n .warning-icon-conflict { color: var(--le-color-status-conflict, #e67e22); }\n .warning-icon-pending-result { color: var(--le-color-status-pending, #e74c3c); }\n .warning-icon-no-date { color: var(--le-color-status-info, #2196f3); }\n .warning-icon {\n flex-shrink: 0;\n }\n \n .match-item {\n padding: var(--swal-padding-xs, 0.2rem) 0;\n }\n /* Desktop: Add height constraints if needed for space management */\n .attention-matches {\n max-height: 300px;\n overflow-y: auto;\n }\n ";
export const TEMPLATE: "\n <div class=\"attention-matches\">\n {{attentionMatches}}\n </div>\n <div class=\"paging-controls\" id=\"attention-paging\" {{showPaging}}>\n <button class=\"paging-btn button-shared button\" id=\"attention-prev\" {{prevDisabled}}>< Prev</button>\n <button class=\"paging-btn button-shared button\" id=\"attention-next\" {{nextDisabled}}>Next ></button>\n </div>\n ";
//# sourceMappingURL=LeagueMatchesAttention-styles.d.ts.map