Новичок запутался в выводе. Любая помощь приветствуется [закрыто] ⇐ CSS

[Anonymous]

Я начинающий программист и сейчас создаю веб-сайт в качестве личного проекта. Я шел плавно, но вдруг случился неожиданный разворот и я остановился на своих рельсах. Я только что добавил весь код, который считаю нужным.
Проблема: сетка и все внутри действует как всплывающее окно. GridAEP действует как всплывающее окно поверх первоначального всплывающего окна. Я пытался добавить несколько полей ввода, и у меня уже был дизайн, который я использовал в другом месте проекта. Но когда я добавил поле ввода класса к входным данным, произошли непредвиденные выходные данные.
Текст-заполнитель имеет оранжевый+фиолетовый цвет (должен применяться только к меткам), как и вводимый пользователем текст. Я хотел, чтобы заполнитель и вводимый пользователем текст были просто белыми. Но больше всего реальная проблема заключается в том, что при наведении курсора и текст-заполнитель, и текст, вводимый пользователем, просто исчезают, как будто становятся невидимыми, даже если они есть (проверяется путем выбора текста).
Ожидаемый результат: я ожидал, что он будет вести себя как обычно. Фон должен быть того же цвета, но заполнитель должен быть белым, а текст, вводимый пользователем, также должен быть белым. Кроме того, текст не должен становиться невидимым при наведении курсора.
Вот вся необходимая разметка CSS и HTML:

Код: Выделить всё

.input-box {
background: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 10px;
padding: 10px;
color: white;
font-size: 14px;
margin-bottom: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}

.input-box:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 126, 95, 0.8);
}

/* Popup container styling */
#elementsPopup {
width: calc(100% - 160px);
/* Left and right padding */
height: calc(100% - 100px);
/* Top and bottom padding */
position: fixed;
top: 80px;
left: 80px;
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 1000;
border-radius: 30px;
}

.gradientline {
width: calc(100% - 190px);
/* Left and right padding */
height: calc(100% - 135px);
/* Top and bottom padding */
position: fixed;
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 10;
border-radius: 30px;
background: linear-gradient(to right, #00bcd4, #4caf50);
/* Gradient for border */
padding: 2px;
/* Space for the inner brown background */
}

.gradientline::before {
content: '';
width: 100%;
height: 100%;
background: black;
/* Inner background color */
border-radius: inherit;
display: block;
z-index: -1;
/* Ensure it sits behind the content */
}

/* Heading styling */
#elementsPopup h2,
#addElementPopup h2 {
font-size: 3rem;
text-align: center;
background: linear-gradient(to right, #00bcd4, #4caf50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#elementsPopup h2 {
font-size: 3rem;
margin: 0;
z-index: 20;
margin-bottom: 1px;
/* Adds 10px spacing below the heading */
}

/* Element container */
.grid {
display: grid;
gap: 20px;
padding: 0 10px;
/* Ensure spacing inside the border */
z-index: 1020;
}

#gridESP {
grid-template-columns: repeat(4, 1fr);
/* Adjust for 8 elements */
}

/* Blur the background only, not the popup */
body.popup-active {
filter: none;
/* Ensure popup isn't affected by body blur */
}

.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
/* Semi-transparent overlay */
backdrop-filter: blur(5px);
/* Blur background */
z-index: 999;
/* Below the popup, but above content */
}

/* Hide the overlay and popup initially */
.hidden {
display: none;
}

#addElementPopup {
width: 750px;
/* Smaller size */
height: 550px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background: black;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
gap: 20px;
z-index: 1001;
border-radius: 20px;
z-index: 1010;
}

#addElementPopup h2 {
font-size: 2rem;
z-index: 1001;
margin: 0;
}

#addElementOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
/* Ensures overlay is visible */
z-index: 1000;
/* Highest priority for overlay */
}

#addElementOverlay.hidden {
display: none;
}

#gradientlineAEP {
width: 700px;
height:  500px;
}

Код: Выделить всё

Element Selection


🔥Fire
💧Water
🌱Earth
🌫️Air
❄️Ice
⚡Electric
☀️Light
🌑Dark




Done
Cancel







Add Element

Element Name
Element Tier
Emoji (Optional)

Confirm
Cancel




Подробнее здесь: [url]https://stackoverflow.com/questions/79348245/beginner-confused-about-output-any-help-is-appreciated[/url]