Невозможно переопределить стили [закрыто] ⇐ CSS

[Anonymous]

Хочу адаптировать tagify под дизайн bootstrap 5, пробовал переопределить свойства в CSS, но !important не помогает, возможно есть вообще простой способ, который позволит легко сделать дизайн и поведение такое же, как и у других элементов на странице.

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

@using CourseProject.Database
@using CourseProject.ViewModels
@using CourseProject.ViewModels.Template
@using Microsoft.EntityFrameworkCore
@using Microsoft.Extensions.Localization
@model TemplateViewModel
@inject IStringLocalizer localizer
@inject AppDbContext _context

[*]

@localizer["CreateTemplate"]
[list]

@localizer["General"]

[*]
@localizer["Questions"]

[/list]





@localizer["Title"]



@localizer["Description"]



@localizer["PreviewMarkdown"]



@localizer["UploadImage"]

@localizer["ChooseFile"]
@localizer["NoSelectedFile"]





@localizer["Topic"]

@localizer["SelectTopic"]
@foreach (var topic in Model.Topics)
{
if (Model.TopicId == topic.Id)
{
@topic.Name
}
else
{
@topic.Name
}
}



@localizer["Tags"]





@localizer["AccessType"]

@localizer["Public"]
@localizer["Restricted"]


@localizer["AllowedUsers"]





@localizer["SelectedUsers"]


@localizer["SortBy"]

[list]
[*]@localizer["UserName"]
[*]@localizer["Email"]
[/list]










[h4]@localizer["Questions"][/h4]

[list]

[/list]
@localizer["AddQuestion"]



@localizer["Save"]




const questionsContainer = document.getElementById("questions-container");

var draggedItem = null;

document.getElementById("add-question").addEventListener("click", function () {
const index = questionsContainer.children.length;
const questionHTML = `
[*]





@localizer["SingleLineText"]
@localizer["MultiLineText"]
@localizer["Checkbox"]
@localizer["Number"]




@localizer["ShowInResults"]


@localizer["Remove"]
`;
questionsContainer.insertAdjacentHTML("beforeend", questionHTML);
});

questionsContainer.querySelectorAll("input, textarea, select, button").forEach(element => {
element.setAttribute("draggable", "false");
element.addEventListener("dragstart", (e) =>  {
e.preventDefault();
});
});

function canDrag(target, event) {
const elementAtPoint = document.elementFromPoint(event.clientX, event.clientY);

return !elementAtPoint.closest("input, textarea, select, button");
}

questionsContainer.addEventListener("dragstart", function (e) {
if (!e.target.classList.contains("list-group-item") || !canDrag(e.target, e)) {
e.preventDefault();
return;
}

draggedItem = e.target;
e.target.style.opacity = "0.5";
e.target.classList.add("dragging");
});

questionsContainer.addEventListener("dragend", function (e) {
e.target.style.opacity = "1";
draggedItem = null;
e.target.classList.remove("dragging");
updateIndexes();
});

questionsContainer.addEventListener("dragover", function (e) {
e.preventDefault();
const afterElement = getDragAfterElement(questionsContainer, e.clientY);
if (afterElement == null) {
questionsContainer.appendChild(draggedItem);
} else {
questionsContainer.insertBefore(draggedItem, afterElement);
}
applyTransition(questionsContainer);
});

function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll(".list-group-item:not(.dragging)")];

return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}

function updateIndexes() {
[...questionsContainer.children].forEach((child, index) => {
child.dataset.index = index;

const inputs = child.querySelectorAll("input, select");
inputs.forEach(input => {
if (input.name.includes("Questions[")) {
input.name = input.name.replace(/Questions\[\d+\]/, `Questions[${index}]`);
if (input.name.includes(".Order")) {
input.value = index;
}
}
});
});
}

function applyTransition(container) {
[...container.children].forEach((item) => {
item.style.transition = "transform 0.2s ease";
});

setTimeout(() => {
[...container.children].forEach((item) => {
item.style.transition = "";
});
}, 200);
}

document.addEventListener('DOMContentLoaded', function () {
const tagsInput = document.getElementById("tags-input");
const usersInput = document.getElementById("users-input");
const tagsDropdown = document.getElementById("tags-dropdown");
const usersDropdown = document.getElementById("users-dropdown");

document.addEventListener('click', function (event) {
if (!tagsDropdown.contains(event.target) && event.target !== tagsInput) {
tagsDropdown.style.display = 'none';
}
});

function getCurrentInput(value) {
const lastCommaIndex = value.lastIndexOf(',');
return lastCommaIndex === -1 ? value : value.slice(lastCommaIndex + 1).trim();
}
});

document.addEventListener("DOMContentLoaded", function () {
const usersInput = document.getElementById("users-input");
const usersDropdown = document.getElementById("users-dropdown");
const selectedUsersContainer = document.getElementById("selected-users");
const hiddenInput = document.getElementById("allowed-users");

var currentSort;

var selectedUsers = [];

function displayResults(results) {
usersDropdown.innerHTML = '';
if (results.length > 0) {
results.forEach(user =>  {
const item = document.createElement('a');
item.classList.add('dropdown-item');
item.href = '#';
item.textContent = `${user.userName} (${user.email})`;
item.addEventListener('click', function (event) {
event.preventDefault();
addUser(user);
usersDropdown.style.display = 'none';
usersInput.value = '';
});
usersDropdown.appendChild(item);
});
usersDropdown.style.display = 'block';
} else {
usersDropdown.style.display = 'none';
}
}

function addUser(user) {
if (selectedUsers.some(x => x.userName === user.userName)) {
return;
}

selectedUsers.push(user);
sortUsers(currentSort);
renderSelectedUsers();
}

function renderSelectedUsers() {
selectedUsersContainer.innerHTML = '';
selectedUsers.forEach(user => {
const userDiv = document.createElement('div');
userDiv.classList.add('d-flex', 'align-items-center', 'border', 'rounded', 'p-2', 'mb-2');
userDiv.dataset.username = user.userName;

const text = document.createElement('span');
text.textContent = `${user.userName} (${user.email})`;
text.classList.add('flex-grow-1');

const removeBtn = document.createElement('button');
removeBtn.classList.add('btn', 'btn-sm', 'btn-danger', 'ms-2');
removeBtn.type = 'button';
removeBtn.textContent = "×";
removeBtn.addEventListener('click', () => {
selectedUsers = selectedUsers.filter(x => x.userName !== user.userName);
renderSelectedUsers();
updateHiddenField();
});

userDiv.appendChild(text);
userDiv.appendChild(removeBtn);
selectedUsersContainer.appendChild(userDiv);
});

updateHiddenField();
}

window.sortUsers = function (criterion) {
if (criterion === 'username') {
selectedUsers.sort((a, b) => a.userName.localeCompare(b.userName));
} else if (criterion === 'email') {
selectedUsers.sort((a, b) => a.email.localeCompare(b.email));
}
currentSort = criterion;
renderSelectedUsers();
}

function updateHiddenField() {
hiddenInput.value = selectedUsers.map(x => x.userName).join(',');
}

usersInput.addEventListener('input', function () {
const searchWord = usersInput.value.trim();
if (searchWord.length > 1) {
fetch(`/Template/GetUsers?begin=${searchWord}`)
.then(response => response.json())
.then(data => displayResults(data))
.catch(error => console.error('Error fetching users:', error));
} else {
usersDropdown.style.display = 'none';
}
});

document.addEventListener('click', function (event) {
if (!usersDropdown.contains(event.target) && event.target !== usersInput) {
usersDropdown.style.display = 'none';
}
});
});

document.addEventListener("DOMContentLoaded", function () {
const markdownInput = document.getElementById("description");
const markdownPreview = document.getElementById("markdownPreview");

function renderMarkdown() {
const markdownText = markdownInput.value;
markdownPreview.innerHTML = marked.parse(markdownText);
}

markdownInput.addEventListener("input", renderMarkdown);

renderMarkdown();
});

document.addEventListener("DOMContentLoaded", function () {
$('#review-image').change(function(e) {
var fileName = (e.target.files.length >  0) ? e.target.files[0].name : '@localizer["NoSelectedFile"]';
$('#review-image-label').text(fileName);
})

});

document.addEventListener("DOMContentLoaded", function () {
const tagsInput = document.getElementById("tags-input");
const tagify = new Tagify(tagsInput, {
delimiters: ",",
whitelist: [],
dropdown: {
enabled: 0,
position: "text",
closeOnSelect: false
}
});

const form = tagsInput.closest("form");
form.addEventListener("submit", function () {
tagsInput.value = tagify.value.map(tag => tag.value).join(",");
});

tagify.on("input", function (event) {
const searchWord = event.detail.value.trim();

if (searchWord.length > 1) {
fetch(`/Template/GetTags?begin=${searchWord}`)
.then((response) => response.json())
.then((tags) => {
tagify.settings.whitelist = tags;
tagify.dropdown.show.call(tagify, searchWord);
});
}
});
});





#questions-container .list-group-item {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#questions-container .list-group-item.dragging {
opacity: 0.7;
transform: scale(1.05);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#questions-container .list-group-item:not(.dragging) {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-bs-theme=dark] {
--tagify-dd-color-primary: #198754 !important;
--tagify-dd-bg-color: hsl(248, 40%, 25%) !important;
--bs-primary-bg-subtle: #483d8b;
--bs-primary-text-emphasis: #faebd7;
--tag-text-color: var(--bs-body-color) !important;
}

Я пробовал что-то подобное, но это не сработало, возможно потому, что я не очень хорошо знаком с CSS


< img alt="Не работает" src="https://i.sstatic.net/OvyTfP18.png" />

Подробнее здесь: https://stackoverflow.com/questions/793 ... ide-styles