UNPKG

@lovebowls/leagueelements

Version:

League Elements package for LoveBowls

14 lines • 35.8 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export function getMobileStyles(fontScale?: number): string; export function getDesktopStyles(fontScale?: number): string; export const dropdownStyles: "\n /* Shared base styles for dropdown select elements */\n .dropdown-select-shared {\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n background-color: var(--le-background-color-panel, #fff);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-small, 3px);\n padding: var(--le-padding-xs, 0.25rem);\n font-size: var(--le-font-size-base, 1em);\n color: var(--le-text-color-primary, #333);\n cursor: pointer;\n line-height: 1.4;\n max-width: 100%;\n width: auto;\n background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n background-position: right 0.5em center;\n background-size: 1em;\n }\n \n .dropdown-select-shared:hover {\n border-color: var(--le-border-color-dark, #ccc);\n }\n \n .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 }\n\n .dropdown-shared {\n position: relative;\n display: inline-block;\n }\n\n /* Shared styles for dropdown menus (button-triggered) */\n .list-item-actions {\n position: relative; /* Ensure actions container can contain absolutely positioned menu */\n }\n \n .dropdown-menu {\n position: fixed; /* Use fixed positioning to escape container boundaries */\n background-color: var(--le-background-color-panel, #fff);\n border: 1px solid var(--le-border-color-medium, #ddd);\n border-radius: var(--le-border-radius-standard, 4px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n min-width: 120px;\n z-index: 9999; /* Much higher z-index to appear above list containers */\n margin-top: 2px; /* Small gap between button and menu */\n }\n \n .dropdown-menu-item {\n padding: var(--le-padding-s, 0.5em) var(--le-padding-m, 0.75em);\n cursor: pointer;\n border-bottom: 1px solid var(--le-border-color-light, #eee);\n transition: background-color 0.2s ease;\n font-size: var(--le-font-size-base, 1em);\n color: var(--le-text-color-primary, #333);\n }\n \n .dropdown-menu-item:last-child {\n border-bottom: none;\n }\n \n .dropdown-menu-item:hover {\n background-color: var(--le-background-color-hover, #f5f5f5);\n }\n \n .dropdown-menu-item:first-child {\n border-top-left-radius: var(--le-border-radius-standard, 4px);\n border-top-right-radius: var(--le-border-radius-standard, 4px);\n }\n \n .dropdown-menu-item:last-child {\n border-bottom-left-radius: var(--le-border-radius-standard, 4px);\n border-bottom-right-radius: var(--le-border-radius-standard, 4px);\n }\n"; export const panelStyles: "\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"; export const buttonStyles: "\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"; export const modalStyles: "\n .modal-shared-overlay {\n display: none; /* Hidden by default */\n position: fixed;\n z-index: var(--le-z-index-modal-overlay, 1000); /* Ensure it's on top */\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n overflow: auto;\n background-color: var(--le-background-color-modal-overlay, rgba(0,0,0,0.4));\n padding-top: 5%;\n padding-bottom: 5%;\n }\n\n .modal-shared-overlay.open {\n display: flex;\n justify-content: center;\n }\n\n .modal-shared-content {\n background-color: var(--le-background-color-panel, #fff);\n margin: 10% auto; /* Default to 10% from top, centered */\n padding: 0;\n border: 1px solid var(--le-border-color-dark, #ccc);\n max-width: 600px;\n border-radius: var(--le-border-radius-large, 8px);\n box-shadow: var(--le-shadow-modal, 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19));\n display: flex;\n flex-direction: column;\n align-self: flex-start;\n }\n\n /* Specific styles for modal mobile-view class */\n .modal-shared-content.mobile-view {\n width: 90%; /* Override any fixed width from shared styles */\n margin: 0; /* Less margin from top on mobile */\n max-width: 90%;\n min-width: 280px !important;\n }\n\n .modal-shared-header {\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); /* Modal header distinct background */\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: var(--le-font-size-large, 1.4em); /* Increased large font size */\n border-top-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-top-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-header .close-button-shared { /* Specific styling for a close button if needed */\n color: var(--le-text-color-secondary, #aaa);\n font-size: var(--le-font-size-xlarge, 1.8em); /* Increased size */\n font-weight: bold;\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .modal-shared-header .close-button-shared:hover,\n .modal-shared-header .close-button-shared:focus {\n color: var(--le-text-color-primary, #000);\n text-decoration: none;\n }\n \n .modal-shared-body {\n padding: var(--le-padding-m, 1.25em); /* Increased padding */\n overflow-y: auto; /* Allow body to scroll if content is too long */\n flex-grow: 1; /* Allows body to take up available space if modal has fixed height */\n }\n\n .modal-shared-footer {\n padding: var(--le-padding-m, 1.25em);\n text-align: right;\n border-top: 1px solid var(--le-border-color-medium, #eee);\n background-color: var(--le-background-color-header, #f9f9f9); /* Optional: footer background */\n border-bottom-left-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n border-bottom-right-radius: var(--le-border-radius-large, 8px); /* Match content radius */\n }\n\n .modal-shared-footer .button-shared + .button-shared { /* Spacing between buttons in footer */\n margin-left: var(--le-padding-s, 0.75em); /* Increased margin */\n }\n"; export const formStyles: "\n .form-group-shared {\n margin-bottom: var(--le-padding-m, 1.25em); /* Increased margin */\n }\n\n .form-label-shared {\n display: block;\n margin-bottom: var(--le-padding-xs, 0.4em); /* Increased margin */\n font-weight: bold;\n color: var(--le-text-color-primary, #333);\n font-size: var(--le-font-size-label, 1em)); /* Use variable with fallback */\n }\n\n .form-input-shared,\n .form-select-shared {\n width: 100%;\n height: auto;\n padding: var(--le-padding-s, 0.75em);\n border: 1px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-standard, 4px);\n box-sizing: border-box;\n font-size: var(--le-font-size-input, 1em)); /* Use variable with fallback */\n color: var(--le-text-color-primary, #333);\n background-color: var(--le-background-color-panel, #fff);\n }\n\n /* Ensure date inputs have consistent styling across browsers */\n .form-input-shared[type=\"date\"] {\n max-width: 100%;\n }\n\n .form-input-shared:focus,\n .form-select-shared:focus {\n border-color: var(--le-border-color-accent, #2196f3);\n outline: none; /* Or a custom focus ring */\n box-shadow: 0 0 0 2px var(--le-focus-ring-color, rgba(33, 150, 243, 0.3));\n }\n \n /* Specific styling for checkbox groups if needed */\n .form-checkbox-label-shared {\n display: flex; /* Changed to flex for better alignment */\n align-items: center;\n font-weight: normal; /* Typically labels for checkboxes are not bold by default */\n color: var(--le-text-color-primary, #333);\n }\n\n .form-checkbox-label-shared input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s, 0.75em); /* Increased margin */\n /* Consider custom styling for checkboxes if desired, or rely on browser defaults */\n /* For consistent appearance across browsers, custom checkbox styling can be complex */\n /* For now, using default with adjusted margin */\n width: auto; /* Override width: 100% from .form-input-shared if a generic class was applied */\n vertical-align: middle; /* Align checkbox with text */\n }\n\n /* Styling for a container of multiple checkboxes or radio buttons */\n .form-options-group-shared {\n /* Styles for a group of checkboxes/radios, e.g., display: flex; flex-direction: column; gap: ... */\n }\n\n /* Styling for individual option within a group */\n .form-option-item-shared {\n /* Styles for each checkbox/radio item within a group */\n }\n\n /* Enhanced checkbox styles for better mobile usability */\n .checkbox-enhanced-shared {\n position: relative;\n display: inline-block;\n cursor: pointer;\n user-select: none;\n margin-right: var(--le-padding-s, 0.75em);\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"] {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n }\n\n .checkbox-enhanced-shared .checkmark-shared {\n position: relative;\n display: inline-block;\n width: 1.5em;\n height: 1.5em;\n background-color: var(--le-background-color-panel, #fff);\n border: 2px solid var(--le-border-color-dark, #ccc);\n border-radius: var(--le-border-radius-small, 3px);\n transition: all 0.2s ease;\n vertical-align: middle;\n margin-right: var(--le-padding-xs, 0.25em);\n }\n\n /* Mobile-specific larger checkboxes */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared {\n width: 2em;\n height: 2em;\n border-width: 2px;\n }\n }\n\n /* Hover state */\n .checkbox-enhanced-shared:hover input[type=\"checkbox\"] ~ .checkmark-shared {\n border-color: var(--le-text-color-accent, #2196f3);\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Focus state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:focus ~ .checkmark-shared {\n border-color: var(--le-text-color-accent, #2196f3);\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);\n }\n\n /* Checked state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared {\n background-color: var(--le-text-color-accent, #2196f3);\n border-color: var(--le-text-color-accent, #2196f3);\n }\n\n /* Checkmark icon */\n .checkbox-enhanced-shared .checkmark-shared:after {\n content: \"\";\n position: absolute;\n display: none;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n width: 0.4em;\n height: 0.8em;\n border: solid var(--le-text-color-on-primary, #fff);\n border-width: 0 0.15em 0.15em 0;\n }\n\n /* Mobile-specific larger checkmark */\n @media (max-width: 768px) {\n .checkbox-enhanced-shared .checkmark-shared:after {\n width: 0.5em;\n height: 1em;\n border-width: 0 0.2em 0.2em 0;\n }\n }\n\n /* Show checkmark when checked */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:checked ~ .checkmark-shared:after {\n display: block;\n }\n\n /* Disabled state */\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared {\n background-color: var(--le-background-color-button-disabled, #eee);\n border-color: var(--le-border-color-medium, #ddd);\n cursor: not-allowed;\n }\n\n .checkbox-enhanced-shared input[type=\"checkbox\"]:disabled ~ .checkmark-shared:after {\n border-color: var(--le-text-color-secondary, #aaa);\n }\n\n /* Legend/checkbox list styles for responsive layouts */\n .checkbox-list-responsive-shared {\n display: grid;\n gap: var(--le-padding-s, 0.75em);\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n }\n\n /* Mobile-specific responsive checkbox list */\n @media (max-width: 768px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: var(--le-padding-m, 1em);\n }\n }\n\n /* Extra small screens - force 2 columns */\n @media (max-width: 480px) {\n .checkbox-list-responsive-shared {\n grid-template-columns: 1fr 1fr;\n gap: var(--le-padding-s, 0.75em);\n }\n }\n\n /* Legend item styling for checkbox lists */\n .legend-item-shared {\n display: flex;\n align-items: center;\n font-size: var(--le-font-size-small, 0.9em);\n padding: var(--le-padding-xs, 0.25em);\n border-radius: var(--le-border-radius-small, 3px);\n transition: background-color 0.2s ease;\n }\n\n .legend-item-shared:hover {\n background-color: var(--le-background-color-row-hover, #f9f9f9);\n }\n\n /* Mobile-specific legend item styling */\n @media (max-width: 768px) {\n .legend-item-shared {\n font-size: var(--le-font-size-medium, 1.2em);\n padding: var(--le-padding-s, 0.75em) var(--le-padding-xs, 0.25em);\n min-height: 3em;\n }\n }\n"; export const listStyles: "\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"; export const sweetAlertMobileOverrides: "\n /* Injected SweetAlert2 Mobile Styles - Production v1 */\n .swal2-popup.swal-popup-mobile {\n width: 90vw !important;\n max-width: 480px !important;\n padding: var(--le-padding-m, 1rem) !important; /* Increased padding for better touch spacing */\n font-size: var(--le-font-size-base, 1.5em) !important; /* Use mobile base font size */\n }\n\n .swal-popup-mobile .swal2-title,\n .swal-title-mobile {\n font-size: var(--le-font-size-large, 1.4em) !important; /* Readable title size for mobile */\n padding: 0.5rem 0.5rem 0.75rem !important; /* Adjusted padding */\n margin-bottom: 0 !important; /* Remove default bottom margin if any, handled by container */\n line-height: 1.3 !important;\n }\n\n .swal-popup-mobile .swal2-html-container,\n .swal-html-container-mobile {\n font-size: var(--le-font-size-small, 1.0em) !important; /* Use shared variable instead of hardcoded rem */\n margin: 0.75rem 0.5rem !important; /* Vertical and horizontal margin */\n line-height: 1.5 !important;\n text-align: center !important;\n }\n\n .swal-popup-mobile .swal2-actions,\n .swal-actions-mobile {\n width: 100% !important;\n margin-top: 1rem !important;\n gap: 0.65rem !important; /* Space between stacked buttons */\n flex-direction: column-reverse !important; /* Stack buttons, confirm on top */\n }\n\n .swal-popup-mobile .swal2-styled,\n .swal-styled-mobile {\n width: 100% !important; /* Full width buttons */\n padding: 0.85rem !important; /* Generous padding for touch targets */\n font-size: var(--le-font-size-medium, 1.2em) !important;\n margin: 0 !important; /* Remove individual margins, gap handles spacing */\n border-radius: 0.3rem !important;\n }\n\n /* Optional: If you want to ensure default button colors are explicitly set or overridden for mobile */\n /* .swal-popup-mobile .swal2-confirm.swal-styled-mobile {\n background-color: #3085d6 !important; /* Example: Default confirm blue */\n /* }\n .swal-popup-mobile .swal2-cancel.swal-styled-mobile {\n background-color: #d33 !important; /* Example: Default cancel red */\n /* } */\n"; export const sweetAlertGlobalStyles: "\n /* SweetAlert2 Global Styles */\n .swal2-popup {\n font-family: var(--le-font-family-base, sans-serif); /* Assuming you have a base font family variable */\n background-color: var(--le-background-color-panel, #fff) !important;\n border-radius: var(--le-border-radius-large, 8px) !important;\n border: 1px solid var(--le-border-color-dark, #ccc) !important;\n color: var(--le-text-color-primary, #333) !important;\n }\n\n .swal2-title {\n color: var(--le-text-color-primary, #333) !important;\n font-size: var(--le-font-size-large, 1.4em) !important; /* Match modal header */\n font-weight: bold !important;\n }\n\n .swal2-html-container {\n color: var(--le-text-color-primary, #333) !important;\n font-size: var(--le-font-size-base, 1em) !important;\n margin: var(--le-padding-m, 1.25em) !important; /* Add some margin */\n }\n\n .swal2-actions {\n margin-top: var(--le-padding-m, 1.25em) !important;\n }\n \n .swal2-styled { /* Base for swal buttons */\n padding: var(--le-padding-s, 0.75em) var(--le-padding-m, 1.25em) !important;\n border-radius: var(--le-border-radius-standard, 4px) !important;\n font-size: var(--le-font-size-medium, 1.15em) !important;\n text-decoration: none !important;\n /* display: inline-block !important; */ /* Removed to allow SweetAlert2 to control visibility */\n text-align: center !important;\n line-height: normal !important;\n white-space: nowrap !important;\n vertical-align: middle !important;\n user-select: none !important;\n transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out !important;\n border: 1px solid transparent !important; /* Start with transparent border, colors will override */\n }\n\n .swal2-styled:focus {\n outline: none !important;\n box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important; /* Example focus, adjust as needed */\n }\n\n .swal2-styled:hover:not(:disabled) {\n /* General hover, specific button types might override */\n filter: brightness(90%);\n }\n\n .swal2-confirm {\n background-color: var(--le-color-confirm, #28a745) !important; /* Define --le-color-confirm or use existing */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-confirm, #28a745) !important;\n }\n .swal2-confirm:hover:not(:disabled) {\n background-color: var(--le-color-confirm-hover, #218838) !important; /* Define --le-color-confirm-hover */\n border-color: var(--le-color-confirm-hover, #218838) !important;\n }\n\n .swal2-cancel {\n background-color: var(--le-color-cancel, #dc3545) !important; /* Define --le-color-cancel or use existing */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-cancel, #dc3545) !important;\n }\n .swal2-cancel:hover:not(:disabled) {\n background-color: var(--le-color-cancel-hover, #c82333) !important; /* Define --le-color-cancel-hover */\n border-color: var(--le-color-cancel-hover, #c82333) !important;\n }\n \n /* If you use a deny button */\n .swal2-deny {\n background-color: var(--le-color-deny, #6c757d) !important; /* Define --le-color-deny */\n color: var(--le-text-color-on-primary, #fff) !important;\n border-color: var(--le-color-deny, #6c757d) !important;\n }\n .swal2-deny:hover:not(:disabled) {\n background-color: var(--le-color-deny-hover, #5a6268) !important; /* Define --le-color-deny-hover */\n border-color: var(--le-color-deny-hover, #5a6268) !important;\n }\n\n /* Icon styling - optional, if you want to color default icons */\n .swal2-icon.swal2-warning {\n color: var(--le-text-color-warning, #ffc107) !important; /* Define --le-text-color-warning */\n border-color: var(--le-text-color-warning, #ffc107) !important;\n }\n .swal2-icon.swal2-error {\n color: var(--le-text-color-error, #dc3545) !important; /* Define --le-text-color-error */\n border-color: var(--le-text-color-error, #dc3545) !important;\n }\n .swal2-icon.swal2-success {\n color: var(--le-text-color-success, #28a745) !important; /* Define --le-text-color-success */\n border-color: var(--le-text-color-success, #28a745) !important;\n }\n .swal2-icon.swal2-info {\n color: var(--le-text-color-info, #17a2b8) !important; /* Define --le-text-color-info */\n border-color: var(--le-text-color-info, #17a2b8) !important;\n }\n"; export const tabStyles: "\n /* Tab System Styles */\n .modal-tabs-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n \n .tab-navigation {\n display: flex;\n border-bottom: 2px solid var(--le-border-color-light);\n margin-bottom: var(--le-padding-m);\n gap: 0;\n }\n\n .tab-button {\n background: var(--le-background-color-button);\n border: 1px solid var(--le-border-color-medium);\n border-bottom: none;\n padding: var(--le-padding-s) var(--le-padding-m);\n cursor: pointer;\n font-weight: 500;\n color: var(--le-text-color-secondary);\n border-radius: var(--le-border-radius-standard) var(--le-border-radius-standard) 0 0;\n position: relative;\n transition: all 0.2s ease;\n min-width: 120px;\n text-align: center;\n user-select: none;\n }\n\n .tab-button:hover {\n background: var(--le-background-color-button-hover);\n color: var(--le-text-color-primary);\n }\n\n .tab-button.active {\n background: var(--le-background-color-panel);\n color: var(--le-text-color-primary);\n font-weight: 600;\n border-bottom: 2px solid var(--le-background-color-panel);\n margin-bottom: -2px;\n z-index: 1;\n }\n\n .tab-button:not(:last-child) {\n border-right: none;\n }\n\n .tab-content-container {\n flex: 1;\n min-height: 300px;\n }\n\n .tab-content {\n display: none;\n animation: fadeIn 0.2s ease-in;\n }\n\n .tab-content.active {\n display: block;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n /* Enhanced fieldset styling for tabs */\n .tab-content fieldset {\n margin-bottom: var(--le-padding-m);\n border: 1px solid var(--le-border-color-medium);\n border-radius: var(--le-border-radius-standard);\n padding: var(--le-padding-m);\n background: var(--le-background-color-header);\n }\n\n .tab-content fieldset legend {\n font-weight: 600;\n color: var(--le-text-color-primary);\n padding: 0 var(--le-padding-s);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content fieldset:last-child {\n margin-bottom: 0;\n }\n\n /* Enhanced form styling within tabs */\n .tab-content .form-group {\n margin-bottom: var(--le-padding-m);\n }\n\n .tab-content .form-group:last-child {\n margin-bottom: 0;\n }\n\n .tab-content .form-group label {\n display: block;\n margin-bottom: var(--le-padding-xs);\n font-weight: 500;\n color: var(--le-text-color-primary);\n font-size: var(--le-font-size-small, 0.8em);\n }\n\n .tab-content .form-group input[type=\"text\"],\n .tab-content .form-group input[type=\"number\"],\n .tab-content .form-group select {\n width: 100%;\n padding: var(--le-padding-s);\n border: 1px solid var(--le-border-color-dark);\n border-radius: var(--le-border-radius-standard);\n box-sizing: border-box;\n font-size: var(--le-font-size-medium);\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n }\n\n .tab-content .form-group input[type=\"text\"]:focus,\n .tab-content .form-group input[type=\"number\"]:focus,\n .tab-content .form-group select:focus {\n outline: none;\n border-color: var(--le-text-color-accent);\n box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);\n }\n\n .tab-content .form-group input[type=\"checkbox\"] {\n margin-right: var(--le-padding-s);\n transform: scale(1.1);\n }\n\n /* Enhanced rink points settings */\n .tab-content .rink-points-settings {\n border: 1px dashed var(--le-border-color-dark);\n padding: var(--le-padding-m);\n margin-top: var(--le-padding-s);\n background-color: var(--le-background-color-header);\n border-radius: var(--le-border-radius-standard);\n transition: opacity 0.3s ease;\n }\n \n .tab-content .rink-points-settings.disabled {\n opacity: 0.6;\n }\n\n /* Responsive adjustments for tabs */\n @media (max-width: 600px) {\n .tab-button {\n padding: var(--le-padding-xs) var(--le-padding-s);\n min-width: 100px;\n font-size: var(--le-font-size-small);\n }\n\n .form-group-grid {\n grid-template-columns: 1fr;\n gap: var(--le-padding-s);\n }\n\n .tab-content fieldset {\n padding: var(--le-padding-s);\n }\n \n }\n"; export const helpBannerStyles: "\n /* Help Banner Styles */\n .help-banner-shared {\n background-color: var(--le-background-color-header, #f8f9fa);\n padding: var(--le-padding-xs, 0.25rem) var(--le-padding-m, 1rem);\n text-align: right;\n font-size: var(--le-font-size-xs, 0.75em);\n border-bottom: 1px solid var(--le-border-color-medium, #eee);\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--le-padding-s, 0.5rem);\n }\n\n .help-banner-shared a {\n color: var(--le-text-color-accent, #2196f3);\n text-decoration: none;\n font-weight: 500;\n }\n\n .help-banner-shared a:hover {\n text-decoration: underline;\n }\n\n .help-banner-shared .separator {\n color: var(--le-text-color-secondary, #666);\n margin: 0 var(--le-padding-xs, 0.25rem);\n }\n"; export const pagingStyles: "\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"; //# sourceMappingURL=shared-styles.d.ts.map