@lovebowls/leagueelements/dist/elements/LeagueMatchesRecent-styles.d.ts

League Elements package for LoveBowls

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      .matches-container {\n        max-height: 300px;\n        overflow-y: auto;\n      }\n      .match-item {\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-details {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .match-teams {\n        flex-grow: 1;\n      }\n      .team-name {\n      }\n      .match-score {\n        font-weight: bold;\n        margin: 0 var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n      }\n      .match-result-indicator {\n        padding: var(--le-padding-xs, 0.1em) var(--le-padding-s, 0.3em);\n        border-radius: var(--le-border-radius-small, 3px);\n        color: var(--le-text-color-on-primary, #fff);\n        font-size: 0.8em;\n        font-weight: bold;\n        margin-left: var(--le-padding-s, 0.5rem);\n      }\n      .result-w {\n        background-color: var(--le-form-color-w, #4CAF50);\n      }\n      .result-d {\n        background-color: var(--le-form-color-d, #FFC107);\n      }\n      .result-l {\n        background-color: var(--le-form-color-l, #F44336);\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      .error {\n        color: var(--le-text-color-error, #ff0000);\n        padding: var(--le-padding-s, 0.5rem);\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      .matches-container {\n        max-height: 300px;\n        overflow-y: auto;\n      }\n      .match-item {\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-details {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .match-teams {\n        flex-grow: 1;\n      }\n      .team-name {\n      }\n      .match-score {\n        font-weight: bold;\n        margin: 0 var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n      }\n      .match-result-indicator {\n        padding: var(--le-padding-xs, 0.1em) var(--le-padding-s, 0.3em);\n        border-radius: var(--le-border-radius-small, 3px);\n        color: var(--le-text-color-on-primary, #fff);\n        font-size: 0.8em;\n        font-weight: bold;\n        margin-left: var(--le-padding-s, 0.5rem);\n      }\n      .result-w {\n        background-color: var(--le-form-color-w, #4CAF50);\n      }\n      .result-d {\n        background-color: var(--le-form-color-d, #FFC107);\n      }\n      .result-l {\n        background-color: var(--le-form-color-l, #F44336);\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      .error {\n        color: var(--le-text-color-error, #ff0000);\n        padding: var(--le-padding-s, 0.5rem);\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      .match-item {\n        font-size: 1em;\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      .matches-container {\n        max-height: 300px;\n        overflow-y: auto;\n      }\n      .match-item {\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-details {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .match-teams {\n        flex-grow: 1;\n      }\n      .team-name {\n      }\n      .match-score {\n        font-weight: bold;\n        margin: 0 var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n      }\n      .match-result-indicator {\n        padding: var(--le-padding-xs, 0.1em) var(--le-padding-s, 0.3em);\n        border-radius: var(--le-border-radius-small, 3px);\n        color: var(--le-text-color-on-primary, #fff);\n        font-size: 0.8em;\n        font-weight: bold;\n        margin-left: var(--le-padding-s, 0.5rem);\n      }\n      .result-w {\n        background-color: var(--le-form-color-w, #4CAF50);\n      }\n      .result-d {\n        background-color: var(--le-form-color-d, #FFC107);\n      }\n      .result-l {\n        background-color: var(--le-form-color-l, #F44336);\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      .error {\n        color: var(--le-text-color-error, #ff0000);\n        padding: var(--le-padding-s, 0.5rem);\n      }\n    \n      :host {\n      }\n      .match-item {\n        font-size: 1em;\n      }\n    ";
export const TEMPLATE: "\n      <div class=\"recent-results\">\n        {{recentResults}}\n      </div>\n      <div class=\"paging-controls\" id=\"recent-paging\" {{showPaging}}>\n        <button class=\"paging-btn button-shared button-sm\" id=\"recent-prev\" {{prevDisabled}}>&lt; Prev</button>\n        <button class=\"paging-btn button-shared button-sm\" id=\"recent-next\" {{nextDisabled}}>Next &gt;</button>\n      </div>\n    ";
//# sourceMappingURL=LeagueMatchesRecent-styles.d.ts.map