/* ========================================================== Zmienne motywu (jasny / ciemny) - przelaczane przez [data-theme] na elemencie , patrz app.js setTheme() ========================================================== */ :root, [data-theme="light"] { --color-bg: #f4f6f9; --color-surface: #ffffff; --color-surface-alt: #f7f8fa; --color-border: #e4e7ec; --color-text: #1a1d23; --color-text-muted: #6b7280; --color-text-faint: #9aa1ac; --color-primary: #4287f5; --color-primary-hover: #326fdb; --color-primary-bg: #eaf1ff; --color-danger: #e0433d; --color-danger-bg: #fdeceb; --color-holiday: #e0433d; --color-holiday-bg: #fdf1f0; --color-success: #1a6b1a; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; } [data-theme="dark"] { --color-bg: #14161a; --color-surface: #1e2126; --color-surface-alt: #24272e; --color-border: #6e7580; --color-text: #edeef0; --color-text-muted: #9aa1ac; --color-text-faint: #6b7280; --color-primary: #5b9bff; --color-primary-hover: #7bacff; --color-primary-bg: #1e2e4d; --color-danger: #f0655f; --color-danger-bg: #3a2224; --color-holiday: #f0655f; --color-holiday-bg: #2e2022; --color-success: #4ade80; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45); } /* ========================================================== */ * { box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif; margin: 0; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; transition: background 0.2s ease, color 0.2s ease; } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.01em; } button, input, select, textarea { font-family: inherit; color: inherit; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 1.15rem; margin: 0; } .current-date { font-size: 0.8rem; color: var(--color-text-muted); margin-right: auto; text-transform: capitalize; } .view-switch { display: flex; gap: 0.35rem; flex-wrap: wrap; } .view-switch button { position: relative; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.15s ease; } .view-switch button:hover { border-color: var(--color-primary); color: var(--color-primary); } .view-switch button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .nav-badge { position: absolute; top: -4px; right: -4px; background: var(--color-danger); color: #fff; font-size: 0.65rem; font-weight: 700; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1; } .cell.selected-day { box-shadow: inset 0 0 0 2px var(--color-primary); } .btn-primary { background: var(--color-primary); color: #fff; border: none; padding: 0.55rem 1.1rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background 0.15s ease; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid transparent; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: all 0.15s ease; } .btn-danger:hover { border-color: var(--color-danger); } /* ---------- Nawigacja miesiac/tydzien/dzien ---------- */ .month-nav, .week-nav, .day-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.85rem; font-size: 1rem; font-weight: 600; text-transform: capitalize; } .month-nav button, .week-nav button, .day-nav button { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); padding: 0.35rem 0.75rem; cursor: pointer; transition: all 0.15s ease; } .month-nav button:hover, .week-nav button:hover, .day-nav button:hover { border-color: var(--color-primary); color: var(--color-primary); } .nav-title-btn { background: none; border: none; font: inherit; font-weight: 600; color: var(--color-text); cursor: pointer; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); text-transform: capitalize; } .nav-title-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); } .nav-picker { display: flex; gap: 0.5rem; justify-content: center; padding: 0 1rem 0.75rem; } .custom-dropdown-list { display: flex; flex-direction: column; max-height: 200px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); min-width: 110px; padding: 4px; } .dropdown-option { background: none; border: none; text-align: left; padding: 0.4rem 0.6rem; font: inherit; color: var(--color-text); cursor: pointer; border-radius: 4px; white-space: nowrap; } .dropdown-option:hover { background: var(--color-primary-bg); } .dropdown-option.selected { background: var(--color-primary); color: #fff; font-weight: 600; } .nav-picker-date { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .nav-picker-date.visible { position: static; opacity: 1; width: auto; height: auto; pointer-events: auto; display: block; margin: 0 auto 0.75rem; } /* ---------- Widok miesiaca ---------- */ .month-grid { display: grid; grid-template-columns: repeat(7, var(--tile-size, 100px)); gap: 6px; padding: 0 1rem 1rem; overflow-x: auto; } .dow { font-weight: 600; text-align: center; padding: 4px; font-size: 0.78rem; color: var(--color-text-muted); } .cell { background: var(--color-surface); border-radius: var(--radius-sm); aspect-ratio: 1; min-height: var(--tile-size, 100px); max-width: var(--tile-size, 100px); overflow: hidden; padding: 0; border: 1px solid var(--tile-border-color, var(--color-border)); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; box-sizing: border-box; display: block; width: 100%; text-align: left; font: inherit; color: inherit; position: relative; } .cell:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Pozycjonowanie elementow wewnatrz kafelka - sterowane atrybutami data-*-pos i klasami hide-tile-* na dowolnym przodku (zwykle dla prawdziwego kalendarza, albo kontener podgladu w Ustawieniach - patrz js/tile-config.js i panel "Kafelek miesiaca"). */ .cell-date, .cell-count, .holiday-label, .cell-important { position: absolute; margin: 0; white-space: nowrap; } .cell-date { font-size: var(--tile-date-font, 13px); color: var(--color-text-muted); font-weight: 500; } .cell.today .cell-date { color: var(--color-primary); font-weight: 700; } .cell.holiday .cell-date, .cell.sunday .cell-date { color: var(--color-holiday); font-weight: 700; } .cell-count { font-size: var(--tile-count-font, 22px); font-weight: 700; color: var(--color-primary); line-height: 1; } .holiday-label { font-size: var(--tile-holiday-font, 10px); color: var(--color-holiday); font-style: italic; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; } .cell-important { font-size: var(--tile-important-font, 11px); color: var(--color-danger); font-weight: 700; } .hide-tile-date .cell-date { display: none; } .hide-tile-count .cell-count { display: none; } .hide-tile-holiday .holiday-label { display: none; } .hide-tile-important .cell-important { display: none; } /* Zestaw pozycji dla kazdego elementu - powielony per element, bo CSS nie ma mixinow */ [data-date-pos="top-left"] .cell-date { top: 6px; left: 6px; } [data-date-pos="top-center"] .cell-date { top: 6px; left: 50%; transform: translateX(-50%); } [data-date-pos="top-right"] .cell-date { top: 6px; right: 6px; } [data-date-pos="center"] .cell-date { top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-date-pos="bottom-left"] .cell-date { bottom: 6px; left: 6px; } [data-date-pos="bottom-center"] .cell-date { bottom: 6px; left: 50%; transform: translateX(-50%); } [data-date-pos="bottom-right"] .cell-date { bottom: 6px; right: 6px; } [data-count-pos="top-left"] .cell-count { top: 6px; left: 6px; } [data-count-pos="top-center"] .cell-count { top: 6px; left: 50%; transform: translateX(-50%); } [data-count-pos="top-right"] .cell-count { top: 6px; right: 6px; } [data-count-pos="center"] .cell-count { top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-count-pos="center-lower"] .cell-count { top: 65%; left: 50%; transform: translate(-50%, -50%); } [data-count-pos="bottom-left"] .cell-count { bottom: 6px; left: 6px; } [data-count-pos="bottom-center"] .cell-count { bottom: 6px; left: 50%; transform: translateX(-50%); } [data-count-pos="bottom-right"] .cell-count { bottom: 6px; right: 6px; } [data-holiday-pos="top-left"] .holiday-label { top: 6px; left: 6px; } [data-holiday-pos="top-center"] .holiday-label { top: 6px; left: 50%; transform: translateX(-50%); text-align: center; } [data-holiday-pos="top-right"] .holiday-label { top: 6px; right: 6px; } [data-holiday-pos="bottom-left"] .holiday-label { bottom: 6px; left: 6px; } [data-holiday-pos="bottom-center"] .holiday-label { bottom: 6px; left: 50%; transform: translateX(-50%); text-align: center; } [data-holiday-pos="bottom-right"] .holiday-label { bottom: 6px; right: 6px; } [data-important-pos="top-left"] .cell-important { top: 6px; left: 6px; } [data-important-pos="top-center"] .cell-important { top: 6px; left: 50%; transform: translateX(-50%); } [data-important-pos="top-right"] .cell-important { top: 6px; right: 6px; } [data-important-pos="center"] .cell-important { top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-important-pos="bottom-left"] .cell-important { bottom: 6px; left: 6px; } [data-important-pos="bottom-center"] .cell-important { bottom: 6px; left: 50%; transform: translateX(-50%); } [data-important-pos="bottom-right"] .cell-important { bottom: 6px; right: 6px; } .cell:hover { background: var(--color-primary-bg); border-color: var(--color-primary); } .cell.empty { background: transparent; border: none; cursor: default; } .cell.empty:hover { background: transparent; border-color: transparent; } .cell.today { border: 2px solid var(--color-primary); } .cell.holiday, .cell.sunday { background: var(--color-holiday-bg); } .event-chip { color: #fff; border-radius: 4px; padding: 3px 6px; margin-bottom: 2px; overflow: hidden; cursor: pointer; transition: transform 0.1s ease; } .event-chip:hover { transform: scale(1.02); } .event-chip-title { display: block; font-size: 0.75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-chip-desc { display: block; font-size: 0.65rem; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maps-key-details { margin-top: 0.5rem; } .maps-key-details summary { cursor: pointer; font-size: 0.8rem; color: var(--color-primary); padding: 0.3rem 0; } .maps-key-details > p, .maps-key-details > .coord-row { margin-top: 0.5rem; } .store-category-checks { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } .store-category-checks .checkbox-row { display: flex; align-items: center; width: auto; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.35rem 0.75rem 0.35rem 0.55rem; margin: 0; } .store-category-checks .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin: 0; } .store-category-checks .checkbox-row:has(input:checked) { background: var(--color-primary-bg); border-color: var(--color-primary); } .checkbox-row { display: grid; grid-template-columns: 18px 1fr; align-items: start; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } .checkbox-row input { width: 16px; height: 16px; margin: 2px 0 0; } .event-flags-group { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding: 0.7rem 0.8rem; background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .toggle-flag-btn { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 0; min-width: 0; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.5rem; font: inherit; font-size: 0.85rem; color: var(--color-text); cursor: pointer; text-align: center; transition: all 0.15s ease; } .toggle-flag-btn:hover { border-color: var(--color-primary); } .toggle-flag-indicator { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border: 2px solid var(--color-text-faint); border-radius: 4px; position: relative; box-sizing: border-box; } .toggle-flag-btn.active { border-color: var(--color-primary); background: var(--color-primary-bg); } .toggle-flag-btn.active .toggle-flag-indicator { background: var(--color-primary); border-color: var(--color-primary); } .toggle-flag-btn.active .toggle-flag-indicator::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; line-height: 1; font-weight: 700; } .range-row { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.75rem; } .range-row input[type="range"] { width: 100%; accent-color: var(--color-primary); } .range-row output { font-weight: 600; color: var(--color-text); } .tile-config-details summary { cursor: pointer; list-style: none; margin-bottom: 0.5rem; } .tile-config-details summary::-webkit-details-marker { display: none; } .tile-config-details summary::before { content: '▸ '; color: var(--color-text-muted); } .tile-config-details[open] summary::before { content: '▾ '; } .tile-preview-wrap { background: var(--color-surface-alt); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; display: flex; justify-content: center; } .tile-preview-grid { grid-template-columns: repeat(2, auto); gap: 10px; padding: 0; } #tileConfigSavedMsg { color: var(--color-success); font-size: 0.85rem; font-weight: 600; align-self: center; } .diagnostics-list { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.8rem; } .diagnostics-list li { padding: 3px 0; } .diag-ok { color: var(--color-success); } .diag-fail { color: var(--color-danger); font-weight: 600; } .app-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); background: var(--color-text); color: var(--color-bg); padding: 0.7rem 1.3rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-md); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; z-index: 500; pointer-events: none; } .reminder-offset-group { margin-bottom: 0.7rem; } .feed-url-row { display: flex; gap: 0.5rem; margin: 0.5rem 0; } .feed-url-row input { flex: 1; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-alt); color: var(--color-text-muted); font-size: 0.78rem; font-family: monospace; } .reminder-offset-label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.35rem; } .reminder-offset-inputs { display: flex; gap: 0.6rem; } .reminder-offset-inputs label { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.75rem; color: var(--color-text-muted); text-align: center; } .reminder-offset-inputs input { width: 100%; box-sizing: border-box; padding: 0.55rem 0.4rem; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 1rem; } .app-toast.visible { opacity: 1; transform: translate(-50%, 0); } .fullscreen-alert { position: fixed; inset: 0; background: rgba(20, 20, 25, 0.96); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; animation: fullscreen-alert-flash 0.6s ease-in-out 3; } @keyframes fullscreen-alert-flash { 0%, 100% { background: rgba(20, 20, 25, 0.96); } 50% { background: rgba(66, 135, 245, 0.85); } } .fullscreen-alert-content { text-align: center; color: #fff; max-width: 420px; } .fullscreen-alert-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.3; } .fullscreen-alert-body { font-size: 1.05rem; margin-bottom: 2rem; opacity: 0.9; line-height: 1.5; } .fullscreen-alert-actions { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; } .fullscreen-alert-actions button { font-size: 1.1rem; padding: 0.9rem 2.2rem; } .location-panel { padding: 1rem; } .location-desc { font-size: 0.75rem; } .location-list { list-style: none; padding: 0; margin: 0.75rem 0 1rem; } .location-list li { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.4rem; } .location-time { margin-left: auto; color: var(--color-text-muted); font-size: 0.75rem; } .location-map-container { width: 100%; height: 360px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } .location-auto-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.8rem; } .location-auto-row select { padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: 0.8rem; } /* Kolorowa "pinezka" na mapie - ksztalt teardrop w kolorze przypisanym danej osobie */ .location-pin { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); } .location-history-heading { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; } .location-history-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden; } .location-history-table th, .location-history-table td { padding: 0.5rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-border); } .location-history-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; } .location-history-table tr:last-child td { border-bottom: none; } .tile-config-subheading { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); margin: 1rem 0 0.5rem; border-top: 1px solid var(--color-border); padding-top: 0.75rem; } .tile-config-subheading:first-of-type { border-top: none; padding-top: 0; margin-top: 0.75rem; } /* ---------- Widok tygodnia (dni w stalej kolumnie, godziny przewijane osobno w bok) ---------- */ .week-number-badge { display: block; width: fit-content; margin: 0 auto 0.5rem; padding: 0.25rem 0.9rem; background: var(--color-primary-bg); color: var(--color-primary); font-weight: 600; font-size: 0.8rem; border-radius: 999px; text-align: center; } .week-h-wrap { display: flex; margin: 0 1rem 1rem; gap: 1px; background: var(--color-border); border-radius: var(--radius-sm); overflow: hidden; } /* Lewa kolumna z nazwami dni - NIE przewija sie, zawsze widoczna */ .week-h-fixed-col { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; } .week-h-corner { background: var(--color-surface-alt); height: 32px; } .week-h-daylabel { background: var(--color-surface-alt); border: none; text-align: left; padding: 6px 8px; font-size: 0.78rem; font-weight: 600; color: var(--color-text); cursor: pointer; display: flex; flex-direction: column; justify-content: center; text-transform: capitalize; font-family: inherit; white-space: nowrap; width: 100%; box-sizing: border-box; } .week-h-daylabel:hover { color: var(--color-primary); } .week-h-daylabel.today { color: var(--color-primary); } .week-h-daylabel.holiday, .week-h-daylabel.sunday { color: var(--color-holiday); } .week-h-holiday { font-size: 0.65rem; font-style: italic; font-weight: 400; white-space: normal; } /* Prawa czesc - TYLKO ta sie przewija w bok (godziny), niezaleznie od kolumny dni */ .week-h-scroll-col { overflow-x: auto; flex: 1; min-width: 0; } .week-h-scroll-inner { display: flex; flex-direction: column; gap: 1px; } .week-h-hourrow { display: flex; height: 32px; background: var(--color-surface-alt); } .week-h-hourlabel { flex-shrink: 0; text-align: center; font-size: 0.68rem; color: var(--color-text-faint); display: flex; align-items: center; justify-content: center; } .week-h-timeline { background: var(--color-surface); position: relative; cursor: pointer; background-image: repeating-linear-gradient(to right, var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent 70px); } .week-h-event { position: absolute; color: #fff; border-radius: 4px; height: 20px; line-height: 20px; padding: 0 6px; font-size: 0.72rem; overflow: hidden; white-space: nowrap; cursor: pointer; text-overflow: ellipsis; } .week-h-event-time { opacity: 0.85; font-size: 0.65rem; } .week-h-allday { position: absolute; left: 2px; right: 2px; color: #fff; border-radius: 4px; height: 18px; line-height: 18px; padding: 0 6px; font-size: 0.68rem; overflow: hidden; white-space: nowrap; cursor: pointer; text-overflow: ellipsis; } /* ---------- Widok dnia ---------- */ .day-view, .shopping-list { padding: 1rem; } .month-agenda { padding: 1rem; border-top: 2px solid var(--color-border); margin-top: 0.5rem; } .day-event { background: var(--color-surface); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 0.5rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease; font-size: var(--day-list-font-size, 13px); font-family: var(--day-list-font-family, inherit); } /* Futrzak - CELOWO oddzielna od .day-event (Miesiac), stale rozmiary, zeby konfiguracja czcionki Miesiaca (Ustawienia) nigdy nie wplywala na Futrzaka i odwrotnie */ .pet-day-event { background: var(--color-surface); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 0.5rem; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease; font-size: 0.9rem; } .pet-day-event:hover { box-shadow: var(--shadow-md); } .day-event:hover { box-shadow: var(--shadow-md); } /* ---------- Ikony / przyciski male ---------- */ .icon-btn { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); cursor: pointer; font-size: 1.1rem; width: 38px; height: 38px; line-height: 1; padding: 0; transition: all 0.15s ease; } .icon-btn:hover { border-color: var(--color-primary); } .icon-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } .icon-btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-size: 1.4rem; font-weight: 600; } .icon-btn-primary:hover { background: var(--color-primary-hover); } .btn-small { padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: var(--radius-sm); } .btn-icon { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0.25rem 0.4rem; border-radius: 4px; } .btn-icon:hover { background: var(--color-surface-alt); } /* ---------- Ustawienia ---------- */ .settings-panel { padding: 1rem; max-width: 480px; margin: 0 auto; } .settings-panel section { background: var(--color-surface); border-radius: var(--radius-md); padding: 1.1rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); } .settings-panel h3 { margin-top: 0; font-size: 0.95rem; } .color-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.85rem; } .color-picker-row input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; background: none; } .member-list, .store-list, .category-list { list-style: none; padding: 0; margin: 0 0 0.75rem; } .member-list li, .store-list li, .category-list li { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.1rem; font-size: 0.9rem; border-bottom: 1px solid var(--color-border); } .category-list li { justify-content: space-between; } .store-list li { justify-content: space-between; } .store-actions { display: flex; gap: 0.4rem; flex-shrink: 0; } .store-list-details { margin-bottom: 0.75rem; } .store-list-details summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.4rem 0; } .store-list-details .store-list { max-height: 260px; overflow-y: auto; margin-top: 0.4rem; } #storeFormTitle { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--color-primary); } .color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .member-email { color: var(--color-text-muted); font-size: 0.8rem; } .member-role { margin-left: auto; font-size: 0.72rem; color: var(--color-primary); background: var(--color-primary-bg); padding: 2px 9px; border-radius: 10px; font-weight: 500; } .event-author { color: var(--color-text-muted); font-size: 0.75rem; } .event-countdown { display: inline-block; margin-left: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--color-primary); background: var(--color-primary-bg); padding: 0.1rem 0.5rem; border-radius: 999px; } .inline-form { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .inline-form label { display: block; margin-bottom: 0.6rem; font-size: 0.85rem; color: var(--color-text-muted); } .inline-form input, .inline-form select { width: 100%; padding: 0.55rem; margin-top: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-sizing: border-box; background: var(--color-surface); color: var(--color-text); } .coord-row { display: flex; gap: 0.5rem; flex-wrap: nowrap; align-items: flex-end; } .coord-row label { flex: 1; min-width: 0; font-size: 0.8rem; } .coord-row input { min-width: 0; font-size: 0.85rem; padding: 0.45rem; } .coord-row button { flex-shrink: 0; white-space: nowrap; } #mapsMapContainer { width: 100%; height: 220px; border-radius: var(--radius-sm); margin: 0.5rem 0; border: 1px solid var(--color-border); } #mapsSearchWrap { margin-bottom: 0.75rem; } .search-row { display: flex; gap: 0.4rem; } .search-row input { flex: 1; } #mapsSearchResults { max-height: 160px; overflow-y: auto; } .map-search-result { padding: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-top: 4px; font-size: 0.8rem; cursor: pointer; transition: background 0.15s ease; } .map-search-result:hover { background: var(--color-primary-bg); } .map-source-note { font-size: 0.7rem; color: var(--color-text-faint); margin: 0.25rem 0 0; } #useMyLocationBtn { width: 100%; padding: 0.55rem; margin-bottom: 0.75rem; border: 1px dashed var(--color-primary); background: var(--color-primary-bg); color: var(--color-primary); border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: opacity 0.15s ease; } #useMyLocationBtn:hover { opacity: 0.85; } /* ---------- Lista zakupow ---------- */ .shopping-list ul { list-style: none; padding: 0; } .shopping-list li { background: var(--color-surface); padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border: 1px solid var(--color-border); } .shopping-list li.purchased label { text-decoration: line-through; color: var(--color-text-faint); } .shopping-list li label { display: flex; align-items: center; gap: 0.4rem; flex: 1; min-width: 0; } .item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-qty { color: var(--color-text-muted); font-size: 0.85rem; flex-shrink: 0; } .item-actions { display: flex; gap: 0.2rem; flex-shrink: 0; } .edit-item-form { display: flex; gap: 0.4rem; width: 100%; align-items: center; } .edit-item-form input { flex: 1; min-width: 0; padding: 0.45rem; font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); } .add-item-form { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } .add-item-form input[name="name"] { flex: 1 1 90px; min-width: 70px; padding: 0.5rem; } .add-item-form input[name="quantity"] { flex: 0 1 70px; min-width: 55px; padding: 0.5rem; } .add-item-form select { flex: 0 1 110px; min-width: 90px; } .add-item-form button[type="submit"] { flex-shrink: 0; } .add-item-form input, .add-item-form select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); padding: 0.55rem; } .shopping-list h3 { margin: 1.2rem 0 0.5rem; font-size: 0.95rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } /* ---------- Modal ---------- */ .modal { position: fixed; inset: 0; background: rgba(15, 17, 21, 0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; } .modal.hidden { display: none; } .modal-content { background: var(--color-surface); padding: 1.15rem; border-radius: var(--radius-lg); width: 100%; max-width: 400px; box-shadow: var(--shadow-md); max-height: 90vh; overflow-y: auto; } .modal-content h2 { margin-top: 0; font-size: 1.15rem; } .modal-content label { display: block; margin-bottom: 0.55rem; font-size: 0.85rem; color: var(--color-text-muted); } .modal-content input, .modal-content textarea, .modal-content select { width: 100%; padding: 0.45rem 0.55rem; margin-top: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); } .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus, .inline-form input:focus, .inline-form select:focus, .add-item-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); } input::placeholder, textarea::placeholder { color: var(--color-text-faint); opacity: 1; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; } .loading, .error { padding: 1rem; text-align: center; color: var(--color-text-muted); } .error { color: var(--color-danger); } .hidden { display: none !important; } /* ---------- Logowanie ---------- */ .login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 1rem; } .login-box { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-lg); width: 100%; max-width: 340px; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .login-box h1 { text-align: center; margin-top: 0; } .login-box label { display: block; margin-bottom: 1rem; font-size: 0.85rem; color: var(--color-text-muted); } .login-box input { width: 100%; padding: 0.65rem; margin-top: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-sizing: border-box; background: var(--color-surface); color: var(--color-text); } .login-box input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); } .login-box button { width: 100%; padding: 0.75rem; margin-top: 0.5rem; } .login-box .error { background: var(--color-danger-bg); padding: 0.5rem; border-radius: var(--radius-sm); margin-bottom: 1rem; text-align: left; } .holiday-banner { background: var(--color-holiday-bg); color: var(--color-holiday); padding: 0.65rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; font-weight: 600; } /* ---------- Responsywnosc ---------- */ @media (max-width: 480px) { .topbar { padding: 0.6rem 0.75rem; } .topbar h1 { display: none; } /* na waskim ekranie nawigacja jest wazniejsza niz tytul */ .current-date { display: none; } .view-switch button { padding: 0.4rem 0.6rem; font-size: 0.78rem; } .settings-panel { padding: 0.6rem; } } /* ---------- Ukryte funkcje (zostaja w kodzie, tylko niewidoczne w interfejsie) ---------- */ .hidden-feature { display: none !important; } /* ---------- Pusty stan - cieplejszy niz sam tekst ---------- */ .empty-state { display: flex; align-items: center; gap: 0.6rem; padding: 1.25rem 1rem; color: var(--color-text-muted); font-size: 0.9rem; background: var(--color-surface-alt); border-radius: var(--radius-sm); font-size: 1.3rem; } .empty-state span { font-size: 0.85rem; line-height: 1.4; } /* ---------- Kropki autorow w kafelku miesiaca - widac kolorem, czyje sa wydarzenia ---------- */ .cell-author-dots { position: absolute; display: flex; gap: 3px; } .cell-author-dot { width: var(--tile-author-dot-size, 6px); height: var(--tile-author-dot-size, 6px); border-radius: 50%; flex-shrink: 0; } .hide-tile-author-dots .cell-author-dots { display: none; } [data-author-dots-pos="top-left"] .cell-author-dots { top: 6px; left: 6px; } [data-author-dots-pos="top-center"] .cell-author-dots { top: 6px; left: 50%; transform: translateX(-50%); } [data-author-dots-pos="top-right"] .cell-author-dots { top: 6px; right: 6px; } [data-author-dots-pos="center"] .cell-author-dots { top: 50%; left: 50%; transform: translate(-50%, -50%); } [data-author-dots-pos="bottom-left"] .cell-author-dots { bottom: 4px; left: 6px; } [data-author-dots-pos="bottom-center"] .cell-author-dots { bottom: 4px; left: 50%; transform: translateX(-50%); } [data-author-dots-pos="bottom-right"] .cell-author-dots { bottom: 4px; right: 6px; } /* ---------- To Do ---------- */ .todo-panel { padding: 1rem; } .todo-list { list-style: none; padding: 0; margin: 1rem 0 0; } .todo-list li { display: flex; align-items: center; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin-bottom: 0.4rem; transition: opacity 0.2s ease; } .todo-list li label { display: flex; align-items: center; gap: 0.6rem; flex: 1; cursor: pointer; } .todo-list li.done { opacity: 0.55; } .todo-list li.done .todo-title { text-decoration: line-through; } .todo-date { font-size: 0.72rem; color: var(--color-text-muted); background: var(--color-surface-alt); padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } /* ---------- Szablony list zakupow ---------- */ .template-list { list-style: none; padding: 0; margin: 0.5rem 0; } .template-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; } .template-list li:last-child { border-bottom: none; } .template-count { color: var(--color-text-faint); font-size: 0.78rem; } /* ---------- Mikroanimacje - subtelne przejscia zamiast natychmiastowych skokow ---------- */ .month-agenda:not(.hidden) { animation: agenda-slide-in 0.25s ease; } @keyframes agenda-slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .modal:not(.hidden) .modal-content { animation: modal-pop-in 0.2s ease; } @keyframes modal-pop-in { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .cell { transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease, border-color 0.15s ease; } .cell:active { transform: scale(0.97); } .toggle-flag-indicator, .checkbox-row input { transition: all 0.15s ease; } .month-grid, .week-h-wrap { animation: view-fade-in 0.2s ease; } @keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } } .todo-list li, .shopping-list li { animation: view-fade-in 0.2s ease; } /* ---------- Wywoz smieci - stale w lewym dolnym rogu kafelka (nie podlega konfiguracji pozycji) ---------- */ .cell-waste-indicators { position: absolute; bottom: 4px; left: 4px; display: flex; gap: 2px; align-items: center; z-index: 1; } .cell-waste-badge { width: var(--waste-badge-size, 14px); height: var(--waste-badge-size, 14px); border-radius: 50%; color: #fff; font-size: calc(var(--waste-badge-size, 14px) * 0.62); font-weight: 800; line-height: var(--waste-badge-size, 14px); text-align: center; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); } .cell-waste-badge.waste-segregated { background: #2ea043; } .cell-waste-badge.waste-bio { background: #8b5a2b; } .cell-waste-badge.waste-mixed { background: #1a1a1a; } .cell-waste-badge.waste-bulky { background: #d68910; } /* ---------- Futrzak - legenda zwierzakow ---------- */ .pet-legend { display: flex; flex-wrap: nowrap; overflow-x: auto; justify-content: center; gap: 0.4rem; align-items: center; margin: 0.6rem 0 1rem; padding: 0.6rem 0.7rem; background: var(--color-surface-alt); border-radius: var(--radius-sm); border: 1px solid var(--color-border); position: relative; } .pet-legend-empty { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; } .pet-legend-chip { flex-shrink: 0; font-size: 0.82rem; font-weight: 600; white-space: nowrap; color: var(--color-text); background: var(--color-surface); padding: 0.3rem 0.65rem; border-radius: 6px; border: 2px solid; } .pet-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; background: var(--color-surface); padding: 0.25rem 0.5rem; border-radius: 999px; border: 1px solid var(--color-border); } .pet-legend-item .btn-icon { width: 22px; height: 22px; border: none; background: none; } .pet-form-overlay { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 0.75rem; } .pet-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-width: 240px; } .pet-form input[type="text"] { flex: 1 1 140px; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .pet-form input[type="color"] { width: 36px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* ---------- Kropki zwierzakow w kafelku Futrzaka - CELOWO niezalezne od ustawien "Kropki autorow" Miesiaca - zawsze widoczne, stala pozycja ---------- */ .cell-pet-dots { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; flex-wrap: nowrap; } .cell-pet-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ---------- Naglowek panelu dnia - X (zamkniecie) na lewej krawedzi, + (dodaj) na prawej ---------- */ .day-nav button.agenda-close-btn { margin-right: auto; background: var(--color-danger-bg); border-color: var(--color-danger); color: var(--color-danger); font-weight: 700; } .day-nav button.agenda-close-btn:hover { background: var(--color-danger); color: #fff; } .day-nav button.agenda-add-btn { margin-left: auto; background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-size: 1.3rem; font-weight: 700; } .day-nav button.agenda-add-btn:hover { background: var(--color-primary-hover); }