const input = document.querySelector('input');
input.addEventListener('input', (event) => {
const value = event.target.value
.replace(/^\+?[78]/, '')
.replace(/[^0-9]/g, '')
.slice(0, 10);
event.target.value = value;
});
IMask(document.querySelector('input'), { mask: '000 000 00 00' });
.option:has(input:checked) {
background-color: peachpuff;
}
.option.active {
background-color: peachpuff;
}
const optionsContainer = document.querySelector('.options');
const options = optionsContainer.querySelectorAll('.option');
optionsContainer.addEventListener('click', (event) => {
const option = event.target.closest('.option');
if (option !== null) {
options.forEach((entry) => entry.classList.remove('active'));
option.classList.add('active');
}
});
document.documentElement
.data-theme="dark"
localStorage
:localStorage.setItem('theme', isChecked ? 'dark' : 'light');
head
добавляйте скрипт, который применит атрибут:const theme = localStorage.getItem('theme');
if (mode === 'dark') {
document.documentElement.dataset.theme = 'dark';
}
<div className="reference-container">
<div className="reference-container-panel">
{isToolsVisible && <div className="tools"></div>}
{isSeracpPanleVisible && <div className="searchPanel"</div>}
</div>
<div className="mainContent"></div>
</div>
.reference-container {
height: 100%;
display: grid;
grid-template-rows: max-content 1fr;
}
.reference-container-panel {
display: grid;
grid-auto-rows: max-content;
}
.reference-container-panel:empty {
display: none;
}
.tools {
height: 100px;
}
.searchPanel {
height: 50px;
}
@keyframes bg-move
.@keyframes bg-move {
0% { background-position: -500px 0; }
100% { background-position: 1000px 0; }
}
- grid-template-columns: repeat(auto-fill, minmax(250px, auto));
+ grid-template-columns: repeat(auto-fill, 250px);
filter: drop-shadow(2px 4px 6px blue);
заменить на box-shadow: 2px 4px 6px blue;
. И можете добавить will-change: height;
. header > div:not(:first-child) {
width: calc(100% - 36%);
padding: 68px 0 68px 48px;
border-left: 14px solid #fecb00;
background-color: #ebebeb;
}
h1, p {
margin: 0;
}
.hint
) пересекается с блоком А (основным текстом), и после, с использованием полученного и порогового (задаёте сами), можно решить, что делать с блоком.const clamp = (min, max, value) => Math.max(min, Math.min(max, value));
const calculateIntersection = (a, b) => {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const top = clamp(aRect.top, aRect.bottom, bRect.top);
const right = clamp(aRect.left, aRect.right, bRect.right);
const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
const left = clamp(aRect.left, aRect.right, bRect.left);
const width = right - left;
const height = bottom - top;
const totalArea = bRect.width * bRect.height;
const intersectionArea = width * height;
const intersectionRatio = intersectionArea / totalArea;
return intersectionRatio;
};