84 lines
5.7 KiB
CSS
84 lines
5.7 KiB
CSS
/* Panneau Spark — branchement au service d'agents (Fusion, jalon J1).
|
|
Composant d'intégration TikTak : le panneau définitif sera vendangé
|
|
depuis dracodev-commons ; celui-ci prouve le chemin panneau → service. */
|
|
.draco-panneau {
|
|
position: fixed; top: 0; right: 0; height: 100dvh; width: 388px; max-width: 94vw;
|
|
background: #fbfbfa; color: #242624; z-index: 400;
|
|
box-shadow: -12px 0 36px rgb(0 0 0 / .22);
|
|
display: flex; flex-direction: column;
|
|
transform: translateX(105%); transition: transform .28s ease;
|
|
font: 14px/1.5 system-ui, "Segoe UI", sans-serif;
|
|
}
|
|
.draco-panneau.open { transform: translateX(0); }
|
|
.draco-panneau-hd {
|
|
display: flex; align-items: center; gap: 9px;
|
|
padding: 13px 15px; border-bottom: 1px solid #e4e5e0; background: #fff;
|
|
}
|
|
.draco-panneau-hd .titre { font-weight: 700; font-size: 15px; }
|
|
.draco-panneau-hd .soustitre { font-size: 12px; color: #6c7268; }
|
|
.draco-panneau-hd .fermer {
|
|
margin-left: auto; border: 0; background: #eef0ea; border-radius: 8px;
|
|
width: 30px; height: 30px; cursor: pointer; font-size: 14px;
|
|
}
|
|
.draco-panneau-etat { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
|
|
.draco-panneau-etat .point { width: 9px; height: 9px; border-radius: 50%; background: #b9bdb2; flex: none; }
|
|
.draco-panneau-etat.ok .point { background: #2ea36b; }
|
|
.draco-panneau-etat.err .point { background: #cf4b32; }
|
|
.draco-panneau-outils { display: flex; gap: 8px; padding: 9px 15px; border-bottom: 1px solid #e4e5e0; background: #fff; }
|
|
.draco-panneau-outils button {
|
|
border: 1px solid #d6d8d1; background: #f4f5f1; border-radius: 999px;
|
|
padding: 5px 12px; font: 600 12.5px system-ui; cursor: pointer;
|
|
}
|
|
.draco-panneau-outils button:hover { background: #e9ebe4; }
|
|
.draco-appro {
|
|
align-self: stretch; background: #fdf6ec; border: 1.6px solid #e8a13c;
|
|
border-radius: 12px; padding: 10px 12px;
|
|
}
|
|
.draco-appro .titre { font-weight: 700; font-size: 12px; color: #9a6a1c; text-transform: uppercase; letter-spacing: .4px; }
|
|
.draco-appro .resume { margin: 5px 0 8px; }
|
|
.draco-appro .btns { display: flex; gap: 7px; }
|
|
.draco-appro .btns button { border: 0; border-radius: 8px; padding: 6px 11px; font: 600 12.5px system-ui; cursor: pointer; background: #eef0ea; }
|
|
.draco-appro .btns button.go { background: #2ea36b; color: #fff; }
|
|
.draco-auj { align-self: stretch; background: #fff; border: 1px solid #e4e5e0; border-radius: 12px; padding: 10px 12px; }
|
|
.draco-auj h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #6c7268; margin: 6px 0 4px; }
|
|
.draco-auj h5:first-child { margin-top: 0; }
|
|
.draco-auj ul { margin: 0; padding-left: 17px; }
|
|
.draco-auj .etat-source { color: #6c7268; font-size: 12.5px; }
|
|
.draco-panneau-msgs { flex: 1; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
|
|
.draco-msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; white-space: pre-wrap; word-wrap: break-word; }
|
|
.draco-msg.user { align-self: flex-end; background: #2f6fed; color: #fff; border-bottom-right-radius: 4px; }
|
|
.draco-msg.agent { align-self: flex-start; background: #eef0ea; border-bottom-left-radius: 4px; }
|
|
.draco-msg.sys { align-self: center; background: none; color: #6c7268; font-size: 12.5px; text-align: center; max-width: 96%; }
|
|
.draco-panneau-ft { border-top: 1px solid #e4e5e0; padding: 11px 12px; background: #fff; }
|
|
.draco-panneau-form { display: flex; gap: 8px; }
|
|
.draco-panneau-form input {
|
|
flex: 1; border: 1px solid #d6d8d1; border-radius: 10px; padding: 9px 11px; font: inherit;
|
|
}
|
|
.draco-panneau-form button {
|
|
border: 0; border-radius: 10px; background: #7c5cd6; color: #fff;
|
|
padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer;
|
|
}
|
|
.draco-panneau-form button:disabled { opacity: .5; cursor: default; }
|
|
.draco-panneau-note { font-size: 11.5px; color: #8a8f84; margin-top: 8px; text-align: center; }
|
|
.draco-missions { align-self: stretch; background: #fff; border: 1px solid #e4e5e0; border-radius: 12px; padding: 10px 12px; }
|
|
.draco-missions h5 { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #6c7268; margin: 0 0 6px; }
|
|
.draco-missions label { display: block; font-size: 12px; font-weight: 600; color: #6c7268; margin: 8px 0 3px; }
|
|
.draco-missions select, .draco-missions input, .draco-missions textarea {
|
|
width: 100%; box-sizing: border-box; border: 1px solid #d6d8d1; border-radius: 8px;
|
|
padding: 7px 9px; font: inherit; font-size: 13px; background: #fff;
|
|
}
|
|
.draco-missions .btns { display: flex; gap: 7px; margin-top: 10px; }
|
|
.draco-missions .btns button { border: 0; border-radius: 8px; padding: 6px 11px; font: 600 12.5px system-ui; cursor: pointer; background: #eef0ea; }
|
|
.draco-missions .btns button.go { background: #7c5cd6; color: #fff; }
|
|
.draco-missions .m-liste { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
|
|
.draco-missions .etat-source { color: #6c7268; font-size: 12.5px; }
|
|
.draco-missions .m-item { border: 1px solid #e4e5e0; border-radius: 10px; padding: 8px 10px; }
|
|
.draco-missions .m-entete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
|
|
.draco-missions .m-statut { font-size: 11.5px; font-weight: 700; color: #6c7268; white-space: nowrap; }
|
|
.draco-missions .m-statut.st-succeeded { color: #2ea36b; }
|
|
.draco-missions .m-statut.st-failed { color: #cf4b32; }
|
|
.draco-missions .m-statut.st-running, .draco-missions .m-statut.st-paused_question { color: #9a6a1c; }
|
|
.draco-missions .m-meta { font-size: 12px; color: #6c7268; }
|
|
.draco-missions .m-rapport { font-size: 12.5px; margin-top: 5px; white-space: pre-wrap; word-wrap: break-word; }
|
|
.draco-missions .m-annuler { margin-top: 6px; border: 0; border-radius: 7px; padding: 4px 9px; font: 600 12px system-ui; cursor: pointer; background: #f6e3de; color: #a03a28; }
|