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

League Elements package for LoveBowls

export const BASE_STYLES: "\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  .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  }\n\n  .modal-shared-content {\n    background-color: var(--le-background-color-panel, #fff);\n    margin: var(--le-modal-margin-top, 10%) auto; /* Default to 10% from top, centered */\n    padding: 0; /* Remove padding, header/body/footer will handle it */\n    border: 1px solid var(--le-border-color-dark, #ccc);\n    width: var(--le-modal-width, 90%); /* Increased width for mobile */\n    max-width: var(--le-modal-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  }\n\n  /* Specific styles for mobile-view class, used by leagueMatch.js */\n  .modal-shared-content.mobile-view {\n    margin: 5% auto; /* Less margin from top on mobile */\n    width: var(--le-modal-width-mobile, 95%); /* Even wider on mobile */\n    max-width: var(--le-modal-max-width-mobile, 650px); /* Increased max-width for mobile */\n  }\n\n  .modal-shared-header {\n    /* Utilizes .panel-header-shared for base styling if desired, or define fully here */\n    /* This example assumes it might be combined with .panel-header-shared or similar */\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: 1.75em; /* 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-s, 0.75em) var(--le-padding-m, 1.25em); /* Increased padding */\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\n      \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-medium, 1.15em); /* Increased font size */\n  }\n\n  .form-input-shared,\n  .form-textarea-shared,\n  .form-select-shared {\n    width: 100%;\n    padding: var(--le-padding-s, 0.75em); /* Increased padding */\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-medium, 1.15em); /* Increased font size */\n    color: var(--le-text-color-primary, #333);\n    background-color: var(--le-background-color-panel, #fff);\n  }\n\n  .form-input-shared:focus,\n  .form-textarea-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    font-size: var(--le-font-size-medium, 1.15em); /* Increased font size */\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      :host {\n        /* Host itself might be the modal-shared-overlay or contain it */\n        /* If host is the overlay: */\n        display: none; /* Controlled by 'open' attribute/property */\n        position: fixed;\n        z-index: var(--le-z-index-modal, 1001); /* Higher than admin modal if stacked */\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        /* Use flex to center the modal-shared-content if the host is the overlay */\n        align-items: center;\n        justify-content: center;\n      }\n      :host([open][is-mobile=\"true\"]) {\n        display: flex;\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      :host([open]) {\n        display: flex; \n      }\n      /* STYLES FOR .dialog-content, .dialog-header, .dialog-body, .dialog-footer REMOVED as they are covered by .modal-shared-* classes */\n      /* GENERAL FORM STYLES for .form-group, label, input, select REMOVED as they are covered by .form-*-shared classes */\n\n      /* Keep styles specific to leagueMatch.js */\n      .score-inputs {\n        display: flex;\n        align-items: center;\n        gap: var(--le-padding-s, 0.5em);\n      }\n      .score-inputs label {\n        /* flex-basis: auto; */ /* If they were form-label-shared they'd be block */\n         margin-bottom: 0; /* Override if needed */\n      }\n      .score-inputs input[type=\"number\"] {\n        width: 80px; /* Increased from 60px to show placeholders better */\n        min-width: 80px; /* Ensure minimum width even on small screens */\n        /* padding: var(--le-padding-xs, 0.25em); Already form-input-shared */\n      }\n      /* Remove spinner buttons from number inputs */\n      .score-inputs input[type=\"number\"]::-webkit-inner-spin-button,\n      .score-inputs input[type=\"number\"]::-webkit-outer-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n      }\n      .score-inputs input[type=\"number\"] {\n        -moz-appearance: textfield; /* Firefox */\n      }\n      /* Right-align the home score input */\n      .score-inputs input[type=\"number\"]:first-of-type {\n        text-align: right;\n      }\n      /* Responsive adjustment for mobile */\n      @media (max-width: 480px) {\n        .modal-shared-content {\n          width: 90% !important; /* Override any fixed width from shared styles */\n          max-width: 90% !important;\n          margin: 10px auto;\n          font-size: 16px !important; /* Base font size increase */\n        }\n        .modal-shared-header {\n          padding: 15px;\n          font-size: 18px !important;\n        }\n        .modal-shared-body {\n          padding: 15px;\n        }\n        .modal-shared-footer {\n          padding: 15px;\n        }\n        .form-label-shared {\n          font-size: 16px !important;\n          margin-bottom: 8px;\n        }\n        .form-input-shared, \n        .form-select-shared {\n          font-size: 16px !important;\n          padding: 10px !important;\n          height: auto !important;\n        }\n        .form-checkbox-label-shared {\n          font-size: 16px !important;\n        }\n        .score-inputs {\n          gap: 10px;\n        }\n        .score-inputs input[type=\"number\"] {\n          width: 90px; /* Wider on mobile for touch targets */\n          min-width: 90px;\n          font-size: 16px !important;\n          padding: 10px !important;\n        }\n        .score-inputs span {\n          font-size: 18px;\n          font-weight: bold;\n        }\n        .button-shared {\n          font-size: 16px !important;\n          padding: 10px 15px !important;\n          min-height: 44px; /* Better touch target */\n          margin: 5px;\n        }\n        #error-message-match-modal {\n          font-size: 14px !important;\n          padding: 10px;\n        }\n        .attention-banner {\n          font-size: 14px !important;\n          padding: 10px;\n        }\n      }\n      \n      /* Also add styles for when mobile-view class is applied regardless of screen size */\n      .modal-shared-content.mobile-view {\n        width: 90% !important; /* Override any fixed width from shared styles */\n        max-width: 90% !important;\n        min-width: 280px !important;\n        margin: 10px auto;\n        font-size: 16px !important; /* Base font size increase */\n        transform: scale(1.05);\n      }\n      .mobile-view .modal-shared-header {\n        padding: 15px;\n        font-size: 20px !important;\n      }\n      .mobile-view .modal-shared-body {\n        padding: 15px;\n      }\n      .mobile-view .modal-shared-footer {\n        padding: 15px;\n      }\n      .mobile-view .form-label-shared {\n        font-size: 16px !important;\n        margin-bottom: 10px;\n      }\n      .mobile-view .form-input-shared, \n      .mobile-view .form-select-shared {\n        font-size: 16px !important;\n        padding: 12px !important;\n        height: auto !important;\n        border-radius: 6px !important;\n      }\n      .mobile-view .form-checkbox-label-shared {\n        font-size: 16px !important;\n        margin: 5px 0;\n      }\n      .mobile-view .score-inputs {\n        gap: 15px;\n        margin-top: 10px;\n      }\n      .mobile-view .score-inputs input[type=\"number\"] {\n        width: 100px; /* Wider on mobile for touch targets */\n        min-width: 100px;\n        font-size: 18px !important;\n        padding: 12px !important;\n        border-radius: 6px !important;\n      }\n      .mobile-view .score-inputs span {\n        font-size: 20px;\n        font-weight: bold;\n      }\n      .mobile-view .button-shared {\n        font-size: 18px !important;\n        padding: 12px 20px !important;\n        min-height: 50px; /* Better touch target */\n        margin: 5px;\n        border-radius: 6px !important;\n      }\n      .mobile-view #error-message-match-modal {\n        font-size: 16px !important;\n        padding: 12px;\n      }\n      .mobile-view .attention-banner {\n        font-size: 16px !important;\n        padding: 12px;\n      }\n      #error-message-match-modal {\n        color: var(--le-text-color-error, #D8000C);\n        background-color: var(--le-background-color-error, #FFD2D2);\n        padding: var(--le-padding-s);\n        border: 1px solid var(--le-border-color-error, #D8000C);\n        border-radius: var(--le-border-radius-standard);\n        margin-bottom: var(--le-padding-m); \n        font-size: var(--le-font-size-small);\n      }\n      .attention-banner {\n        background-color: var(--le-color-status-warning, #f39c12);\n        color: var(--le-text-color-on-primary, #fff);\n        padding: var(--le-padding-s, 0.5em);\n        border-bottom: 1px solid var(--le-border-color-dark, #ccc);\n        text-align: center;\n        font-size: var(--le-font-size-small, 0.85em);\n        border-top-left-radius: var(--le-border-radius-standard);\n        border-top-right-radius: var(--le-border-radius-standard);\n      }\n    ";
//# sourceMappingURL=leagueMatch-styles.d.ts.map