Fovway/noteJS-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Fovway:5c025b9349d57688829c4e56704226be4c39961c
Branches Tags
Fovway:main
..
compare: Fovway:dc8f1f53fc44ce939a49643b5857b0d9ed4062ae
Branches Tags
Fovway:main

No commits in common. "5c025b9349d57688829c4e56704226be4c39961c" and "dc8f1f53fc44ce939a49643b5857b0d9ed4062ae" have entirely different histories.
5c025b9349 ... dc8f1f53fc

6 changed files with 72 additions and 300 deletions
Show Stats Expand all files Collapse all files

7
src/components/layout/Header.tsx
View File

@ -12,8 +12,6 @@ import { authApi } from "../../api/authApi";
import { userApi } from "../../api/userApi"; import { userApi } from "../../api/userApi";
import { ThemeToggle } from "../common/ThemeToggle"; import { ThemeToggle } from "../common/ThemeToggle";
import { setUser, setAiSettings } from "../../store/slices/profileSlice"; import { setUser, setAiSettings } from "../../store/slices/profileSlice";
import { setAccentColor as setAccentColorAction } from "../../store/slices/uiSlice";
import { setAccentColor } from "../../utils/colorUtils";
interface HeaderProps { interface HeaderProps {
onFilterChange?: (hasFilters: boolean) => void; onFilterChange?: (hasFilters: boolean) => void;
@ -46,11 +44,6 @@ export const Header: React.FC<HeaderProps> = ({
const userData = await userApi.getProfile(); const userData = await userApi.getProfile();
dispatch(setUser(userData)); dispatch(setUser(userData));
// Устанавливаем цвет акцента из профиля пользователя
const accent = userData.accent_color || "#007bff";
dispatch(setAccentColorAction(accent));
setAccentColor(accent);
// Загружаем AI настройки // Загружаем AI настройки
try { try {
const aiSettings = await userApi.getAiSettings(); const aiSettings = await userApi.getAiSettings();

80
src/components/notes/MarkdownToolbar.tsx
View File

@ -21,60 +21,34 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
const [showHeaderDropdown, setShowHeaderDropdown] = useState(false); const [showHeaderDropdown, setShowHeaderDropdown] = useState(false);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const menuRef = useRef<HTMLDivElement>(null);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(0); const [startX, setStartX] = useState(0);
const [scrollLeft, setScrollLeft] = useState(0); const [scrollLeft, setScrollLeft] = useState(0);
const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
if ( if (
dropdownRef.current && dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node) && !dropdownRef.current.contains(event.target as Node)
menuRef.current &&
!menuRef.current.contains(event.target as Node)
) { ) {
setShowHeaderDropdown(false); setShowHeaderDropdown(false);
setMenuPosition(null);
}
};
const updateMenuPosition = () => {
if (buttonRef.current && showHeaderDropdown) {
const rect = buttonRef.current.getBoundingClientRect();
setMenuPosition({
top: rect.bottom + window.scrollY + 2,
left: rect.left + window.scrollX,
});
} }
}; };
if (showHeaderDropdown) { if (showHeaderDropdown) {
updateMenuPosition();
// Используем небольшой таймаут, чтобы не перехватить клик на кнопке
const timeoutId = setTimeout(() => {
document.addEventListener("mousedown", handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
window.addEventListener("resize", updateMenuPosition); }
window.addEventListener("scroll", updateMenuPosition);
}, 100);
return () => { return () => {
clearTimeout(timeoutId);
document.removeEventListener("mousedown", handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
window.removeEventListener("resize", updateMenuPosition);
window.removeEventListener("scroll", updateMenuPosition);
}; };
} else {
setMenuPosition(null);
}
}, [showHeaderDropdown]); }, [showHeaderDropdown]);
const handleMouseDown = (e: React.MouseEvent) => { const handleMouseDown = (e: React.MouseEvent) => {
// Не начинаем перетаскивание если кликнули на кнопку // Не начинаем перетаскивание если кликнули на кнопку
if ((e.target as HTMLElement).closest(".btnMarkdown")) return; if ((e.target as HTMLElement).closest('.btnMarkdown')) return;
if (!containerRef.current) return; if (!containerRef.current) return;
setIsDragging(true); setIsDragging(true);
@ -97,16 +71,16 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
// Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента // Обработчики для document чтобы отслеживать mouseMove и mouseUp даже вне элемента
useEffect(() => { useEffect(() => {
if (isDragging) { if (isDragging) {
document.addEventListener("mousemove", handleMouseMove); document.addEventListener('mousemove', handleMouseMove);
document.addEventListener("mouseup", handleMouseUp); document.addEventListener('mouseup', handleMouseUp);
} else { } else {
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener('mouseup', handleMouseUp);
} }
return () => { return () => {
document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener('mouseup', handleMouseUp);
}; };
}, [isDragging]); }, [isDragging]);
@ -117,14 +91,7 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
className="markdown-buttons" className="markdown-buttons"
ref={containerRef} ref={containerRef}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
style={{ style={{ cursor: isDragging ? 'grabbing' : (containerRef.current && containerRef.current.scrollWidth > containerRef.current.clientWidth ? 'grab' : 'default') }}
cursor: isDragging
? "grabbing"
: containerRef.current &&
containerRef.current.scrollWidth > containerRef.current.clientWidth
? "grab"
: "default",
}}
> >
{buttons.map((btn) => ( {buttons.map((btn) => (
<button <button
@ -145,15 +112,8 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
<div className="header-dropdown" ref={dropdownRef}> <div className="header-dropdown" ref={dropdownRef}>
<button <button
ref={buttonRef}
className="btnMarkdown" className="btnMarkdown"
onMouseDown={(e) => { onClick={() => setShowHeaderDropdown(!showHeaderDropdown)}
e.stopPropagation();
}}
onClick={(e) => {
e.stopPropagation();
setShowHeaderDropdown(!showHeaderDropdown);
}}
title="Заголовок" title="Заголовок"
> >
<Icon icon="mdi:format-header-pound" /> <Icon icon="mdi:format-header-pound" />
@ -162,24 +122,14 @@ export const MarkdownToolbar: React.FC<MarkdownToolbarProps> = ({
style={{ fontSize: "10px", marginLeft: "-2px" }} style={{ fontSize: "10px", marginLeft: "-2px" }}
/> />
</button> </button>
{showHeaderDropdown && menuPosition && ( {showHeaderDropdown && (
<div <div className="header-dropdown-menu">
ref={menuRef}
className="header-dropdown-menu"
style={{
position: "fixed",
top: `${menuPosition.top}px`,
left: `${menuPosition.left}px`,
}}
>
{[1, 2, 3, 4, 5].map((level) => ( {[1, 2, 3, 4, 5].map((level) => (
<button <button
key={level} key={level}
onClick={(e) => { onClick={() => {
e.stopPropagation();
onInsert("#".repeat(level) + " ", ""); onInsert("#".repeat(level) + " ", "");
setShowHeaderDropdown(false); setShowHeaderDropdown(false);
setMenuPosition(null);
}} }}
> >
H{level} H{level}

64
src/components/notes/NoteItem.tsx
View File

@ -53,12 +53,9 @@ export const NoteItem: React.FC<NoteItemProps> = ({
strikethrough: false, strikethrough: false,
}); });
const [localPreviewMode, setLocalPreviewMode] = useState(false); const [localPreviewMode, setLocalPreviewMode] = useState(false);
const [isExpanded, setIsExpanded] = useState(false);
const [isLongNote, setIsLongNote] = useState(false);
const editTextareaRef = useRef<HTMLTextAreaElement>(null); const editTextareaRef = useRef<HTMLTextAreaElement>(null);
const imageInputRef = useRef<HTMLInputElement>(null); const imageInputRef = useRef<HTMLInputElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const textNoteRef = useRef<HTMLDivElement>(null);
const searchQuery = useAppSelector((state) => state.notes.searchQuery); const searchQuery = useAppSelector((state) => state.notes.searchQuery);
const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode); const isPreviewMode = useAppSelector((state) => state.ui.isPreviewMode);
const aiEnabled = useAppSelector((state) => state.profile.aiEnabled); const aiEnabled = useAppSelector((state) => state.profile.aiEnabled);
@ -967,54 +964,6 @@ export const NoteItem: React.FC<NoteItemProps> = ({
dispatch(setSelectedTag(tag)); dispatch(setSelectedTag(tag));
}; };
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
// Проверка, является ли заметка длинной
useEffect(() => {
if (isEditing) {
setIsExpanded(false);
setIsLongNote(false);
return;
}
if (!textNoteRef.current) return;
const checkNoteLength = () => {
const element = textNoteRef.current;
if (!element) return;
// Временно убираем класс collapsed для точного измерения
const wasCollapsed = element.classList.contains("collapsed");
if (wasCollapsed) {
element.classList.remove("collapsed");
}
// Получаем реальную высоту контента
const scrollHeight = element.scrollHeight;
// Восстанавливаем класс если он был
if (wasCollapsed && !isExpanded) {
element.classList.add("collapsed");
}
// Считаем заметку длинной, если она больше 300px (максимальная высота свернутой заметки)
const isLong = scrollHeight > 300;
setIsLongNote(isLong);
};
// Небольшая задержка для того, чтобы контент успел отрендериться
const timer = setTimeout(checkNoteLength, 100);
return () => clearTimeout(timer);
}, [note.content, isEditing, isExpanded]);
// Сбрасываем состояние раскрытия при изменении заметки
useEffect(() => {
setIsExpanded(false);
}, [note.id]);
return ( return (
<> <>
<div <div
@ -1322,8 +1271,7 @@ export const NoteItem: React.FC<NoteItemProps> = ({
) : ( ) : (
<> <>
<div <div
ref={textNoteRef} className="textNote"
className={`textNote ${isLongNote && !isExpanded ? "collapsed" : ""}`}
data-original-content={note.content} data-original-content={note.content}
dangerouslySetInnerHTML={{ __html: formatContent() }} dangerouslySetInnerHTML={{ __html: formatContent() }}
onClick={(e) => { onClick={(e) => {
@ -1336,16 +1284,6 @@ export const NoteItem: React.FC<NoteItemProps> = ({
} }
}} }}
/> />
{isLongNote && (
<button
className="show-more-btn"
onClick={toggleExpand}
type="button"
>
<Icon icon={isExpanded ? "mdi:chevron-up" : "mdi:chevron-down"} />
<span>{isExpanded ? "Скрыть" : "Раскрыть"}</span>
</button>
)}
{note.images && note.images.length > 0 && ( {note.images && note.images.length > 0 && (
<div className="note-images-container"> <div className="note-images-container">

7
src/pages/ProfilePage.tsx
View File

@ -6,8 +6,6 @@ import { userApi } from "../api/userApi";
import { authApi } from "../api/authApi"; import { authApi } from "../api/authApi";
import { clearAuth } from "../store/slices/authSlice"; import { clearAuth } from "../store/slices/authSlice";
import { setUser, setAiSettings } from "../store/slices/profileSlice"; import { setUser, setAiSettings } from "../store/slices/profileSlice";
import { setAccentColor as setAccentColorAction } from "../store/slices/uiSlice";
import { setAccentColor } from "../utils/colorUtils";
import { useNotification } from "../hooks/useNotification"; import { useNotification } from "../hooks/useNotification";
import { Modal } from "../components/common/Modal"; import { Modal } from "../components/common/Modal";
import { ThemeToggle } from "../components/common/ThemeToggle"; import { ThemeToggle } from "../components/common/ThemeToggle";
@ -44,11 +42,6 @@ const ProfilePage: React.FC = () => {
setUsername(userData.username || ""); setUsername(userData.username || "");
setEmail(userData.email || ""); setEmail(userData.email || "");
// Устанавливаем цвет акцента из профиля пользователя
const accent = userData.accent_color || "#007bff";
dispatch(setAccentColorAction(accent));
setAccentColor(accent);
if (userData.avatar) { if (userData.avatar) {
setAvatarUrl(userData.avatar); setAvatarUrl(userData.avatar);
setHasAvatar(true); setHasAvatar(true);

32
src/styles/style-calendar.css
View File

@ -45,9 +45,9 @@
} }
.calendar-nav-btn:hover { .calendar-nav-btn:hover {
background: var(--accent-color, #007bff); background: #007bff;
color: white; color: white;
border-color: var(--accent-color, #007bff); border-color: #007bff;
} }
.calendar-weekdays { .calendar-weekdays {
@ -80,7 +80,7 @@
font-size: 10px; font-size: 10px;
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
background: transparent; background: #f8f9fa;
color: #666; color: #666;
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -88,41 +88,35 @@
} }
.calendar-day:hover { .calendar-day:hover {
background: transparent; background: #e8f4f8;
border-color: var(--accent-color, #007bff); border-color: #007bff;
} }
.calendar-day.other-month { .calendar-day.other-month {
color: #ccc; color: #ccc;
background: transparent; background: #fafafa;
}
.calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
.calendar-day.today { .calendar-day.today {
background: transparent; background: #007bff;
color: #666; color: white;
font-weight: 600; font-weight: 600;
border-color: var(--accent-color, #007bff); border-color: #0056cc;
} }
.calendar-day.today:hover { .calendar-day.today:hover {
background: transparent; background: #0056cc;
border-color: var(--accent-color, #007bff);
} }
.calendar-day.selected { .calendar-day.selected {
background: var(--accent-color, #007bff); background: #28a745;
color: white; color: white;
font-weight: 600; font-weight: 600;
border-color: var(--accent-color, #007bff); border-color: #1e7e34;
} }
.calendar-day.selected:hover { .calendar-day.selected:hover {
background: var(--accent-color, #007bff); background: #1e7e34;
border-color: var(--accent-color, #007bff);
} }
.main { .main {

174
src/styles/style.css
View File

@ -909,9 +909,7 @@ textarea:focus {
} }
.show-more-btn { .show-more-btn {
display: flex; display: block;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
padding: 8px; padding: 8px;
@ -923,7 +921,6 @@ textarea:focus {
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
text-align: center; text-align: center;
gap: 5px;
} }
.show-more-btn:hover { .show-more-btn:hover {
@ -1261,17 +1258,19 @@ textarea:focus {
position: relative; position: relative;
display: inline-block; display: inline-block;
overflow: visible; overflow: visible;
z-index: 1;
} }
.header-dropdown-menu { .header-dropdown-menu {
display: block; display: block;
position: fixed; position: absolute;
top: 100%;
right: 0;
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 8px var(--shadow-medium); box-shadow: 0 2px 8px var(--shadow-medium);
z-index: 1001; z-index: 1000;
margin-top: 2px;
min-width: 60px; min-width: 60px;
max-width: 120px; max-width: 120px;
} }
@ -1657,13 +1656,14 @@ textarea:focus {
border: none; border: none;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--accent-color, #007bff);
padding: 0 3px; padding: 0 3px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.calendar-nav:hover { .calendar-nav:hover {
color: var(--accent-color); color: var(--accent-color, #007bff);
opacity: 0.8;
} }
.calendar-weekdays { .calendar-weekdays {
@ -1700,48 +1700,27 @@ textarea:focus {
padding: 2px; padding: 2px;
font-weight: 500; font-weight: 500;
position: relative; position: relative;
background-color: transparent;
border: 1px solid transparent;
} }
.calendar-day:hover { .calendar-day:hover {
background-color: transparent; background-color: var(--bg-hover);
border-color: var(--accent-color, #007bff);
} }
.calendar-day.today { .calendar-day.today {
background-color: transparent; background-color: var(--accent-color, #007bff);
color: var(--text-primary); color: white;
font-weight: bold; font-weight: bold;
border: 1px solid var(--accent-color, #007bff);
}
.calendar-day.today:hover {
background-color: transparent;
border-color: var(--accent-color, #007bff);
} }
.calendar-day.other-month { .calendar-day.other-month {
color: var(--text-muted); color: var(--text-muted);
background-color: transparent;
border: 1px solid transparent;
}
.calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
.calendar-day.selected { .calendar-day.selected {
background-color: var(--accent-color, #007bff); background-color: var(--accent-color, #007bff);
color: white; color: white;
font-weight: bold; font-weight: bold;
opacity: 1; opacity: 0.9;
border: 1px solid var(--accent-color, #007bff);
}
.calendar-day.selected:hover {
background-color: var(--accent-color, #007bff);
border-color: var(--accent-color, #007bff);
} }
/* Стили календаря для PC версии (темный стиль как на изображении) */ /* Стили календаря для PC версии (темный стиль как на изображении) */
@ -1754,17 +1733,17 @@ textarea:focus {
.calendar-month-year { .calendar-month-year {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: #ffffff;
} }
.calendar-nav { .calendar-nav {
font-size: 20px; font-size: 20px;
color: var(--text-secondary); color: #ffffff;
font-weight: 400; font-weight: 400;
} }
.calendar-nav:hover { .calendar-nav:hover {
color: var(--accent-color); opacity: 0.8;
} }
.calendar-weekdays { .calendar-weekdays {
@ -1784,48 +1763,29 @@ textarea:focus {
color: #ffffff; color: #ffffff;
font-weight: 400; font-weight: 400;
background-color: transparent; background-color: transparent;
border: 1px solid transparent;
} }
.calendar-day:hover { .calendar-day:hover {
background-color: transparent; background-color: rgba(255, 255, 255, 0.1);
border-color: var(--accent-color, #007bff);
} }
.calendar-day.other-month { .calendar-day.other-month {
color: #999999; color: #999999;
background-color: transparent; background-color: transparent;
border: 1px solid transparent;
}
.calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
.calendar-day.selected { .calendar-day.selected {
background-color: var(--accent-color, #007bff); background-color: #007bff;
color: white; color: white;
font-weight: 500; font-weight: 500;
opacity: 1; opacity: 1;
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--accent-color, #007bff);
}
.calendar-day.selected:hover {
background-color: var(--accent-color, #007bff);
border-color: var(--accent-color, #007bff);
} }
.calendar-day.today { .calendar-day.today {
background-color: transparent; background-color: #007bff;
color: #ffffff; color: white;
font-weight: 500; font-weight: 500;
border: 1px solid var(--accent-color, #007bff);
}
.calendar-day.today:hover {
background-color: transparent;
border-color: var(--accent-color, #007bff);
} }
} }
@ -1916,45 +1876,26 @@ textarea:focus {
[data-theme="dark"] .calendar-day { [data-theme="dark"] .calendar-day {
background-color: transparent; background-color: transparent;
color: #ffffff; color: #ffffff;
border: 1px solid transparent;
} }
[data-theme="dark"] .calendar-day:hover { [data-theme="dark"] .calendar-day:hover {
background-color: transparent; background-color: rgba(255, 255, 255, 0.1);
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .calendar-day.other-month { [data-theme="dark"] .calendar-day.other-month {
background-color: transparent; background-color: transparent;
color: #999999; color: #999999;
border: 1px solid transparent;
}
[data-theme="dark"] .calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .calendar-day.today { [data-theme="dark"] .calendar-day.today {
background-color: transparent; background-color: #007bff;
color: #ffffff; color: white;
border: 1px solid var(--accent-color, #007bff);
}
[data-theme="dark"] .calendar-day.today:hover {
background-color: transparent;
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .calendar-day.selected { [data-theme="dark"] .calendar-day.selected {
background-color: var(--accent-color, #007bff); background-color: #007bff;
color: white; color: white;
opacity: 1; opacity: 1;
border: 1px solid var(--accent-color, #007bff);
}
[data-theme="dark"] .calendar-day.selected:hover {
background-color: var(--accent-color, #007bff);
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .calendar-nav { [data-theme="dark"] .calendar-nav {
@ -2192,13 +2133,14 @@ textarea:focus {
border: none; border: none;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
color: var(--text-secondary); color: var(--accent-color, #007bff);
padding: 0 3px; padding: 0 3px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.mobile-sidebar .calendar-nav:hover { .mobile-sidebar .calendar-nav:hover {
color: var(--accent-color); color: var(--accent-color, #007bff);
opacity: 0.8;
} }
/* Календарь дней в слайдере */ /* Календарь дней в слайдере */
@ -2222,93 +2164,55 @@ textarea:focus {
padding: 1px; padding: 1px;
font-weight: 500; font-weight: 500;
position: relative; position: relative;
background-color: transparent; background-color: var(--bg-tertiary);
border: 1px solid transparent;
} }
.mobile-sidebar .calendar-day:hover { .mobile-sidebar .calendar-day:hover {
background-color: transparent; background-color: var(--bg-quaternary);
border-color: var(--accent-color, #007bff);
} }
.mobile-sidebar .calendar-day.today { .mobile-sidebar .calendar-day.today {
background-color: transparent; background-color: var(--accent-color, #007bff);
color: var(--text-primary); color: white;
font-weight: bold; font-weight: bold;
border: 1px solid var(--accent-color, #007bff);
}
.mobile-sidebar .calendar-day.today:hover {
background-color: transparent;
border-color: var(--accent-color, #007bff);
} }
.mobile-sidebar .calendar-day.selected { .mobile-sidebar .calendar-day.selected {
background-color: var(--accent-color, #007bff); background-color: var(--accent-color, #007bff);
color: white; color: white;
font-weight: bold; font-weight: bold;
opacity: 1; opacity: 0.9;
border: 1px solid var(--accent-color, #007bff);
}
.mobile-sidebar .calendar-day.selected:hover {
background-color: var(--accent-color, #007bff);
border-color: var(--accent-color, #007bff);
} }
.mobile-sidebar .calendar-day.other-month { .mobile-sidebar .calendar-day.other-month {
color: var(--text-muted); color: var(--text-muted);
background-color: transparent; background-color: var(--bg-primary);
border: 1px solid transparent;
}
.mobile-sidebar .calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
/* Темная тема для календаря в мобильном сайдбаре */ /* Темная тема для календаря в мобильном сайдбаре */
[data-theme="dark"] .mobile-sidebar .calendar-day { [data-theme="dark"] .mobile-sidebar .calendar-day {
background-color: transparent; background-color: var(--bg-tertiary);
color: var(--text-primary); color: var(--text-primary);
border: 1px solid transparent;
} }
[data-theme="dark"] .mobile-sidebar .calendar-day:hover { [data-theme="dark"] .mobile-sidebar .calendar-day:hover {
background-color: transparent; background-color: var(--bg-quaternary);
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .mobile-sidebar .calendar-day.other-month { [data-theme="dark"] .mobile-sidebar .calendar-day.other-month {
background-color: transparent; background-color: var(--bg-primary);
color: var(--text-muted); color: var(--text-muted);
border: 1px solid transparent;
}
[data-theme="dark"] .mobile-sidebar .calendar-day.other-month:hover {
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .mobile-sidebar .calendar-day.today { [data-theme="dark"] .mobile-sidebar .calendar-day.today {
background-color: transparent; background-color: var(--accent-color, #007bff);
color: var(--text-primary); color: white;
border: 1px solid var(--accent-color, #007bff);
}
[data-theme="dark"] .mobile-sidebar .calendar-day.today:hover {
background-color: transparent;
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .mobile-sidebar .calendar-day.selected { [data-theme="dark"] .mobile-sidebar .calendar-day.selected {
background-color: var(--accent-color, #007bff); background-color: var(--accent-color, #007bff);
color: white; color: white;
opacity: 1; opacity: 0.9;
border: 1px solid var(--accent-color, #007bff);
}
[data-theme="dark"] .mobile-sidebar .calendar-day.selected:hover {
background-color: var(--accent-color, #007bff);
border-color: var(--accent-color, #007bff);
} }
[data-theme="dark"] .mobile-sidebar .calendar-nav:hover { [data-theme="dark"] .mobile-sidebar .calendar-nav:hover {