@lovebowls/leagueelements

Version:

League Elements package for LoveBowls

5 lines • 23.5 kB

TypeScript

export const BASE_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\n }\n\n /* Variations - consider if needed, or handle with specific component styles */\n /*\n .button-shared.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.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.accent {\n background-color: var(--le-color-accent, #2196f3);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-accent, #2196f3);\n }\n .button-shared.accent:hover:not(:disabled) {\n background-color: var(--le-color-accent-hover, #1976d2);\n border-color: var(--le-color-accent-hover, #1976d2);\n }\n */\n\n \n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.15em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .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 }\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 font-size: var(--le-font-size-base, 1em);\n }\n .upcoming-matches-container { /* Renamed for clarity */\n /* display: flex; /* Removed as list is now the primary content */\n /* gap: var(--le-padding-s, 0.5rem); /* Removed */\n }\n .matches-list {\n list-style: none;\n padding: 0;\n margin: 0;\n max-height: 300px; /* Consider making this configurable or dynamic */\n overflow-y: auto;\n }\n .match-item {\n padding: var(--le-padding-s, 0.5rem) 0;\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n }\n .match-item:last-child {\n border-bottom: none;\n }\n .match-date {\n color: var(--le-text-color-secondary, #666);\n font-size: 0.85em;\n margin-bottom: var(--le-padding-xs, 0.2em);\n }\n .match-teams { /* This class was present but not used, can be removed if still unused */\n }\n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n }\n /* CALENDAR STYLES ARE REMOVED FROM HERE */\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 }\n .paging-btn {\n background: var(--lae-background-color-button, #f5f5f5);\n border: 1px solid var(--lae-border-color-dark, #ccc);\n border-radius: var(--lae-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n font-size: 1em;\n cursor: pointer;\n }\n .paging-btn:disabled {\n background: var(--lae-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n cursor: not-allowed;\n }\n .filter-indicator { /* This style is now managed by LeagueCalendar or parent */\n /* Removed */\n }\n .error {\n color: var(--le-text-color-error, #ff0000); /* Using theme variable */\n padding: var(--le-padding-s, 0.5rem);\n background-color: var(--le-background-color-error, #fff0f0); /* Using theme variable */\n border-radius: var(--le-border-radius-standard, 4px);\n }\n "; export const MOBILE_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\n }\n\n /* Variations - consider if needed, or handle with specific component styles */\n /*\n .button-shared.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.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.accent {\n background-color: var(--le-color-accent, #2196f3);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-accent, #2196f3);\n }\n .button-shared.accent:hover:not(:disabled) {\n background-color: var(--le-color-accent-hover, #1976d2);\n border-color: var(--le-color-accent-hover, #1976d2);\n }\n */\n\n \n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.15em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .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 }\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 font-size: var(--le-font-size-base, 1em);\n }\n .upcoming-matches-container { /* Renamed for clarity */\n /* display: flex; /* Removed as list is now the primary content */\n /* gap: var(--le-padding-s, 0.5rem); /* Removed */\n }\n .matches-list {\n list-style: none;\n padding: 0;\n margin: 0;\n max-height: 300px; /* Consider making this configurable or dynamic */\n overflow-y: auto;\n }\n .match-item {\n padding: var(--le-padding-s, 0.5rem) 0;\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n }\n .match-item:last-child {\n border-bottom: none;\n }\n .match-date {\n color: var(--le-text-color-secondary, #666);\n font-size: 0.85em;\n margin-bottom: var(--le-padding-xs, 0.2em);\n }\n .match-teams { /* This class was present but not used, can be removed if still unused */\n }\n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n }\n /* CALENDAR STYLES ARE REMOVED FROM HERE */\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 }\n .paging-btn {\n background: var(--lae-background-color-button, #f5f5f5);\n border: 1px solid var(--lae-border-color-dark, #ccc);\n border-radius: var(--lae-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n font-size: 1em;\n cursor: pointer;\n }\n .paging-btn:disabled {\n background: var(--lae-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n cursor: not-allowed;\n }\n .filter-indicator { /* This style is now managed by LeagueCalendar or parent */\n /* Removed */\n }\n .error {\n color: var(--le-text-color-error, #ff0000); /* Using theme variable */\n padding: var(--le-padding-s, 0.5rem);\n background-color: var(--le-background-color-error, #fff0f0); /* Using theme variable */\n border-radius: var(--le-border-radius-standard, 4px);\n }\n \n :host {\n \n /* Mobile-specific styling that can be added to host elements */\n \n /* Increased font sizes for better readability on mobile */\n --le-font-size-base: 1.4em;\n --le-font-size-small: 1.2em;\n --le-font-size-medium: 1.6em;\n --le-font-size-large: 1.8em;\n --le-font-size-xlarge: 2em;\n \n /* Adjust padding for better touch targets */\n --le-padding-s: 0.6rem;\n --le-padding-m: 1rem;\n \n /* Other mobile optimizations */\n font-size: var(--le-font-size-base);\n line-height: 1.4;\n\n }\n .paging-btn {\n padding: 0.2rem 0.7rem;\n }\n "; export const DESKTOP_STYLES: "\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 }\n\n .panel-content-shared {\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 \n .button-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\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 /* Small button variant */\n .button-shared.button-sm {\n padding: var(--le-padding-xs, 0.4rem) var(--le-padding-s, 0.75rem); /* Increased padding */\n font-size: var(--le-font-size-small, 1em); /* Increased small font size */\n /* line-height can be tighter if needed for small buttons */\n /* line-height: 1.2; */\n }\n\n /* Variations - consider if needed, or handle with specific component styles */\n /*\n .button-shared.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.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.accent {\n background-color: var(--le-color-accent, #2196f3);\n color: var(--le-text-color-on-primary, #fff);\n border-color: var(--le-color-accent, #2196f3);\n }\n .button-shared.accent:hover:not(:disabled) {\n background-color: var(--le-color-accent-hover, #1976d2);\n border-color: var(--le-color-accent-hover, #1976d2);\n }\n */\n\n \n .list-item-shared {\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.4em); /* Increased padding */\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n display: flex;\n align-items: center;\n justify-content: space-between; /* Common for items with actions on the right */\n gap: var(--le-padding-s, 0.75em); /* Increased gap */\n }\n\n .list-item-shared:last-child {\n border-bottom: none;\n }\n\n /* Example of a text part within a list item that should grow */\n .list-item-shared .list-item-text-primary {\n flex-grow: 1;\n font-size: var(--le-font-size-medium, 1.15em); /* Added explicit font size */\n /* Potentially add text overflow properties if needed */\n /* white-space: nowrap; */\n /* overflow: hidden; */\n /* text-overflow: ellipsis; */\n }\n\n /* Example of an actions container part within a list item */\n .list-item-shared .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 }\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 font-size: var(--le-font-size-base, 1em);\n }\n .upcoming-matches-container { /* Renamed for clarity */\n /* display: flex; /* Removed as list is now the primary content */\n /* gap: var(--le-padding-s, 0.5rem); /* Removed */\n }\n .matches-list {\n list-style: none;\n padding: 0;\n margin: 0;\n max-height: 300px; /* Consider making this configurable or dynamic */\n overflow-y: auto;\n }\n .match-item {\n padding: var(--le-padding-s, 0.5rem) 0;\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n }\n .match-item:last-child {\n border-bottom: none;\n }\n .match-date {\n color: var(--le-text-color-secondary, #666);\n font-size: 0.85em;\n margin-bottom: var(--le-padding-xs, 0.2em);\n }\n .match-teams { /* This class was present but not used, can be removed if still unused */\n }\n .no-matches {\n padding: var(--le-padding-m, 1rem);\n text-align: center;\n color: var(--le-text-color-secondary, #666);\n }\n /* CALENDAR STYLES ARE REMOVED FROM HERE */\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 }\n .paging-btn {\n background: var(--lae-background-color-button, #f5f5f5);\n border: 1px solid var(--lae-border-color-dark, #ccc);\n border-radius: var(--lae-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.7rem);\n font-size: 1em;\n cursor: pointer;\n }\n .paging-btn:disabled {\n background: var(--lae-background-color-button-disabled, #eee);\n color: var(--le-text-color-secondary, #aaa);\n cursor: not-allowed;\n }\n .filter-indicator { /* This style is now managed by LeagueCalendar or parent */\n /* Removed */\n }\n .error {\n color: var(--le-text-color-error, #ff0000); /* Using theme variable */\n padding: var(--le-padding-s, 0.5rem);\n background-color: var(--le-background-color-error, #fff0f0); /* Using theme variable */\n border-radius: var(--le-border-radius-standard, 4px);\n }\n \n "; export const TEMPLATE: "\n \n <div class=\"upcoming-matches-container\">\n <div class=\"matches-list\" id=\"upcoming-matches-list\">\n {{upcomingFixtures}}\n </div>\n </div>\n <div class=\"paging-controls\" id=\"upcoming-paging\" {{showPaging}}>\n <button class=\"paging-btn button-shared button-sm\" id=\"upcoming-prev\" {{prevDisabled}}>< Prev</button>\n <button class=\"paging-btn button-shared button-sm\" id=\"upcoming-next\" {{nextDisabled}}>Next ></button>\n </div>\n "; //# sourceMappingURL=LeagueMatchesUpcoming-styles.d.ts.map