✨ Реализовано переключение темной и светлой темы в интерфейсе
- Добавлены функции для переключения между темной и светлой темами с использованием localStorage. - Обновлены стили для поддержки темной темы, включая цвета фона, текста и иконок. - Добавлены кнопки для переключения темы на страницах входа, профиля, заметок и настроек. - Оптимизирован код для предотвращения мерцания темы при загрузке страницы.
This commit is contained in:
parent
283e8cad63
commit
8fd529302f
@ -1,13 +0,0 @@
|
||||
# This is an example configuration file
|
||||
# To learn more, see the full config.yaml reference: https://docs.continue.dev/reference
|
||||
|
||||
name: Example Config
|
||||
version: 1.0.0
|
||||
schema: v1
|
||||
|
||||
models:
|
||||
- name: qwen/qwen3-235b-a22b:free
|
||||
provider: openrouter
|
||||
model: qwen/qwen3-235b-a22b:free
|
||||
apiBase: https://openrouter.ai/api/v1
|
||||
apiKey: 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
|
||||
@ -1,10 +0,0 @@
|
||||
name: New MCP server
|
||||
version: 0.0.1
|
||||
schema: v1
|
||||
mcpServers:
|
||||
- name: New MCP server
|
||||
command: npx
|
||||
args:
|
||||
- -y
|
||||
- <your-mcp-server>
|
||||
env: {}
|
||||
@ -14,7 +14,7 @@ async function cacheAvatar(avatarUrl) {
|
||||
const cacheData = {
|
||||
base64: base64,
|
||||
timestamp: Date.now(),
|
||||
url: avatarUrl
|
||||
url: avatarUrl,
|
||||
};
|
||||
|
||||
localStorage.setItem(AVATAR_CACHE_KEY, JSON.stringify(cacheData));
|
||||
@ -475,7 +475,7 @@ function insertMarkdown(tag) {
|
||||
|
||||
// Определяем, какие теги оборачивают текст (нуждаются в двойных тегах)
|
||||
const wrappingTags = ["**", "*", "`"];
|
||||
const isWrappingTag = wrappingTags.some(wrapTag => tag.startsWith(wrapTag));
|
||||
const isWrappingTag = wrappingTags.some((wrapTag) => tag.startsWith(wrapTag));
|
||||
|
||||
if (isWrappingTag && selected.startsWith(tag) && selected.endsWith(tag)) {
|
||||
// Если оборачивающие теги уже есть, удаляем их
|
||||
@ -619,7 +619,7 @@ function insertMarkdownForEdit(textarea, tag) {
|
||||
|
||||
// Определяем, какие теги оборачивают текст (нуждаются в двойных тегах)
|
||||
const wrappingTags = ["**", "*", "`"];
|
||||
const isWrappingTag = wrappingTags.some(wrapTag => tag.startsWith(wrapTag));
|
||||
const isWrappingTag = wrappingTags.some((wrapTag) => tag.startsWith(wrapTag));
|
||||
|
||||
if (isWrappingTag && selected.startsWith(tag) && selected.endsWith(tag)) {
|
||||
// Если оборачивающие теги уже есть, удаляем их
|
||||
@ -815,11 +815,11 @@ headerBtn.addEventListener("click", function (event) {
|
||||
|
||||
// Если меню выходит за правую границу, позиционируем его слева
|
||||
if (rect.right > viewportWidth) {
|
||||
headerDropdown.style.left = 'auto';
|
||||
headerDropdown.style.right = '0';
|
||||
headerDropdown.style.left = "auto";
|
||||
headerDropdown.style.right = "0";
|
||||
} else {
|
||||
headerDropdown.style.left = '0';
|
||||
headerDropdown.style.right = 'auto';
|
||||
headerDropdown.style.left = "0";
|
||||
headerDropdown.style.right = "auto";
|
||||
}
|
||||
|
||||
headerDropdown.classList.toggle("show");
|
||||
@ -1412,7 +1412,9 @@ async function renderNotes(notes) {
|
||||
const updated = parseSQLiteUtc(note.updated_at);
|
||||
dateDisplay = `${formatLocalDateTime(
|
||||
created
|
||||
)} <span class="iconify" data-icon="mdi:pencil" style="font-size: 12px; margin-left: 8px;"></span> ${formatLocalDateTime(updated)}`;
|
||||
)} <span class="date-separator"> | </span> <span class="iconify" data-icon="mdi:pencil" style="font-size: 12px; margin: 0 2px;"></span> ${formatLocalDateTime(
|
||||
updated
|
||||
)}`;
|
||||
} else {
|
||||
dateDisplay = formatLocalDateTime(created);
|
||||
}
|
||||
@ -1626,7 +1628,11 @@ function addNoteEventListeners() {
|
||||
const markdownButtons = [
|
||||
{ id: "editBoldBtn", icon: "mdi:format-bold", tag: "**" },
|
||||
{ id: "editItalicBtn", icon: "mdi:format-italic", tag: "*" },
|
||||
{ id: "editStrikethroughBtn", icon: "mdi:format-strikethrough", tag: "~~" },
|
||||
{
|
||||
id: "editStrikethroughBtn",
|
||||
icon: "mdi:format-strikethrough",
|
||||
tag: "~~",
|
||||
},
|
||||
{ id: "editColorBtn", icon: "mdi:palette", tag: "color" },
|
||||
{ id: "editHeaderBtn", icon: "mdi:format-header-pound", tag: "header" },
|
||||
{ id: "editListBtn", icon: "mdi:format-list-bulleted", tag: "- " },
|
||||
@ -1686,7 +1692,8 @@ function addNoteEventListeners() {
|
||||
// Обработчик открытия/закрытия dropdown
|
||||
headerBtn.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
headerDropdown.style.display = headerDropdown.style.display === "none" ? "block" : "none";
|
||||
headerDropdown.style.display =
|
||||
headerDropdown.style.display === "none" ? "block" : "none";
|
||||
headerBtn.classList.toggle("active");
|
||||
});
|
||||
|
||||
@ -2741,7 +2748,7 @@ async function loadUserInfo() {
|
||||
// Загружаем аватарку с сервера и кэшируем
|
||||
userAvatar.src = user.avatar;
|
||||
// Кэшируем в фоне
|
||||
cacheAvatar(user.avatar).then(success => {
|
||||
cacheAvatar(user.avatar).then((success) => {
|
||||
if (success) {
|
||||
console.log("Аватарка закэширована (notes)");
|
||||
}
|
||||
@ -3530,3 +3537,65 @@ function initSearchMobile() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Логика переключения темы
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
|
||||
if (!themeToggleBtn) return;
|
||||
|
||||
// Загружаем сохраненную тему или используем системную
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
const currentTheme = savedTheme || systemTheme;
|
||||
|
||||
// Применяем тему
|
||||
applyTheme(currentTheme);
|
||||
|
||||
// Обработчик клика на переключатель
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
applyTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
});
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
applyTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
|
||||
// Обновляем meta теги для PWA
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute(
|
||||
"content",
|
||||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||||
);
|
||||
}
|
||||
|
||||
// Обновляем иконку переключателя
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
if (themeToggleBtn) {
|
||||
const icon = themeToggleBtn.querySelector(".iconify");
|
||||
if (icon) {
|
||||
icon.setAttribute(
|
||||
"data-icon",
|
||||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализируем переключатель темы при загрузке страницы
|
||||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||||
|
||||
@ -17,6 +17,23 @@
|
||||
} catch (e) {}
|
||||
</script>
|
||||
|
||||
<!-- Предотвращение мерцания темы -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
const theme = savedTheme || (systemPrefersDark ? "dark" : "light");
|
||||
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
@ -94,7 +111,25 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<span class="iconify" data-icon="mdi:login"></span> Вход в систему
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span
|
||||
><span class="iconify" data-icon="mdi:login"></span> Вход в
|
||||
систему</span
|
||||
>
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
class="theme-toggle-btn"
|
||||
title="Переключить тему"
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:theme-light-dark"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="login-form">
|
||||
<form id="loginForm">
|
||||
|
||||
@ -1,5 +1,67 @@
|
||||
// Логика переключения темы
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
|
||||
if (!themeToggleBtn) return;
|
||||
|
||||
// Загружаем сохраненную тему или используем системную
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
const currentTheme = savedTheme || systemTheme;
|
||||
|
||||
// Применяем тему
|
||||
applyTheme(currentTheme);
|
||||
|
||||
// Обработчик клика на переключатель
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
applyTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
});
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
applyTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
|
||||
// Обновляем meta теги для PWA
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute(
|
||||
"content",
|
||||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||||
);
|
||||
}
|
||||
|
||||
// Обновляем иконку переключателя
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
if (themeToggleBtn) {
|
||||
const icon = themeToggleBtn.querySelector(".iconify");
|
||||
if (icon) {
|
||||
icon.setAttribute(
|
||||
"data-icon",
|
||||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализируем переключатель темы при загрузке страницы
|
||||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||||
|
||||
// Проверяем, не авторизован ли уже пользователь
|
||||
if (localStorage.getItem('isAuthenticated') === 'true') {
|
||||
if (localStorage.getItem("isAuthenticated") === "true") {
|
||||
window.location.href = "/notes";
|
||||
}
|
||||
|
||||
@ -40,8 +102,8 @@ if (loginForm) {
|
||||
|
||||
if (response.ok) {
|
||||
// Успешный вход - сохраняем состояние аутентификации
|
||||
localStorage.setItem('isAuthenticated', 'true');
|
||||
localStorage.setItem('username', username);
|
||||
localStorage.setItem("isAuthenticated", "true");
|
||||
localStorage.setItem("username", username);
|
||||
window.location.href = "/notes";
|
||||
} else {
|
||||
// Ошибка входа
|
||||
|
||||
@ -8,6 +8,23 @@
|
||||
/>
|
||||
<title>Заметки - NoteJS</title>
|
||||
|
||||
<!-- Предотвращение мерцания темы -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
const theme = savedTheme || (systemPrefersDark ? "dark" : "light");
|
||||
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
@ -239,6 +256,13 @@
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:account"></span>
|
||||
</div>
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
class="theme-toggle-btn"
|
||||
title="Переключить тему"
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:theme-light-dark"></span>
|
||||
</button>
|
||||
<button
|
||||
id="settings-btn"
|
||||
class="settings-icon-btn"
|
||||
|
||||
@ -8,6 +8,23 @@
|
||||
/>
|
||||
<title>Личный кабинет - NoteJS</title>
|
||||
|
||||
<!-- Предотвращение мерцания темы -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
const theme = savedTheme || (systemPrefersDark ? "dark" : "light");
|
||||
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
@ -58,6 +75,13 @@
|
||||
кабинет</span
|
||||
>
|
||||
<div class="user-info">
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
class="theme-toggle-btn"
|
||||
title="Переключить тему"
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:theme-light-dark"></span>
|
||||
</button>
|
||||
<a href="/notes" class="back-btn">
|
||||
<span class="iconify" data-icon="mdi:note-text"></span> К заметкам
|
||||
</a>
|
||||
|
||||
@ -1,3 +1,65 @@
|
||||
// Логика переключения темы
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
|
||||
if (!themeToggleBtn) return;
|
||||
|
||||
// Загружаем сохраненную тему или используем системную
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
const currentTheme = savedTheme || systemTheme;
|
||||
|
||||
// Применяем тему
|
||||
applyTheme(currentTheme);
|
||||
|
||||
// Обработчик клика на переключатель
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
applyTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
});
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
applyTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
|
||||
// Обновляем meta теги для PWA
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute(
|
||||
"content",
|
||||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||||
);
|
||||
}
|
||||
|
||||
// Обновляем иконку переключателя
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
if (themeToggleBtn) {
|
||||
const icon = themeToggleBtn.querySelector(".iconify");
|
||||
if (icon) {
|
||||
icon.setAttribute(
|
||||
"data-icon",
|
||||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализируем переключатель темы при загрузке страницы
|
||||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||||
|
||||
// DOM элементы
|
||||
const avatarImage = document.getElementById("avatarImage");
|
||||
const avatarPlaceholder = document.getElementById("avatarPlaceholder");
|
||||
@ -28,7 +90,7 @@ async function cacheAvatar(avatarUrl) {
|
||||
const cacheData = {
|
||||
base64: base64,
|
||||
timestamp: Date.now(),
|
||||
url: avatarUrl
|
||||
url: avatarUrl,
|
||||
};
|
||||
|
||||
localStorage.setItem(AVATAR_CACHE_KEY, JSON.stringify(cacheData));
|
||||
@ -165,7 +227,7 @@ async function loadProfile() {
|
||||
// Загружаем аватарку с сервера и кэшируем
|
||||
avatarImage.src = user.avatar;
|
||||
// Кэшируем в фоне
|
||||
cacheAvatar(user.avatar).then(success => {
|
||||
cacheAvatar(user.avatar).then((success) => {
|
||||
if (success) {
|
||||
console.log("Аватарка закэширована");
|
||||
}
|
||||
@ -232,7 +294,7 @@ avatarInput.addEventListener("change", async function (event) {
|
||||
deleteAvatarBtn.style.display = "inline-block";
|
||||
|
||||
// Обновляем кэш с новой аватаркой
|
||||
cacheAvatar(result.avatar).then(success => {
|
||||
cacheAvatar(result.avatar).then((success) => {
|
||||
if (success) {
|
||||
console.log("Новая аватарка закэширована");
|
||||
}
|
||||
|
||||
@ -16,6 +16,23 @@
|
||||
} catch (e) {}
|
||||
</script>
|
||||
|
||||
<!-- Предотвращение мерцания темы -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
const theme = savedTheme || (systemPrefersDark ? "dark" : "light");
|
||||
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
@ -93,7 +110,25 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<span class="iconify" data-icon="mdi:account-plus"></span> Регистрация
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span
|
||||
><span class="iconify" data-icon="mdi:account-plus"></span>
|
||||
Регистрация</span
|
||||
>
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
class="theme-toggle-btn"
|
||||
title="Переключить тему"
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:theme-light-dark"></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div class="login-form">
|
||||
<form id="registerForm">
|
||||
|
||||
@ -1,5 +1,67 @@
|
||||
// Логика переключения темы
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
|
||||
if (!themeToggleBtn) return;
|
||||
|
||||
// Загружаем сохраненную тему или используем системную
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
const currentTheme = savedTheme || systemTheme;
|
||||
|
||||
// Применяем тему
|
||||
applyTheme(currentTheme);
|
||||
|
||||
// Обработчик клика на переключатель
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
applyTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
});
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
applyTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
|
||||
// Обновляем meta теги для PWA
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute(
|
||||
"content",
|
||||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||||
);
|
||||
}
|
||||
|
||||
// Обновляем иконку переключателя
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
if (themeToggleBtn) {
|
||||
const icon = themeToggleBtn.querySelector(".iconify");
|
||||
if (icon) {
|
||||
icon.setAttribute(
|
||||
"data-icon",
|
||||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализируем переключатель темы при загрузке страницы
|
||||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||||
|
||||
// Проверяем, не авторизован ли уже пользователь
|
||||
if (localStorage.getItem('isAuthenticated') === 'true') {
|
||||
if (localStorage.getItem("isAuthenticated") === "true") {
|
||||
window.location.href = "/notes";
|
||||
}
|
||||
|
||||
@ -53,8 +115,8 @@ if (registerForm) {
|
||||
|
||||
if (response.ok) {
|
||||
// Успешная регистрация - сохраняем состояние аутентификации
|
||||
localStorage.setItem('isAuthenticated', 'true');
|
||||
localStorage.setItem('username', username);
|
||||
localStorage.setItem("isAuthenticated", "true");
|
||||
localStorage.setItem("username", username);
|
||||
window.location.href = "/notes";
|
||||
} else {
|
||||
// Ошибка регистрации
|
||||
|
||||
@ -8,6 +8,23 @@
|
||||
/>
|
||||
<title>Настройки - NoteJS</title>
|
||||
|
||||
<!-- Предотвращение мерцания темы -->
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemPrefersDark = window.matchMedia(
|
||||
"(prefers-color-scheme: dark)"
|
||||
).matches;
|
||||
const theme = savedTheme || (systemPrefersDark ? "dark" : "light");
|
||||
|
||||
if (theme === "dark") {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
} catch (e) {}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- PWA Meta Tags -->
|
||||
<meta
|
||||
name="description"
|
||||
@ -56,6 +73,13 @@
|
||||
<header class="notes-header">
|
||||
<span><span class="iconify" data-icon="mdi:cog"></span> Настройки</span>
|
||||
<div class="user-info">
|
||||
<button
|
||||
id="theme-toggle-btn"
|
||||
class="theme-toggle-btn"
|
||||
title="Переключить тему"
|
||||
>
|
||||
<span class="iconify" data-icon="mdi:theme-light-dark"></span>
|
||||
</button>
|
||||
<a href="/notes" class="back-btn">
|
||||
<span class="iconify" data-icon="mdi:note-text"></span> К заметкам
|
||||
</a>
|
||||
|
||||
@ -1,3 +1,65 @@
|
||||
// Логика переключения темы
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
|
||||
if (!themeToggleBtn) return;
|
||||
|
||||
// Загружаем сохраненную тему или используем системную
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
const currentTheme = savedTheme || systemTheme;
|
||||
|
||||
// Применяем тему
|
||||
applyTheme(currentTheme);
|
||||
|
||||
// Обработчик клика на переключатель
|
||||
themeToggleBtn.addEventListener("click", () => {
|
||||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||||
applyTheme(newTheme);
|
||||
localStorage.setItem("theme", newTheme);
|
||||
});
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
applyTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(theme) {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
|
||||
// Обновляем meta теги для PWA
|
||||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeColorMeta) {
|
||||
themeColorMeta.setAttribute(
|
||||
"content",
|
||||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||||
);
|
||||
}
|
||||
|
||||
// Обновляем иконку переключателя
|
||||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||||
if (themeToggleBtn) {
|
||||
const icon = themeToggleBtn.querySelector(".iconify");
|
||||
if (icon) {
|
||||
icon.setAttribute(
|
||||
"data-icon",
|
||||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Инициализируем переключатель темы при загрузке страницы
|
||||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||||
|
||||
// Переменные для пагинации логов
|
||||
let logsOffset = 0;
|
||||
const logsLimit = 50;
|
||||
|
||||
300
public/style.css
300
public/style.css
@ -1,17 +1,73 @@
|
||||
:root {
|
||||
--accent-color: #007bff;
|
||||
|
||||
/* Светлая тема (по умолчанию) */
|
||||
--bg-primary: #f5f5f5;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #f8f9fa;
|
||||
--bg-quaternary: #e9ecef;
|
||||
--bg-hover: #e7f3ff;
|
||||
|
||||
--text-primary: #333333;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #999999;
|
||||
--text-light: #757575;
|
||||
|
||||
--border-primary: #e0e0e0;
|
||||
--border-secondary: #dddddd;
|
||||
--border-focus: #007bff;
|
||||
|
||||
--shadow-light: rgba(0, 0, 0, 0.1);
|
||||
--shadow-medium: rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Цвета иконок */
|
||||
--icon-search: #2196f3;
|
||||
--icon-tags: #4caf50;
|
||||
--icon-notes: #ff9800;
|
||||
--icon-user: #9c27b0;
|
||||
--icon-danger: #dc3545;
|
||||
}
|
||||
|
||||
/* Темная тема */
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #1a1a1a;
|
||||
--bg-secondary: #2d2d2d;
|
||||
--bg-tertiary: #3a3a3a;
|
||||
--bg-quaternary: #4a4a4a;
|
||||
--bg-hover: #2a4a6b;
|
||||
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #cccccc;
|
||||
--text-muted: #999999;
|
||||
--text-light: #aaaaaa;
|
||||
|
||||
--border-primary: #404040;
|
||||
--border-secondary: #555555;
|
||||
--border-focus: #4a9eff;
|
||||
|
||||
--shadow-light: rgba(0, 0, 0, 0.3);
|
||||
--shadow-medium: rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Цвета иконок в темной теме */
|
||||
--icon-search: #64b5f6;
|
||||
--icon-tags: #81c784;
|
||||
--icon-notes: #ffb74d;
|
||||
--icon-user: #ba68c8;
|
||||
--icon-danger: #f44336;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: #f5f5f5;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 30px;
|
||||
padding: 0 15px;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -77,26 +133,58 @@ header .iconify {
|
||||
/* Цветные иконки */
|
||||
/* Иконка поиска - синий */
|
||||
.search-title .iconify[data-icon="mdi:magnify"] {
|
||||
color: #2196f3;
|
||||
color: var(--icon-search);
|
||||
}
|
||||
|
||||
/* Иконка тегов - зеленый */
|
||||
.tags-title .iconify[data-icon="mdi:tag"] {
|
||||
color: #4caf50;
|
||||
color: var(--icon-tags);
|
||||
}
|
||||
|
||||
/* Иконка заметок - оранжевый */
|
||||
header .iconify[data-icon="mdi:note-text"] {
|
||||
color: #ff9800;
|
||||
color: var(--icon-notes);
|
||||
}
|
||||
|
||||
/* Иконка пользователя - фиолетовый */
|
||||
header .iconify[data-icon="mdi:account"],
|
||||
.username-clickable .iconify[data-icon="mdi:account"] {
|
||||
color: #9c27b0;
|
||||
color: var(--icon-user);
|
||||
}
|
||||
|
||||
/* Цвет иконки выхода задается в стилях .logout-btn .iconify */
|
||||
/* Переключатель темы */
|
||||
.theme-toggle-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background-color: var(--accent-color, #007bff);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.theme-toggle-btn .iconify {
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
transition: color 0.3s ease;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover .iconify {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Иконка входа - синий */
|
||||
header .iconify[data-icon="mdi:login"] {
|
||||
@ -110,11 +198,11 @@ header .iconify[data-icon="mdi:account-plus"] {
|
||||
|
||||
/* Markdown кнопки - разные цвета */
|
||||
.btnMarkdown .iconify[data-icon="mdi:format-bold"] {
|
||||
color: #424242;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btnMarkdown .iconify[data-icon="mdi:format-italic"] {
|
||||
color: #757575;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btnMarkdown .iconify[data-icon="mdi:palette"] {
|
||||
@ -142,7 +230,7 @@ header .iconify[data-icon="mdi:account-plus"] {
|
||||
}
|
||||
|
||||
.btnMarkdown .iconify[data-icon="mdi:format-strikethrough"] {
|
||||
color: #9c27b0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btnMarkdown .iconify[data-icon="mdi:format-list-numbered"] {
|
||||
@ -191,7 +279,7 @@ header {
|
||||
.search-section {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.search-header {
|
||||
@ -201,7 +289,7 @@ header {
|
||||
.search-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@ -212,18 +300,19 @@ header {
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 6px 30px 6px 10px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
background-color: #f8f9fa;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, #007bff);
|
||||
background-color: white;
|
||||
border-color: var(--border-focus);
|
||||
background-color: var(--bg-secondary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
@ -243,26 +332,26 @@ header {
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
background-color: #e9ecef;
|
||||
color: #666;
|
||||
background-color: var(--bg-quaternary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.filter-indicator {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
padding: 4px 10px;
|
||||
background-color: #e7f3ff;
|
||||
border: 1px solid var(--accent-color, #007bff);
|
||||
background-color: var(--bg-hover);
|
||||
border: 1px solid var(--border-focus);
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
color: var(--accent-color, #007bff);
|
||||
color: var(--border-focus);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-indicator button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #dc3545;
|
||||
color: var(--icon-danger);
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
font-weight: bold;
|
||||
@ -271,7 +360,7 @@ header {
|
||||
}
|
||||
|
||||
.filter-indicator button:hover {
|
||||
color: #a71d2a;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
@ -331,7 +420,8 @@ header {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -365,7 +455,8 @@ header {
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -411,15 +502,17 @@ header {
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 10px var(--shadow-light);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
box-sizing: border-box;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
overflow: visible;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
@ -434,28 +527,34 @@ header {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, #007bff);
|
||||
border-color: var(--border-focus);
|
||||
background-color: var(--bg-secondary);
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #dc3545;
|
||||
color: var(--icon-danger);
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c6cb;
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
border: 1px solid rgba(220, 53, 69, 0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@ -464,9 +563,11 @@ textarea {
|
||||
min-height: 50px;
|
||||
resize: none;
|
||||
border: none;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 5px;
|
||||
overflow-y: hidden;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
@ -489,7 +590,9 @@ textarea:focus {
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 5px;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
transition: all 0.3s ease;
|
||||
@ -518,14 +621,20 @@ textarea:focus {
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.note-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@ -535,37 +644,37 @@ textarea:focus {
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
color: var(--text-primary);
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
padding: 4px 8px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.notesHeaderBtn:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: var(--bg-quaternary);
|
||||
}
|
||||
|
||||
#pinBtn:hover {
|
||||
background: #fff3cd;
|
||||
color: #856404;
|
||||
background: rgba(255, 193, 7, 0.2);
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
#archiveBtn:hover {
|
||||
background: #e2e3e5;
|
||||
color: #383d41;
|
||||
background: var(--bg-quaternary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
#editBtn:hover {
|
||||
background: #d1ecf1;
|
||||
color: #0c5460;
|
||||
background: rgba(13, 202, 240, 0.2);
|
||||
color: #0dcaf0;
|
||||
}
|
||||
|
||||
#deleteBtn:hover {
|
||||
background: #f8d7da;
|
||||
color: #721c24;
|
||||
background: rgba(220, 53, 69, 0.2);
|
||||
color: var(--icon-danger);
|
||||
}
|
||||
|
||||
.textNote {
|
||||
@ -590,7 +699,7 @@ textarea:focus {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 80px;
|
||||
background: linear-gradient(to bottom, transparent, white);
|
||||
background: linear-gradient(to bottom, transparent, var(--bg-primary));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -816,8 +925,9 @@ textarea:focus {
|
||||
padding: 5px 10px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid var(--border-secondary);
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
/* Улучшения для мобильных устройств */
|
||||
@ -829,10 +939,12 @@ textarea:focus {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.markdown-buttons .btnMarkdown:hover {
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--bg-quaternary);
|
||||
border-color: var(--border-focus);
|
||||
}
|
||||
|
||||
/* Выпадающее меню заголовков */
|
||||
@ -847,10 +959,10 @@ textarea:focus {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 2px 8px var(--shadow-medium);
|
||||
z-index: 1000;
|
||||
margin-top: 2px;
|
||||
min-width: 60px;
|
||||
@ -871,12 +983,12 @@ textarea:focus {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.header-dropdown-menu button:hover {
|
||||
background: #f0f0f0;
|
||||
background: var(--bg-quaternary);
|
||||
}
|
||||
|
||||
.header-dropdown-menu button:first-child {
|
||||
@ -959,8 +1071,9 @@ textarea:focus {
|
||||
.btn-delete {
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid var(--border-secondary);
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
@ -996,13 +1109,13 @@ textarea:focus {
|
||||
|
||||
.profile-form h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin: 30px 0;
|
||||
border: none;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.message-container {
|
||||
@ -1046,11 +1159,11 @@ textarea:focus {
|
||||
|
||||
.back-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid var(--border-secondary);
|
||||
background-color: var(--bg-tertiary);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
color: var(--accent-color, #007bff);
|
||||
color: var(--border-focus);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
@ -1085,11 +1198,13 @@ textarea:focus {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
max-width: 200px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 10px var(--shadow-light);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Мини-календарь */
|
||||
@ -1107,7 +1222,7 @@ textarea:focus {
|
||||
.calendar-month-year {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
@ -1135,7 +1250,7 @@ textarea:focus {
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
@ -1154,14 +1269,14 @@ textarea:focus {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
padding: 1px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-day:hover {
|
||||
background-color: #e7f3ff;
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
.calendar-day.today {
|
||||
@ -1171,7 +1286,7 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.calendar-day.other-month {
|
||||
color: #ccc;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.calendar-day.selected {
|
||||
@ -1261,7 +1376,7 @@ textarea:focus {
|
||||
.tags-section {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
border-top: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.tags-header {
|
||||
@ -1271,7 +1386,7 @@ textarea:focus {
|
||||
.tags-title {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tags-container {
|
||||
@ -2148,15 +2263,16 @@ textarea:focus {
|
||||
}
|
||||
|
||||
.archived-note-item {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.archived-note-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px var(--shadow-light);
|
||||
}
|
||||
|
||||
.archived-note-header {
|
||||
@ -2170,7 +2286,7 @@ textarea:focus {
|
||||
|
||||
.archived-note-date {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.archived-note-actions {
|
||||
@ -2181,9 +2297,10 @@ textarea:focus {
|
||||
.btn-restore,
|
||||
.btn-delete-permanent {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 5px;
|
||||
background: white;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.3s ease;
|
||||
@ -2214,7 +2331,7 @@ textarea:focus {
|
||||
|
||||
.archived-note-content {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
@ -2226,7 +2343,7 @@ textarea:focus {
|
||||
.archived-note-images {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@ -2242,9 +2359,11 @@ textarea:focus {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border: 1px solid var(--border-secondary);
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.log-filter-select:focus {
|
||||
@ -2260,34 +2379,35 @@ textarea:focus {
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 3px var(--shadow-light);
|
||||
}
|
||||
|
||||
.logs-table thead {
|
||||
background: #f8f9fa;
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.logs-table th {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
border-bottom: 2px solid #dee2e6;
|
||||
color: var(--text-primary);
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.logs-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.logs-table tbody tr:hover {
|
||||
background: #f8f9fa;
|
||||
background: var(--bg-quaternary);
|
||||
}
|
||||
|
||||
.log-action-badge {
|
||||
@ -2354,7 +2474,7 @@ textarea:focus {
|
||||
/* Стили для закрепленных заметок */
|
||||
.note-pinned {
|
||||
border-left: 4px solid #ffc107;
|
||||
background: #fffbf0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.pin-indicator {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user