/** * 3D action button animation – single source of truth for production. * Matches TEBOX_DESIGN_SYSTEM.html "Brutalist Offset Outline" spec exactly. * Imported by IOSButton and both app entry points so it is never dropped from the bundle. * Do not add @tailwind; this file is not processed by Tailwind. * * This file loads LAST (via in index.html) so it overrides Flowbite/Tailwind. */ /* ===== TEBOX_DESIGN_SYSTEM.html – Form Fields: visible borders in ALL states ===== */ /* Native inputs: border 1px solid #D1D5DB (border-light) per TEBOX_DESIGN_SYSTEM, 2px solid #9ACC25 on focus */ input:not(.MuiInputBase-input):not(.tebox-search-input), textarea:not(.MuiInputBase-inputMultiline), select { border: 1px solid #D1D5DB !important; border-radius: 0 !important; box-shadow: none !important; } input:focus:not(.MuiInputBase-input):not(.tebox-search-input), input:focus-visible:not(.MuiInputBase-input):not(.tebox-search-input), textarea:focus:not(.MuiInputBase-inputMultiline), textarea:focus-visible:not(.MuiInputBase-inputMultiline), select:focus, select:focus-visible { border: 2px solid #9ACC25 !important; /* Primary Darker – focus highlight */ box-shadow: none !important; } /* All search bars: no focus outline (container provides the border) */ input.tebox-search-input, input.tebox-search-input:focus, input.tebox-search-input:focus-visible { border: none !important; outline: none !important; box-shadow: none !important; } /* MUI TextField search: no focus border */ .tebox-search-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline, .tebox-search-field .MuiOutlinedInput-root:focus .MuiOutlinedInput-notchedOutline { border: 1px solid #D1D5DB !important; } /* MUI OutlinedInput: .MuiOutlinedInput-notchedOutline IS the fieldset (the border element) */ .MuiOutlinedInput-notchedOutline { border: 1px solid #D1D5DB !important; border-radius: 0 !important; } /* CRITICAL: Input and container must share box-sizing or they misalign. MUI InputBase uses content-box on input by default; root uses border-box. */ .MuiOutlinedInput-root, .MuiOutlinedInput-root .MuiInputBase-input { box-sizing: border-box !important; } /* SINGLE SOURCE OF TRUTH: Form field height. MUI theme/component overrides are fragmented; this rule wins and ensures MUI TextField/Select matches SimpleDatePicker and other inputs. Exclude multiline – textareas need height: auto to grow with content. */ .MuiOutlinedInput-root:not(.MuiInputBase-multiline) { height: 32px !important; min-height: 32px !important; } /* MUI Select: the displayed value div must match OutlinedInput height */ .MuiSelect-select { height: 32px !important; min-height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline, .MuiOutlinedInput-root:focus .MuiOutlinedInput-notchedOutline { border: 2px solid #9ACC25 !important; /* Primary Darker – focus highlight */ } /* ===== Kill input focus rings only (Flowbite blue/yellow) – preserve borders ===== */ /* Only remove outline and Tailwind ring – do NOT touch box-shadow or border. */ input:focus, input:focus-visible, input:focus-within, textarea:focus, textarea:focus-visible, textarea:focus-within, select:focus, select:focus-visible, select:focus-within, [type="text"]:focus, [type="email"]:focus, [type="password"]:focus, [type="number"]:focus, [type="tel"]:focus, [type="url"]:focus, [type="search"]:focus, [type="date"]:focus, [type="time"]:focus, [type="datetime-local"]:focus { outline: none !important; outline-width: 0 !important; outline-offset: 0 !important; --tw-ring-color: transparent !important; --tw-ring-width: 0 !important; --tw-ring-offset-width: 0 !important; --tw-ring-opacity: 0 !important; --tw-ring-shadow: none !important; --tw-ring-offset-shadow: none !important; } /* Ensure focus does not wipe the button's 3D box-shadow (override global *:focus) */ .tebox-action-button:focus, .tebox-action-button:focus-visible { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; outline-offset: 0 !important; } /* Base: per TEBOX_DESIGN_SYSTEM.html – brutalist button, prevent layout shift */ .tebox-action-button { position: relative; overflow: visible; border: 1px solid transparent; transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, opacity 200ms ease; transform: translateZ(0); } /* Variant base colors – HARDCODED so they always work (no CSS variable dependency in prod) */ .tebox-primary-button:not(:disabled) { background-color: #C0FF2E !important; color: #000000 !important; } .tebox-secondary-button:not(:disabled):not(.tebox-secondary-button--danger) { background-color: #F3F4F6 !important; color: #000000 !important; } .tebox-secondary-button--danger:not(:disabled) { background-color: #F3F4F6 !important; color: #000000 !important; } /* Active/press: per spec – flatten, no shadow */ .tebox-action-button:active:not(:disabled), .tebox-action-button--active:not(:disabled) { transform: translate(0, 0) translateZ(0) !important; box-shadow: none !important; border-color: #000000 !important; } /* Touch feedback */ .tebox-action-button--touch:not(:disabled) { transform: scale(0.98) !important; transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Hover: per TEBOX_DESIGN_SYSTEM.html – translate(4px, -4px) top-right, ghost outline. */ .tebox-action-button:hover:not(:disabled) { border-color: #000000 !important; transform: translate(4px, -4px) translateZ(0) !important; will-change: transform; box-shadow: 0 0 0 1px #000000, -4px 4px 0 0 #FFFFFF, -4px 4px 0 1px #000000 !important; } .tebox-primary-button:hover:not(:disabled) { background-color: #ADE629 !important; } .tebox-secondary-button:hover:not(:disabled):not(.tebox-secondary-button--danger) { background-color: #F3F4F6 !important; border-color: #D1D5DB !important; } /* Nuclear override: must come last. Wins over Flowbite, Tailwind, *:focus-within, etc. */ html body button.tebox-action-button:hover:not(:disabled), html body button.tebox-action-button:focus:hover:not(:disabled), html body button.tebox-action-button:focus-visible:hover:not(:disabled) { transform: translate(4px, -4px) translateZ(0) !important; box-shadow: 0 0 0 1px #000000, -4px 4px 0 0 #FFFFFF, -4px 4px 0 1px #000000 !important; -webkit-box-shadow: 0 0 0 1px #000000, -4px 4px 0 0 #FFFFFF, -4px 4px 0 1px #000000 !important; } /* ===== Reservation modal player cards: no button animations, no input focus highlight ===== */ /* Add Guest button: FAFAFA background instead of primary green */ .player-cards-container .tebox-primary-button:not(:disabled) { background-color: #FAFAFA !important; color: #000000 !important; } .player-cards-container .tebox-primary-button:hover:not(:disabled) { background-color: #F3F4F6 !important; } .player-cards-container .tebox-action-button:hover:not(:disabled), .player-cards-container .tebox-action-button:focus:hover:not(:disabled), .player-cards-container .tebox-action-button:focus-visible:hover:not(:disabled), .player-cards-container .tebox-action-button:active:not(:disabled), .player-cards-container .tebox-action-button--active:not(:disabled) { transform: translate(0, 0) translateZ(0) !important; box-shadow: none !important; -webkit-box-shadow: none !important; border-color: transparent !important; } /* Remove focus highlight (green/yellow border) from SearchBar input in player cards */ html body .player-cards-container input, html body .player-cards-container input:focus, html body .player-cards-container input:focus-visible, html body .player-cards-container input:focus-within { border: none !important; box-shadow: none !important; outline: none !important; } /* Remove browser autofill yellow background in player cards */ html body .player-cards-container input:-webkit-autofill, html body .player-cards-container input:-webkit-autofill:hover, html body .player-cards-container input:-webkit-autofill:focus, html body .player-cards-container input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px rgba(250, 250, 250, 1) inset !important; box-shadow: 0 0 0 30px rgba(250, 250, 250, 1) inset !important; } /* Notes input: remove inner border – container provides the border */ html body .reservation-notes-input input, html body .reservation-notes-input input:focus, html body .reservation-notes-input input:focus-visible, html body .reservation-notes-input input:focus-within { border: none !important; box-shadow: none !important; }