/* PingVin — shadcn-inspired theme (light + dark) layered over Bootstrap. Design tokens drive every surface; toggling `.dark` on switches theme. */ :root { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --muted: #f4f4f5; --muted-foreground: #71717a; --border: #e4e4e7; --input: #e4e4e7; --primary: #0e9aa7; --primary-hover: #0b7e88; --primary-foreground: #ffffff; --secondary: #f4f4f5; --secondary-foreground: #18181b; --ring: #0e9aa7; --success: #16a34a; --success-soft: #dcfce7; --warning: #b45309; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #0e9aa7; --sidebar: #fafafa; --radius: 0.5rem; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); } .dark { --background: #09090b; --foreground: #fafafa; --card: #121214; --card-foreground: #fafafa; --muted: #1d1d20; --muted-foreground: #a1a1aa; --border: #27272a; --input: #27272a; --primary: #14b8c4; --primary-hover: #2cc7d2; --primary-foreground: #04181b; --secondary: #1d1d20; --secondary-foreground: #fafafa; --ring: #14b8c4; --success: #22c55e; --success-soft: #052e16; --warning: #f59e0b; --warning-soft: #3a2a05; --danger: #f87171; --danger-soft: #3a0d0d; --info: #14b8c4; --sidebar: #0c0c0e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); } * { border-color: var(--border); } body { background-color: var(--background); color: var(--foreground); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } .text-muted { color: var(--muted-foreground) !important; } .text-info { color: var(--primary) !important; } .text-danger { color: var(--danger) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } /* ============================ Layout: header ============================ */ .app-header { background-color: var(--card); border-bottom: 1px solid var(--border); box-shadow: none; } .app-header .navbar-brand { color: var(--foreground); font-weight: 700; letter-spacing: -0.01em; } .app-header .navbar-brand i { color: var(--primary); } .app-header .text-light { color: var(--muted-foreground) !important; } .header-btn, .header-btn:focus { border-radius: var(--radius); background-color: transparent; border: 1px solid var(--border); color: var(--foreground) !important; text-shadow: none !important; box-shadow: none; padding: 0.35rem 0.7rem; } .header-btn:hover { background-color: var(--muted); border-color: var(--border); } .navbar-toggler { border-color: var(--border); } /* ============================ Layout: sidebar ============================ */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 100; padding: 60px 0 0; background-color: var(--sidebar) !important; border-right: 1px solid var(--border); box-shadow: none; } .sidebar-sticky { position: relative; top: 0; height: calc(100vh - 60px); padding-top: 0.5rem; overflow-x: hidden; overflow-y: auto; } .nav-link { font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.75rem; margin: 0.15rem 0; border-radius: var(--radius); transition: background-color 0.15s ease, color 0.15s ease; } .nav-link:hover:not(.active) { background-color: var(--muted); color: var(--foreground); } .nav-link.active { color: var(--primary-foreground); background-color: var(--primary); } /* Discreet section labels grouping the nav by usage frequency. */ .sidebar-heading { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); font-weight: 600; padding: 0.75rem 0.75rem 0.25rem; margin: 0; } .sidebar-heading:not(:first-child) { margin-top: 0.5rem; } /* Collapsed (icon-only) sidebar on desktop, toggled via the header button. */ .sidebar, main { transition: width 0.15s ease, margin-left 0.15s ease, flex-basis 0.15s ease; } @media (min-width: 768px) { html.sidebar-mini .sidebar { width: 4.5rem; } html.sidebar-mini .sidebar .nav-label, html.sidebar-mini .sidebar-heading { display: none; } html.sidebar-mini .sidebar .nav-link { text-align: center; } html.sidebar-mini .sidebar .nav-link i { margin-right: 0 !important; } html.sidebar-mini main { margin-left: 4.5rem; max-width: none; flex: 0 0 calc(100% - 4.5rem); width: calc(100% - 4.5rem); } } /* ============================ Main / footer ============================ */ main { padding-top: 1.5rem; padding-bottom: 2rem; } .footer { flex-shrink: 0; background-color: var(--card); border-top: 1px solid var(--border); padding: 1.25rem 0; z-index: 101; } .footer .text-info, .footer strong { color: var(--foreground) !important; } /* ============================ Cards ============================ */ .card { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { background-color: var(--card); color: var(--card-foreground); border-bottom: 1px solid var(--border); padding: 0.9rem 1rem; font-weight: 600; } .card-footer { background-color: var(--card); border-top: 1px solid var(--border); } .card-img-top { object-fit: cover; border-bottom: 1px solid var(--border); } #cardView .card-img-top { height: 200px; } #cardView .card-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; max-height: 2.4rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bg-white, .bg-light { background-color: var(--card) !important; color: var(--foreground); } /* ============================ Buttons ============================ */ .btn { border-radius: var(--radius); font-weight: 500; padding: 0.5rem 0.9rem; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.825rem; } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; } .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); color: var(--primary-foreground); } .btn-secondary { background-color: var(--secondary); border-color: var(--border); color: var(--secondary-foreground); } .btn-secondary:hover { background-color: var(--muted); border-color: var(--border); color: var(--secondary-foreground); } .btn-outline-primary { color: var(--primary); border-color: var(--border); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-outline-secondary { color: var(--foreground); border-color: var(--border); background-color: transparent; } .btn-outline-secondary:hover { background-color: var(--muted); border-color: var(--border); color: var(--foreground); } .btn-success { background-color: var(--success); border-color: var(--success); color: #fff; } .btn-danger { background-color: var(--danger); border-color: var(--danger); color: #fff; } .btn-outline-danger { color: var(--danger); border-color: var(--border); background-color: transparent; } .btn-outline-danger:hover { background-color: var(--danger); border-color: var(--danger); color: #fff; } .btn-outline-warning { color: var(--warning); border-color: var(--border); background-color: transparent; } .btn-outline-warning:hover { background-color: var(--warning); border-color: var(--warning); color: #fff; } .btn-outline-success { color: var(--success); border-color: var(--border); background-color: transparent; } .btn-outline-success:hover { background-color: var(--success); border-color: var(--success); color: #fff; } .btn-outline-info { color: var(--primary); border-color: var(--border); background-color: transparent; } .btn-outline-info:hover { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .btn-group .btn.active { background-color: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } /* ============================ Forms ============================ */ .form-control, .form-select { background-color: var(--background); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); padding: 0.5rem 0.75rem; } .form-control::placeholder { color: var(--muted-foreground); } .form-control:focus, .form-select:focus { background-color: var(--background); color: var(--foreground); border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); } .form-label { font-weight: 500; color: var(--foreground); } .form-text { color: var(--muted-foreground); } .form-check-input { background-color: var(--background); border-color: var(--border); } .form-switch .form-check-input:checked, .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); } /* ============================ Tables ============================ */ .table { color: var(--foreground); --bs-table-bg: transparent; } .table > :not(caption) > * > * { background-color: transparent; color: var(--foreground); border-bottom-color: var(--border); } .table thead th { border-bottom: 1px solid var(--border); font-weight: 600; color: var(--muted-foreground); text-transform: none; } .table-hover tbody tr:hover > * { background-color: var(--muted); color: var(--foreground); } .table-danger > * { background-color: var(--danger-soft) !important; color: var(--foreground) !important; } .table-warning > * { background-color: var(--warning-soft) !important; color: var(--foreground) !important; } .img-thumbnail { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); } /* ============================ Badges ============================ */ .badge { font-weight: 500; padding: 0.35em 0.6em; border-radius: 999px; } .badge.bg-secondary { background-color: var(--muted) !important; color: var(--muted-foreground) !important; } .badge.bg-light { background-color: var(--muted) !important; color: var(--muted-foreground) !important; } .badge.bg-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; } /* Query badge overlaid on item photos: neutral (not accent) so the teal stays reserved for primary actions. Readable on any photo. */ .badge.badge-query { background-color: rgba(0, 0, 0, 0.6) !important; color: #fff !important; font-weight: 500; } /* Quiet link: foreground by default, accent only on hover. */ .link-quiet { color: var(--foreground); } .link-quiet:hover { color: var(--primary); } .badge.bg-info { background-color: color-mix(in srgb, var(--primary) 18%, transparent) !important; color: var(--primary) !important; } .badge.bg-success { background-color: var(--success-soft) !important; color: var(--success) !important; } .badge.bg-warning { background-color: var(--warning-soft) !important; color: var(--warning) !important; } /* ============================ Alerts / flash ============================ */ .alert { border-radius: var(--radius); border: 1px solid var(--border); } .alert-success { background-color: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); color: var(--success); } .alert-warning { background-color: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning); } .alert-danger, .alert-error { background-color: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .alert-info { background-color: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); color: var(--primary); } .flash-message { box-shadow: var(--shadow-md); } /* ============================ Modals & dropdowns ============================ */ .modal-content { background-color: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); } .modal-header, .modal-footer { border-color: var(--border); } .btn-close { filter: var(--btn-close-filter, none); } .dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .dropdown-menu { background-color: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } .dropdown-item { color: var(--foreground); } .dropdown-item:hover, .dropdown-item.active { background-color: var(--muted); color: var(--foreground); } .dropdown-divider { border-color: var(--border); } /* ============================ Item cards (annonces) ============================ */ /* Price is the most important info on an item card: largest, boldest, highest contrast — it must win over the title. Deliberately NOT the accent colour so the accent stays reserved for the single primary action per screen. */ .item-price { font-size: 1.25rem; font-weight: 700; color: var(--foreground); letter-spacing: -0.01em; line-height: 1.2; } /* Title is secondary to the price: regular weight, slightly toned down. */ .item-card .card-title, .item-row-title { font-weight: 500; color: var(--card-foreground); } .item-date { color: var(--muted-foreground); font-size: 0.8rem; } /* Whole card is the link to the external Vinted listing. The hover lift is the affordance, so no repeated coloured "Voir sur Vinted" button is needed. */ a.item-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; } a.item-card:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); } a.item-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Small, quiet external-link hint shown on the card (neutral, not accent). */ .item-card-ext { color: var(--muted-foreground); font-size: 0.8rem; } a.item-card:hover .item-card-ext { color: var(--primary); } /* ============================ Queries table actions ============================ */ /* The kebab dropdown must not be clipped. Two ancestors would otherwise clip it: .card (overflow:hidden, for rounded image corners — unused here) and .table-responsive (overflow:auto). Open both up on this card so Popper can position the menu freely; the URL cell wraps instead of forcing h-scroll. */ .queries-card { overflow: visible; } .queries-table { overflow: visible; } .queries-table td, .queries-table th { vertical-align: middle; } /* Let the query URL wrap rather than widen the table on small screens. */ .queries-table td:nth-child(2) { word-break: break-word; } /* ============================ Process status (dashboard) ============================ */ .process-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; background-color: var(--card); height: 100%; } .status-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 999px; flex: 0 0 auto; background-color: var(--muted-foreground); } .status-dot.is-on { background-color: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); } .status-dot.is-off { background-color: var(--muted-foreground); opacity: 0.5; } /* Slightly larger switch for a comfortable hit target. */ .process-tile .form-switch .form-check-input { width: 2.25rem; height: 1.25rem; cursor: pointer; } /* ============================ Misc ============================ */ .border-bottom { border-color: var(--border) !important; } h1, h2, h3, h4, h5, h6 { color: var(--foreground); letter-spacing: -0.01em; } code, pre, .log-entry { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media (max-width: 767.98px) { .sidebar { position: static; padding-top: 0; height: auto; border-right: none; border-bottom: 1px solid var(--border); } .sidebar-sticky { height: auto; } }