SKYNET

107 lignes · 5,3 Ko

/* ==========================================================================
   Panneau CV — Eliora
   Ouvre le CV de l'utilisateur dans un panneau à droite de la conversation.
   Fonctionne avec js/script_cv_panneau.js.
   --cv-w = largeur du panneau, réglée par le script (poignée de redimensionnement).
   ========================================================================== */

:root { --cv-w: 46vw; }

/* ---------- Le panneau ---------- */
#cv-panneau {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: var(--cv-w);
	z-index: 1000;
	display: none; flex-direction: column;
	background-color: #ffffff;
	border-left: 1px solid #dcdce0;
	box-shadow: rgba(9, 30, 66, 0.12) -4px 0 12px -4px;
	font-family: Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}
body.cv-ouvert #cv-panneau { display: flex; }
body.cv-plein #cv-panneau { width: 100%; border-left: none; }

#cv-entete {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px 10px 18px;
	border-bottom: 1px solid #e5e5e7;
	flex: none;
}
#cv-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#cv-nom { font-size: 15px; font-weight: bold; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cv-meta { font-size: 12px; color: gray; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#cv-outils { display: flex; align-items: center; gap: 4px; flex: none; }
.cv-bouton {
	min-width: 34px; height: 34px; padding: 0 8px;
	border: none; border-radius: 50%;
	background-color: transparent; color: #333;
	font-family: Helvetica, Arial, sans-serif; font-size: 18px;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.cv-bouton:hover { background-color: #e5e5e7; }
.cv-bouton:disabled { opacity: 0.35; cursor: default; background-color: transparent; }
.cv-bouton:focus-visible, #cv-onglet:focus-visible, #cv-poignee:focus-visible { outline: 2px solid dodgerblue; outline-offset: 2px; }
#cv-zoom { min-width: 48px; text-align: center; font-size: 13px; color: gray; }
#cv-fermer { margin-left: 6px; background-color: #e5e5e7; }
#cv-fermer:hover { background-color: #d6d6da; }

#cv-scene { flex: 1; min-height: 0; overflow: auto; background-color: #F0F0F2; padding: 18px 16px; }
#cv-pages { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; --cv-zoom: 1; }
.cv-page {
	display: block; flex: none;
	width: calc(var(--cv-zoom) * 100%); max-width: none; height: auto;
	margin-left: auto; margin-right: auto;
	background-color: #ffffff;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}
/* Aperçu des fichiers Word et texte : une feuille blanche, le zoom agit sur la taille du texte */
.cv-feuille {
	width: 100%; box-sizing: border-box; padding: 36px 40px;
	font-family: Helvetica, Arial, sans-serif; font-size: calc(15px * var(--cv-zoom)); line-height: 1.5; color: #222;
	overflow-wrap: anywhere;
}
.cv-texte { white-space: pre-wrap; }
.cv-feuille p { margin: 0 0 0.7em; }
.cv-feuille h1, .cv-feuille h2, .cv-feuille h3, .cv-feuille h4 { margin: 1em 0 0.4em; line-height: 1.25; }
.cv-feuille h1 { font-size: 1.6em; } .cv-feuille h2 { font-size: 1.3em; } .cv-feuille h3, .cv-feuille h4 { font-size: 1.1em; }
.cv-feuille ul, .cv-feuille ol { margin: 0 0 0.7em; padding-left: 1.4em; }
.cv-feuille table { border-collapse: collapse; width: 100%; margin: 0 0 0.7em; }
.cv-feuille td, .cv-feuille th { border: 1px solid #dcdce0; padding: 4px 8px; vertical-align: top; text-align: left; }
.cv-feuille img { max-width: 100%; height: auto; }

#cv-note { margin: 0; padding: 30px 10px; text-align: center; font-size: 14px; color: gray; }

/* ---------- Poignée de redimensionnement (bord gauche du panneau) ---------- */
#cv-poignee { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; touch-action: none; }
#cv-poignee:hover, body.cv-redim #cv-poignee { background-color: rgba(30, 144, 255, 0.35); }
body.cv-redim { cursor: col-resize; user-select: none; }
body.cv-plein #cv-poignee { display: none; }

/* ---------- Onglet « Voir mon CV » quand le panneau est fermé ---------- */
#cv-onglet {
	position: fixed; right: 0; top: 80px; z-index: 900;
	display: none; align-items: center; gap: 8px;
	padding: 10px 14px 10px 12px;
	border: none; border-radius: 20px 0 0 20px;
	background-color: #ffffff; color: #333;
	font-family: Helvetica, Arial, sans-serif; font-size: 14px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
	cursor: pointer;
}
#cv-onglet:hover { color: dodgerblue; }
body.cv-charge:not(.cv-ouvert) #cv-onglet { display: inline-flex; }

/* ---------- La conversation se pousse à gauche quand le panneau est ouvert ---------- */
body.cv-ouvert:not(.cv-plein) #visio { width: calc(100% - var(--cv-w)) !important; margin: 0 !important; }
body.cv-ouvert:not(.cv-plein) #affiche_message { max-width: calc(100% - 40px); }
body.cv-ouvert:not(.cv-plein) #boto,
body.cv-ouvert:not(.cv-plein) #label_text {
	left: calc((100% - var(--cv-w)) / 2) !important;
	max-width: calc(100% - var(--cv-w) - 40px);
}
body.cv-ouvert:not(.cv-plein) #boto textarea { max-width: 100%; }
body.cv-ouvert:not(.cv-plein) #pied-eliora { width: calc(100% - var(--cv-w)) !important; }
body.cv-ouvert:not(.cv-plein) #pied-eliora span { left: calc((100% - var(--cv-w)) / 2) !important; }