stephan
180b00e8ed
This commit updates the CSS for the documentation overlay, consolidating styles for the help button and ensuring it aligns with the existing button styles. The PHP files have been modified to enhance the integration of the documentation trigger within the block headers, allowing for optional documentation links. Additionally, the SQL file has been updated to improve the content of the documentation pages, providing clearer instructions and enhancing user experience.
279 lines
4.7 KiB
CSS
279 lines
4.7 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 */
|
|
.ms1-doc-panel {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 100%;
|
|
max-width: 560px;
|
|
max-height: 90vh;
|
|
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: 14px 16px;
|
|
border-bottom: 1px solid #dee2e6;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.ms1-doc-title {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
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: 16px 18px;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.ms1-doc-page[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Typographie contenu HTML admin */
|
|
.ms1-doc-format,
|
|
.ms1-doc-content {
|
|
font-size: 0.9rem;
|
|
line-height: 1.55;
|
|
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;
|
|
}
|
|
}
|