:root { --bg: #f1f7ee; --surface: #ffffff; --surface-2: #eaf4e6; --border: #d2e5cb; --text: #223021; --text-muted: #6d8267; --accent: #3f8c4a; --accent-2: #2f9e8f; --accent-soft: #ddf0d8; --danger: #c05c4a; --danger-soft-bg: #fbecea; --danger-soft-border: #f0c7c0; --shadow: 0 2px 10px rgba(30, 60, 30, 0.07); --radius: 14px; /* Три "плями" фонового градієнта на html/body нижче — окремі змінні, щоб темна тема могла підмінити й їх одним махом разом з рештою палітри, а не дублювати весь background-блок під кожен стан теми. */ --glow-1: #e3f3dc; --glow-2: #d9f0e5; --glow-3: #f5faf1; /* Нейтральна "пігулка" активного пункту бокового меню на новій головній (не зелена — просто легке затемнення фону). */ --home-nav-active-bg: #edeff2; /* Майже білий фон нової головної (з боковим меню) — окремо від зеленуватого --bg решти сайту. */ --home-bg: #fbfbfc; /* Картки на новій головній (бейджі розділів/нотатки/події) — окремо від --surface, щоб у темній темі вони йшли не оливковими (як решта сайту), а темно-синіми, в тон нової темної палітри головної. У світлій темі просто дорівнює --surface (білий), тобто нічого не міняє. */ --home-card-bg: var(--surface); --home-border: var(--border); /* Градієнт привітальної картки — у світлій темі фірмові зелений/ бірюзовий, у темній підмінюються на сині (нижче). --hero-fade — колір, у який градієнт розчиняється праворуч: НЕ чистий --home-bg (це було занадто різко/контрастно), а м'який притемнений відтінок самого градієнта. */ --hero-grad-1: var(--accent); --hero-grad-2: var(--accent-2); --hero-fade: #eef6f0; /* Пастельні фони бейджів розділів на новій головній — у темній темі підмінюються на притемнені/приглушені відтінки тих самих кольорів (нижче), а не лишаються світлими плямами на темному фоні. */ --badge-blue: #eaf2fb; --badge-pink: #fceaf0; --badge-yellow: #fbf1e3; --badge-green: #eaf6ee; --badge-teal: #e6f0fb; --badge-rose: #fbe7ee; --badge-purple: #efeafb; /* "Паперові" кольорові картки нотаток і найближчих подій (домашня сторінка) — у світлій темі яскравий пастельний папір із темним текстом; у темній темі (нижче) підмінюються на приглушені темні відтінки того самого кольору зі світлим текстом, інакше яскраво-білі "папірці" різали б око на майже чорному фоні. */ --note-bg: #fdf6df; --note-border: #f0e2ae; --note-text: #3a3222; --note-blue-bg: #e9f1fb; --note-blue-border: #c9dcf3; --note-green-bg: #eaf5e7; --note-green-border: #cbe4c3; --note-pink-bg: #fbeaf1; --note-pink-border: #f0c9dc; font-size: 16px; color-scheme: light; } /* Темна тема. Спрацьовує у двох випадках: 1) людина нічого не обирала в Налаштуваннях (типовий стан) — тоді орієнтуємось на системну тему пристрою через prefers-color-scheme; 2) людина явно обрала "Темна" в Налаштуваннях — тоді сервер сам додає data-theme="dark" на ще до першого кадру (щоб уникнути "спалаху" світлої версії), і це має власний пріоритет. :root:not([data-theme="light"]) у медіа-запиті — щоб системна темна тема НЕ вмикалась для тих, хто явно обрав "Світла" в Налаштуваннях, навіть якщо на пристрої в цілому увімкнено темний режим. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #171f28; --surface: #1b232c; --surface-2: #232d38; --border: #2b3542; --text: #eef2f5; --text-muted: #9aa7b5; --accent: #4a9f57; --accent-2: #359e8d; --accent-soft: #1c2e22; --danger: #d16b4c; --danger-soft-bg: #3a221c; --danger-soft-border: #5a3226; --shadow: 0 2px 16px rgba(0, 0, 0, 0.45); --glow-1: #16210f; --glow-2: #122019; --glow-3: #0e130b; /* Темна тема тепер єдина на весь сайт — той самий майже чорний/ синьо-зелений вигляд нової головної (раніше був лише на ній, решта сторінок темніла в окрему оливкову палітру; тепер усі сторінки в .page-home й ділять цю саму палітру нижче). */ --home-nav-active-bg: #212c37; --home-bg: #171f28; --home-card-bg: #1b232c; --hero-grad-1: #20452c; --hero-grad-2: #1a312e; --hero-fade: #142029; --badge-blue: #212c3a; --badge-pink: #2b2530; --badge-yellow: #2a2620; --badge-green: #212a22; --badge-teal: #1f2c3a; --badge-rose: #2c2228; --badge-purple: #292438; --hero-img-filter: none; --home-border: #232d38; --note-bg: #3a3320; --note-border: #5a4f2e; --note-text: #eef2f5; --note-blue-bg: #223247; --note-blue-border: #34506e; --note-green-bg: #223224; --note-green-border: #34523a; --note-pink-bg: #3a2430; --note-pink-border: #5c3448; color-scheme: dark; } :root:not([data-theme="light"]) .page-home .hero-illustration-day { display: none; } :root:not([data-theme="light"]) .page-home .hero-illustration-night { display: block; } } :root[data-theme="dark"] { --bg: #171f28; --surface: #1b232c; --surface-2: #232d38; --border: #2b3542; --text: #eef2f5; --text-muted: #9aa7b5; --accent: #4a9f57; --accent-2: #359e8d; --accent-soft: #1c2e22; --danger: #d16b4c; --danger-soft-bg: #3a221c; --danger-soft-border: #5a3226; --shadow: 0 2px 16px rgba(0, 0, 0, 0.45); --glow-1: #16210f; --glow-2: #122019; --glow-3: #0e130b; --home-nav-active-bg: #212c37; --home-bg: #171f28; --home-card-bg: #1b232c; --hero-grad-1: #20452c; --hero-grad-2: #1a312e; --hero-fade: #142029; --badge-blue: #212c3a; --badge-pink: #2b2530; --badge-yellow: #2a2620; --badge-green: #212a22; --badge-teal: #1f2c3a; --badge-rose: #2c2228; --badge-purple: #292438; --hero-img-filter: none; --home-border: #232d38; --note-bg: #3a3320; --note-border: #5a4f2e; --note-text: #eef2f5; --note-blue-bg: #223247; --note-blue-border: #34506e; --note-green-bg: #223224; --note-green-border: #34523a; --note-pink-bg: #3a2430; --note-pink-border: #5c3448; color-scheme: dark; } :root[data-theme="dark"] .page-home .hero-illustration-day { display: none; } :root[data-theme="dark"] .page-home .hero-illustration-night { display: block; } * { box-sizing: border-box; } /* Анімація перемикання теми: коли клікають іконку сонця/місяця в сайдбарі, data-theme на міняється одразу в JS (без перезавантаження сторінки) — без transition це виглядало б різким стрибком кольорів. Тут — плавний перехід (~350мс) на всіх елементах, чий фон/текст/рамка залежать від теми. Не вішаємо на "*" (це може зачепити анімації всередині календаря/списків та вплинути на продуктивність) — лише перелічені контейнери/контроли. */ body, .app-shell, .home-sidebar, .topbar, .card, .modal, .modal-overlay, .home-nav-item, .theme-toggle-btn, .btn, .btn-secondary, input, select, textarea, .family-item, .util-type-row, .note-item, .notif-dropdown, .notif-item, .history-item, .emoji-badge, .hero-card, .notif-bell { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; } /* Twemoji підміняє символ емодзі на картинку (щоб виглядало однаково на будь-якому пристрої) — масштабуємо її під висоту тексту навколо, як і радить сама бібліотека, інакше картинка лишається "рідного" розміру. */ img.emoji { height: 1em; width: 1em; margin: 0 0.05em 0 0.1em; vertical-align: -0.1em; } html, body { margin: 0; padding: 0; min-height: 100%; background: radial-gradient(1100px 550px at 12% -8%, var(--glow-1) 0%, rgba(0,0,0,0) 60%), radial-gradient(900px 500px at 105% 0%, var(--glow-2) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, var(--glow-3) 0%, var(--bg) 100%); background-attachment: fixed; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } a { color: inherit; text-decoration: none; } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } /* --- Верхняя навигация --- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; gap: 16px; flex-wrap: wrap; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; } .brand .icon { font-size: 1.4rem; } a.brand:hover { opacity: 0.85; } /* Окрема кнопка "На Головну" (додається з JS у renderTopbar/ insertPageHomeButton, js/api.js) — стоїть прямо над заголовком сторінки (перший елемент у
), а не в шапці: туди погляд і так падає першим, коли відкриваєш сторінку. На екранах вужчих за 960px бокового меню нема (воно лише десктопне, дивись ".page-home Головна: бокове меню" нижче) — на внутрішніх сторінках саме там вона й потрібна. */ .page-home-btn { display: none; align-items: center; gap: 6px; width: fit-content; padding: 7px 13px; margin-bottom: 14px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .page-home-btn:hover, .page-home-btn:active { opacity: 0.8; } .page-home-btn .icon { font-size: 1rem; } @media (max-width: 959px) { .page-home-btn { display: inline-flex; } } .back-link { display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; color: var(--text-muted); font-weight: 600; font-size: 0.85rem; background: var(--surface-2); border: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .back-link:hover { background: var(--accent-soft); color: var(--accent); } .user-chip { display: flex; align-items: center; gap: 10px; } a.user-chip-link { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 999px; transition: background 0.15s; } a.user-chip-link:hover { background: var(--surface-2); } /* Базовий вигляд аватара користувача (емодзі або фото) — завжди круглий, де б не використовувався клас .avatar (шапка, чат, сім'я, фінанси, побажання, "хто дивиться"): конкретні місця нижче задають лише розмір/шрифт, а форму, обрізання фото по колу та тло під емодзі — це правило. */ .avatar { border-radius: 50%; overflow: hidden; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .user-chip .avatar { width: 34px; height: 34px; font-size: 1.05rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .user-chip .name { font-weight: 600; font-size: 0.9rem; } .user-chip .role { font-size: 0.75rem; color: var(--text-muted); } .btn-logout { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; cursor: pointer; color: var(--text-muted); } .btn-logout:hover { color: var(--danger); border-color: var(--danger); } /* --- Дзвіночок сповіщень у шапці --- */ .notif-wrap { position: relative; } .notif-bell { position: relative; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; width: 36px; height: 36px; font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .notif-bell:hover { color: var(--text); border-color: var(--accent); } /* Легке "дзеленькання" дзвіночка в момент, коли з'явилось нове сповіщення (разом зі звуком, js/api.js) — щоб було помітно, навіть якщо звук вимкнено або вкладка без звуку в системі. */ @keyframes notifBellRing { 0%, 100% { transform: rotate(0deg); } 15% { transform: rotate(-15deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } } .notif-bell.is-ringing { animation: notifBellRing 0.6s ease; } .notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.65rem; font-weight: 700; line-height: 16px; text-align: center; padding: 0 3px; box-shadow: 0 0 0 2px var(--surface); } /* На новій головній дзвіночок — як на макеті: без кружечка-підкладки й без кольорового емодзі, простий сірий обрис (у тон іконок бокового меню). Розмітка й JS спільні з рештою сайту (js/api.js), тож саму емодзі "🔔" не чіпаємо — лише знебарвлюємо її через filter, і ховаємо кружечок-підкладку, яка на решті сторінок лишається без змін. */ .page-home .notif-bell { background: transparent; border-color: transparent; } .page-home .notif-bell:hover { background: var(--surface-2); border-color: transparent; } .page-home .notif-bell img.emoji { filter: grayscale(1) contrast(0.75) brightness(0.75); opacity: 0.75; } .page-home .notif-bell:hover img.emoji { opacity: 1; } .notif-dropdown { /* position: fixed, а не absolute — JS рахує left/top у координатах вікна (getBoundingClientRect), щоб випадаюче вікно не виїжджало за край екрана на вузьких телефонах; ці top/right/width — лише запасний варіант, поки JS ще не виставив власні inline-стилі. */ position: fixed; top: calc(100% + 8px); right: 10px; width: 320px; max-width: 84vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(30,60,30,0.15); padding: 10px; z-index: 200; } .notif-dropdown-title { font-weight: 700; font-size: 0.85rem; padding: 4px 6px 8px; } .notif-empty { color: var(--text-muted); font-size: 0.85rem; padding: 10px 6px; text-align: center; } .notif-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: 10px; transition: background 0.15s; } .notif-item:hover { background: var(--surface-2); } .notif-item-icon { font-size: 1.2rem; flex-shrink: 0; } .notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .notif-item-title { font-weight: 700; font-size: 0.85rem; } .notif-item-text { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px; } h1 { font-size: 1.5rem; margin: 0 0 4px; } h2 { font-size: 1.1rem; margin: 0 0 12px; } .page-header { margin-bottom: 20px; } .page-header p { color: var(--text-muted); margin: 4px 0 0; } /* --- Карточки --- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; } /* На новій головній картки — в тон синьо-нафтової теми (--home-card-bg), а не оливкового --surface решти сайту; у світлій темі --home-card-bg дорівнює --surface, тож тут нічого візуально не міняється. */ .page-home .card { background: var(--home-card-bg); border-color: var(--home-border); } .grid { display: grid; gap: 18px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* Побажання — маленькі квадратні картки, а не на всю ширину картки-власника. auto-fit у .grid-3 розтягує єдину картку в рядку на всю ширину контейнера (саме тому фото виходило величезне, коли в людини лише 1-2 побажання) — auto-fill із фіксованим максимумом замість цього лишає картки компактними завжди, а зайве місце в рядку просто лишається порожнім. */ .wish-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 170px)); } .section-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; transition: transform 0.15s, box-shadow 0.15s; } /* :hover лише на пристроях зі "справжнім" наведенням (миша) — на дотикових екранах (телефон/планшет) CSS :hover все одно вмикається по тапу, і в деяких мобільних браузерах (особливо iOS Safari) перший тап по посиланню з :hover-ефектом лише "показує" це наведення, а сам перехід на сторінку відбувається тільки з другого тапу (або з помітною затримкою) — саме це й виглядає як "сторінка не відразу відкривається". На тач-пристроях цей блок просто не застосовується, і тап одразу переходить за посиланням. */ @media (hover: hover) and (pointer: fine) { .section-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,60,30,0.12); } } .section-card .emoji { font-size: 1.8rem; } .section-card h3 { margin: 0; font-size: 1.05rem; } .section-card p { margin: 0; color: var(--text-muted); font-size: 0.88rem; } .emoji-badge { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } /* Пастельні фони бейджів підібрано пипеткою з макета Артема (світло- блакитний/рожевий/персиковий/зелений) — кольорова гама самого сайту. */ .emoji-badge.blue { background: var(--badge-blue); } .emoji-badge.pink { background: var(--badge-pink); } .emoji-badge.yellow { background: var(--badge-yellow); } .emoji-badge.green { background: var(--badge-green); } .emoji-badge.teal { background: var(--badge-teal); } .emoji-badge.rose { background: var(--badge-rose); } .emoji-badge.purple { background: var(--badge-purple); } /* Заголовки карток з емодзі-іконкою (нова головна) — іконка й текст в один рядок, з однаковим відступом і вирівнюванням по центру. */ .card-heading { display: flex; align-items: center; gap: 8px; } /* --- Головна: привітальна картка --- Фірмовий зелено-бірюзовий градієнт (ті самі --accent/--accent-2, що й решта кнопок/акцентів сайту), який праворуч, під ілюстрацією будиночка, плавно розчиняється у фоні сторінки (var(--home-bg)) — як на макеті: немає різкого краю картки, зелений просто "тане" у білому. Текст на градієнті — білий/напівпрозорий білий, а не змінні теми (var(--text) розрахований на світлу підкладку картки, тут підкладка сама кольорова). Градієнт не залежить від теми (той самий вигляд і в темному режимі — картка навмисно лишається яскравою плямою на темному фоні; лише останній стоп — var(--home-bg) — сам підлаштовується під тему). */ .hero-card { background: linear-gradient(100deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 58%, var(--hero-fade) 130%); border: none; color: #fff; border-radius: var(--radius); padding: 24px 26px; margin-bottom: 22px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .hero-card h1 { margin: 0 0 4px; color: #fff; display: flex; align-items: center; gap: 8px; } .hero-card p { margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 0.92rem; } .hero-card-text { flex: 1; min-width: 220px; } .hero-illustration { width: 300px; max-width: 48%; /* aspect-ratio (а не фіксований height) — денна й нічна ілюстрації мають трохи різні пропорції (300×195 і 300×168), і якщо висоту рахувати від власних пропорцій кожної картинки, то картка (а разом з нею — й усе, що нижче) при перемиканні теми "стрибала" б у розмірі. object-fit: contain вписує будь-яку з двох картинок у той самий бокс без спотворення. Саме aspect-ratio, а не фіксований px — щоб бокс пропорційно зменшувався по висоті й на вузьких екранах, де ширина обмежена max-width: 48% (з фіксованою висотою там лишалось би багато порожнього місця під картинкою). */ aspect-ratio: 300 / 195; height: auto; object-fit: contain; flex-shrink: 0; display: block; /* Трохи більша й "виступає" за межі внутрішніх відступів картки — ближче до макета, де будиночок значно більший і майже впирається у правий/нижній край. */ margin: -10px -8px -10px 0; filter: var(--hero-img-filter, none); } /* Дві версії ілюстрації — денна й нічна (окреме зображення, намальоване спеціально під темну тему) — лежать в розмітці одразу обидві, а CSS показує лише одну залежно від активної теми: денну за замовчуванням, нічну коли тема темна (як системна, так і явно обрана в Налаштуваннях — обидва місця нижче за тим самим принципом, що й решта змінних home- та hero- вище). */ .hero-illustration-night { display: none; } /* --- Головна: бокове меню (лише десктоп) --- На телефоні/планшеті .home-sidebar лишається прихованим, і .home-layout/ .home-content — звичайна вертикальна колонка (шапка/main/footer), тобто структурно й візуально так само, як і раніше. Ширший екран вмикає бокове меню й перемикає .home-layout у рядок — медіа-запит нижче. */ .home-sidebar { display: none; } .home-layout { display: flex; flex-direction: column; flex: 1; min-width: 0; } .home-content { display: flex; flex-direction: column; flex: 1; min-width: 0; } /* Головна з боковим меню — майже білий, нейтральний фон замість зеленуватого радіального градієнта решти сайту (ближче до макета). Обмежено класом .page-home, тож усі інші сторінки лишаються з фірмовим фоном без змін. */ .page-home.app-shell { background: var(--home-bg); } @media (min-width: 960px) { .page-home .home-layout { flex-direction: row; align-items: flex-start; } .page-home .home-sidebar { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; min-height: 100vh; position: sticky; top: 0; background: var(--home-bg); border-right: 1px solid var(--home-border); padding: 20px 14px; gap: 4px; } .page-home .home-content { flex: 1; min-width: 0; } /* Бренд і так є нагорі бокового меню — у шапці справа лишаємо лише дзвіночок/профіль/вихід, а сама шапка зливається з фоном сторінки. .topbar-left приховано, тож у флекс-рядку лишається один елемент — без justify-content:flex-end (успадкований space-between притискає єдину дитину до старту, тобто вліво) .topbar-right "прилипав" до лівого краю замість правого. */ .page-home .topbar { background: transparent; border-bottom: none; box-shadow: none; padding: 20px 32px 0; position: static; justify-content: flex-end; } .page-home .topbar-left { display: none; } } .home-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; padding: 8px 12px 18px; } .home-brand .icon { font-size: 1.35rem; } .home-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 0.92rem; color: var(--text-muted); transition: background 0.15s, color 0.15s; } .home-nav-item:hover { background: var(--surface-2); color: var(--text); } /* Активний пункт — нейтральна світло-сіра "пігулка" (як на макеті), а не зелена: колір бренду тут не задіяний, лишень легке виділення поточної сторінки на фоні решти пунктів меню. */ .home-nav-item.active { background: var(--home-nav-active-bg); color: var(--text); } .home-nav-item .icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; } /* Перемикач теми в сайдбарі — лише на десктопі (сам сайдбар прихований на телефоні/планшеті, тож окремого медіа-запиту не потрібно). Клік одразу міняє data-theme на (плавний перехід кольорів — див. transition нижче, у секції "Анімація перемикання теми") і зберігає вибір на сервері (js/api.js, initThemeToggle) — той самий підхід, що на Налаштуваннях. */ .theme-toggle-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border: none; border-top: 1px solid var(--home-border); background: transparent; color: var(--text-muted); font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; border-radius: 0; text-align: left; } .theme-toggle-btn:hover { background: var(--surface-2); color: var(--text); border-radius: 10px; } .theme-toggle-icon { display: none; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; } .theme-toggle-icon.is-active { display: flex; } .theme-toggle-icon svg { display: block; } .theme-toggle-label { flex: 1; } /* Коротка анімація іконки самого перемикача під час кліку (окремо від плавного переходу кольорів сайту нижче) — обертання+пульс, клас додається/знімається в JS. */ @keyframes themeToggleSpin { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 45% { transform: rotate(160deg) scale(0.65); opacity: 0.35; } 100% { transform: rotate(360deg) scale(1); opacity: 1; } } .theme-toggle-btn.is-spinning .theme-toggle-icon.is-active svg { animation: themeToggleSpin 0.5s ease; } /* --- Формы --- */ label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.94rem; color: var(--text); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); } /* Чекбокси/радіо не мають розтягуватись у флекс-рядках (інакше сусідній текст стискається до колонки в один символ завширшки). */ input[type="checkbox"], input[type="radio"] { width: auto; flex: 0 0 auto; accent-color: var(--accent); } .field { margin-bottom: 12px; } .field-row { display: flex; gap: 10px; } .field-row .field { flex: 1; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: opacity 0.15s; } .btn:hover { opacity: 0.9; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-danger { background: var(--danger); } .btn-sm { padding: 5px 10px; font-size: 0.78rem; } .error-msg { background: var(--danger-soft-bg); color: var(--danger); border: 1px solid var(--danger-soft-border); padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 12px; } .success-msg { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 12px; } .hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 4px; } /* --- Налаштування: перемикач теми --- */ .theme-picker { display: flex; gap: 8px; flex-wrap: wrap; } .theme-option { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 0.88rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; } .theme-option:hover { border-color: var(--accent); } .theme-option.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* --- Заметки --- */ .notes-list { display: flex; flex-direction: column; gap: 8px; } .note-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--note-bg); border: 1px solid var(--note-border); /* Ці кольорові картки (нотатки й події з календаря на головній) — завжди "паперові": пастельний фон з контрастним текстом, як звичайна кольорова нотатка на столі. Колір сам по собі несе сенс (жовта/синя/зелена/рожева) — у світлій темі це яскравий папір із темним текстом, у темній (--note-* перевизначені вище в обох темних блоках) — приглушений темний папір зі світлим текстом, інакше в темній темі яскраво-білі "папірці" різали б око на майже чорному фоні картки. */ color: var(--note-text); } .note-item.color-blue { background: var(--note-blue-bg); border-color: var(--note-blue-border); } .note-item.color-green { background: var(--note-green-bg); border-color: var(--note-green-border); } .note-item.color-pink { background: var(--note-pink-bg); border-color: var(--note-pink-border); } .note-item.done { opacity: 0.55; text-decoration: line-through; } .note-item .note-check { margin-top: 3px; } .note-item .note-text { flex: 1; min-width: 0; font-size: 0.92rem; word-break: break-word; } .note-item .note-meta { font-size: 0.72rem; color: var(--note-text); opacity: 0.65; margin-top: 2px; } .note-item .icon-btn { color: var(--note-text); opacity: 0.55; } .note-item .icon-btn:hover { color: var(--danger); opacity: 1; } .icon-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 0.95rem; line-height: 1; padding: 2px 4px; } .icon-btn:hover { color: var(--danger); } /* --- Список семьи --- */ .family-list { display: flex; flex-direction: column; gap: 10px; } .family-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } .family-item .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; } .family-item .info { flex: 1; min-width: 0; } .family-item .info .name { font-weight: 700; } .family-item .info .meta { font-size: 0.78rem; color: var(--text-muted); } /* Рядок послуги в модалці "Тарифи та послуги" (Комуналка) — окремо від .family-item (та сама картка-рядок, але зі своїм compact-набором полів для назви/одиниці/тарифу, тож верстка інша: поля колонкою, кнопки "Зберегти"/видалити — окремим рядком знизу, а не втиснуті збоку). */ .util-type-row { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .util-type-fields { display: flex; flex-direction: column; gap: 8px; } .util-type-fields .field { margin-bottom: 0; } .util-type-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .util-type-actions .icon-btn { font-size: 1.1rem; } .util-type-info .name { font-weight: 700; } .util-type-info .meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; } /* --- Редагування аватара (у модалці профілю) --- */ .avatar-edit-row { display: flex; align-items: center; gap: 14px; } .avatar-lg { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 1.9rem; flex-shrink: 0; overflow: hidden; } .avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-lg.square { border-radius: 10px; } .avatar-edit-actions { display: flex; flex-direction: column; gap: 6px; } /* --- Квадратна мініатюра фото (побажання) --- */ .wish-thumb { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wish-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .wish-thumb .placeholder-icon { font-size: 2.4rem; opacity: 0.45; } /* --- Ремонт: вибір фото чека у формі витрати --- */ .receipt-picker { display: flex; gap: 12px; align-items: flex-start; } .receipt-preview { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; } .receipt-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Поле "Сума" стає readonly, коли підставлене автоматично з деталей покупки (позицій) — трохи притлумлюємо його, щоб було видно, що значення не для ручного редагування, поки деталі не прибрані. */ input[readonly] { opacity: 0.72; cursor: not-allowed; } /* Мініатюра фото чека в списку витрат — та сама механіка, що й .receipt-preview, лише менша й клікабельна (відкриває .photo-modal). */ .receipt-thumb { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; flex-shrink: 0; cursor: pointer; border: 1px solid var(--border); } .receipt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Компактна картка побажання (150-170px) — трохи менше внутрішніх відступів, щоб лишити більше місця тексту й кнопкам, і кнопки на всю ширину (замість inline), щоб короткий підпис не намагався влізти в один рядок поруч із зайвим полем. */ .wish-card { padding: 14px; gap: 6px; } .wish-card .btn { width: 100%; justify-content: center; } /* Немодальний статус-напис замість disabled-кнопки ("Заброньовано: Ім'я", "Вже подаровано" тощо) — коротший і не виглядає як нежива кнопка, яку намагаються натиснути. */ .wish-status { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.76rem; font-weight: 600; text-align: center; line-height: 1.3; } /* Другорядна дія під основною кнопкою (скасувати бронь / скасувати позначку "подаровано") — текстове посилання, а не друга повноцінна кнопка, щоб на вузькій картці не було тісно. */ .wish-text-link { display: block; width: 100%; margin-top: 6px; padding: 2px; background: none; border: none; color: var(--text-muted); font-size: 0.72rem; text-decoration: underline; text-align: center; cursor: pointer; } .wish-text-link:hover { color: var(--danger); } /* Подароване побажання — картка притлумлена й неактивна на вигляд (сіра), з написом у .wish-status вище; серед подарунків для того ж власника вона більше не привертає уваги. */ .wish-card.is-given { opacity: 0.55; filter: grayscale(60%); } .wish-card.is-given:hover { transform: none; box-shadow: var(--shadow); } /* --- Календарь --- */ .cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .cal-title-wrap { position: relative; min-width: 180px; } /* Назва місяця/року — справжня