/* ============================================================ Zan Personal Notes — design system & application styles Tokens first, components second. Light + dark themes via [data-theme] on (resolved from user choice / system). ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Layout */ --zn-sidebar-width: 264px; --zn-radius-sm: 8px; --zn-radius: 12px; --zn-radius-lg: 16px; --zn-radius-xl: 20px; /* Type scale */ --zn-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --zn-fs-xs: .75rem; --zn-fs-sm: .8125rem; --zn-fs-base: .9375rem; --zn-fs-md: 1rem; --zn-fs-lg: 1.25rem; --zn-fs-xl: 1.625rem; /* Light theme surfaces */ --zn-bg: #f4f5f9; --zn-surface: #ffffff; --zn-surface-2: #f8f9fc; --zn-border: #e4e6ee; --zn-border-strong: #d3d6e2; --zn-text: #1c1f26; --zn-text-2: #3d424d; --zn-muted: #5d6470; /* Zanpad brand: royal blue from the logo, yellow/orange accents */ --zn-primary: #2453cf; --zn-primary-hover: #1c42a8; --zn-primary-active: #163588; --zn-primary-soft: #e9eefc; --zn-primary-soft-text: #1c42a8; --zn-brand-navy: #1e2a5e; --zn-brand-yellow: #ffd94a; --zn-brand-orange: #f29a1f; --zn-danger: #b02a37; --zn-success: #14764a; --zn-focus: #1d2f8f; --zn-shadow-xs: 0 1px 2px rgba(23, 26, 38, .06); --zn-shadow: 0 1px 3px rgba(23, 26, 38, .07), 0 8px 24px rgba(23, 26, 38, .06); --zn-shadow-lg: 0 4px 12px rgba(23, 26, 38, .10), 0 16px 40px rgba(23, 26, 38, .12); /* Sticky note palette — muted, paper-like (light) */ --note-ink: #35322a; --note-ink-2: #55503f; --note-meta: #5b564a; --note-yellow: #f6eeb4; --note-yellow-edge: #e8dd8d; --note-blue: #d6e6f6; --note-blue-edge: #b9d3ec; --note-green: #d8eedd; --note-green-edge: #b9ddc2; --note-pink: #f6dbe9; --note-pink-edge: #eabfd6; --note-purple: #e5def6; --note-purple-edge: #cfc3ec; --note-orange: #f8e2c8; --note-orange-edge: #edcba2; color-scheme: light; } [data-theme="dark"] { --zn-bg: #121419; --zn-surface: #1a1d25; --zn-surface-2: #20242e; --zn-border: #2a2f3b; --zn-border-strong: #394050; --zn-text: #e9ebf1; --zn-text-2: #c6cad4; --zn-muted: #9aa2b1; --zn-primary: #7d9bff; --zn-primary-hover: #97b0ff; --zn-primary-active: #6485f4; --zn-primary-soft: #212b4d; --zn-primary-soft-text: #aec0ff; --zn-brand-navy: #101a3d; --zn-brand-yellow: #e8c53e; --zn-brand-orange: #e0901c; --zn-danger: #f1889a; --zn-success: #67d29d; --zn-focus: #9db1ff; --zn-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --zn-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .35); --zn-shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45); /* Sticky notes in dark: deep muted tints, light ink */ --note-ink: #ece9df; --note-ink-2: #d4d0c2; --note-meta: #beb9a9; --note-yellow: #403b22; --note-yellow-edge: #565030; --note-blue: #243647; --note-blue-edge: #33485d; --note-green: #253d2c; --note-green-edge: #35523e; --note-pink: #432b38; --note-pink-edge: #593c4c; --note-purple: #343050; --note-purple-edge: #464068; --note-orange: #45331e; --note-orange-edge: #5c452b; color-scheme: dark; } /* ---------- Base ---------- */ html, body { height: 100%; } body { background: var(--zn-bg); color: var(--zn-text); font-family: var(--zn-font); font-size: var(--zn-fs-base); line-height: 1.55; overflow-x: hidden; transition: background-color .2s ease, color .2s ease; } a { text-decoration: none; color: var(--zn-primary); } a:hover { color: var(--zn-primary-hover); } .text-muted { color: var(--zn-muted) !important; } h1, h2, h3, h4, h5, h6 { color: var(--zn-text); } ::selection { background: var(--zn-primary-soft); color: var(--zn-primary-soft-text); } /* ---------- Accessibility helpers ---------- */ .zn-skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--zn-surface); color: var(--zn-primary); padding: .65rem 1.1rem; border-radius: 0 0 var(--zn-radius) 0; font-weight: 600; box-shadow: var(--zn-shadow-lg); } .zn-skip-link:focus { left: 0; } .zn-icon-btn:focus-visible, .zn-chip:focus-visible, .zn-swatch:focus-visible, .zn-color-dot:focus-visible, .zn-note:focus-visible, .zn-tag-chip:focus-visible, .zn-nav .nav-link:focus-visible, .zn-editor:focus-visible, .zn-editor-toolbar button:focus-visible, .zn-note-menu button:focus-visible, .zn-stat-pill:focus-visible, .zn-search-clear:focus-visible { outline: 2px solid var(--zn-focus); outline-offset: 2px; border-radius: var(--zn-radius-sm); } .zn-swatches label:has(input:focus-visible) { outline: 2px solid var(--zn-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .zn-note:hover { transform: none; } } /* ---------- Bootstrap re-theming ---------- */ .btn { border-radius: 10px; font-weight: 500; } .btn-primary { --bs-btn-bg: var(--zn-primary); --bs-btn-border-color: var(--zn-primary); --bs-btn-hover-bg: var(--zn-primary-hover); --bs-btn-hover-border-color: var(--zn-primary-hover); --bs-btn-active-bg: var(--zn-primary-active); --bs-btn-active-border-color: var(--zn-primary-active); --bs-btn-disabled-bg: var(--zn-primary); --bs-btn-disabled-border-color: var(--zn-primary); } [data-theme="dark"] .btn-primary { --bs-btn-color: #10131c; --bs-btn-hover-color: #10131c; --bs-btn-active-color: #10131c; } .btn-light, .btn-outline-secondary { --bs-btn-bg: var(--zn-surface); --bs-btn-color: var(--zn-text-2); --bs-btn-border-color: var(--zn-border-strong); --bs-btn-hover-bg: var(--zn-surface-2); --bs-btn-hover-color: var(--zn-text); --bs-btn-hover-border-color: var(--zn-border-strong); --bs-btn-active-bg: var(--zn-surface-2); --bs-btn-active-color: var(--zn-text); --bs-btn-active-border-color: var(--zn-border-strong); } .form-control, .form-select { background-color: var(--zn-surface); border-color: var(--zn-border-strong); color: var(--zn-text); border-radius: 10px; } .form-control:focus, .form-select:focus { background-color: var(--zn-surface); border-color: var(--zn-primary); color: var(--zn-text); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--zn-primary) 18%, transparent); } .form-control::placeholder { color: var(--zn-muted); } .form-check-input { background-color: var(--zn-surface); border-color: var(--zn-border-strong); } .form-check-input:checked { background-color: var(--zn-primary); border-color: var(--zn-primary); } .form-label, .form-check-label { color: var(--zn-text-2); } .modal-content { background: var(--zn-surface); color: var(--zn-text); border: 1px solid var(--zn-border); border-radius: var(--zn-radius-xl); box-shadow: var(--zn-shadow-lg); } .modal-backdrop { --bs-backdrop-opacity: .55; } .dropdown-menu { background: var(--zn-surface); border: 1px solid var(--zn-border); border-radius: var(--zn-radius); box-shadow: var(--zn-shadow-lg); padding: .4rem; font-size: var(--zn-fs-sm); } .dropdown-item { color: var(--zn-text-2); border-radius: var(--zn-radius-sm); padding: .45rem .65rem; display: flex; align-items: center; gap: .55rem; } .dropdown-item i { font-size: 1rem; color: var(--zn-muted); } .dropdown-item:hover, .dropdown-item:focus { background: var(--zn-surface-2); color: var(--zn-text); } .dropdown-item:hover i, .dropdown-item:focus i { color: var(--zn-text); } .dropdown-item.text-danger, .dropdown-item.text-danger i { color: var(--zn-danger) !important; } .dropdown-divider { border-color: var(--zn-border); } .dropdown-header { color: var(--zn-muted); font-size: var(--zn-fs-xs); } .alert-success { --bs-alert-bg: color-mix(in srgb, var(--zn-success) 12%, var(--zn-surface)); --bs-alert-color: var(--zn-success); --bs-alert-border-color: color-mix(in srgb, var(--zn-success) 35%, transparent); } .offcanvas { background: var(--zn-surface); color: var(--zn-text); } .btn-close { filter: none; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } kbd.zn-kbd { background: var(--zn-surface-2); border: 1px solid var(--zn-border-strong); border-bottom-width: 2px; border-radius: 6px; color: var(--zn-muted); font-size: .68rem; font-family: var(--zn-font); padding: .1rem .35rem; line-height: 1.2; } /* ---------- Sidebar ---------- */ .zn-sidebar { width: var(--zn-sidebar-width); min-height: 100vh; background: var(--zn-surface); border-right: 1px solid var(--zn-border); position: fixed; inset: 0 auto 0 0; display: flex; flex-direction: column; z-index: 1030; } .zn-brand { display: flex; align-items: center; gap: .65rem; padding: 1.15rem 1.25rem; font-weight: 700; font-size: var(--zn-fs-md); letter-spacing: -.01em; color: var(--zn-text); } .zn-brand-icon { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(135deg, var(--zn-primary) 0%, var(--zn-brand-navy) 100%); color: #fff; border-radius: 10px; font-size: 1.05rem; flex-shrink: 0; } .zn-brand-logo { width: 36px; height: 36px; object-fit: cover; border-radius: 10px; flex-shrink: 0; box-shadow: var(--zn-shadow-xs); } .zn-nav { padding: .35rem .8rem 1rem; flex: 1 1 auto; overflow-y: auto; } .zn-nav .nav-link { display: flex; align-items: center; gap: .7rem; color: var(--zn-text-2); padding: .48rem .75rem; margin-bottom: .1rem; border-radius: 10px; font-size: var(--zn-fs-sm); font-weight: 500; transition: background-color .12s ease, color .12s ease; } .zn-nav .nav-link i { font-size: 1.02rem; color: var(--zn-muted); transition: color .12s ease; } .zn-nav .nav-link:hover { background: var(--zn-surface-2); color: var(--zn-text); } .zn-nav .nav-link:hover i { color: var(--zn-text); } .zn-nav .nav-link.active { background: var(--zn-primary-soft); color: var(--zn-primary-soft-text); font-weight: 600; } .zn-nav .nav-link.active i { color: var(--zn-primary-soft-text); } .zn-nav .nav-link .badge { margin-left: auto; background: var(--zn-surface-2); color: var(--zn-muted); font-weight: 600; font-size: .68rem; } .zn-nav .nav-link.active .badge { background: color-mix(in srgb, var(--zn-primary) 16%, transparent); color: var(--zn-primary-soft-text); } .zn-nav-heading { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--zn-muted); padding: 1.1rem .75rem .4rem; } .zn-tag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--zn-primary); opacity: .55; flex-shrink: 0; margin: 0 .25rem 0 .3rem; } .zn-sidebar-footer { border-top: 1px solid var(--zn-border); padding: .75rem; } .zn-user { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem .6rem; } .zn-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--zn-primary-soft); color: var(--zn-primary-soft-text); display: grid; place-items: center; font-weight: 700; font-size: var(--zn-fs-sm); flex-shrink: 0; } .zn-user-name { font-size: var(--zn-fs-sm); font-weight: 600; line-height: 1.25; color: var(--zn-text); } .zn-user-email { font-size: var(--zn-fs-xs); color: var(--zn-muted); word-break: break-all; } .zn-sidebar-footer .nav-link { color: var(--zn-text-2); border-radius: 8px; transition: background-color .12s ease, color .12s ease; } .zn-sidebar-footer .nav-link i { color: var(--zn-muted); } .zn-sidebar-footer .nav-link:hover { background: var(--zn-surface-2); color: var(--zn-text); } .zn-sidebar-footer .nav-link.active { background: var(--zn-primary-soft); color: var(--zn-primary-soft-text); } /* ---------- Main column & topbar ---------- */ .zn-main { margin-left: var(--zn-sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .zn-topbar { background: color-mix(in srgb, var(--zn-surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--zn-border); padding: .65rem 1.5rem; display: flex; align-items: center; gap: .9rem; position: sticky; top: 0; z-index: 1020; } .zn-search { position: relative; flex: 1 1 auto; max-width: 460px; } .zn-search .bi-search { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--zn-muted); pointer-events: none; } .zn-search input { padding-left: 2.45rem; padding-right: 4.6rem; border-radius: 10px; background: var(--zn-surface-2); border-color: transparent; font-size: var(--zn-fs-sm); height: 40px; } .zn-search input:focus { background: var(--zn-surface); border-color: var(--zn-primary); } .zn-search .zn-search-hint { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; gap: .2rem; } .zn-search-clear { position: absolute; right: 2.9rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--zn-muted); width: 26px; height: 26px; border-radius: 50%; display: none; place-items: center; padding: 0; } .zn-search-clear:hover { background: var(--zn-surface-2); color: var(--zn-text); } .zn-search.has-value .zn-search-clear { display: grid; } .zn-search.has-value .zn-search-hint { display: none; } .zn-topbar-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--zn-border); background: var(--zn-surface); color: var(--zn-text-2); display: grid; place-items: center; font-size: 1.05rem; padding: 0; transition: background-color .12s ease, border-color .12s ease; } .zn-topbar-btn:hover { background: var(--zn-surface-2); border-color: var(--zn-border-strong); color: var(--zn-text); } .zn-avatar-btn { border: 0; background: transparent; padding: 2px; border-radius: 50%; } /* ---------- Content ---------- */ .zn-content { padding: 1.75rem 1.75rem 2.5rem; flex: 1 1 auto; } .zn-page-title { font-size: var(--zn-fs-xl); font-weight: 800; letter-spacing: -.02em; margin: 0; } .zn-page-sub { color: var(--zn-muted); font-size: var(--zn-fs-sm); margin: .25rem 0 0; } /* ---------- Dashboard stat pills ---------- */ .zn-stat-row { display: flex; flex-wrap: wrap; gap: .6rem; } .zn-stat-pill { display: inline-flex; align-items: center; gap: .55rem; background: var(--zn-surface); border: 1px solid var(--zn-border); border-radius: 999px; padding: .45rem 1rem .45rem .6rem; color: var(--zn-text-2); font-size: var(--zn-fs-sm); font-weight: 600; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .zn-stat-pill:hover { border-color: var(--zn-border-strong); box-shadow: var(--zn-shadow-xs); color: var(--zn-text); transform: translateY(-1px); } .zn-stat-pill .zn-stat-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; } .zn-stat-pill .zn-stat-num { font-weight: 800; color: var(--zn-text); } /* Legacy stat card (tags page) */ .zn-stat { background: var(--zn-surface); border: 1px solid var(--zn-border); border-radius: var(--zn-radius); padding: 1rem 1.15rem; display: flex; align-items: center; gap: .9rem; height: 100%; } .zn-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; } .zn-stat .zn-stat-value { font-size: 1.4rem; font-weight: 800; margin: 0; line-height: 1.1; } .zn-stat span { color: var(--zn-muted); font-size: var(--zn-fs-xs); } /* ---------- Notes grid & sticky cards ---------- */ .zn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 1.1rem; align-items: start; } .zn-note { border-radius: var(--zn-radius-lg); border: 1px solid rgba(0, 0, 0, .05); box-shadow: var(--zn-shadow-xs); padding: .85rem 1.05rem .7rem; display: flex; flex-direction: column; min-height: 156px; color: var(--note-ink); transition: box-shadow .16s ease, transform .16s ease; position: relative; animation: zn-card-in .22s ease both; } @keyframes zn-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .zn-note:hover { box-shadow: var(--zn-shadow); transform: translateY(-3px); } .zn-note.zn-dragging { opacity: .6; transform: rotate(2deg); } /* Sticky note colors + a folded top edge accent */ .zn-note-yellow { background: var(--note-yellow); border-top: 3px solid var(--note-yellow-edge); } .zn-note-blue { background: var(--note-blue); border-top: 3px solid var(--note-blue-edge); } .zn-note-green { background: var(--note-green); border-top: 3px solid var(--note-green-edge); } .zn-note-pink { background: var(--note-pink); border-top: 3px solid var(--note-pink-edge); } .zn-note-purple { background: var(--note-purple); border-top: 3px solid var(--note-purple-edge); } .zn-note-orange { background: var(--note-orange); border-top: 3px solid var(--note-orange-edge); } .zn-note-top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; margin-bottom: .1rem; } .zn-note-pin { color: var(--zn-danger); font-size: .95rem; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--zn-fs-xs); font-weight: 600; color: var(--note-meta); } .zn-note-pin .bi { color: #c0392b; font-size: .95rem; } [data-theme="dark"] .zn-note-pin .bi { color: #ef8f83; } .zn-note-menu .zn-icon-btn { opacity: 0; } .zn-note:hover .zn-note-menu .zn-icon-btn, .zn-note:focus-within .zn-note-menu .zn-icon-btn, .zn-note-menu .zn-icon-btn[aria-expanded="true"] { opacity: 1; } @media (hover: none) { .zn-note-menu .zn-icon-btn { opacity: 1; } } .zn-note-title { font-weight: 700; font-size: var(--zn-fs-md); letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--note-ink); word-break: break-word; line-height: 1.35; } .zn-note.completed .zn-note-title { text-decoration: line-through; opacity: .62; } .zn-note-body { font-size: var(--zn-fs-sm); color: var(--note-ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; word-break: break-word; margin-bottom: .55rem; line-height: 1.55; } .zn-note-body h1, .zn-note-body h2, .zn-note-body h3 { font-size: var(--zn-fs-base); font-weight: 700; margin: .25rem 0; color: var(--note-ink); } .zn-note-body ul, .zn-note-body ol { padding-left: 1.2rem; margin-bottom: .3rem; } .zn-note-body p, .zn-note-body div { margin-bottom: .2rem; } .zn-note-body a { color: inherit; text-decoration: underline; } .zn-note.completed .zn-note-body { opacity: .58; } .zn-checklist { list-style: none; padding: 0; margin: 0 0 .55rem; } .zn-checklist li { display: flex; align-items: start; gap: .55rem; font-size: var(--zn-fs-sm); padding: .14rem 0; color: var(--note-ink-2); } .zn-checklist li .form-check-input { margin-top: .22rem; flex-shrink: 0; cursor: pointer; background-color: transparent; border-color: color-mix(in srgb, var(--note-ink) 45%, transparent); } .zn-checklist li .form-check-input:checked { background-color: var(--zn-primary); border-color: var(--zn-primary); } .zn-checklist li.done span { text-decoration: line-through; opacity: .55; } .zn-checklist-progress { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--note-ink) 14%, transparent); margin: .1rem 0 .55rem; overflow: hidden; } .zn-checklist-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--zn-primary); transition: width .25s ease; } .zn-checklist-more { font-size: var(--zn-fs-xs); color: var(--note-meta); padding-left: 1.75rem; } .zn-note-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; } .zn-tag-chip { background: color-mix(in srgb, var(--note-ink) 9%, transparent); color: var(--note-ink-2); font-size: .7rem; font-weight: 600; padding: .14rem .6rem; border-radius: 999px; cursor: pointer; border: 0; transition: background-color .12s ease; } .zn-tag-chip:hover { background: color-mix(in srgb, var(--note-ink) 17%, transparent); } .zn-note-reminder { font-size: var(--zn-fs-xs); font-weight: 500; color: var(--note-meta); background: color-mix(in srgb, var(--note-ink) 8%, transparent); border-radius: 8px; padding: .18rem .55rem; display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .55rem; align-self: flex-start; } .zn-note-reminder.overdue { color: var(--zn-danger); font-weight: 600; } .zn-note-meeting { display: flex; align-items: center; gap: .45rem; font-size: var(--zn-fs-xs); font-weight: 600; color: var(--note-ink); background: color-mix(in srgb, var(--note-ink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--note-ink) 16%, transparent); border-radius: 9px; padding: .34rem .6rem; margin-bottom: .55rem; transition: background-color .12s ease; } .zn-note-meeting:hover { background: color-mix(in srgb, var(--note-ink) 18%, transparent); color: var(--note-ink); } .zn-note-meeting .bi-camera-video-fill { font-size: .85rem; } .zn-note-meeting .bi-box-arrow-up-right { font-size: .7rem; opacity: .7; } .zn-note-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px dashed color-mix(in srgb, var(--note-ink) 18%, transparent); padding-top: .45rem; } .zn-note-date { font-size: .71rem; color: var(--note-meta); } .zn-note-actions { display: flex; gap: .05rem; opacity: 0; transition: opacity .15s ease; } .zn-note:hover .zn-note-actions, .zn-note:focus-within .zn-note-actions { opacity: 1; } @media (hover: none) { .zn-note-actions { opacity: 1; } } .zn-icon-btn { border: 0; background: transparent; color: color-mix(in srgb, var(--note-ink) 72%, transparent); width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .95rem; padding: 0; transition: background-color .12s ease, color .12s ease, transform .12s ease; } .zn-icon-btn:hover { background: color-mix(in srgb, var(--note-ink) 11%, transparent); color: var(--note-ink); } .zn-icon-btn:active { transform: scale(.92); } .zn-icon-btn.active-fav { color: #b8860b; } [data-theme="dark"] .zn-icon-btn.active-fav { color: #f0c05a; } @keyframes zn-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } } .zn-icon-btn.zn-pop i { animation: zn-pop .3s ease; display: inline-block; } /* ---------- Filter bar ---------- */ .zn-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.25rem; } .zn-chip { border: 1px solid var(--zn-border); background: var(--zn-surface); color: var(--zn-text-2); border-radius: 999px; padding: .3rem .9rem; font-size: var(--zn-fs-sm); font-weight: 600; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .zn-chip:hover { border-color: var(--zn-primary); color: var(--zn-primary); } .zn-chip.active { background: var(--zn-primary); border-color: var(--zn-primary); color: #fff; } [data-theme="dark"] .zn-chip.active { color: #10131c; } .zn-color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--zn-text) 15%, transparent); padding: 0; flex-shrink: 0; transition: transform .12s ease, border-color .12s ease; } .zn-color-dot:hover { transform: scale(1.12); } .zn-color-dot.active { border-color: var(--zn-text); box-shadow: 0 0 0 2px var(--zn-bg) inset; } .zn-dot-yellow { background: var(--note-yellow); } .zn-dot-blue { background: var(--note-blue); } .zn-dot-green { background: var(--note-green); } .zn-dot-pink { background: var(--note-pink); } .zn-dot-purple { background: var(--note-purple); } .zn-dot-orange { background: var(--note-orange); } /* ---------- Skeleton loading ---------- */ .zn-skeleton { border-radius: var(--zn-radius-lg); background: var(--zn-surface); border: 1px solid var(--zn-border); padding: 1rem; min-height: 150px; } .zn-skeleton .bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--zn-surface-2) 25%, var(--zn-border) 45%, var(--zn-surface-2) 65%); background-size: 200% 100%; animation: zn-shimmer 1.4s linear infinite; margin-bottom: .7rem; } .zn-skeleton .bar.w60 { width: 60%; } .zn-skeleton .bar.w90 { width: 90%; } .zn-skeleton .bar.w75 { width: 75%; } .zn-skeleton .bar.w40 { width: 40%; height: 9px; margin-top: 1.4rem; } @keyframes zn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ---------- Modal editor ---------- */ .zn-editor-toolbar { display: flex; flex-wrap: wrap; gap: .15rem; border: 1px solid var(--zn-border-strong); border-bottom: 0; border-radius: 10px 10px 0 0; padding: .3rem; background: var(--zn-surface-2); } .zn-editor-toolbar button { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 7px; color: var(--zn-text-2); display: grid; place-items: center; font-size: .95rem; transition: background-color .12s ease; } .zn-editor-toolbar button:hover { background: var(--zn-border); color: var(--zn-text); } .zn-editor-toolbar .vr { background-color: var(--zn-border-strong); } .zn-editor { border: 1px solid var(--zn-border-strong); border-radius: 0 0 10px 10px; min-height: 180px; max-height: 320px; overflow-y: auto; padding: .8rem 1rem; font-size: var(--zn-fs-base); background: var(--zn-surface); color: var(--zn-text); } .zn-editor:focus { outline: none; border-color: var(--zn-primary); } .zn-editor:empty::before { content: attr(data-placeholder); color: var(--zn-muted); } .zn-editor h1, .zn-editor h2, .zn-editor h3 { font-size: 1.15rem; font-weight: 700; } .zn-editor a { text-decoration: underline; } /* Checklist editor rows */ .zn-check-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .25rem; border-radius: 8px; } .zn-check-row:hover { background: var(--zn-surface-2); } .zn-check-row .zn-check-drag { cursor: grab; color: var(--zn-muted); } .zn-check-row input[type="text"] { border: 0; border-bottom: 1px solid transparent; flex: 1; font-size: var(--zn-fs-sm); background: transparent; color: var(--zn-text); padding: .15rem 0; } .zn-check-row input[type="text"]:focus { outline: none; border-bottom-color: var(--zn-primary); } .zn-check-row.done input[type="text"] { text-decoration: line-through; color: var(--zn-muted); } .zn-check-row .zn-icon-btn { color: var(--zn-muted); } .zn-check-row .zn-icon-btn:hover { background: var(--zn-border); color: var(--zn-text); } /* Color swatches */ .zn-swatches { display: flex; gap: .55rem; flex-wrap: wrap; } .zn-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--zn-text) 15%, transparent); padding: 0; position: relative; transition: transform .12s ease, border-color .12s ease; } .zn-swatch:hover { transform: scale(1.1); } .zn-swatch.active { border-color: var(--zn-text); } .zn-swatch.active::after { content: "\F26E"; font-family: "bootstrap-icons"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; color: rgba(0, 0, 0, .6); } [data-theme="dark"] .zn-swatch.active::after { color: rgba(255, 255, 255, .8); } /* Tags input */ .zn-tags-input { display: flex; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--zn-border-strong); border-radius: 10px; padding: .45rem .55rem; background: var(--zn-surface); cursor: text; } .zn-tags-input:focus-within { border-color: var(--zn-primary); } .zn-tags-input .zn-tag-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--zn-fs-xs); background: var(--zn-primary-soft); color: var(--zn-primary-soft-text); cursor: default; } .zn-tags-input .zn-tag-chip button { border: 0; background: transparent; color: inherit; padding: 0; font-size: .85rem; line-height: 1; display: grid; place-items: center; } .zn-tags-input input { border: 0; outline: none; flex: 1; min-width: 120px; font-size: var(--zn-fs-sm); background: transparent; color: var(--zn-text); } .zn-tags-input input::placeholder { color: var(--zn-muted); } /* Autosave status */ .zn-save-status { font-size: var(--zn-fs-xs); color: var(--zn-muted); display: inline-flex; align-items: center; gap: .35rem; } .zn-save-status.saving { color: var(--zn-primary); } .zn-save-status.saved { color: var(--zn-success); } /* ---------- Empty states ---------- */ .zn-empty { text-align: center; padding: 4.5rem 1rem; color: var(--zn-muted); max-width: 380px; margin: 0 auto; } .zn-empty .zn-empty-icon { width: 72px; height: 72px; margin: 0 auto 1.1rem; border-radius: 24px; background: var(--zn-surface); border: 1px solid var(--zn-border); box-shadow: var(--zn-shadow-xs); display: grid; place-items: center; font-size: 1.9rem; color: var(--zn-primary); } .zn-empty .h5 { color: var(--zn-text); font-weight: 700; letter-spacing: -.01em; } .zn-empty p { font-size: var(--zn-fs-sm); } /* ---------- Panels & reminders ---------- */ .zn-panel { background: var(--zn-surface); border: 1px solid var(--zn-border); border-radius: var(--zn-radius-lg); } .zn-panel .card-header { background: transparent; border-bottom: 1px solid var(--zn-border); font-weight: 700; padding: .95rem 1.2rem; color: var(--zn-text); font-size: var(--zn-fs-base); } .zn-panel.card { background: var(--zn-surface); border: 1px solid var(--zn-border); } .zn-panel .card-body { color: var(--zn-text-2); } .zn-reminder-item { display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem; border-bottom: 1px solid var(--zn-border); } .zn-reminder-item:last-child { border-bottom: 0; } .zn-reminder-icon { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, #f0b429 16%, var(--zn-surface)); color: #9a6700; display: grid; place-items: center; flex-shrink: 0; } [data-theme="dark"] .zn-reminder-icon { color: #f0c05a; } /* ---------- Toasts ---------- */ .zn-toast-container { z-index: 1090; } .zn-toast-container .toast { border-radius: var(--zn-radius); box-shadow: var(--zn-shadow-lg); border: 0; font-size: var(--zn-fs-sm); font-weight: 500; } /* ---------- Auth pages (split layout with brand panel) ---------- */ .zn-auth-split { min-height: 100vh; display: flex; } .zn-auth-brand { flex: 0 0 46%; max-width: 620px; align-items: center; justify-content: center; padding: 3rem 2.5rem; color: #fff; background: radial-gradient(720px 500px at 110% -10%, color-mix(in srgb, var(--zn-brand-yellow) 30%, transparent), transparent 60%), radial-gradient(600px 480px at -20% 110%, color-mix(in srgb, var(--zn-brand-orange) 24%, transparent), transparent 55%), linear-gradient(150deg, var(--zn-primary) 0%, var(--zn-brand-navy) 78%); } .zn-auth-brand-inner { max-width: 380px; } .zn-auth-logo { width: 190px; height: 190px; object-fit: cover; border-radius: 42px; box-shadow: 0 18px 48px rgba(8, 14, 40, .45); margin-bottom: 1.5rem; } .zn-auth-brand-title { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .35rem; color: #fff; } .zn-auth-brand-tag { color: rgba(255, 255, 255, .85); font-size: var(--zn-fs-base); margin-bottom: 1.6rem; } .zn-auth-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; font-size: var(--zn-fs-sm); color: rgba(255, 255, 255, .92); } .zn-auth-features i { color: var(--zn-brand-yellow); margin-right: .55rem; font-size: 1rem; } .zn-auth-formcol { flex: 1 1 auto; display: grid; place-items: center; padding: 2rem 1.25rem; background: radial-gradient(700px 420px at 100% 0%, color-mix(in srgb, var(--zn-primary) 8%, transparent), transparent 60%), var(--zn-bg); } .zn-auth-formwrap { width: 100%; max-width: 420px; } .zn-auth-card { width: 100%; background: var(--zn-surface); border: 1px solid var(--zn-border); border-radius: var(--zn-radius-xl); box-shadow: var(--zn-shadow-lg); padding: 2.25rem 2rem; } @media (max-width: 991.98px) { .zn-auth-split { display: block; } .zn-auth-formcol { min-height: 100vh; align-content: center; } } /* ---------- Responsive ---------- */ @media (max-width: 1199.98px) { :root { --zn-sidebar-width: 236px; } } @media (max-width: 991.98px) { .zn-sidebar { display: none; } .zn-main { margin-left: 0; } .zn-content { padding: 1rem 1rem 5.5rem; } .zn-topbar { padding: .6rem 1rem; } .zn-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .8rem; } .zn-page-title { font-size: 1.35rem; } /* Floating New Note button on mobile keeps creation one tap away */ .zn-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1040; width: 56px; height: 56px; border-radius: 18px; box-shadow: var(--zn-shadow-lg); display: grid; place-items: center; font-size: 1.4rem; } } @media (min-width: 992px) { .zn-fab { display: none; } } @media (max-width: 430px) { .zn-grid { grid-template-columns: 1fr 1fr; gap: .65rem; } .zn-note { padding: .7rem .8rem .6rem; min-height: 132px; } .zn-note-body { -webkit-line-clamp: 5; } .zn-content { padding: .85rem .85rem 5.5rem; } } @media (max-width: 374px) { .zn-grid { grid-template-columns: 1fr; } } .offcanvas .zn-nav .nav-link { font-size: var(--zn-fs-base); padding: .6rem .75rem; } /* Sortable ghost */ .zn-ghost { opacity: .35; } /* ---------- Project chip on note cards ---------- */ .zn-project-chip { background: color-mix(in srgb, var(--zn-primary) 18%, transparent); cursor: default; } /* ---------- Attachment rows (note modal) ---------- */ .zn-attachment-row { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border: 1px solid var(--zn-border); border-radius: 8px; font-size: var(--zn-fs-sm); background: var(--zn-surface-2); } .zn-attachment-row i { color: var(--zn-muted); flex-shrink: 0; } .zn-attachment-row .zn-icon-btn { color: var(--zn-muted); } .zn-attachment-row .zn-icon-btn:hover { background: var(--zn-border); color: var(--zn-text); } /* ---------- Tasks ---------- */ .zn-task-row { display: flex; align-items: flex-start; gap: .8rem; padding: .8rem 1rem; } .zn-task-row .zn-task-check { margin-top: .2rem; flex-shrink: 0; cursor: pointer; width: 1.15rem; height: 1.15rem; } .zn-task-main { flex: 1 1 auto; min-width: 0; } .zn-task-title { font-weight: 600; font-size: var(--zn-fs-base); color: var(--zn-text); word-break: break-word; } .zn-task-row.done .zn-task-title { text-decoration: line-through; opacity: .6; } .zn-task-row.cancelled { opacity: .55; } .zn-task-row.cancelled .zn-task-title { text-decoration: line-through; } .zn-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: var(--zn-fs-xs); margin-top: .25rem; } .zn-task-actions { display: flex; gap: .1rem; opacity: 0; transition: opacity .15s ease; } .zn-task-row:hover .zn-task-actions, .zn-task-row:focus-within .zn-task-actions { opacity: 1; } @media (hover: none) { .zn-task-actions { opacity: 1; } } .zn-task-row .zn-icon-btn { color: var(--zn-muted); } .zn-task-row .zn-icon-btn:hover { background: var(--zn-surface-2); color: var(--zn-text); } .zn-prio-low { background: var(--zn-surface-2); color: var(--zn-muted); } .zn-prio-medium { background: color-mix(in srgb, var(--zn-primary) 15%, transparent); color: var(--zn-primary-soft-text); } .zn-prio-high { background: color-mix(in srgb, #c77700 18%, transparent); color: #a05f00; } .zn-prio-urgent { background: color-mix(in srgb, #b02a37 15%, transparent); color: var(--zn-danger); } [data-theme="dark"] .zn-prio-high { color: #f0b45a; } .zn-status-badge { background: var(--zn-surface-2); color: var(--zn-muted); } /* Project status badges */ .zn-status-active { background: color-mix(in srgb, #198754 15%, transparent); color: var(--zn-success); } .zn-status-on_hold { background: color-mix(in srgb, #c77700 18%, transparent); color: #a05f00; } .zn-status-completed { background: color-mix(in srgb, var(--zn-primary) 15%, transparent); color: var(--zn-primary-soft-text); } .zn-status-archived { background: var(--zn-surface-2); color: var(--zn-muted); } [data-theme="dark"] .zn-status-on_hold { color: #f0b45a; } .zn-project-card { transition: box-shadow .15s ease, transform .15s ease; } .zn-project-card:hover { box-shadow: var(--zn-shadow); transform: translateY(-2px); } /* ---------- Insights ---------- */ .zn-insight-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--zn-border); font-size: var(--zn-fs-sm); color: var(--zn-text-2); } .zn-insight-row:last-child { border-bottom: 0; } /* ---------- Calendar ---------- */ .zn-cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: var(--zn-fs-xs); font-weight: 700; color: var(--zn-muted); text-transform: uppercase; letter-spacing: .05em; padding: 0 0 .4rem; text-align: center; min-width: 640px; } .zn-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; min-width: 640px; } .zn-cal-cell { background: var(--zn-surface-2); border: 1px solid var(--zn-border); border-radius: 10px; min-height: 104px; padding: .35rem; display: flex; flex-direction: column; gap: .2rem; } .zn-cal-cell.empty { background: transparent; border-color: transparent; } .zn-cal-cell.today { border-color: var(--zn-primary); box-shadow: 0 0 0 1px var(--zn-primary) inset; } .zn-cal-daynum { display: flex; align-items: center; justify-content: space-between; font-size: var(--zn-fs-xs); font-weight: 700; color: var(--zn-muted); } .zn-cal-cell.today .zn-cal-daynum span { color: var(--zn-primary); } .zn-cal-add { width: 22px; height: 22px; opacity: 0; color: var(--zn-muted); } .zn-cal-cell:hover .zn-cal-add, .zn-cal-cell:focus-within .zn-cal-add { opacity: 1; } @media (hover: none) { .zn-cal-add { opacity: 1; } } .zn-cal-add:hover { background: var(--zn-border); color: var(--zn-text); } .zn-cal-item { display: flex; align-items: center; gap: .3rem; border: 0; border-radius: 6px; font-size: .7rem; font-weight: 600; padding: .18rem .4rem; text-align: left; width: 100%; overflow: hidden; } .zn-cal-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zn-cal-note { color: #35322a; } .zn-cal-task { background: color-mix(in srgb, var(--zn-primary) 15%, transparent); color: var(--zn-primary-soft-text); } .zn-cal-task.overdue { background: color-mix(in srgb, #b02a37 15%, transparent); color: var(--zn-danger); } .zn-cal-task.done { opacity: .55; text-decoration: line-through; } .zn-cal-more { font-size: .68rem; color: var(--zn-muted); padding-left: .3rem; } /* ---------- Whiteboard ---------- */ .zn-board-viewport { position: relative; height: calc(100vh - 260px); min-height: 420px; overflow: hidden; border: 1px solid var(--zn-border); border-radius: var(--zn-radius-lg); background: radial-gradient(color-mix(in srgb, var(--zn-text) 9%, transparent) 1px, transparent 1px) 0 0 / 22px 22px, var(--zn-surface-2); cursor: grab; touch-action: none; } .zn-board-viewport.panning { cursor: grabbing; } .zn-board-viewport.connecting { cursor: crosshair; } .zn-board-viewport:focus-visible { outline: 2px solid var(--zn-focus); outline-offset: 2px; } .zn-board-canvas { position: absolute; top: 0; left: 0; width: 0; height: 0; transform-origin: 0 0; } .zn-board-svg { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: visible; } .zn-wb-line { stroke: var(--zn-muted); stroke-width: 2; } .zn-wb-line-hit { stroke: transparent; stroke-width: 14; cursor: pointer; pointer-events: stroke; } .zn-wb-line-hit:hover + .zn-wb-line { stroke: var(--zn-danger); } .zn-wb-el { position: absolute; border-radius: 12px; box-shadow: var(--zn-shadow-xs); display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 80px; min-height: 50px; border: 1px solid rgba(0, 0, 0, .08); } .zn-wb-el.selected { outline: 2px solid var(--zn-primary); outline-offset: 2px; } .zn-wb-el.connect-from { outline: 2px dashed var(--zn-primary); outline-offset: 2px; } .zn-wb-text { background: var(--zn-surface); border: 1px dashed var(--zn-border-strong); color: var(--zn-text); } .zn-wb-grip { display: flex; align-items: center; justify-content: space-between; padding: .1rem .4rem; cursor: grab; color: color-mix(in srgb, var(--note-ink) 55%, transparent); flex-shrink: 0; min-height: 26px; } .zn-wb-text .zn-wb-grip { color: var(--zn-muted); } .zn-wb-grip:active { cursor: grabbing; } .zn-wb-tools { display: flex; gap: .05rem; opacity: 0; transition: opacity .12s ease; } .zn-wb-el:hover .zn-wb-tools, .zn-wb-el:focus-within .zn-wb-tools { opacity: 1; } @media (hover: none) { .zn-wb-tools { opacity: 1; } } .zn-wb-tools .zn-icon-btn { width: 24px; height: 24px; font-size: .8rem; } .zn-wb-content { flex: 1 1 auto; padding: .2rem .6rem .55rem; font-size: var(--zn-fs-sm); color: var(--note-ink-2); overflow: auto; white-space: pre-wrap; word-break: break-word; } .zn-wb-text .zn-wb-content { color: var(--zn-text-2); font-weight: 600; } .zn-wb-content textarea { width: 100%; height: 100%; border: 0; background: transparent; resize: none; font: inherit; color: inherit; outline: 2px solid var(--zn-primary); border-radius: 6px; padding: .1rem .25rem; } #connectBtn.active, #drawBtn.active, #eraseBtn.active { background: var(--zn-primary); border-color: var(--zn-primary); color: #fff; } [data-theme="dark"] #connectBtn.active, [data-theme="dark"] #drawBtn.active, [data-theme="dark"] #eraseBtn.active { color: #10131c; } .zn-board-viewport.drawing { cursor: crosshair; } .zn-board-viewport.erasing { cursor: not-allowed; } .zn-pen-colors { display: flex; align-items: center; gap: .3rem; } .zn-pen-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--zn-surface); box-shadow: 0 0 0 1px var(--zn-border-strong); padding: 0; transition: transform .12s ease; } .zn-pen-dot:hover { transform: scale(1.15); } .zn-pen-dot.active { box-shadow: 0 0 0 2px var(--zn-primary); } .zn-pen-dot:focus-visible { outline: 2px solid var(--zn-focus); outline-offset: 2px; } .zn-wb-stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; } .zn-wb-stroke-hit { fill: none; stroke: transparent; stroke-linecap: round; stroke-linejoin: round; pointer-events: stroke; } .erasing .zn-wb-stroke-hit { cursor: pointer; } .zn-wb-image { background: var(--zn-surface); border: 1px solid var(--zn-border-strong); } .zn-wb-image .zn-wb-grip { color: var(--zn-muted); background: color-mix(in srgb, var(--zn-surface) 82%, transparent); } .zn-wb-img { flex: 1 1 auto; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }