dark theme fix

main
Satur@it-depot.ru 2025-03-06 13:58:19 +03:00
parent 55bb7c3c4f
commit fffe09c93b
1 changed files with 24 additions and 6 deletions

View File

@ -36,8 +36,12 @@
margin: 2px 0;
background: #fff;
cursor: move;
color: #000; /* Цвет текста в светлой теме */
}
.install-item.dark-theme {
background: #2a2a2a;
color: #e0e0e0; /* Цвет текста в тёмной теме */
}
.install-item.dark-theme { background: #2a2a2a; }
.install-item.selected { background-color: #e6f7ff; }
.install-item.selected.dark-theme { background-color: #003a6d; }
.install-item > div {
@ -98,8 +102,12 @@
border-collapse: collapse;
background: #f0f0f0;
cursor: pointer;
color: #000; /* Цвет текста в светлой теме */
}
.header.dark-theme {
background: #333;
color: #e0e0e0; /* Цвет текста в тёмной теме */
}
.header.dark-theme { background: #333; }
.header > div {
display: table-cell;
padding: 5px;
@ -377,6 +385,9 @@
document.getElementById('import-label').classList.add('dark-theme');
document.querySelector('.theme-toggle').classList.add('dark-theme');
document.querySelector('.theme-toggle').textContent = 'Светлая тема';
// Применяем темную тему к уже загруженным элементам таблицы
document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
document.querySelector('.header').classList.add('dark-theme');
}
});
@ -389,6 +400,8 @@
const searchContainer = document.getElementById('search-container');
const importLabel = document.getElementById('import-label');
const themeToggle = document.querySelector('.theme-toggle');
const header = document.querySelector('.header');
const installItems = document.querySelectorAll('.install-item');
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme');
@ -399,6 +412,8 @@
searchContainer.classList.remove('dark-theme');
importLabel.classList.remove('dark-theme');
themeToggle.classList.remove('dark-theme');
header.classList.remove('dark-theme');
installItems.forEach(item => item.classList.remove('dark-theme'));
themeToggle.textContent = 'Темная тема';
localStorage.setItem('theme', 'light');
} else {
@ -410,6 +425,8 @@
searchContainer.classList.add('dark-theme');
importLabel.classList.add('dark-theme');
themeToggle.classList.add('dark-theme');
header.classList.add('dark-theme');
installItems.forEach(item => item.classList.add('dark-theme'));
themeToggle.textContent = 'Светлая тема';
localStorage.setItem('theme', 'dark');
}
@ -547,14 +564,15 @@
function displayInstalls(installs) {
console.log("Displaying installs:", installs);
const isDarkTheme = document.body.classList.contains('dark-theme');
if (installs.length === 0) {
$('#installs-list').html('<p>Нет результатов</p>');
} else {
$('#installs-list').html(installs.map(item => `
<div class="install-item" data-id="${item.id}" draggable="true">
<div class="computer-name">${item.computer_name} <button class="edit-button" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div>
<div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link" target="_blank">${item.rust_id}</a> <button class="copy-button" onclick="copyToClipboard('${item.rust_id}')">📋</button> <button class="edit-button" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div>
<div class="install-time">${item.install_time} <button class="edit-button" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div>
<div class="install-item ${isDarkTheme ? 'dark-theme' : ''}" data-id="${item.id}" draggable="true">
<div class="computer-name">${item.computer_name} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div>
<div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link ${isDarkTheme ? 'dark-theme' : ''}" target="_blank">${item.rust_id}</a> <button class="copy-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="copyToClipboard('${item.rust_id}')">📋</button> <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div>
<div class="install-time">${item.install_time} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div>
<div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button> <button onclick="openNoteModal(${item.id}, '${item.note}')">Заметка</button></span></div>
</div>
`).join(''));