Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Documentation/styles.css » : différence entre les versions

De Nefald
Hiob (discussion | contributions)
m light header
Hiob (discussion | contributions)
mAucun résumé des modifications
 
(3 versions intermédiaires par le même utilisateur non affichées)
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;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
}


/* ======================
/* ======================
   BANDEAU D'EN-TÊTE - VERSION DISCRÈTE
   BARRE SIMPLE
   ====================== */
   ====================== */
.nef-doc-header {
.nef-doc-header {
background: var(--background-color-quiet, #f6f8fa);
border: 1px solid var(--border-color-base, #d0d7de);
color: var(--color-base, #24292f);
padding: 10px 16px;
border-radius: 6px 6px 0 0;
display: flex;
display: flex;
align-items: center;
align-items: center;
gap: 12px;
justify-content: space-between;
border-bottom: 2px solid var(--color-progressive, #0969da);
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;
}
}


/* Mode sombre Citizen */
.nef-doc-header-content {
.skin-citizen-dark .nef-doc-header {
display: flex;
background: var(--background-color-dp-02, #22272e);
align-items: center;
border-color: var(--border-color-base, #373e47);
gap: 8px;
color: var(--color-base, #adbac7);
color: var(--color-base);
border-bottom-color: var(--color-progressive, #539bf5);
font-weight: 500;
}
}


.nef-doc-header-icon {
.nef-doc-header-icon {
font-size: 20px;
font-size: 16px;
line-height: 1;
opacity: 0.7;
opacity: 0.8;
}
 
.nef-doc-header-content {
flex: 1;
}
}


.nef-doc-header-content strong {
/* Boutons alignés à droite */
display: block;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
opacity: 0.9;
}
 
/* Actions avec boutons compacts */
.nef-doc-header-actions {
.nef-doc-header-actions {
display: flex;
display: flex;
flex-wrap: wrap;
gap: 8px;
gap: 6px;
}
}


/* Boutons compacts style Citizen */
.nef-doc-btn {
.nef-doc-btn {
display: inline-flex;
display: inline-block;
align-items: center;
padding: 4px 8px;
padding: 4px 10px;
background: var(--color-surface-1);
background: var(--background-color-base, #fff);
border: 1px solid var(--border-color-base);
border: 1px solid var(--border-color-base, #d0d7de);
border-radius: 3px;
border-radius: 6px;
font-size: 12px;
font-size: 12px;
font-weight: 500;
transition: background-color 0.2s ease;
transition: all 0.15s ease;
}
 
.skin-citizen-dark .nef-doc-btn {
background: var(--background-color-dp-04, #2d333b);
border-color: var(--border-color-base, #444c56);
}
}


.nef-doc-btn a {
.nef-doc-btn a {
color: var(--color-base, #24292f) !important;
color: var(--color-base) !important;
text-decoration: none !important;
text-decoration: none !important;
}
.skin-citizen-dark .nef-doc-btn a {
color: var(--color-base, #adbac7) !important;
}
}


.nef-doc-btn:hover {
.nef-doc-btn:hover {
background: var(--background-color-interactive, #f3f4f6);
background: var(--color-surface-3);
border-color: var(--border-color-interactive, #b1b9c3);
transform: translateY(-1px);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
}


.skin-citizen-dark .nef-doc-btn:hover {
/* Bouton "Créer" avec accent vert discret */
background: var(--background-color-dp-06, #373e47);
border-color: var(--border-color-interactive, #656d76);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
 
/* Bouton création (accent vert subtil) */
.nef-doc-btn-create {
.nef-doc-btn-create {
border-color: var(--color-success, #1a7f37);
border-color: var(--color-success);
}
}


.nef-doc-btn-create a {
.nef-doc-btn-create a {
color: var(--color-success, #1a7f37) !important;
color: var(--color-success) !important;
}
 
.skin-citizen-dark .nef-doc-btn-create {
border-color: var(--color-success, #3fb950);
}
 
.skin-citizen-dark .nef-doc-btn-create a {
color: var(--color-success, #3fb950) !important;
}
 
.nef-doc-btn-create:hover {
background: var(--color-success-subtle, #dafbe1);
}
 
.skin-citizen-dark .nef-doc-btn-create:hover {
background: rgba(46, 160, 67, 0.15);
}
 
/* ======================
  RESPONSIVE
  ====================== */
@media (max-width: 768px) {
.nef-doc-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 12px 14px;
}
 
.nef-doc-header-icon {
display: none;
}
 
.nef-doc-header-content strong {
font-size: 13px;
}
 
.nef-doc-header-actions {
width: 100%;
justify-content: flex-start;
}
 
.nef-doc-btn {
font-size: 11px;
padding: 4px 8px;
}
}
}


Ligne 157 : Ligne 74 :
   ====================== */
   ====================== */
.nef-doc-box {
.nef-doc-box {
border: 1px solid var(--border-color-base, #c8ccd0);
border: 1px solid var(--border-color-base);
border-radius: 0 0 8px 8px;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 1.5em;
padding: 1.5em;
margin-top: 0;
background-color: var(--color-surface-1);
background-color: var(--background-color-base, #fff);
border-top: none;
}
 
/* Mode sombre Citizen */
.skin-citizen-dark .nef-doc-box {
background-color: var(--background-color-dp-04, #2d333b);
border-color: var(--border-color-base, #4a5568);
}
}


/* Documentation existante */
/* Documentation existante */
.nef-doc-exists {
.nef-doc-exists {
border-left: 3px solid #22863a;
border-left: 1px solid var(--color-success);
}
 
.skin-citizen-dark .nef-doc-exists {
border-left-color: #3fb950;
}
}


Ligne 184 : Ligne 90 :
display: flex;
display: flex;
align-items: flex-start;
align-items: flex-start;
gap: 1.2em;
gap: 1em;
background-color: var(--background-color-quiet, #f6f8fa);
background-color: var(--color-surface-2);
border-left: 3px solid #d73d3d;
border-left: 1px solid var(--color-destructive);
}
 
.skin-citizen-dark .nef-doc-missing {
background-color: var(--background-color-dp-02, #22272e);
border-left-color: #f85149;
}
}


.nef-doc-icon {
.nef-doc-icon {
font-size: 2.5em;
font-size: 2em;
line-height: 1;
opacity: 0.6;
flex-shrink: 0;
flex-shrink: 0;
opacity: 0.7;
}
}


Ligne 207 : Ligne 107 :
/* Instructions */
/* Instructions */
.nef-doc-instructions {
.nef-doc-instructions {
background-color: #e7f5ff;
background-color: var(--color-surface-3);
color: #00529b;
padding: 1em;
padding: 1em;
border-radius: 6px;
border-radius: 4px;
margin-top: 1em;
margin-top: 1em;
border-left: 3px solid #4285f4;
border-left: 1px solid var(--color-progressive);
}
color: var(--color-base);
 
.skin-citizen-dark .nef-doc-instructions {
background-color: #0a2540;
color: #9dcafa;
border-left-color: #6eb9f7;
}
}


Ligne 226 : Ligne 120 :
}
}


/* Liens dans les boîtes */
/* Liens */
.nef-doc-box a {
.nef-doc-box a {
color: var(--color-progressive, #0645ad);
color: var(--color-progressive);
}
 
.skin-citizen-dark .nef-doc-box a {
color: var(--color-progressive, #7ab7ff);
}
}


Ligne 238 : Ligne 128 :
   RESPONSIVE
   RESPONSIVE
   ====================== */
   ====================== */
@media (max-width: 768px) {
@media (max-width: 640px) {
.nef-doc-header {
.nef-doc-header {
flex-direction: column;
flex-direction: column;
text-align: center;
align-items: stretch;
gap: 12px;
gap: 8px;
}
 
.nef-doc-header-content {
justify-content: center;
}
}



Dernière version du 15 novembre 2025 à 10:56

/* ======================
   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: 1px 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: 1px 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: 1px 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;
}
}
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.