« Modèle:Documentation/styles.css » : différence entre les versions
De Nefald
Autres actions
m light header |
Aucun résumé des modifications |
||
| Ligne 1 : | Ligne 1 : | ||
/* ====================== | /* ====================== | ||
SYSTÈME DE DOCUMENTATION | SYSTÈME DE DOCUMENTATION - MINIMALISTE | ||
Compatible Citizen light/dark | Compatible Citizen light/dark | ||
====================== */ | ====================== */ | ||
| Ligne 7 : | Ligne 7 : | ||
.nef-doc-system { | .nef-doc-system { | ||
margin: 1.5em 0; | margin: 1.5em 0; | ||
} | } | ||
/* ====================== | /* ====================== | ||
BARRE SIMPLE | |||
====================== */ | ====================== */ | ||
.nef-doc-header { | .nef-doc-header { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: space-between; | |||
border | padding: 8px 12px; | ||
background-color: var(--color-surface-2); | |||
border: 1px solid var(--border-color-base); | |||
border-radius: 4px 4px 0 0; | |||
font-size: 13px; | |||
} | } | ||
.nef-doc-header-content { | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
color: var(--color-base | color: var(--color-base); | ||
font-weight: 500; | |||
} | } | ||
.nef-doc-header-icon { | .nef-doc-header-icon { | ||
font-size: | font-size: 16px; | ||
opacity: 0.7; | |||
opacity: 0. | |||
} | } | ||
/* Boutons alignés à droite */ | |||
/* | |||
.nef-doc-header-actions { | .nef-doc-header-actions { | ||
display: flex; | display: flex; | ||
gap: 8px; | |||
gap: | |||
} | } | ||
.nef-doc-btn { | .nef-doc-btn { | ||
display: inline- | display: inline-block; | ||
padding: 4px 8px; | |||
padding: 4px | background: var(--color-surface-1); | ||
background: var(-- | border: 1px solid var(--border-color-base); | ||
border: 1px solid var(--border-color-base | border-radius: 3px; | ||
border-radius: | |||
font-size: 12px; | font-size: 12px; | ||
transition: background-color 0.2s ease; | |||
transition: | |||
} | } | ||
.nef-doc-btn a { | .nef-doc-btn a { | ||
color: var(--color-base | color: var(--color-base) !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
.nef-doc-btn:hover { | .nef-doc-btn:hover { | ||
background: var(- | background: var(--color-surface-3); | ||
} | } | ||
/* Bouton "Créer" avec accent vert discret */ | |||
/* Bouton | |||
.nef-doc-btn-create { | .nef-doc-btn-create { | ||
border-color: var(--color-success | border-color: var(--color-success); | ||
} | } | ||
.nef-doc-btn-create a { | .nef-doc-btn-create a { | ||
color: var(--color-success | color: var(--color-success) !important; | ||
} | } | ||
| Ligne 157 : | Ligne 74 : | ||
====================== */ | ====================== */ | ||
.nef-doc-box { | .nef-doc-box { | ||
border: 1px solid var(--border-color-base | border: 1px solid var(--border-color-base); | ||
border-radius: 0 0 | border-top: none; | ||
border-radius: 0 0 4px 4px; | |||
padding: 1.5em; | padding: 1.5em; | ||
background-color: var(--color-surface-1); | |||
background-color: var(- | |||
} | } | ||
/* Documentation existante */ | /* Documentation existante */ | ||
.nef-doc-exists { | .nef-doc-exists { | ||
border-left: 3px solid | border-left: 3px solid var(--color-success); | ||
} | } | ||
| Ligne 184 : | Ligne 90 : | ||
display: flex; | display: flex; | ||
align-items: flex-start; | align-items: flex-start; | ||
gap: | gap: 1em; | ||
background-color: var(-- | background-color: var(--color-surface-2); | ||
border-left: 3px solid | border-left: 3px solid var(--color-destructive); | ||
} | } | ||
.nef-doc-icon { | .nef-doc-icon { | ||
font-size: | font-size: 2em; | ||
opacity: 0.6; | |||
flex-shrink: 0; | flex-shrink: 0; | ||
} | } | ||
| Ligne 207 : | Ligne 107 : | ||
/* Instructions */ | /* Instructions */ | ||
.nef-doc-instructions { | .nef-doc-instructions { | ||
background-color: | background-color: var(--color-surface-3); | ||
color | |||
padding: 1em; | padding: 1em; | ||
border-radius: | border-radius: 4px; | ||
margin-top: 1em; | margin-top: 1em; | ||
border-left: 3px solid | border-left: 3px solid var(--color-progressive); | ||
color: var(--color-base); | |||
color: | |||
} | } | ||
| Ligne 226 : | Ligne 120 : | ||
} | } | ||
/* Liens | /* Liens */ | ||
.nef-doc-box a { | .nef-doc-box a { | ||
color: var(--color-progressive | color: var(--color-progressive); | ||
} | } | ||
| Ligne 238 : | Ligne 128 : | ||
RESPONSIVE | RESPONSIVE | ||
====================== */ | ====================== */ | ||
@media (max-width: | @media (max-width: 640px) { | ||
.nef-doc-header { | .nef-doc-header { | ||
flex-direction: column; | flex-direction: column; | ||
align-items: stretch; | |||
gap: | gap: 8px; | ||
} | |||
.nef-doc-header-content { | |||
justify-content: center; | |||
} | } | ||
Version du 15 novembre 2025 à 10:11
/* ======================
SYSTÈME DE DOCUMENTATION - MINIMALISTE
Compatible Citizen light/dark
====================== */
/* Conteneur principal */
.nef-doc-system {
margin: 1.5em 0;
}
/* ======================
BARRE SIMPLE
====================== */
.nef-doc-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border-radius: 4px 4px 0 0;
font-size: 13px;
}
.nef-doc-header-content {
display: flex;
align-items: center;
gap: 8px;
color: var(--color-base);
font-weight: 500;
}
.nef-doc-header-icon {
font-size: 16px;
opacity: 0.7;
}
/* Boutons alignés à droite */
.nef-doc-header-actions {
display: flex;
gap: 8px;
}
.nef-doc-btn {
display: inline-block;
padding: 4px 8px;
background: var(--color-surface-1);
border: 1px solid var(--border-color-base);
border-radius: 3px;
font-size: 12px;
transition: background-color 0.2s ease;
}
.nef-doc-btn a {
color: var(--color-base) !important;
text-decoration: none !important;
}
.nef-doc-btn:hover {
background: var(--color-surface-3);
}
/* Bouton "Créer" avec accent vert discret */
.nef-doc-btn-create {
border-color: var(--color-success);
}
.nef-doc-btn-create a {
color: var(--color-success) !important;
}
/* ======================
BOÎTES DE DOCUMENTATION
====================== */
.nef-doc-box {
border: 1px solid var(--border-color-base);
border-top: none;
border-radius: 0 0 4px 4px;
padding: 1.5em;
background-color: var(--color-surface-1);
}
/* Documentation existante */
.nef-doc-exists {
border-left: 3px solid var(--color-success);
}
/* Documentation manquante */
.nef-doc-missing {
display: flex;
align-items: flex-start;
gap: 1em;
background-color: var(--color-surface-2);
border-left: 3px solid var(--color-destructive);
}
.nef-doc-icon {
font-size: 2em;
opacity: 0.6;
flex-shrink: 0;
}
.nef-doc-content {
flex: 1;
}
/* Instructions */
.nef-doc-instructions {
background-color: var(--color-surface-3);
padding: 1em;
border-radius: 4px;
margin-top: 1em;
border-left: 3px solid var(--color-progressive);
color: var(--color-base);
}
.nef-doc-instructions ul {
margin: 0.5em 0 0 0;
padding-left: 1.5em;
}
/* Liens */
.nef-doc-box a {
color: var(--color-progressive);
}
/* ======================
RESPONSIVE
====================== */
@media (max-width: 640px) {
.nef-doc-header {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.nef-doc-header-content {
justify-content: center;
}
.nef-doc-header-actions {
justify-content: center;
}
.nef-doc-missing {
flex-direction: column;
text-align: center;
}
.nef-doc-icon {
margin: 0 auto;
}
}