j.foucher/PS_Launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
PS_Launcher/server/admin/assets/style.css
j.foucher 500f7d12e6 v0.29.10 — Admin UI refonte (modals + onglets), emails de release, 4-digit versions 
Admin backoffice — UI redesign :
 - Pages versions.php + licenses.php : remplace les <details> inline qui
   débordaient horizontalement par UN bouton « ✎ Modifier » par row qui
   ouvre une modal <dialog> avec onglets. 5 tabs versions (Méta, Notes,
   BÊTA, Channels, Avancé) + 6 tabs licenses (Prolonger, Slots, Channel,
   BÊTA, Lock, Contacts, Machines). Délégation JS unique pour les onglets.
 - Bouton 📋 Copier la clé license dans chaque row (Clipboard API + feedback
   visuel ✓ vert 1.5s). Évite le détour par phpMyAdmin pour transmettre la
   clé aux clients.
 - Overlay « hashing en cours » plein écran sur tous les boutons de hash
   (3-5 min sur OVH pour 13 Go ZIP). Spinner CSS + message contextualisé
   par scope (bulk vs single).
 - Date de release passée de datetime-local à date (l'heure n'a pas de
   sens UX), avec défaut = aujourd'hui pour release_at et aujourd'hui-1an
   pour min_license_date (= license standard couvre les releases sur 1 an).

Emails de notification release :
 - Migration 004 : colonne contact_emails TEXT NULL sur licenses (CSV)
 - Onglet « Contacts » sur la modal licenses pour saisir les emails par
   license (parsing tolérant : CSV, ligne par ligne, point-virgule)
 - Bouton « ✉ Notifier » par version : POST notify_release filtre les
   licenses éligibles (channel match + min_license_date + can_see_betas
   pour BÊTA) et envoie un email HTML à chaque contact (dédup global)
 - Template email table-based + bgcolor (compat Outlook/Word engine),
   navy foncé #0F172A, logo Asterion en CID embed (= affichage direct
   sans demande de permission Outlook), bouton download installer
   centré (align="center" + margin auto), release notes en <pre>
 - Mailer.php helper : parse emails, multipart/related avec attachments
   inline, fallback execCommand pour clipboard

4-digit version support (X.Y.Z.B) :
 - SemVer Parse/CompareTo/ToString gèrent 3 ou 4 digits ; Build absent =
   0 implicite (1.5.4 == 1.5.4.0 < 1.5.4.13). HasExplicitBuild préserve
   le format d'origine au round-trip.
 - Regex InstallationRegistry étendue avec (?:\.\d+)? → reconnaît
   « PROSERVE v1.5.4.13 » côte-à-côte avec « PROSERVE v1.5.4 » sur disque
 - Server-side : versions.php, launcher.php, DownloadUrl.php, api/index.php,
   Releasenotes.php — toutes les regex de validation acceptent le 4ᵉ digit
 - Use case : dev/test iterations cohabitant avec leur release stable

Bugs fixes :
 - migrate.php : strip ligne par ligne les commentaires SQL avant le
   check is-empty. Sans ça, le PREMIER chunk d'un fichier migration
   (= header + premier ALTER) commençait par `--` et était silencieusement
   skip → ALTER jamais appliqué. Affectait migrations 003, 004.
 - SignManifest::getOrComputeSha256 ignorait son cache interne quand force
   demandé par le caller, retournant l'ancien hash en 0 ms même après
   re-upload SFTP (avec mtime préservé). Propage maintenant le flag $force.
   Bouton « 🔁 Hash » per-row force maintenant un re-calcul systématique.
 - DownloadManager : 416 (Range Not Satisfiable) ajouté aux URL-refresh
   triggers, avec HEAD probe pour comparer taille serveur vs manifest →
   message d'erreur explicite si ZIP tronqué. Bps display lissé sur une
   fenêtre glissante de 12 samples (3 s) → plus de clignotement quand un
   segment finit / Polly retry. SHA mismatch popup enrichi avec les
   deux SHAs (attendu vs calculé) extraits via regex de l'exception.
 - DownloadUrl.php : signature de l'URL utilisait un template hardcodé
   /builds/proserve-{version}.zip, ignorant tout rename serveur. Lit
   maintenant download.url du manifest et signe le filename réel.

Strings i18n (5 langues) :
 - ~15 nouveaux : SHA mismatch enrichi avec sources, 416 size mismatch,
   stale manifest, manifest refreshed auto-retry, force fresh menu

Bumps : 0.29.7 → 0.29.10 (4-digit support + accumulated UI fixes).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-28 17:24:50 +02:00

293 lines
9.8 KiB
CSS
Raw Permalink Blame History

:root {
--bg: #1B1B1F;
--bg-card: #26262B;
--bg-elevated: #2C2C32;
--bg-input: #1A1A20;
--border: #37373D;
--text: #F2F2F2;
--text-secondary: #A0A0A8;
--accent: #3B82F6;
--accent-hover: #2563EB;
--installed: #16A34A;
--installed-bg: #0E2A1B;
--busy: #F59E0B;
--busy-bg: #3A2A0E;
--danger: #EF4444;
--danger-bg: #2A1414;
}
* { box-sizing: border-box; }
body {
background: var(--bg); color: var(--text);
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
font-size: 14px; line-height: 1.5;
margin: 0;
}
nav {
background: #202024; border-bottom: 1px solid var(--border);
padding: 12px 24px; display: flex; gap: 8px; align-items: center;
}
nav .brand { color: #fff; font-weight: 700; margin-right: 16px; }
nav a {
color: var(--text-secondary); text-decoration: none;
padding: 6px 14px; border-radius: 4px; font-size: 13px;
}
nav a:hover { background: var(--bg-elevated); color: var(--text); }
nav a.active { background: var(--bg-elevated); color: var(--text); }
nav .spacer { flex: 1; }
nav a.logout { color: var(--text-secondary); }
main { padding: 24px; max-width: 1200px; margin: 0 auto; }
h1 { margin: 0 0 24px 0; font-size: 26px; font-weight: 600; }
h2 {
margin: 0 0 12px 0; font-size: 12px; font-weight: 700;
color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
}
.card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 6px; padding: 20px; margin-bottom: 16px;
}
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row .col { flex: 1; min-width: 200px; }
table { width: 100%; border-collapse: collapse; }
th {
text-align: left; color: var(--text-secondary); font-size: 11px;
text-transform: uppercase; letter-spacing: 0.5px;
padding: 10px 8px; border-bottom: 1px solid var(--border);
font-weight: 600;
}
td { padding: 12px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg-elevated); }
.btn {
display: inline-block; padding: 8px 16px;
border-radius: 4px; border: none; cursor: pointer;
font-size: 13px; font-family: inherit; text-decoration: none;
font-weight: 500;
}
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success { background: var(--installed); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-secondary { background: var(--bg-elevated); color: var(--text); }
.btn-secondary:hover { background: #3A3A40; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
input[type=text], input[type=password], input[type=date], input[type=datetime-local],
input[type=number], select, textarea {
background: var(--bg-input); color: var(--text);
border: 1px solid var(--border); padding: 8px 10px;
border-radius: 4px; font-family: inherit; font-size: 13px;
width: 100%;
}
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--accent);
}
label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.field { margin-bottom: 16px; }
.field input[type=checkbox] { width: auto; margin-right: 8px; }
.flash { padding: 12px 16px; border-radius: 4px; margin-bottom: 16px; }
.flash.error { background: var(--danger-bg); color: #FCA5A5; border: 1px solid var(--danger); }
.flash.success { background: var(--installed-bg); color: #6EE7B7; border: 1px solid var(--installed); }
.badge {
display: inline-block; padding: 2px 8px; border-radius: 10px;
font-size: 11px; font-weight: 600; color: white; line-height: 1.5;
}
.badge-success { background: var(--installed); }
.badge-danger { background: var(--danger); }
.badge-warning { background: var(--busy); }
.badge-secondary { background: var(--bg-elevated); color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
code {
background: var(--bg-input); padding: 2px 6px; border-radius: 3px;
font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px;
color: #C5E1A5;
}
pre {
background: var(--bg-input); padding: 12px; border-radius: 4px;
font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 12px;
overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.kpi { font-size: 36px; font-weight: 700; line-height: 1; }
.kpi-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }
ol, ul { margin: 0; padding-left: 20px; }
li { margin-bottom: 4px; }
details summary { cursor: pointer; padding: 4px 0; }
details[open] { background: var(--bg-elevated); padding: 8px; border-radius: 4px; margin: 4px 0; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
/* ============================================================
Modal (<dialog>) — éditeur d'une entrée du manifest
Remplace les <details> inline qui débordaient horizontalement
============================================================ */
/* Styles visuels appliqués au dialog OUVERT ([open] est posé par
showModal() automatiquement). Sans le sélecteur [open], les règles
`display: flex` etc. écrasaient le `display: none` du user-agent
stylesheet → tous les dialogs apparaissaient inline au lieu d'être
cachés tant que pas explicitement ouverts. */
dialog.edit-modal[open] {
background: var(--bg-card); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
padding: 0; margin: auto;
width: min(640px, 92vw); max-height: 90vh;
overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}
dialog.edit-modal::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
dialog.edit-modal > header {
padding: 14px 20px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
background: var(--bg-elevated);
}
dialog.edit-modal > header h3 {
margin: 0; font-size: 15px; font-weight: 600;
flex: 1; color: var(--text);
}
dialog.edit-modal > header .close-x {
background: transparent; border: none;
color: var(--text-secondary); cursor: pointer;
font-size: 20px; line-height: 1; padding: 4px 8px;
border-radius: 4px;
}
dialog.edit-modal > header .close-x:hover {
background: var(--bg-card); color: var(--text);
}
/* Onglets verticaux compacts en tête */
.modal-tabs {
display: flex; gap: 4px; padding: 8px 12px 0 12px;
border-bottom: 1px solid var(--border);
background: var(--bg-card);
flex-wrap: wrap;
}
.modal-tabs button {
background: transparent; border: none;
color: var(--text-secondary); cursor: pointer;
font-size: 13px; font-weight: 500;
padding: 8px 14px; border-radius: 4px 4px 0 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.modal-tabs button:hover {
color: var(--text); background: var(--bg-elevated);
}
.modal-tabs button.active {
color: var(--text); border-bottom-color: var(--accent);
}
.modal-body {
flex: 1; overflow-y: auto;
padding: 20px;
}
.modal-body > section[hidden] { display: none; }
.modal-body > section { display: block; }
.modal-body .field:last-child { margin-bottom: 0; }
.modal-body .hint {
color: var(--text-secondary); font-size: 11px;
margin: 4px 0 0 0; line-height: 1.4;
}
.modal-body .warn {
color: #FBBF24; font-size: 11px;
margin: 4px 0 0 0; line-height: 1.4;
}
.modal-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
background: var(--bg-elevated);
display: flex; justify-content: flex-end; gap: 8px;
}
/* Tooltip-style note in the modal sections explaining a section purpose */
.section-intro {
background: var(--bg-input); border-left: 3px solid var(--accent);
padding: 10px 14px; border-radius: 4px;
font-size: 12px; color: var(--text-secondary);
margin-bottom: 16px; line-height: 1.5;
}
/* Liste de checkboxes verticale propre (pour Channels) */
.checkbox-list {
display: flex; flex-direction: column; gap: 2px;
}
.checkbox-list label {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 4px;
font-size: 13px; color: var(--text); font-weight: normal;
cursor: pointer; margin-bottom: 0;
}
.checkbox-list label:hover { background: var(--bg-elevated); }
.checkbox-list label code { flex: 0 0 auto; }
.checkbox-list label .muted { margin-left: auto; }
/* Actions inline d'une row de version : harmonise les hauteurs et l'espacement */
.row-actions {
display: inline-flex; gap: 6px; align-items: center;
flex-wrap: nowrap; justify-content: flex-end;
}
.row-actions .btn { white-space: nowrap; }
/* ============================================================
Overlay blocant affiché pendant les opérations longues
(re-hash d'un ZIP de 13 Go = 3-5 min côté serveur OVH).
Visible tant que le browser n'a pas reçu la réponse POST,
disparaît naturellement au reload de page suivant.
============================================================ */
.busy-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex; align-items: center; justify-content: center;
}
.busy-overlay[hidden] { display: none; }
.busy-content {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 40px 56px;
border-radius: 12px;
text-align: center;
max-width: 480px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.busy-content h3 {
margin: 0 0 10px;
font-size: 18px;
color: var(--text);
text-transform: none; letter-spacing: 0;
}
.busy-content p {
margin: 6px 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}
.busy-spinner {
width: 56px; height: 56px;
border: 4px solid var(--bg-elevated);
border-top-color: var(--accent);
border-radius: 50%;
animation: busy-spin 1s linear infinite;
margin: 0 auto 24px;
}
@keyframes busy-spin { to { transform: rotate(360deg); } }
Reference in New Issue View Git Blame Copy Permalink