:root { --bg: #f5f6f8; --surface: #ffffff; --text: #1f2330; --muted: #6b7280; --border: #e3e5ea; --primary: #4f46e5; --primary-hover: #4338ca; --danger: #dc2626; --shadow: 0 12px 32px rgba(15, 23, 42, .14); --radius: 10px; } :root { color-scheme: light; } /* Ciemny motyw — włączany przełącznikiem (atrybut data-theme na ) */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14161b; --surface: #1d2027; --text: #e7e9ee; --muted: #9aa1ad; --border: #2d313a; --primary: #6d66f0; --primary-hover: #7f79f3; --danger: #ef4444; --shadow: 0 16px 40px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); } a { color: var(--primary); } .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; } /* Top bar */ .topbar { background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding-top: 8px; padding-bottom: 8px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .brand img { display: block; height: 30px; width: auto; } .brand .logo-dark, [data-theme="dark"] .brand .logo-light { display: none; } [data-theme="dark"] .brand .logo-dark { display: block; } .topbar-right { display: flex; align-items: center; gap: 12px; } .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--muted); } .theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } .brand span { font-weight: 600; font-size: 15px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); line-height: 1; } .topbar nav { display: flex; gap: 4px; } .topbar nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; } .topbar nav a:hover { color: var(--text); } .topbar nav a.active { background: var(--bg); color: var(--text); } main.container { padding-top: 32px; padding-bottom: 48px; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .page-head h1 { margin: 0; font-size: 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--muted); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .btn-ghost { background: transparent; } .btn-danger { color: var(--danger); } .btn-danger:hover { border-color: var(--danger); } .btn-sm { padding: 4px 10px; font-size: 13px; } form.inline { display: inline; } /* Flash */ .flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; border: 1px solid; } .flash-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } .flash-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } [data-theme="dark"] .flash-success { background: #0d2a20; border-color: #145c43; color: #86efac; } [data-theme="dark"] .flash-error { background: #2d1414; border-color: #7f1d1d; color: #fca5a5; } /* Filters */ .filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .filters input[type=search] { flex: 1 1 200px; } .filters-right { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; } .filters-right select { max-width: 260px; } @media (max-width: 600px) { .filters-right { margin-left: 0; width: 100%; } .filters-right select { flex: 1 1 140px; max-width: none; } } input[type=text], input[type=search], input[type=password], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .filters select { width: auto; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; } input[type=color] { width: 56px; height: 38px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } /* Cards */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-top: 4px solid var(--accent); padding: 16px; display: flex; flex-direction: column; } .card h2 { font-size: 17px; margin: 8px 0 4px; } .card .desc { color: var(--muted); margin: 0 0 12px; font-size: 14px; } .card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .card-actions { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .card-actions > span { display: flex; gap: 6px; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); } .dot-group { background: var(--group, var(--accent)); } .card h2 { display: flex; align-items: center; gap: 8px; } .swatch { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--accent); } /* Pole koloru projektu */ .color-field { display: flex; flex-direction: column; gap: 8px; } .field-label { font-weight: 500; font-size: 14px; } .form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; } .form label.check:has(input:disabled), .form label.check.is-disabled { opacity: .5; cursor: not-allowed; } /* Komponent wyboru koloru (HEX / RGB / RGBA) */ .color-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .color-picker.is-disabled { opacity: .5; } .color-picker.is-disabled * { cursor: not-allowed; } .cp-swatch { position: relative; flex: 0 0 auto; width: 40px; height: 38px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; background: conic-gradient(#ccc 25%, #fff 0 50%, #ccc 0 75%, #fff 0) 0 0 / 12px 12px; } .cp-swatch-fill { position: absolute; inset: 0; } .cp-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; } .form .cp-text { width: 190px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; } .cp-text.is-invalid { border-color: var(--danger); outline-color: var(--danger); } .cp-formats { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .cp-formats button { padding: 7px 10px; border: 0; background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .cp-formats button + button { border-left: 1px solid var(--border); } .cp-formats button[aria-pressed="true"] { background: var(--primary); color: #fff; } .form .cp-alpha { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; color: var(--muted); } .cp-alpha input { width: 110px; accent-color: var(--primary); } .cp-alpha output { min-width: 3.5em; font-variant-numeric: tabular-nums; } .count { font-size: 13px; color: var(--muted); text-decoration: none; } .count:hover { color: var(--primary); } .muted { color: var(--muted); } /* Praca */ .work-list { display: flex; flex-direction: column; gap: 12px; } .work-item { display: flex; gap: 16px; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid var(--accent); padding: 14px 16px; } .work-main { flex: 1; min-width: 0; } .work-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .tag-sub { opacity: .75; } .form input[type=date] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; } .work-desc { white-space: normal; overflow-wrap: anywhere; line-height: 1.55; } .work-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; } .work-price { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; } .work-actions { display: flex; gap: 6px; } .work-total { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 16px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; } .work-total strong { font-size: 18px; } .form textarea { resize: vertical; min-height: 120px; line-height: 1.5; } @media (max-width: 600px) { .work-item { flex-direction: column; } .work-side { flex-direction: row; align-items: center; } } /* Wybór zakresu dat */ .daterange { position: relative; } .dr-trigger { gap: 8px; } .dr-trigger .dr-icon { color: var(--muted); } .dr-trigger.is-active, .dr-trigger.is-active .dr-icon { color: var(--primary); border-color: var(--primary); } .dr-chevron { color: var(--muted); transition: transform .15s; } .daterange.is-open .dr-chevron { transform: rotate(180deg); } .dr-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .dr-panel[hidden] { display: none; } .dr-presets { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); min-width: 170px; } .dr-preset { width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; cursor: pointer; white-space: nowrap; } .dr-preset:hover { background: var(--bg); } .dr-preset.is-active { background: var(--primary); color: #fff; } .dr-main { display: flex; flex-direction: column; } .dr-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--primary); color: #fff; } .dr-titles { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .dr-title { text-align: center; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; } .dr-nav { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; cursor: pointer; } .dr-nav:hover { background: rgba(255, 255, 255, .15); } .dr-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 12px 16px 4px; } .dr-grid { display: grid; grid-template-columns: repeat(7, 38px); row-gap: 4px; } .dr-wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 0; text-transform: uppercase; } .dr-day { height: 34px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer; } .dr-day:hover { background: var(--bg); border-radius: 8px; } .dr-day.is-out { color: var(--muted); opacity: .5; } .dr-day.is-today { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* pasek zakresu: zaokrąglony na początku/końcu zakresu i na brzegach tygodnia */ .dr-day.in-range { background: color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 0; } .dr-day.in-range.is-out { opacity: .6; } .dr-grid .dr-day.in-range:nth-child(7n + 1) { border-radius: 17px 0 0 17px; } .dr-grid .dr-day.in-range:nth-child(7n) { border-radius: 0 17px 17px 0; } .dr-day.is-start, .dr-day.is-end { background: var(--primary); color: #fff; opacity: 1; } .dr-grid .dr-day.is-start { border-radius: 17px 0 0 17px; } .dr-grid .dr-day.is-end { border-radius: 0 17px 17px 0; } .dr-grid .dr-day.is-start.is-end { border-radius: 17px; } .dr-day.is-preview.in-range:not(.is-start):not(.is-end) { background: color-mix(in srgb, var(--primary) 18%, transparent); } .dr-foot { display: flex; align-items: center; gap: 16px; padding: 12px 16px 16px; border-top: 1px solid var(--border); margin-top: 8px; } .dr-field { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .dr-field input { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .dr-apply { margin-left: auto; } .dr-apply:disabled { opacity: .5; cursor: not-allowed; } @media (max-width: 820px) { .dr-panel { flex-direction: column; width: calc(100vw - 32px); max-width: 360px; } .dr-presets { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); min-width: 0; } .dr-presets li { flex: 0 0 auto; } .dr-preset { padding: 6px 10px; font-size: 13px; } .dr-titles, .dr-months { grid-template-columns: 1fr; } .dr-title:nth-child(2), .dr-month:nth-child(2) { display: none; } .dr-grid { grid-template-columns: repeat(7, 1fr); } .dr-foot { flex-wrap: wrap; } } /* Licznik czasu */ .timer { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; } .timer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .timer-play { color: #16a34a; border-color: color-mix(in srgb, #16a34a 45%, var(--border)); } .timer-play:hover { background: #16a34a; color: #fff; border-color: #16a34a; } .timer-stop { background: var(--danger); border-color: var(--danger); color: #fff; } .timer-stop:hover { filter: brightness(1.1); } .timer-clock { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; } .card.is-timing { box-shadow: 0 0 0 2px var(--accent); } /* Trwające pomiary w nagłówku, obok logo */ .topbar-timers { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .timer-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); color: var(--text); text-decoration: none; font-size: 13px; white-space: nowrap; } a.timer-chip { padding-right: 12px; } a.timer-chip:hover { border-color: var(--danger); } .timer-chip-name { font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; } .timer-chip .timer-clock { font-size: 14px; } .timer-chip .timer-pulse { width: 8px; height: 8px; } .timer-compact { margin: 0; gap: 8px; } .timer-compact .timer-clock { font-size: 14px; } .timer-compact .timer-btn { padding: 4px 6px; } .timer-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: timer-pulse 1.4s ease-in-out infinite; } @keyframes timer-pulse { 50% { opacity: .35; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .timer-pulse { animation: none; } } .page-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .btn-timer { color: #16a34a; border-color: color-mix(in srgb, #16a34a 45%, var(--border)); } .btn-timer:hover { background: #16a34a; color: #fff; border-color: #16a34a; } .work-running { margin-bottom: 20px; } .work-item.is-timing { box-shadow: 0 0 0 1px var(--accent); } .work-item.is-timing .work-meta { gap: 8px; } .timer-live { --accent: var(--primary); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--bg); } .timer-live-clock { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .timer-live-price { font-size: 18px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } .timer-live-start { margin-left: auto; } .timer-actions { align-items: center; gap: 8px; } .timer-actions small { margin-right: auto; } .timer-actions .btn-primary { gap: 8px; } .work-duration { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; font-weight: 600; } .form .duration-input { width: 130px; font-variant-numeric: tabular-nums; } .duration-input.is-invalid { border-color: var(--danger); } /* Przełącznik (włącz/wyłącz) */ .form label.switch { position: relative; flex-direction: row; align-items: center; gap: 10px; cursor: pointer; width: fit-content; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--border); transition: background .15s; } .switch-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; } .switch input:checked + .switch-track { background: var(--primary); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; } .switch-label { font-weight: 500; font-size: 14px; } .rate-body { display: flex; flex-direction: column; gap: 8px; padding-left: 50px; } .rate-body[hidden] { display: none; } /* Stawka godzinowa */ .rate { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .rate small { font-weight: 400; color: var(--muted); } p.rate { margin: 0; font-size: 14px; } .rate-field { display: inline-flex; align-items: center; gap: 8px; } .form .rate-field input { width: 140px; text-align: right; font-variant-numeric: tabular-nums; } .rate-field input:disabled { opacity: .5; cursor: not-allowed; } .rate-field input:invalid { border-color: var(--danger); } .rate-unit { color: var(--muted); font-size: 14px; font-weight: 400; } .empty { text-align: center; padding: 48px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); } /* Forms */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .form { max-width: 680px; display: flex; flex-direction: column; gap: 16px; } .form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: 14px; } .form label small { font-weight: 400; } .row { display: flex; gap: 16px; } .row > label { flex: 1; } .row > label.shrink { flex: 0 0 auto; } .form-actions { display: flex; justify-content: flex-end; } @media (max-width: 600px) { .row { flex-direction: column; } .page-head h1 { font-size: 20px; } } @media (max-width: 700px) { /* na telefonie liczniki w osobnym rzędzie pod logo i menu */ .topbar-timers { order: 3; flex-basis: 100%; } } /* Logowanie */ .login-page { min-height: 100vh; display: grid; place-items: center; padding: 16px; } .login-box { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 16px; } .login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; } .login-brand img { height: 36px; } .login-brand .logo-dark, [data-theme="dark"] .login-brand .logo-light { display: none; } [data-theme="dark"] .login-brand .logo-dark { display: block; } .login-brand span { font-weight: 600; font-size: 18px; color: var(--muted); padding-left: 10px; border-left: 1px solid var(--border); } .login-form, .login-setup { max-width: none; } .login-form h1, .login-setup h1 { font-size: 20px; margin: 0; } .login-form p, .login-setup p { margin: 0; font-size: 14px; } .login-setup { display: flex; flex-direction: column; gap: 12px; } .hash-output { font-family: ui-monospace, Consolas, monospace; font-size: 12px; resize: none; }