/* ========================================================================== BigzCrackz — feuille de style de l'application -------------------------------------------------------------------------- Le langage visuel est celui de la vitrine (bigzcrack.fr) : palette papier chaude, filets fins, libellés en chasse fixe, titres en serif. On passe de la vitrine à l'application sans rupture. CE QUI CHANGE PAR RAPPORT À LA VITRINE, et pourquoi : 1. POLICES SYSTÈME, pas Google Fonts. La CSP de l'application est `default-src 'self'` sans `font-src` : un @import distant serait bloqué. Affaiblir la CSP d'un outil qui manipule des empreintes pour obtenir une police serait un mauvais échange. On se contente des piles système. 2. LE ROUGE EST RÉSERVÉ AU DANGER. Sur la vitrine, la brique est décorative (grands chiffres). Ici, une couleur d'alerte qui sert aussi de couleur de marque rendrait les suppressions et les erreurs ambiguës. La couleur de marque de l'application est donc l'encre ; le rouge ne signifie qu'une chose : attention. 3. TITRES SERIF MAIS COMPACTS. Pas de 105px : ces écrans sont denses. Deux thèmes. Le clair est le défaut ; le sombre suit `prefers-color-scheme` et reste forçable des deux côtés par `data-theme` sur . ========================================================================== */ /* --- Thème clair (défaut) ------------------------------------------------ */ :root { --fond: #fef9ed; --surface: #fbf0dc; --surface-2: #f6e6ca; --champ: #fffdf7; --console: #fffdf7; --filet: #e6d8bd; --filet-fort: #d6c4a3; --encre: #1a1714; --encre-2: #59524a; --encre-3: #8a8175; /* Couleur de marque = encre. Voir la note 2 de l'en-tête. */ --accent: #1a1714; --sur-accent: #fef9ed; --survol: rgba(26, 23, 20, 0.06); --survol-fort: rgba(26, 23, 20, 0.11); --ok: #2f6b42; --ok-fond: #e3efe2; --danger: #a3392c; --danger-fond: #f7e3dd; --warn: #8a6516; --warn-fond: #f7ecd4; --ombre: 0 10px 28px rgba(26, 23, 20, 0.14); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace; --rayon: 4px; --rayon-2: 3px; } /* --- Thème sombre -------------------------------------------------------- */ /* Volontairement CHAUD (#0f0e0c), pas le gris-bleu d'origine : c'est le noir du bandeau de la vitrine, et c'est ce qui distingue ce thème sombre du sombre + turquoise générique qu'on a justement voulu quitter. */ :root[data-theme="dark"] { --fond: #0f0e0c; --surface: #1a1714; --surface-2: #241f1a; --champ: #0b0a08; --console: #0b0a08; --filet: #302a23; --filet-fort: #473d31; --encre: #f2ebde; --encre-2: #a89e8e; --encre-3: #7d7365; --accent: #f2ebde; --sur-accent: #14120f; --survol: rgba(242, 235, 222, 0.07); --survol-fort: rgba(242, 235, 222, 0.13); --ok: #74c489; --ok-fond: #1b2e20; --danger: #e08573; --danger-fond: #3a201b; --warn: #dcaf57; --warn-fond: #33280f; --ombre: 0 10px 28px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fond: #0f0e0c; --surface: #1a1714; --surface-2: #241f1a; --champ: #0b0a08; --console: #0b0a08; --filet: #302a23; --filet-fort: #473d31; --encre: #f2ebde; --encre-2: #a89e8e; --encre-3: #7d7365; --accent: #f2ebde; --sur-accent: #14120f; --survol: rgba(242, 235, 222, 0.07); --survol-fort: rgba(242, 235, 222, 0.13); --ok: #74c489; --ok-fond: #1b2e20; --danger: #e08573; --danger-fond: #3a201b; --warn: #dcaf57; --warn-fond: #33280f; --ombre: 0 10px 28px rgba(0, 0, 0, 0.55); } } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; color: var(--encre); } h1 { font-size: 1.95rem; line-height: 1.2; margin: 0 0 22px; } h2 { font-size: 1.35rem; margin: 30px 0 14px; } h3 { font-size: 1.1rem; margin: 22px 0 10px; } h1 em, h2 em { font-style: italic; } a { color: var(--encre); text-underline-offset: 3px; text-decoration-color: var(--filet-fort); } a:hover { text-decoration-color: currentColor; } code, pre, kbd { font-family: var(--mono); font-size: 0.88em; } .container { max-width: 1060px; margin: 0 auto; padding: 32px 28px 8px; } .inline { display: inline; } /* ========================================================================== Barre supérieure et navigation ========================================================================== */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 26px; min-height: 60px; background: var(--surface); border-bottom: 1px solid var(--filet); } .brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 1.12rem; letter-spacing: -0.01em; } .brand-icon { height: 24px; width: 24px; object-fit: contain; } .login-logo { display: block; max-width: 132px; margin: 0 auto 20px; } .topbar-right { display: flex; align-items: center; gap: 2px; } /* Indispensable : un

est un BLOC. Sans cette règle les menus s'empilent verticalement et la barre explose en hauteur. */ nav { display: flex; align-items: center; gap: 2px; } nav a, nav .link-btn { color: var(--encre); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.93rem; } .navmenu { position: relative; } .navmenu > summary { list-style: none; cursor: pointer; padding: 7px 12px; border-radius: var(--rayon); color: var(--encre); user-select: none; white-space: nowrap; font-size: 0.93rem; } .navmenu > summary::-webkit-details-marker { display: none; } .navmenu > summary::after { content: " \25BE"; opacity: 0.5; font-size: 0.75em; } .navmenu > summary:hover { background: var(--survol); } /* Menu contenant la page courante : le repère est un filet sous l'intitulé, pas une couleur — le rouge est réservé au danger. */ .navmenu.current > summary { box-shadow: inset 0 -2px 0 var(--encre); border-radius: var(--rayon) var(--rayon) 0 0; } .navmenu[open] > summary { background: var(--survol-fort); } .navmenu-items { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 214px; display: flex; flex-direction: column; padding: 6px; background: var(--surface); border: 1px solid var(--filet-fort); border-radius: var(--rayon); box-shadow: var(--ombre); } .navmenu-right .navmenu-items { left: auto; right: 0; } .navmenu-items a, .navmenu-items .link-btn { display: block; text-align: left; padding: 7px 10px; border-radius: var(--rayon-2); white-space: nowrap; } .navmenu-items a:hover, .navmenu-items .link-btn:hover { background: var(--survol); } .navmenu-items .navmenu-label { padding: 9px 10px 4px; margin-top: 4px; border-top: 1px solid var(--filet); font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.01em; color: var(--encre-3); } /* Les langues forment une RANGÉE : sans gap explicite elles se collent en « FRENDEES ». */ .navmenu-items .lang-switch { display: flex; gap: 4px; padding: 4px 8px 6px; } .lang-switch a { font-family: var(--mono); font-size: 0.78rem; letter-spacing: -0.01em; color: var(--encre-3); text-decoration: none; padding: 2px 6px; border-radius: var(--rayon-2); } .lang-switch a:hover { background: var(--survol); color: var(--encre); } .lang-switch a.active { color: var(--encre); background: var(--survol-fort); } .navmenu-items form.inline { margin: 4px 0 0; border-top: 1px solid var(--filet); padding-top: 4px; } nav a.nav-icon { display: inline-flex; align-items: center; gap: 3px; padding: 6px 8px; border-radius: var(--rayon); line-height: 1; } nav a.nav-icon:hover { background: var(--survol); } nav a.nav-icon .badge { padding: 1px 6px; font-size: 0.7rem; background: var(--danger); color: #fff; } /* Bascule de thème : un bouton, pas un menu — c'est un réglage à un bit. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px; padding: 0; background: none; border: 1px solid var(--filet-fort); border-radius: var(--rayon); color: var(--encre); cursor: pointer; } .theme-toggle:hover { background: var(--survol); } .theme-toggle svg { width: 15px; height: 15px; display: block; } /* Une seule des deux icônes est visible, selon le thème effectif. */ .theme-toggle .icone-sombre { display: none; } :root[data-theme="dark"] .theme-toggle .icone-clair { display: none; } :root[data-theme="dark"] .theme-toggle .icone-sombre { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icone-clair { display: none; } :root:not([data-theme="light"]) .theme-toggle .icone-sombre { display: block; } } /* ========================================================================== Blocs de contenu ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 22px 24px; margin-bottom: 20px; } .card.narrow { max-width: 430px; margin: 64px auto; } fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); margin-bottom: 18px; padding: 16px 18px; } legend { font-family: var(--mono); font-size: 0.78rem; letter-spacing: -0.01em; color: var(--encre-3); padding: 0 7px; } /* Libellé en chasse fixe : la signature typographique reprise de la vitrine. */ .label { font-family: var(--mono); font-size: 0.79rem; letter-spacing: -0.012em; color: var(--encre-3); } footer { text-align: center; color: var(--encre-3); padding: 34px 24px 28px; margin-top: 40px; border-top: 1px solid var(--filet); font-size: 0.83rem; } /* ========================================================================== Formulaires ========================================================================== */ label { display: block; margin-bottom: 12px; } input[type=text], input[type=password], input[type=number], input[type=file], input[type=date], input[type=email], select, textarea { display: block; width: 100%; margin-top: 5px; padding: 8px 11px; font-family: inherit; font-size: 0.95rem; resize: vertical; background: var(--champ); border: 1px solid var(--filet-fort); border-radius: var(--rayon-2); color: var(--encre); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--encre); outline-offset: 1px; border-color: var(--encre); } input::placeholder, textarea::placeholder { color: var(--encre-3); } label.checkbox { display: flex; align-items: center; gap: 9px; } label.checkbox input { width: auto; margin-top: 0; } .check-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 9px 11px; margin-bottom: 12px; background: var(--champ); } .check-list label.checkbox { margin: 5px 0; } .filter-row, .inline-form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .filter-row select, .filter-row input, .inline-form select, .inline-form input { width: auto; margin-top: 0; } /* ========================================================================== Boutons ========================================================================== */ button, .btn { background: var(--accent); color: var(--sur-accent); border: 1px solid var(--accent); padding: 8px 17px; border-radius: var(--rayon-2); font-family: inherit; font-size: 0.93rem; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block; line-height: 1.45; } button:hover, .btn:hover { opacity: 0.86; } /* Action secondaire : contour seul. Sur un écran qui en aligne cinq, tout remplir en encre transforme la page en damier. */ button.secondaire, .btn.secondaire { background: none; color: var(--encre); border-color: var(--filet-fort); } button.secondaire:hover, .btn.secondaire:hover { background: var(--survol); opacity: 1; } button.danger, .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.small, button.small { padding: 4px 11px; font-size: 0.83rem; } button:disabled, .btn.disabled, button.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; } .link-btn { background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; } button:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; } .actions-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; } /* Une action DANS une ligne de tableau est secondaire par nature : elle porte sur un enregistrement, pas sur l'ecran. Sans cette regle, une colonne « Appliquer » aligne quinze aplats d'encre et le tableau devient illisible. Regle generale plutot que `secondaire` ajoute a la main dans chaque gabarit : le prochain tableau en herite sans qu'on y pense. Les actions destructrices sont exclues -- elles doivent rester voyantes. */ .jobs-table td .btn:not(.danger), .jobs-table td button:not(.danger) { background: none; color: var(--encre); border-color: var(--filet-fort); } .jobs-table td .btn:not(.danger):hover, .jobs-table td button:not(.danger):hover { background: var(--survol); opacity: 1; } /* ========================================================================== Messages ========================================================================== */ .error { color: var(--danger); } .notice { color: var(--ok); } .hint { color: var(--encre-2); font-size: 0.87rem; } .notice-box { border: 1px solid var(--ok); background: var(--ok-fond); } .generated-password { display: flex; align-items: center; gap: 11px; background: var(--console); border: 1px solid var(--filet-fort); border-radius: var(--rayon-2); padding: 11px 14px; } .generated-password code { font-size: 1.05rem; flex: 1; word-break: break-all; } /* ========================================================================== Tableaux ========================================================================== */ .jobs-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; } .jobs-table th { text-align: left; padding: 9px 12px; font-family: var(--mono); font-weight: 400; font-size: 0.76rem; letter-spacing: -0.01em; color: var(--encre-3); border-bottom: 1px solid var(--filet-fort); } .jobs-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); } .jobs-table tr:last-child td { border-bottom: none; } .row-link { cursor: pointer; } .row-link:hover { background: var(--survol); } .row-jump { cursor: pointer; } tr.row-deleted { opacity: 0.45; text-decoration: line-through; } tr.row-deleted input { text-decoration: line-through; } .empty { color: var(--encre-3); text-align: center; padding: 18px 0; } /* ========================================================================== États -------------------------------------------------------------------------- Les classes `status-*` sont construites dynamiquement, côté Jinja comme côté JS (`status status-${data.status}`) : les sept états doivent tous exister ici, sinon un état non couvert s'affiche sans style. « running » est en aplat plein plutôt qu'en teinte : sur un tableau de bord qui liste vingt jobs, ce qui compte est de repérer d'un coup celui qui tourne. ========================================================================== */ .status { display: inline-block; padding: 2px 9px; border-radius: 10px; font-family: var(--mono); font-size: 0.73rem; letter-spacing: -0.01em; white-space: nowrap; } .status-queued { background: var(--surface-2); color: var(--encre-3); } .status-running { background: var(--accent); color: var(--sur-accent); } .status-completed { background: var(--ok-fond); color: var(--ok); } .status-failed, .status-stopped { background: var(--danger-fond); color: var(--danger); } .status-stopping, .status-exhausted { background: var(--warn-fond); color: var(--warn); } .tool-status { margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; } .badge { display: inline-block; padding: 3px 9px; border-radius: var(--rayon-2); font-family: var(--mono); font-size: 0.76rem; letter-spacing: -0.01em; } .badge.ok { background: var(--ok-fond); color: var(--ok); } .badge.missing { background: var(--danger-fond); color: var(--danger); } .unread { font-weight: 600; } .unread td:first-child { box-shadow: inset 3px 0 0 var(--encre); } /* ========================================================================== Console, journaux, aperçus ========================================================================== */ .log-box, .wordlist-preview-box { background: var(--console); border: 1px solid var(--filet-fort); border-radius: var(--rayon-2); font-family: var(--mono); font-size: 0.82rem; line-height: 1.5; } .log-box { padding: 14px; max-height: 420px; overflow-y: auto; white-space: pre-wrap; } .wordlist-preview-box { margin-top: 10px; padding: 11px 14px; } .wordlist-preview-box pre { margin: 6px 0 0; white-space: pre-wrap; word-break: break-all; } .wordlist-preview-box .combo-warning { color: var(--warn); font-family: var(--sans); margin-top: 9px; } .preview-line { user-select: text; cursor: text; padding: 1px 0; white-space: pre-wrap; word-break: break-all; } .preview-line:hover { background: var(--survol); } #extract_test_result div { padding: 4px 0; border-bottom: 1px solid var(--filet); } #extract_test_result strong { font-family: var(--mono); } .hash-toggle { cursor: pointer; } /* ========================================================================== Détail d'un job ========================================================================== */ .job-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; } .job-meta div { min-width: 0; overflow-wrap: anywhere; word-break: break-all; } .progress-bar-outer { width: 100%; height: 8px; background: var(--surface-2); border: 1px solid var(--filet); border-radius: 5px; overflow: hidden; margin-bottom: 18px; } .progress-bar-inner { height: 100%; width: 0%; background: var(--accent); transition: width 0.4s ease; } .device-card { border: 1px solid var(--filet); border-radius: var(--rayon-2); padding: 11px 14px; margin-top: 10px; background: var(--surface-2); } .device-card .metrics-row { display: flex; gap: 20px; flex-wrap: wrap; color: var(--encre-2); font-size: 0.87rem; margin-top: 6px; } .device-card .metrics-row strong { color: var(--encre); font-family: var(--mono); font-weight: 500; } /* ========================================================================== Masques ========================================================================== */ .mask-builder, .mask-cheatsheet { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filet); } .mask-block-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .mask-block-row input[type=number] { width: 68px; margin-top: 0; } .mask-cheatsheet summary { cursor: pointer; font-family: var(--mono); font-size: 0.82rem; } .mask-cheatsheet table { margin-top: 10px; } .mask-cheatsheet td, .mask-cheatsheet th { padding: 6px 10px; } /* Mode de lancement : les blocs d'options mutuellement exclusifs de « nouveau job ». Déplacé ici depuis un style en dur du gabarit. */ .launch-mode { margin-top: 12px; } .plan-list { margin: 9px 0 0; padding-left: 22px; } .plan-list li { margin-bottom: 10px; } .plan-list code { font-size: 0.85em; } /* ========================================================================== Onglets ========================================================================== */ .tabs { display: flex; gap: 3px; margin-bottom: -1px; } .tab-btn { background: none; color: var(--encre-2); border: 1px solid transparent; border-radius: var(--rayon) var(--rayon) 0 0; padding: 8px 17px; font-weight: 400; cursor: pointer; } .tab-btn:hover { background: var(--survol); } .tab-btn.active { color: var(--encre); background: var(--surface); border-color: var(--filet); border-bottom-color: var(--surface); position: relative; z-index: 1; } .tab-panel { border-radius: 0 var(--rayon) var(--rayon) var(--rayon); } /* ========================================================================== Explorateur -------------------------------------------------------------------------- Remonté du bloc