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

League Elements package for LoveBowls

export const BASE_STYLES: "\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      .panel-header { /* Copied from LeagueMatchesUpcoming for consistency */\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n        font-size: 1.1rem; /* Default size, can be overridden by mobile/desktop */\n      }\n      .calendar-container {\n        padding: var(--le-padding-s, 0.5rem);\n        border: 1px solid var(--le-border-color-medium, #ddd);\n        border-radius: var(--le-border-radius-standard, 4px);\n        background-color: var(--le-background-color-panel, #fff);\n      }\n      .calendar-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-weight: bold;\n        font-size: 1.1em;\n      }\n      .calendar-nav {\n        cursor: pointer;\n        padding: var(--le-padding-xs, 0.25rem) var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-accent, #2196f3);\n        user-select: none; /* Prevents text selection on rapid clicks */\n      }\n      .calendar-nav:hover {\n        color: var(--le-text-color-accent-hover, #1976d2);\n      }\n      .calendar-grid {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: var(--le-padding-xs, 2px);\n        text-align: center;\n      }\n      .calendar-grid > div { /* Applies to headers and days */\n        padding: var(--le-padding-s, 0.5rem) var(--le-padding-xs, 0.25rem);\n        font-size: 0.9em;\n        border-radius: var(--le-border-radius-small, 2px);\n      }\n      .calendar-day-header { /* Specifically for Su, Mo, Tu... */\n        font-weight: bold;\n        color: var(--le-text-color-secondary, #666);\n      }\n      .calendar-day {\n        cursor: pointer;\n        transition: background-color 0.2s, border-color 0.2s;\n        position: relative; /* For tooltip positioning */\n      }\n      .calendar-day:hover {\n        background-color: var(--le-border-color-light, #f0f0f0);\n      }\n      .calendar-day.other-month {\n        color: var(--le-text-color-secondary, #ccc); /* Using secondary for better visibility than light gray */\n        cursor: default;\n      }\n      .calendar-day.today {\n        /* Using a distinct style for today that's not just background, e.g., a border or font weight */\n        border: 1px solid var(--le-text-color-accent, #2196f3);\n        font-weight: bold;\n      }\n      .calendar-day.has-fixture {\n        background-color: var(--le-color-status-warning, #ffc107); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n        /* Consider color for text on this background if needed */\n      }\n      .calendar-day.has-result {\n        background-color: var(--le-color-status-success, #c8e6c9); /* Using theme variable for success */\n        border: 1px solid var(--le-form-color-w, #388e3c); /* Assuming form-w is a green success */\n      }\n      .calendar-day.has-fixture.has-result {\n        background: linear-gradient(135deg, var(--le-color-status-success, #c8e6c9) 50%, var(--le-color-status-warning, #ffc107) 50%); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n      }\n      .calendar-day.selected {\n        background-color: var(--le-text-color-accent, #2196f3) !important;\n        color: var(--le-text-color-on-accent, #fff) !important;\n        font-weight: bold;\n      }\n      .calendar-tooltip {\n        position: absolute;\n        background-color: var(--le-background-color-tooltip, #333);\n        color: var(--le-text-color-on-primary, white); /* Assuming on-primary is suitable for tooltip text */\n        padding: var(--le-padding-s, 0.5rem);\n        border-radius: var(--le-border-radius-standard, 4px);\n        font-size: var(--le-font-size-small, 0.85em);\n        white-space: pre-wrap; /* Allows line breaks from \n */\n        z-index: 100;\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity 0.2s, visibility 0.2s;\n        bottom: calc(100% + 5px); /* Position above the day cell */\n        left: 50%;\n        transform: translateX(-50%);\n        min-width: 150px; /* Minimum width for better readability */\n        text-align: left; /* Align text to the left within the tooltip */\n      }\n      .calendar-day:hover .calendar-tooltip {\n        visibility: visible;\n        opacity: 1;\n      }\n      .calendar-filter-controls {\n        margin-top: var(--le-padding-s, 0.5rem);\n        display: flex;\n        gap: var(--le-padding-s, 0.5rem);\n      }\n      /* Using shared button styles will be better, but for now, specific styles */\n      .calendar-filter-controls button {\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        font-size: 0.9em;\n        cursor: pointer;\n        color: var(--le-text-color-button, var(--le-text-color-primary));\n      }\n      .calendar-filter-controls button:hover {\n        border-color: var(--le-border-color-accent, #2196f3);\n        background-color: var(--le-background-color-button-hover, #e9e9e9);\n      }\n      .calendar-filter-controls button.active {\n        background-color: var(--le-text-color-accent, #2196f3);\n        color: var(--le-text-color-on-accent, #fff);\n        border-color: var(--le-text-color-accent-hover, #1976d2);\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(--le-border-radius-standard, 4px);\n        margin-top: var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator {\n        background-color: var(--le-background-color-info-light, #e3f2fd); /* A light blue */\n        border-left: 3px solid var(--le-text-color-accent, #2196f3);\n        padding: var(--le-padding-s, 0.3rem) var(--le-padding-m, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-size: var(--le-font-size-small, 0.9em);\n        color: var(--le-text-color-accent-hover, #1976d2);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .filter-indicator button {\n        background: transparent;\n        border: none;\n        color: var(--le-text-color-accent, #2196f3);\n        cursor: pointer;\n        font-size: 0.9em;\n        padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator button:hover {\n        text-decoration: underline;\n      }\n    ";
export const MOBILE_STYLES: "\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      .panel-header { /* Copied from LeagueMatchesUpcoming for consistency */\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n        font-size: 1.1rem; /* Default size, can be overridden by mobile/desktop */\n      }\n      .calendar-container {\n        padding: var(--le-padding-s, 0.5rem);\n        border: 1px solid var(--le-border-color-medium, #ddd);\n        border-radius: var(--le-border-radius-standard, 4px);\n        background-color: var(--le-background-color-panel, #fff);\n      }\n      .calendar-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-weight: bold;\n        font-size: 1.1em;\n      }\n      .calendar-nav {\n        cursor: pointer;\n        padding: var(--le-padding-xs, 0.25rem) var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-accent, #2196f3);\n        user-select: none; /* Prevents text selection on rapid clicks */\n      }\n      .calendar-nav:hover {\n        color: var(--le-text-color-accent-hover, #1976d2);\n      }\n      .calendar-grid {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: var(--le-padding-xs, 2px);\n        text-align: center;\n      }\n      .calendar-grid > div { /* Applies to headers and days */\n        padding: var(--le-padding-s, 0.5rem) var(--le-padding-xs, 0.25rem);\n        font-size: 0.9em;\n        border-radius: var(--le-border-radius-small, 2px);\n      }\n      .calendar-day-header { /* Specifically for Su, Mo, Tu... */\n        font-weight: bold;\n        color: var(--le-text-color-secondary, #666);\n      }\n      .calendar-day {\n        cursor: pointer;\n        transition: background-color 0.2s, border-color 0.2s;\n        position: relative; /* For tooltip positioning */\n      }\n      .calendar-day:hover {\n        background-color: var(--le-border-color-light, #f0f0f0);\n      }\n      .calendar-day.other-month {\n        color: var(--le-text-color-secondary, #ccc); /* Using secondary for better visibility than light gray */\n        cursor: default;\n      }\n      .calendar-day.today {\n        /* Using a distinct style for today that's not just background, e.g., a border or font weight */\n        border: 1px solid var(--le-text-color-accent, #2196f3);\n        font-weight: bold;\n      }\n      .calendar-day.has-fixture {\n        background-color: var(--le-color-status-warning, #ffc107); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n        /* Consider color for text on this background if needed */\n      }\n      .calendar-day.has-result {\n        background-color: var(--le-color-status-success, #c8e6c9); /* Using theme variable for success */\n        border: 1px solid var(--le-form-color-w, #388e3c); /* Assuming form-w is a green success */\n      }\n      .calendar-day.has-fixture.has-result {\n        background: linear-gradient(135deg, var(--le-color-status-success, #c8e6c9) 50%, var(--le-color-status-warning, #ffc107) 50%); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n      }\n      .calendar-day.selected {\n        background-color: var(--le-text-color-accent, #2196f3) !important;\n        color: var(--le-text-color-on-accent, #fff) !important;\n        font-weight: bold;\n      }\n      .calendar-tooltip {\n        position: absolute;\n        background-color: var(--le-background-color-tooltip, #333);\n        color: var(--le-text-color-on-primary, white); /* Assuming on-primary is suitable for tooltip text */\n        padding: var(--le-padding-s, 0.5rem);\n        border-radius: var(--le-border-radius-standard, 4px);\n        font-size: var(--le-font-size-small, 0.85em);\n        white-space: pre-wrap; /* Allows line breaks from \n */\n        z-index: 100;\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity 0.2s, visibility 0.2s;\n        bottom: calc(100% + 5px); /* Position above the day cell */\n        left: 50%;\n        transform: translateX(-50%);\n        min-width: 150px; /* Minimum width for better readability */\n        text-align: left; /* Align text to the left within the tooltip */\n      }\n      .calendar-day:hover .calendar-tooltip {\n        visibility: visible;\n        opacity: 1;\n      }\n      .calendar-filter-controls {\n        margin-top: var(--le-padding-s, 0.5rem);\n        display: flex;\n        gap: var(--le-padding-s, 0.5rem);\n      }\n      /* Using shared button styles will be better, but for now, specific styles */\n      .calendar-filter-controls button {\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        font-size: 0.9em;\n        cursor: pointer;\n        color: var(--le-text-color-button, var(--le-text-color-primary));\n      }\n      .calendar-filter-controls button:hover {\n        border-color: var(--le-border-color-accent, #2196f3);\n        background-color: var(--le-background-color-button-hover, #e9e9e9);\n      }\n      .calendar-filter-controls button.active {\n        background-color: var(--le-text-color-accent, #2196f3);\n        color: var(--le-text-color-on-accent, #fff);\n        border-color: var(--le-text-color-accent-hover, #1976d2);\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(--le-border-radius-standard, 4px);\n        margin-top: var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator {\n        background-color: var(--le-background-color-info-light, #e3f2fd); /* A light blue */\n        border-left: 3px solid var(--le-text-color-accent, #2196f3);\n        padding: var(--le-padding-s, 0.3rem) var(--le-padding-m, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-size: var(--le-font-size-small, 0.9em);\n        color: var(--le-text-color-accent-hover, #1976d2);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .filter-indicator button {\n        background: transparent;\n        border: none;\n        color: var(--le-text-color-accent, #2196f3);\n        cursor: pointer;\n        font-size: 0.9em;\n        padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator button:hover {\n        text-decoration: underline;\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      .panel-header {\n        font-size: var(--le-font-size-medium, 1em); /* Adjusted for mobile context */\n      }\n      .calendar-grid > div { /* For day numbers and headers */\n        padding: var(--le-padding-s, 0.4rem) var(--le-padding-xs, 0.2rem); /* Slightly less padding */\n        font-size: var(--le-font-size-small, 0.85em);\n      }\n      .calendar-header {\n        font-size: var(--le-font-size-medium, 1em);\n      }\n    ";
export const DESKTOP_STYLES: "\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      .panel-header { /* Copied from LeagueMatchesUpcoming for consistency */\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-primary, #333);\n        font-size: 1.1rem; /* Default size, can be overridden by mobile/desktop */\n      }\n      .calendar-container {\n        padding: var(--le-padding-s, 0.5rem);\n        border: 1px solid var(--le-border-color-medium, #ddd);\n        border-radius: var(--le-border-radius-standard, 4px);\n        background-color: var(--le-background-color-panel, #fff);\n      }\n      .calendar-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-weight: bold;\n        font-size: 1.1em;\n      }\n      .calendar-nav {\n        cursor: pointer;\n        padding: var(--le-padding-xs, 0.25rem) var(--le-padding-s, 0.5rem);\n        color: var(--le-text-color-accent, #2196f3);\n        user-select: none; /* Prevents text selection on rapid clicks */\n      }\n      .calendar-nav:hover {\n        color: var(--le-text-color-accent-hover, #1976d2);\n      }\n      .calendar-grid {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: var(--le-padding-xs, 2px);\n        text-align: center;\n      }\n      .calendar-grid > div { /* Applies to headers and days */\n        padding: var(--le-padding-s, 0.5rem) var(--le-padding-xs, 0.25rem);\n        font-size: 0.9em;\n        border-radius: var(--le-border-radius-small, 2px);\n      }\n      .calendar-day-header { /* Specifically for Su, Mo, Tu... */\n        font-weight: bold;\n        color: var(--le-text-color-secondary, #666);\n      }\n      .calendar-day {\n        cursor: pointer;\n        transition: background-color 0.2s, border-color 0.2s;\n        position: relative; /* For tooltip positioning */\n      }\n      .calendar-day:hover {\n        background-color: var(--le-border-color-light, #f0f0f0);\n      }\n      .calendar-day.other-month {\n        color: var(--le-text-color-secondary, #ccc); /* Using secondary for better visibility than light gray */\n        cursor: default;\n      }\n      .calendar-day.today {\n        /* Using a distinct style for today that's not just background, e.g., a border or font weight */\n        border: 1px solid var(--le-text-color-accent, #2196f3);\n        font-weight: bold;\n      }\n      .calendar-day.has-fixture {\n        background-color: var(--le-color-status-warning, #ffc107); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n        /* Consider color for text on this background if needed */\n      }\n      .calendar-day.has-result {\n        background-color: var(--le-color-status-success, #c8e6c9); /* Using theme variable for success */\n        border: 1px solid var(--le-form-color-w, #388e3c); /* Assuming form-w is a green success */\n      }\n      .calendar-day.has-fixture.has-result {\n        background: linear-gradient(135deg, var(--le-color-status-success, #c8e6c9) 50%, var(--le-color-status-warning, #ffc107) 50%); /* Changed from info blue to warning amber */\n        border: 1px solid var(--le-color-status-warning-dark, #ff8f00); /* Changed border to darker amber */\n      }\n      .calendar-day.selected {\n        background-color: var(--le-text-color-accent, #2196f3) !important;\n        color: var(--le-text-color-on-accent, #fff) !important;\n        font-weight: bold;\n      }\n      .calendar-tooltip {\n        position: absolute;\n        background-color: var(--le-background-color-tooltip, #333);\n        color: var(--le-text-color-on-primary, white); /* Assuming on-primary is suitable for tooltip text */\n        padding: var(--le-padding-s, 0.5rem);\n        border-radius: var(--le-border-radius-standard, 4px);\n        font-size: var(--le-font-size-small, 0.85em);\n        white-space: pre-wrap; /* Allows line breaks from \n */\n        z-index: 100;\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity 0.2s, visibility 0.2s;\n        bottom: calc(100% + 5px); /* Position above the day cell */\n        left: 50%;\n        transform: translateX(-50%);\n        min-width: 150px; /* Minimum width for better readability */\n        text-align: left; /* Align text to the left within the tooltip */\n      }\n      .calendar-day:hover .calendar-tooltip {\n        visibility: visible;\n        opacity: 1;\n      }\n      .calendar-filter-controls {\n        margin-top: var(--le-padding-s, 0.5rem);\n        display: flex;\n        gap: var(--le-padding-s, 0.5rem);\n      }\n      /* Using shared button styles will be better, but for now, specific styles */\n      .calendar-filter-controls button {\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        font-size: 0.9em;\n        cursor: pointer;\n        color: var(--le-text-color-button, var(--le-text-color-primary));\n      }\n      .calendar-filter-controls button:hover {\n        border-color: var(--le-border-color-accent, #2196f3);\n        background-color: var(--le-background-color-button-hover, #e9e9e9);\n      }\n      .calendar-filter-controls button.active {\n        background-color: var(--le-text-color-accent, #2196f3);\n        color: var(--le-text-color-on-accent, #fff);\n        border-color: var(--le-text-color-accent-hover, #1976d2);\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(--le-border-radius-standard, 4px);\n        margin-top: var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator {\n        background-color: var(--le-background-color-info-light, #e3f2fd); /* A light blue */\n        border-left: 3px solid var(--le-text-color-accent, #2196f3);\n        padding: var(--le-padding-s, 0.3rem) var(--le-padding-m, 0.5rem);\n        margin-bottom: var(--le-padding-s, 0.5rem);\n        font-size: var(--le-font-size-small, 0.9em);\n        color: var(--le-text-color-accent-hover, #1976d2);\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n      }\n      .filter-indicator button {\n        background: transparent;\n        border: none;\n        color: var(--le-text-color-accent, #2196f3);\n        cursor: pointer;\n        font-size: 0.9em;\n        padding: var(--le-padding-xs, 0.2rem) var(--le-padding-s, 0.5rem);\n      }\n      .filter-indicator button:hover {\n        text-decoration: underline;\n      }\n    \n      .panel-header {\n        font-size: var(--le-font-size-large, 1.1rem); /* Adjusted for desktop panel header */\n      }\n    ";
export const TEMPLATE: "\n      <div class=\"calendar-container\">\n        <div id=\"calendar-content\">\n          <!-- Calendar HTML will be injected here by _renderCalendarHTML() -->\n        </div>\n        <div class=\"calendar-filter-controls\" id=\"calendar-filter-buttons\">\n          <!-- Filter buttons HTML will be injected here by _renderCalendarFilterHTML() -->\n        </div>\n      </div>\n      <div id=\"filter-indicator-container\"></div>\n      <div id=\"error-container\"></div>\n    ";
//# sourceMappingURL=LeagueCalendar-styles.d.ts.map