/* Thème : clair par défaut (direction "Studio clair"), sombre si le système le préfère (direction "Studio sombre") ou si l'interrupteur du panneau latéral force un choix explicite (data-theme sur , voir _sidebar.html / _theme_boot.html). */ :root { --bg: #FAF8F5; --panel: #FFFFFF; --panel-2: #F7F3EC; --border: #E9E4DC; --border-soft: #F0ECE5; --text: #2B2721; --text-muted: #8C8478; --text-faint: #B4AC9E; --accent: #C1622D; --accent-hover: #A84E22; --accent-contrast: #FFFFFF; --accent-wash: #F7E9DF; --confirmed: #3F7D57; --confirmed-wash: #E7F1EA; --detected: #3E6FB0; --detected-wash: #E8EFF8; --unknown: #C08A2E; --unknown-wash: #F6EDDB; --danger: #B0473A; --danger-wash: #F7E4E1; --shadow-sm: 0 1px 2px rgba(43, 39, 33, 0.05); --shadow-md: 0 10px 30px rgba(43, 39, 33, 0.08); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --font-display: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16171B; --panel: #1C1E23; --panel-2: #212328; --border: #2C2F36; --border-soft: #25272D; --text: #EDEEF0; --text-muted: #8B8F98; --text-faint: #5C6068; --accent: #5CE1C6; --accent-hover: #7DEBD5; --accent-contrast: #0B1512; --accent-wash: rgba(92, 225, 198, 0.14); --confirmed: #5CE1C6; --confirmed-wash: rgba(92, 225, 198, 0.12); --detected: #F2B84B; --detected-wash: rgba(242, 184, 75, 0.12); --unknown: #EF6F8E; --unknown-wash: rgba(239, 111, 142, 0.12); --danger: #EF6F8E; --danger-wash: rgba(239, 111, 142, 0.12); --shadow-sm: none; --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.45); --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; } } :root[data-theme="dark"] { --bg: #16171B; --panel: #1C1E23; --panel-2: #212328; --border: #2C2F36; --border-soft: #25272D; --text: #EDEEF0; --text-muted: #8B8F98; --text-faint: #5C6068; --accent: #5CE1C6; --accent-hover: #7DEBD5; --accent-contrast: #0B1512; --accent-wash: rgba(92, 225, 198, 0.14); --confirmed: #5CE1C6; --confirmed-wash: rgba(92, 225, 198, 0.12); --detected: #F2B84B; --detected-wash: rgba(242, 184, 75, 0.12); --unknown: #EF6F8E; --unknown-wash: rgba(239, 111, 142, 0.12); --danger: #EF6F8E; --danger-wash: rgba(239, 111, 142, 0.12); --shadow-sm: none; --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.45); --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } .page { max-width: 1040px; margin: 0 auto; padding: 2.75rem 2.25rem 4rem; } body.has-sidebar { padding-left: 224px; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; } h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 1.5rem; } h2 { font-size: 1.15rem; font-weight: 700; margin: 0; } h3 { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 1.75rem 0 0.75rem; } .hidden { display: none; } /* --- Panneau latéral --- */ #app-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 224px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1.75rem 1.1rem; } #app-sidebar.hidden { display: none; } .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.5rem 1.75rem; } .sidebar-brand-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sidebar-brand-icon svg { stroke: var(--accent-contrast); } .sidebar-brand-text { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 600; font-size: 0.875rem; } .sidebar-link svg { flex-shrink: 0; } .sidebar-link:hover { background: var(--panel-2); color: var(--text); } .sidebar-link.active { background: var(--accent-wash); color: var(--accent); } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.9rem; } .theme-switch { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.75rem; cursor: pointer; user-select: none; } .theme-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .theme-switch-track { width: 36px; height: 20px; border-radius: var(--radius-pill); background: var(--border); position: relative; flex-shrink: 0; transition: background-color 0.15s ease; } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } .theme-switch input:checked + .theme-switch-track { background: var(--accent); } .theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform: translateX(16px); } .theme-switch-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); } .sidebar-logout { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: none; background: none; color: var(--danger); font-weight: 600; font-size: 0.8rem; font-family: var(--font-body); cursor: pointer; text-align: left; } .sidebar-logout:hover { background: var(--danger-wash); } /* --- Boutons génériques --- */ #retag-processed, #retag-folder, #toggle-folder-processed, #toggle-overlay, #toggle-edit, #toggle-confirmed, #add-face, #clear-unknown, #confirm-all, #folder-back button, #synology-albums button { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; padding: 0.55rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease; } #retag-processed:hover, #retag-folder:hover, #toggle-folder-processed:hover, #toggle-overlay:hover, #toggle-edit:hover, #toggle-confirmed:hover, #add-face:hover, #clear-unknown:hover, #confirm-all:hover, #folder-back button:hover, #synology-albums button:hover { background: var(--panel-2); border-color: var(--text-faint); } #toggle-folder-processed.processed { background: var(--confirmed-wash); border-color: var(--confirmed); color: var(--confirmed); } #add-face.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; } #save-faces { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; padding: 0.6rem 1.3rem; border-radius: var(--radius-sm); border: none; background: var(--accent); color: var(--accent-contrast); cursor: pointer; box-shadow: var(--shadow-sm); margin-left: auto; } #save-faces:hover { background: var(--accent-hover); } #save-faces:disabled { opacity: 0.5; cursor: default; } #search-submit { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; padding: 0.55rem 1.2rem; border-radius: var(--radius-pill); border: none; background: var(--accent); color: var(--accent-contrast); cursor: pointer; } #search-submit:hover { background: var(--accent-hover); } #search-back { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0.4rem 0; margin-bottom: 1rem; } #search-back:hover { color: var(--text); } /* --- Textes de statut / garde de connexion --- */ #status, #search-status, #tagging-login-gate, #search-login-gate, #retag-processed-status, #retag-folder-status { font-size: 0.85rem; color: var(--text-muted); } #synology-login-error { color: var(--danger); } #synology-connected p { font-size: 0.95rem; color: var(--confirmed); font-weight: 600; } #folder-path { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); } /* --- Sections --- */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .section-actions { display: flex; gap: 0.6rem; } .folder-section { border-top: 1px solid var(--border-soft); margin-top: 2.25rem; padding-top: 2rem; } .panel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* --- Bascule d'espace (personnel / partagé) --- */ .space-toggle { display: flex; gap: 0.5rem; margin: 0.25rem 0 1.25rem; } .space-toggle button { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; padding: 0.45rem 0.95rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text-muted); cursor: pointer; } .space-toggle button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; } /* --- Connexion --- */ #synology-login-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } #synology-login-form input[type="text"], #synology-login-form input[type="password"] { font-family: var(--font-body); padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); } #synology-login-form label { font-size: 0.875rem; color: var(--text-muted); } #synology-login-form button[type="submit"] { font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; padding: 0.6rem 1.3rem; border-radius: var(--radius-sm); border: none; background: var(--accent); color: var(--accent-contrast); cursor: pointer; } #synology-login-form button[type="submit"]:hover { background: var(--accent-hover); } /* --- Dossiers / albums --- */ #folder-back:empty { display: none; } #folder-back { margin-bottom: 0.75rem; } #synology-folders { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem; margin: 0 0 1.25rem; } #synology-albums { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; } .folder-tile { display: flex; flex-direction: column; gap: 0.55rem; width: 148px; border: none; background: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--font-body); } .folder-thumb { /* Pas de overflow:hidden ici : le badge "traité" doit pouvoir déborder du coin de la tuile. Le rognage aux coins arrondis se fait sur .folder-thumb-mosaic, un cran plus bas. */ position: relative; width: 148px; height: 148px; } .folder-thumb-mosaic { width: 100%; height: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--panel-2); display: grid; gap: 2px; } .folder-thumb-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; } .folder-tile:hover .folder-thumb-mosaic { outline: 2px solid var(--accent); outline-offset: 2px; } .folder-thumb-count-1 { grid-template-columns: 1fr; } .folder-thumb-count-2 { grid-template-columns: 1fr 1fr; } .folder-thumb-count-3, .folder-thumb-count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } /* 3 photos : 2 en haut, 1 en pleine largeur en bas (comme l'appli Synology Photos officielle). */ .folder-thumb-count-3 img:nth-child(3) { grid-column: 1 / 3; } .folder-thumb-empty { display: flex; align-items: center; justify-content: center; color: var(--text-faint); } .folder-tile-label { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .folder-processed-badge { position: absolute; top: -6px; right: -6px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--confirmed); color: var(--accent-contrast); border: 2px solid var(--panel); font-size: 0.7rem; font-weight: bold; } /* --- Grille de miniatures --- */ .thumb-grid { display: flex; flex-wrap: wrap; gap: 0.65rem; } .pagination { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0 0; } .pagination.hidden { display: none; } .pagination-prev, .pagination-next { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } .pagination-prev:hover:not(:disabled), .pagination-next:hover:not(:disabled) { background: var(--panel-2); border-color: var(--text-faint); } .pagination-prev:disabled, .pagination-next:disabled { opacity: 0.4; cursor: default; } .pagination-label { font-size: 0.8rem; color: var(--text-muted); } .synology-thumb-wrapper { position: relative; width: 112px; height: 112px; } .synology-thumb { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); cursor: pointer; border: 2px solid transparent; box-sizing: border-box; transition: border-color 0.12s ease; } .synology-thumb:hover { border-color: var(--accent); } .synology-thumb-label { position: absolute; left: 2px; right: 2px; bottom: 2px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.5rem; line-height: 1.3; padding: 1px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .synology-thumb-processed { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--confirmed); color: var(--accent-contrast); border: 2px solid var(--panel); font-size: 0.7rem; font-weight: bold; display: flex; align-items: center; justify-content: center; pointer-events: none; } /* --- Visionneuse --- */ .viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; } #viewer-edit-controls { display: contents; } #viewer-edit-controls.hidden { display: none; } #image-container { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--panel-2); box-shadow: var(--shadow-md); max-width: 100%; } #photo-filename { display: flex; align-items: center; gap: 0.4rem; color: var(--text-faint); font-size: 0.78rem; margin: 0.6rem 0 0; } #photo-view-external, #photo-download { display: inline-flex; color: var(--text-faint); } #photo-view-external:hover, #photo-download:hover { color: var(--accent); } #photo-view-external.hidden, #photo-download.hidden { display: none; } #photo { display: block; max-width: 100%; height: auto; } #overlay { position: absolute; top: 0; left: 0; /* Seuls les rectangles de visage (.face-box) doivent intercepter les clics ; le reste du SVG doit laisser passer les clics vers ce qu'il y a en dessous. */ pointer-events: none; } #overlay.overlay-hidden { display: none; } #overlay.hide-confirmed .confirmed-face { display: none; } #draw-preview { position: absolute; border: 2px dashed var(--accent); pointer-events: none; display: none; } #image-container.draw-mode { cursor: crosshair; } .photo-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(20, 16, 12, 0.4); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.12s ease; } .photo-nav:hover { background: rgba(20, 16, 12, 0.6); } .photo-nav:disabled { opacity: 0.3; cursor: default; } .photo-nav.hidden { display: none; } #photo-prev { left: 12px; } #photo-next { right: 12px; } .face-box { fill: transparent; stroke-width: 5; cursor: pointer; pointer-events: all; } .delete-button { cursor: pointer; pointer-events: all; } .delete-button circle { fill: var(--danger); stroke: #fff; stroke-width: 2; } .delete-button text { fill: #fff; font-size: 16px; font-weight: bold; text-anchor: middle; dominant-baseline: central; user-select: none; } .face-box.unknown { stroke: var(--unknown); stroke-dasharray: 12 6; } .face-box.detected { stroke: var(--detected); stroke-dasharray: 12 6; } .face-box.confirmed { stroke: var(--confirmed); cursor: default; } .face-label { font-size: 22px; font-weight: bold; paint-order: stroke; stroke: #000; stroke-width: 5px; fill: #fff; } /* --- Recherche par personnes --- */ #search-person-input { font-family: var(--font-body); padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); } .person-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border-radius: var(--radius-pill); background: var(--accent-wash); border: 1px solid var(--accent); color: var(--accent); font-size: 0.85rem; font-weight: 600; font-family: var(--font-body); } .person-chip button { border: none; background: none; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--accent); } #search-selected-persons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; } /* --- Modale --- */ #modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s ease; } #modal-backdrop.hidden { display: none; } #modal-backdrop.visible { opacity: 1; } #modal { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 1.75rem; min-width: 320px; max-width: 90vw; box-shadow: var(--shadow-md); transform: scale(0.94) translateY(8px); transition: transform 0.15s ease; } #modal-backdrop.visible #modal { transform: scale(1) translateY(0); } #modal-body h2 { margin: 0 0 1.1rem; font-size: 1.1rem; } #modal-body input[type="text"] { width: 100%; box-sizing: border-box; padding: 0.6rem 0.75rem; font-size: 0.95rem; font-family: var(--font-body); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 1.1rem; background: var(--bg); color: var(--text); } #modal-body input[type="text"]:focus { outline: 2px solid var(--accent); border-color: transparent; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .modal-actions button { padding: 0.55rem 1.1rem; font-size: 0.875rem; font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } .modal-actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); font-weight: 700; } /* --- Toast --- */ #toast { position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 0.85rem 1.4rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; font-family: var(--font-body); font-size: 0.875rem; } #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }