/* Pantone Techpack Annotator — v1.1, mesma linguagem visual do Lancelot Board (tasks.lancelot.design): pedra-quente OKLCH + laranja Lancelot como primary. Light é o default; dark ("espresso") é opt-in via classe `dark` no , igual ao Board (ver /home/claude/lancelot-board/src/lib/theme.ts e index.css — mesma estratégia, tokens próprios). Verde nunca é cor de marca aqui — só aparece como semântica de dado (ΔE bom). */ :root { /* ─ Paleta pedra-quente (mesmos valores OKLCH do Board) ─ */ --white: #fffffc; --slate-50: oklch(0.975 0.006 95); --slate-100: oklch(0.951 0.008 95); --slate-200: oklch(0.908 0.012 95); --slate-300: oklch(0.847 0.016 95); --slate-400: oklch(0.703 0.02 95); --slate-500: oklch(0.565 0.018 90); --slate-600: oklch(0.472 0.015 85); --slate-700: oklch(0.386 0.013 80); --slate-800: oklch(0.296 0.011 75); --slate-900: oklch(0.243 0.01 70); --slate-950: oklch(0.168 0.008 70); /* ─ Laranja Lancelot (primary) ─ */ --lancelot-50: #fef4ef; --lancelot-500: #fe5e1a; --lancelot-600: #eb4d0e; --lancelot-700: #c93e0b; --page-bg: oklch(0.958 0.009 95); /* "papel" claro */ --body-text: oklch(0.235 0.012 75); /* ─ Papéis semânticos (redefinidos em html.dark abaixo) ─ */ --surface: var(--white); /* cards, sidebar, toolbar, popover */ --surface-2: var(--slate-50); /* hover em itens de lista */ --surface-3: var(--slate-100); /* fundo de inputs */ --border: var(--slate-200); --border-soft: var(--slate-100); --text: var(--slate-900); --text-dim: var(--slate-500); --text-faint: var(--slate-400); --accent: var(--lancelot-500); --accent-hover: var(--lancelot-600); /* hover/focus/logo, igual ao Board */ --accent-active: var(--lancelot-700); --accent-dim: var(--lancelot-50); --accent-on: #fff; /* texto sobre fundo laranja */ --active-surface: var(--slate-900); /* pill ativa (segmented control) — neutro invertido, não laranja */ --active-text: #fff; /* Semântica de dado (ΔE) — nunca decorativa, sempre presente nos 2 temas */ --good: #16a34a; --warn: #d97706; --bad: #dc2626; /* Post-it e chip Pantone NÃO mudam com o tema (são conteúdo, não UI) */ --note-bg: #fff9c4; --note-border: #e6d375; --note-text: #4a4522; --canvas-bg: var(--slate-200); /* backdrop neutro do viewer, igual em qualquer doc viewer */ --scrollbar-thumb: var(--slate-300); --scrollbar-thumb-hover: var(--slate-400); --shadow-card: 0 1px 2px rgba(30, 20, 10, 0.04), 0 10px 28px rgba(30, 20, 10, 0.09); --shadow-pop: 0 16px 40px rgba(30, 20, 10, 0.16); --radius-lg: 16px; /* cards: login, popover */ --radius: 12px; /* inputs, itens de lista, dropdown */ --radius-pill: 9999px; /* todo botão/pill/toggle, igual ao Board */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "SF Mono", Menlo, Monaco, Consolas, monospace; } html.dark { color-scheme: dark; --page-bg: oklch(0.198 0.01 70); /* "espresso" — nunca preto morto */ --body-text: oklch(0.951 0.008 95); --surface: var(--slate-900); --surface-2: var(--slate-800); --surface-3: var(--slate-800); --border: var(--slate-800); --border-soft: var(--slate-800); --text: var(--slate-100); --text-dim: var(--slate-400); --text-faint: var(--slate-500); --accent-dim: rgba(254, 94, 26, 0.16); --active-surface: var(--slate-100); --active-text: var(--slate-900); --good: #34d399; --warn: #fbbf24; --bad: #f87171; --canvas-bg: var(--slate-950); --scrollbar-thumb: var(--slate-700); --scrollbar-thumb-hover: var(--slate-600); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px rgba(0, 0, 0, 0.4); --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: var(--page-bg); color: var(--body-text); font-family: var(--font); font-size: 13px; line-height: 1.45; } button, input, textarea { font-family: inherit; font-size: inherit; color: inherit; } *:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; } button:not(:disabled) { cursor: pointer; } .screen { width: 100%; height: 100%; } /* .screen-login/.screen-app abaixo fixam display:flex incondicionalmente — sem isso, o atributo [hidden] (menor prioridade, é regra de user-agent) perderia pra essas regras de autor e a tela ficaria visível mesmo hidden. */ .screen[hidden] { display: none !important; } /* ─── Marca (login + sidebar) ───────────────────────────────── */ .brand-title { font-weight: 700; color: var(--text); } .brand-suffix { white-space: nowrap; } .brand-sep { color: var(--text-faint); } .brand-lancelot { font-weight: 700; color: var(--accent-hover); } /* ─── Login ─────────────────────────────────────────────── */ .screen-login { display: flex; align-items: center; justify-content: center; background: var(--page-bg); } .login-card { width: 340px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 6px; } .login-brand { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 16px; margin-bottom: 22px; } .login-card label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); margin-bottom: 5px; } .login-card input[type="password"] { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); margin-bottom: 16px; outline: none; font-family: var(--mono); font-size: 13px; } .login-card input[type="password"]::placeholder { color: var(--text-faint); } .login-card input[type="password"]:focus { border-color: var(--accent-hover); } .login-card input[type="password"].has-error { border-color: var(--bad); } .login-card button { background: var(--accent); color: var(--accent-on); border: none; border-radius: var(--radius-pill); padding: 10px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s; } .login-card button:hover { background: var(--accent-hover); } .login-card button:active { transform: scale(0.98); } .login-error { margin-top: 12px; font-size: 12px; color: var(--bad); } /* ─── App shell ─────────────────────────────────────────── */ .screen-app { display: flex; height: 100%; background: var(--page-bg); } /* ─── Sidebar ───────────────────────────────────────────── */ .sidebar { width: 236px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .sidebar-brand { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid var(--border); } .brand-mark { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-hover); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-brand .login-brand, .sidebar-brand .brand-line { font-size: 12.5px; margin-bottom: 0; } .sidebar-section { padding: 12px 12px; border-bottom: 1px solid var(--border-soft); } .sidebar-projects { flex: 1; overflow-y: auto; border-bottom: none; } .sidebar-heading { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); padding: 4px 4px 8px; } .project-list-empty { padding: 8px 4px; color: var(--text-faint); font-size: 12px; font-style: italic; } .project-item { padding: 9px 10px; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; transition: background 0.1s; } .project-item:hover { background: var(--surface-2); } .project-item.is-active { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent-hover); } .project-item-name { font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-item-meta { font-size: 10.5px; color: var(--text-faint); margin-top: 2px; } .sidebar-footer { padding: 12px; border-top: 1px solid var(--border); } .sidebar-msg { font-size: 11px; color: var(--bad); margin-bottom: 8px; line-height: 1.4; } .session-user { font-size: 11px; color: var(--text-faint); margin-bottom: 8px; } .session-user strong { color: var(--text-dim); font-weight: 600; } .btn-block { width: 100%; display: block; text-align: center; padding: 9px; border-radius: var(--radius-pill); border: none; font-weight: 600; font-size: 12.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .btn-block:active { transform: scale(0.98); } .btn-accent { background: var(--accent); color: var(--accent-on); } .btn-accent:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); border-radius: var(--radius-pill); padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); } /* ─── Main / toolbar ────────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .toolbar { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 50px; flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border); } .toolbar-group { display: flex; align-items: center; gap: 4px; } .toolbar-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; } .toolbar-spacer { flex: 1; } .tbtn { background: transparent; border: 1px solid transparent; color: var(--text-dim); border-radius: var(--radius-pill); height: 28px; min-width: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; } .tbtn:hover { background: var(--surface-2); color: var(--text); } .tbtn-text { font-size: 12px; font-weight: 500; } /* Grupo de ferramentas como pill container segmentado, igual ao seletor Board|Calendário do Header do Board. */ .toolbar-tools { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 2px; gap: 2px; } .tool-btn.is-active { background: var(--active-surface); color: var(--active-text); border-color: transparent; } .tbtn-primary { background: var(--accent); color: var(--accent-on); font-weight: 600; font-size: 12px; } .tbtn-primary:hover { background: var(--accent-hover); } .page-indicator, .zoom-indicator { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); min-width: 56px; text-align: center; } .toolbar-search { position: relative; width: 220px; } .search-input { width: 100%; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; outline: none; color: var(--text); } .search-input::placeholder { color: var(--text-faint); } .search-input:focus { border-color: var(--accent-hover); } .search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 50; } .search-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; } .search-item:hover { background: var(--surface-2); } .search-item-swatch { width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border); flex-shrink: 0; } .search-item-name { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-empty { padding: 10px; font-size: 12px; color: var(--text-faint); font-style: italic; } .switch-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); cursor: pointer; user-select: none; } .switch { position: relative; display: inline-block; width: 30px; height: 17px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .switch-track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-pill); transition: background 0.15s; } .switch-track::before { content: ""; position: absolute; width: 13px; height: 13px; left: 1px; top: 1px; background: var(--white); border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s; } .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .switch-track::before { transform: translateX(13px); } /* Toggle de tema (sol/lua) — botão circular igual ao do Header do Board. */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-dim); transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle svg { width: 14px; height: 14px; display: block; } .theme-toggle .icon-moon { display: none; } html.dark .theme-toggle .icon-sun { display: none; } html.dark .theme-toggle .icon-moon { display: block; } .save-indicator { font-size: 11px; color: var(--text-faint); white-space: nowrap; } .save-indicator.is-saving { color: var(--text-dim); } .save-indicator.is-saved { color: var(--good); } .save-indicator.is-error { color: var(--bad); } /* ─── Workspace ─────────────────────────────────────────── */ .workspace { flex: 1; display: flex; min-height: 0; } .canvas-viewport { flex: 1; overflow: auto; background: var(--canvas-bg); position: relative; padding: 32px; display: flex; align-items: flex-start; justify-content: center; } .canvas-empty { margin: auto; color: var(--text-faint); font-size: 13px; } /* A página do PDF fica branca em qualquer tema — é conteúdo, não UI (igual ao chip Pantone e ao post-it). */ .canvas-stage { position: relative; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); background: #fff; flex-shrink: 0; } #pdfCanvas { display: block; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Ferramentas que amostram/posicionam deixam clique passar pro canvas */ .overlay.tool-passthrough { pointer-events: none; } /* ─── Annotations: chip Pantone (NÃO muda com o tema — é conteúdo) ────── */ .ann-chip { position: absolute; background: #fff; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.12); cursor: default; } /* affordance: hover indica que é um objeto clicável/arrastável */ .ann-chip:hover { cursor: move; } .ann-chip:not(.is-selected):hover { outline: 1px solid var(--border); outline-offset: 1px; } .ann-chip.is-selected { outline: 2px solid var(--accent-hover); outline-offset: 1px; z-index: 10; } .ann-chip.is-dragging { cursor: grabbing; opacity: 0.92; z-index: 10; } .chip-color-block { width: 100%; } .chip-label-block { width: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 5.9%; overflow: hidden; } .chip-brand { font-weight: 700; color: #1a1a1a; white-space: nowrap; letter-spacing: 0.2px; } .chip-code { color: #1a1a1a; white-space: nowrap; } .chip-note-dot { position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--note-bg); border: 1px solid var(--note-border); } /* ─── Annotations: post-it (NÃO muda com o tema — é conteúdo) ──────────── */ .ann-note { position: absolute; background: var(--note-bg); border: 1px solid var(--note-border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; min-height: 44px; } .ann-note:not(.is-selected):hover { outline: 1px solid var(--border); outline-offset: 1px; } .ann-note.is-selected { outline: 2px solid var(--accent-hover); outline-offset: 1px; z-index: 10; } .ann-note.is-dragging { cursor: grabbing; opacity: 0.92; z-index: 10; } .note-handle { height: 9px; flex-shrink: 0; background: var(--note-border); cursor: move; } .note-text { flex: 1; resize: none; border: none; outline: none; background: transparent; color: var(--note-text); font-family: var(--font); font-size: 11px; line-height: 1.35; padding: 5px 6px; overflow: hidden; } /* ─── Resize handles (canto, só quando selecionado) ─────────── */ .resize-handle { position: absolute; width: 9px; height: 9px; background: var(--accent-hover); border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); z-index: 11; } .resize-handle:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-hover) 30%, transparent), 0 1px 3px rgba(0, 0, 0, 0.35); } .rh-nw { top: 0; left: 0; transform: translate(-50%, -50%); cursor: nwse-resize; } .rh-se { bottom: 0; right: 0; transform: translate(50%, 50%); cursor: nwse-resize; } .rh-ne { top: 0; right: 0; transform: translate(50%, -50%); cursor: nesw-resize; } .rh-sw { bottom: 0; left: 0; transform: translate(-50%, 50%); cursor: nesw-resize; } /* ─── Results panel ─────────────────────────────────────── */ .results-panel { width: 268px; flex-shrink: 0; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; } .results-heading { padding: 12px 14px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); } .results-body { flex: 1; overflow-y: auto; } .results-empty { padding: 16px 14px; color: var(--text-faint); font-size: 12px; font-style: italic; line-height: 1.5; } .result-card { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 0.1s; } .result-card:hover { background: var(--surface-2); } .result-chip-mini { width: 30px; height: 45px; border-radius: 4px; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0 1px var(--border); } .result-chip-mini .swatch { width: 100%; height: 67%; } .result-chip-mini .base { width: 100%; height: 33%; background: #fff; } .result-details { flex: 1; min-width: 0; } .result-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .result-meta { font-size: 10.5px; margin-top: 2px; font-family: var(--mono); } .delta-e { font-weight: 700; } .delta-e.de-good { color: var(--good); } .delta-e.de-mid { color: var(--warn); } .delta-e.de-bad { color: var(--bad); } .results-source { padding: 8px 14px; font-size: 10.5px; color: var(--text-faint); border-bottom: 1px solid var(--border-soft); } /* ─── Action bar flutuante de seleção ───────────────────────── */ .selection-bar { position: fixed; display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-pop); z-index: 100; } .selbar-btn { padding: 6px 14px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--text-dim); font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s; } .selbar-btn:hover { background: var(--surface-2); color: var(--text); } .selbar-btn-danger { color: var(--bad); } .selbar-btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); } /* ─── Editor de nota do chip ─────────────────────────────────── */ .note-editor { position: fixed; width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 10px; z-index: 100; } .note-editor textarea { width: 100%; min-height: 70px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 8px; outline: none; resize: vertical; font-family: var(--font); font-size: 12px; } .note-editor textarea:focus { border-color: var(--accent-hover); } /* ─── Scrollbars ─────────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }