267 lines
8 KiB
CSS
267 lines
8 KiB
CSS
/* Basic styling for the board */
|
|
.centered h1 {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#board-header {
|
|
/* Background color/opacity set by JS */
|
|
}
|
|
|
|
html,
|
|
body {
|
|
min-height: 100vh;
|
|
/* background: linear-gradient(135deg, #ff7e5f, #feb47b); */ /* Modern gradient background */
|
|
}
|
|
|
|
.bingo-board {
|
|
display: grid;
|
|
gap: 4px; /* Adjust gap as needed */
|
|
position: relative; /* Ensure it establishes a stacking context */
|
|
z-index: 1; /* Place above the container's ::before pseudo-element */
|
|
}
|
|
.centered {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
#bean {
|
|
width: 60px;
|
|
height: 60px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
#bean:hover {
|
|
transform: scale(1.1); /* Slightly enlarge the bean on hover */
|
|
}
|
|
.bingo-cell {
|
|
/* border-width: 1px; */ /* REMOVED - Handled by JS */
|
|
border-style: solid; /* Keep border style */
|
|
/* border-color will be set by JS */
|
|
/* background-color or background-image will be set by JS */
|
|
text-align: center; /* Keep for potential fallback/spacing */
|
|
padding: 8px; /* Keep padding on the main cell */
|
|
/* REMOVED text styling from here */
|
|
/* word-wrap: break-word; */
|
|
/* overflow-wrap: break-word; */
|
|
/* hyphens: auto; */
|
|
/* font-size: 1.5rem; */
|
|
transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out, filter 0.15s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 8px;
|
|
position: relative; /* Ensure stacking context for z-index */
|
|
overflow: hidden; /* Hide potential image overflow */
|
|
user-select: none;
|
|
}
|
|
|
|
/* NEW: Pseudo-element for background image layer */
|
|
.bingo-cell::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: var(--bg-image-url, none);
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
z-index: 1; /* Place ABOVE the text content */
|
|
opacity: var(--bg-image-opacity, 1); /* NEW: Use variable for opacity */
|
|
/* Inherit border radius if needed */
|
|
/* border-radius: inherit; */
|
|
}
|
|
|
|
/* NEW: Styles for the text span inside the cell */
|
|
.bingo-cell-text {
|
|
display: inline-block; /* Or block, depending on desired wrapping */
|
|
word-wrap: normal;
|
|
overflow-wrap: normal;
|
|
hyphens: none;
|
|
font-size: 1.5rem; /* Moved font size here */
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
color: var(--cell-text-color, #000);
|
|
text-shadow: var(--cell-text-outline, none);
|
|
position: relative; /* Needed for z-index */
|
|
z-index: 0; /* Place BELOW the pseudo-element */
|
|
/* Remove background to allow parent background to show */
|
|
background: transparent;
|
|
/* Max width to help with wrapping within padding */
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* NEW: Style for highlighted search results */
|
|
.bingo-cell.highlighted {
|
|
border-color: #3b82f6; /* Tailwind blue-500 */
|
|
border-width: 3px; /* Reverted from 4px */
|
|
transform: scale(1.05); /* Reverted from 1.07 */
|
|
box-shadow: 0 0 30px rgb(0, 0, 0); /* Increased opacity from 0.6 (Kept) */
|
|
z-index: 10; /* Ensure highlighted cells are visually on top if overlapping happens during scale */
|
|
}
|
|
|
|
/* Add darken filter on hover */
|
|
.bingo-cell:hover {
|
|
filter: brightness(85%);
|
|
}
|
|
|
|
/* Style for when a cell is actively being clicked */
|
|
.bingo-cell:active {
|
|
transform: scale(0.95); /* Scale down slightly */
|
|
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Add subtle inset shadow */
|
|
background-color: #e0e0d1; /* Slightly darker beige */
|
|
}
|
|
|
|
/* Style for permanently marked cells */
|
|
.bingo-cell.marked {
|
|
/* background-color: #fde047; */ /* REMOVED - Handled by JS */
|
|
/* Optional: Add other persistent styles like a stronger border */
|
|
/* border-color: #ca8a04; */ /* Tailwind yellow-600 */
|
|
/* Styles like background-image, background-size, background-position, background-repeat, and opacity will be added by JS */
|
|
}
|
|
|
|
/* Style for when a MARKED cell is actively being clicked */
|
|
.bingo-cell.marked:active {
|
|
transform: scale(0.95); /* Keep the same transform */
|
|
box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Keep the same shadow */
|
|
background-color: #facc15; /* Slightly darker yellow (Tailwind yellow-400) */
|
|
}
|
|
|
|
.config-pane {
|
|
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
|
|
max-height: 500px; /* Adjust as needed */
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
}
|
|
.config-pane.minimized {
|
|
max-height: 0;
|
|
opacity: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Configuration Pane Styling */
|
|
.config-pane-closed {
|
|
transform: translateX(100%); /* Hide off-screen to the right */
|
|
}
|
|
|
|
.config-pane-open {
|
|
transform: translateX(0); /* Slide in from the right */
|
|
}
|
|
|
|
/* Ensure transition is applied (already added in HTML via Tailwind classes) */
|
|
/* #config-pane {
|
|
transition: transform 0.3s ease-in-out;
|
|
} */
|
|
|
|
/* Basic styling for the board */
|
|
#bingo-board-container {
|
|
/* Background color/image/opacity set by JS */
|
|
position: relative; /* Needed for pseudo-element positioning */
|
|
}
|
|
|
|
/* NEW: Pseudo-element for board background image */
|
|
#bingo-board-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-image: var(--board-bg-image-url, none);
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
opacity: var(--board-bg-image-opacity, 1);
|
|
z-index: 0; /* Default layer, behind explicit z-index on board */
|
|
border-radius: inherit; /* Inherit border radius from container */
|
|
}
|
|
|
|
/* Styling for config pane sections */
|
|
.config-section {
|
|
border-bottom: 1px solid #e5e7eb; /* Tailwind gray-200 */
|
|
padding-bottom: 0.75rem; /* pb-3 */
|
|
margin-bottom: 0.75rem; /* mb-3 */
|
|
}
|
|
|
|
.config-section:last-of-type {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.config-summary {
|
|
cursor: pointer;
|
|
font-weight: 600; /* semibold */
|
|
color: #1f2937; /* gray-800 */
|
|
padding: 0.5rem 0; /* py-2 */
|
|
list-style: none; /* Remove default marker */
|
|
position: relative;
|
|
padding-left: 1.5rem; /* Make space for custom marker */
|
|
}
|
|
|
|
/* Custom arrow marker */
|
|
.config-summary::before {
|
|
content: '';
|
|
border-width: 0 2px 2px 0;
|
|
border-style: solid;
|
|
border-color: #6b7280; /* gray-500 */
|
|
display: inline-block;
|
|
padding: 3px;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
left: 0.25rem;
|
|
top: 0.85rem; /* Adjust vertical alignment */
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Rotate arrow when section is open */
|
|
details[open] > .config-summary::before {
|
|
transform: rotate(-135deg);
|
|
top: 1rem; /* Adjust vertical alignment for open state */
|
|
}
|
|
|
|
/* Hide default <details> marker */
|
|
.config-summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.config-content {
|
|
padding-left: 1.5rem; /* Indent content */
|
|
}
|
|
|
|
/* --- Animation for winning cells --- */
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(0, 255, 110, 0.7); /* Emerald-400 */
|
|
}
|
|
70% {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 0 10px 10px rgba(0, 255, 110, 0.5); /* Emerald-400 transparent */
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 rgba(0, 255, 110, 0.2);
|
|
}
|
|
}
|
|
|
|
/* --- Style for winning cells --- */
|
|
.bingo-cell.win-cell {
|
|
/* Apply a distinct border to indicate win */
|
|
border-color: #10b981; /* Emerald-500 */
|
|
border-width: 3px; /* Make border more prominent */
|
|
animation: pulse 1.5s infinite;
|
|
z-index: 15; /* Ensure winning cells are on top of highlighted/others */
|
|
/* Optional: Slightly different background tint? */
|
|
/* Example: background-color: rgba(16, 185, 129, 0.1); /* Light emerald tint */
|
|
}
|
|
|
|
/* Ensure winning cell text is still readable over potential background tint */
|
|
.bingo-cell.win-cell .bingo-cell-text {
|
|
z-index: 16; /* Keep text above the cell's base styles/animations */
|
|
}
|