Make background opacity work
This commit is contained in:
parent
35859f3eef
commit
bf8e473703
4 changed files with 67 additions and 15 deletions
|
|
@ -16,6 +16,8 @@ body {
|
|||
.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;
|
||||
|
|
@ -158,6 +160,25 @@ body {
|
|||
/* Basic styling for the board */
|
||||
#bingo-board-container {
|
||||
/* Background color/image/opacity set by JS */
|
||||
position: relative; /* Needed for pseudo-element positioning */
|
||||
overflow: hidden; /* Clip pseudo-element */
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
|
|
|
|||
22
beango/images/redx.svg
Normal file
22
beango/images/redx.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
|
|
@ -396,6 +396,12 @@
|
|||
<label for="board-bg-image-url-input" class="block text-sm font-medium text-gray-700">Background Image URL (Optional):</label>
|
||||
<input type="url" id="board-bg-image-url-input" name="board-bg-image-url-input" placeholder="Overrides background color" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
|
||||
<p class="mt-1 text-xs text-gray-500">If set, opacity still applies to the image.</p>
|
||||
<!-- START Board Background Image Opacity Slider -->
|
||||
<div class="mt-1 w-28 flex flex-col items-center ml-auto">
|
||||
<label for="board-bg-image-opacity-slider" class="block text-xs font-medium text-gray-500">Image Opacity: <span id="board-bg-image-opacity-value">100</span>%</label>
|
||||
<input type="range" id="board-bg-image-opacity-slider" name="board-bg-image-opacity-slider" min="0" max="100" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
|
||||
</div>
|
||||
<!-- END Board Background Image Opacity Slider -->
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@ const LS_MARKED_BORDER_WIDTH = 'beango_markedBorderWidth';
|
|||
const LS_BOARD_BG_COLOR = 'beango_boardBgColor';
|
||||
const LS_BOARD_BG_COLOR_OPACITY = 'beango_boardBgColorOpacity'; // (replaces LS_BOARD_BG_OPACITY)
|
||||
const LS_BOARD_BG_IMAGE_URL = 'beango_boardBgImageUrl';
|
||||
const LS_BOARD_BG_IMAGE_OPACITY = 'beango_boardBgImageOpacity'; // NEW
|
||||
const LS_MARKED_CELL_TEXT_COLOR = 'beango_markedCellTextColor';
|
||||
const LS_MARKED_CELL_TEXT_OPACITY = 'beango_markedCellTextOpacity';
|
||||
const LS_MARKED_CELL_OUTLINE_COLOR = 'beango_markedCellOutlineColor';
|
||||
|
|
@ -101,6 +102,7 @@ const DEFAULT_MARKED_BORDER_WIDTH = 0; // No border for marked cells
|
|||
const DEFAULT_BOARD_BG_COLOR = '#ffffff'; // Default white
|
||||
const DEFAULT_BOARD_BG_COLOR_OPACITY = 100; // (replaces DEFAULT_BOARD_BG_OPACITY)
|
||||
const DEFAULT_BOARD_BG_IMAGE_URL = ''; // Default no image
|
||||
const DEFAULT_BOARD_BG_IMAGE_OPACITY = 100; // NEW
|
||||
const DEFAULT_MARKED_CELL_TEXT_COLOR = '#000000'; // Keep black for readability
|
||||
const DEFAULT_MARKED_CELL_TEXT_OPACITY = 50;
|
||||
const DEFAULT_MARKED_CELL_OUTLINE_COLOR = '#ffffff';
|
||||
|
|
@ -742,6 +744,7 @@ function saveBoardBgSettings() {
|
|||
localStorage.setItem(LS_BOARD_BG_COLOR, document.getElementById('board-bg-color-picker').value);
|
||||
localStorage.setItem(LS_BOARD_BG_IMAGE_URL, document.getElementById('board-bg-image-url-input').value);
|
||||
localStorage.setItem(LS_BOARD_BG_COLOR_OPACITY, document.getElementById('board-bg-color-opacity-slider').value); // Use new ID & key
|
||||
localStorage.setItem(LS_BOARD_BG_IMAGE_OPACITY, document.getElementById('board-bg-image-opacity-slider').value); // NEW
|
||||
}
|
||||
|
||||
// --- Apply board background style ---
|
||||
|
|
@ -751,22 +754,19 @@ function applyBoardBgStyle() {
|
|||
|
||||
const bgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
|
||||
const bgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
|
||||
const opacityValue = parseInt(localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY, 10);
|
||||
const bgColorOpacity = parseInt(localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY, 10);
|
||||
const bgImageOpacity = parseInt(localStorage.getItem(LS_BOARD_BG_IMAGE_OPACITY) || DEFAULT_BOARD_BG_IMAGE_OPACITY, 10); // NEW
|
||||
|
||||
// Apply opacity - REMOVED direct opacity setting
|
||||
// container.style.opacity = opacityValue;
|
||||
// Apply background color directly to the container
|
||||
container.style.backgroundColor = hexToRgba(bgColor, bgColorOpacity);
|
||||
|
||||
// Apply background image or color
|
||||
if (bgImageUrl) {
|
||||
container.style.backgroundImage = `url('${bgImageUrl}')`;
|
||||
container.style.backgroundSize = 'cover';
|
||||
container.style.backgroundPosition = 'center center';
|
||||
container.style.backgroundRepeat = 'no-repeat';
|
||||
// Apply background color with its opacity as fallback / see-through
|
||||
container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
|
||||
// Apply background image via CSS variables for the pseudo-element
|
||||
if (bgImageUrl && bgImageUrl.trim() !== '') {
|
||||
container.style.setProperty('--board-bg-image-url', `url('${bgImageUrl}')`);
|
||||
container.style.setProperty('--board-bg-image-opacity', bgImageOpacity / 100);
|
||||
} else {
|
||||
container.style.backgroundImage = 'none';
|
||||
container.style.backgroundColor = hexToRgba(bgColor, opacityValue);
|
||||
container.style.removeProperty('--board-bg-image-url');
|
||||
container.style.removeProperty('--board-bg-image-opacity');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1353,10 +1353,11 @@ function restoreCellStyleSettings(savedCellBorderColor, savedCellBorderOpacity,
|
|||
_restoreInputSetting('cell-outline-width-input', savedCellOutlineWidth);
|
||||
}
|
||||
|
||||
function restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl) {
|
||||
function restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl, savedBoardBgImageOpacity) {
|
||||
_restoreColorPickerSetting('board-bg-color-picker', savedBoardBgColor);
|
||||
_restoreInputSetting('board-bg-image-url-input', savedBoardBgImageUrl);
|
||||
_restoreOpacitySetting('board-bg-color-opacity-slider', 'board-bg-color-opacity-value', savedBoardBgColorOpacity);
|
||||
_restoreOpacitySetting('board-bg-image-opacity-slider', 'board-bg-image-opacity-value', savedBoardBgImageOpacity); // NEW
|
||||
applyBoardBgStyle(); // Apply loaded style
|
||||
}
|
||||
|
||||
|
|
@ -1450,6 +1451,7 @@ function loadFromLocalStorage() {
|
|||
const savedBoardBgColor = localStorage.getItem(LS_BOARD_BG_COLOR) || DEFAULT_BOARD_BG_COLOR;
|
||||
const savedBoardBgColorOpacity = localStorage.getItem(LS_BOARD_BG_COLOR_OPACITY) || DEFAULT_BOARD_BG_COLOR_OPACITY;
|
||||
const savedBoardBgImageUrl = localStorage.getItem(LS_BOARD_BG_IMAGE_URL) || DEFAULT_BOARD_BG_IMAGE_URL;
|
||||
const savedBoardBgImageOpacity = localStorage.getItem(LS_BOARD_BG_IMAGE_OPACITY) || DEFAULT_BOARD_BG_IMAGE_OPACITY; // NEW
|
||||
|
||||
// Restore Config Pane State
|
||||
loadPaneState(configIsOpen);
|
||||
|
|
@ -1491,7 +1493,7 @@ function loadFromLocalStorage() {
|
|||
savedCellBorderWidth
|
||||
);
|
||||
|
||||
restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl);
|
||||
restoreBoardBgSettings(savedBoardBgColor, savedBoardBgColorOpacity, savedBoardBgImageUrl, savedBoardBgImageOpacity); // Pass new value
|
||||
|
||||
restoreSavedItems(savedDisplayedItems, savedItemsText, savedOriginalItemsText);
|
||||
|
||||
|
|
@ -1703,6 +1705,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
setupInputListener('board-bg-color-picker', 'input', saveBoardBgSettings, applyBoardBgStyle);
|
||||
setupInputListener('board-bg-image-url-input', 'input', saveBoardBgSettings, applyBoardBgStyle);
|
||||
setupOpacitySliderListener('board-bg-color-opacity-slider', 'board-bg-color-opacity-value', saveBoardBgSettings, applyBoardBgStyle);
|
||||
setupOpacitySliderListener('board-bg-image-opacity-slider', 'board-bg-image-opacity-value', saveBoardBgSettings, applyBoardBgStyle); // NEW
|
||||
|
||||
|
||||
// --- Search Listener ---
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue