stephan
7719737db7
This commit introduces a new JavaScript function to open a document editing popup, enhancing user interaction with documentation links. The CSS has been updated to improve the layout and styling of the documentation panel, including adjustments to padding and font sizes for better readability. Additionally, new PHP functions have been added to generate edit links for documentation, integrating them into the header actions for improved accessibility. The version code has been incremented to 4.72.641.
286 lines
4.9 KiB
CSS
286 lines
4.9 KiB
CSS
body.ms1-doc-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/**
|
|
* MS1 — Module documentation (overlay paginé).
|
|
* Le bouton ? réutilise .btn-aide-bib (style.css) — pas de style rond dupliqué ici.
|
|
*/
|
|
|
|
.btn-aide-bib.ms1-doc-trigger {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Overlay plein écran */
|
|
.ms1-doc-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10050;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
}
|
|
|
|
.ms1-doc-overlay[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
.ms1-doc-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Panneau central — plus large pour le guide */
|
|
.ms1-doc-panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 840px;
|
|
max-height: 92vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
border: 1px solid #dee2e6;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ms1-doc-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.ms1-doc-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ms1-doc-title {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.ms1-doc-subtitle {
|
|
margin: 4px 0 0;
|
|
font-size: 0.85rem;
|
|
color: #6c757d;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.ms1-doc-close {
|
|
flex-shrink: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: #6c757d;
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms1-doc-close:hover {
|
|
background: #e9ecef;
|
|
color: #212529;
|
|
}
|
|
|
|
.ms1-doc-body {
|
|
flex: 1;
|
|
overflow: auto;
|
|
padding: 20px 22px;
|
|
min-height: 160px;
|
|
}
|
|
|
|
.ms1-doc-page[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Typographie contenu HTML admin */
|
|
.ms1-doc-format,
|
|
.ms1-doc-content {
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
color: #212529;
|
|
}
|
|
|
|
.ms1-doc-format h2,
|
|
.ms1-doc-format h3,
|
|
.ms1-doc-content h2,
|
|
.ms1-doc-content h3 {
|
|
margin: 14px 0 8px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
|
|
.ms1-doc-format h2:first-child,
|
|
.ms1-doc-format h3:first-child,
|
|
.ms1-doc-content h2:first-child,
|
|
.ms1-doc-content h3:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ms1-doc-format p,
|
|
.ms1-doc-content p {
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.ms1-doc-format ol,
|
|
.ms1-doc-format ul,
|
|
.ms1-doc-content ol,
|
|
.ms1-doc-content ul {
|
|
margin: 0 0 10px;
|
|
padding-left: 1.35rem;
|
|
}
|
|
|
|
.ms1-doc-format li,
|
|
.ms1-doc-content li {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.ms1-doc-format blockquote,
|
|
.ms1-doc-content blockquote {
|
|
margin: 12px 0;
|
|
padding: 10px 12px;
|
|
border-left: 3px solid #007bff;
|
|
background: #f8f9fa;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.ms1-doc-format table,
|
|
.ms1-doc-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 10px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.ms1-doc-format th,
|
|
.ms1-doc-format td,
|
|
.ms1-doc-content th,
|
|
.ms1-doc-content td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.ms1-doc-format th,
|
|
.ms1-doc-content th {
|
|
background: #f1f3f5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ms1-doc-format strong,
|
|
.ms1-doc-content strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Pied — navigation */
|
|
.ms1-doc-footer {
|
|
padding: 10px 14px 12px;
|
|
border-top: 1px solid #dee2e6;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.ms1-doc-nav-dots {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.ms1-doc-dot {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 0;
|
|
border: 2px solid #dee2e6;
|
|
border-radius: 6px;
|
|
background: #fff;
|
|
color: #495057;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms1-doc-dot.is-active,
|
|
.ms1-doc-dot:hover {
|
|
border-color: #007bff;
|
|
background: #e7f1ff;
|
|
color: #0056b3;
|
|
}
|
|
|
|
.ms1-doc-nav-arrows {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.ms1-doc-prev,
|
|
.ms1-doc-next {
|
|
padding: 4px 12px;
|
|
border: 1px solid #6c757d;
|
|
border-radius: 4px;
|
|
background: #fff;
|
|
color: #495057;
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ms1-doc-prev:hover:not(:disabled),
|
|
.ms1-doc-next:hover:not(:disabled) {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.ms1-doc-prev:disabled,
|
|
.ms1-doc-next:disabled {
|
|
opacity: 0.45;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.ms1-doc-counter {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
min-width: 48px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Métadonnées JSON — jamais affichées */
|
|
script.ms1-doc-meta {
|
|
display: none !important;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.ms1-doc-overlay {
|
|
padding: 8px;
|
|
}
|
|
|
|
.ms1-doc-panel {
|
|
max-height: 95vh;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.ms1-doc-dot {
|
|
width: 32px;
|
|
height: 32px;
|
|
font-size: 12px;
|
|
}
|
|
}
|