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

Navigation interactive dans l’historique

← Modification précédente Modification suivante →

@@ Ligne 11 : / Ligne 11 : @@
 /* ======================
-    BANDEAU D'EN-TÊTE
+    BANDEAU D'EN-TÊTE - VERSION DISCRÈTE
     ====================== */
 .nef-doc-header {
-background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
+background: var(--background-color-quiet, #f6f8fa);
-color: #fff;
+border: 1px solid var(--border-color-base, #d0d7de);
-padding: 16px 20px;
+color: var(--color-base, #24292f);
-border-radius: 8px 8px 0 0;
+padding: 10px 16px;
+border-radius: 6px 6px 0 0;
 display: flex;
 align-items: center;
-gap: 14px;
+gap: 12px;
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+border-bottom: 2px solid var(--color-progressive, #0969da);
 }
 /* Mode sombre Citizen */
 .skin-citizen-dark .nef-doc-header {
-background: linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
+background: var(--background-color-dp-02, #22272e);
-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+border-color: var(--border-color-base, #373e47);
+color: var(--color-base, #adbac7);
+border-bottom-color: var(--color-progressive, #539bf5);
 }
 .nef-doc-header-icon {
-font-size: 28px;
+font-size: 20px;
 line-height: 1;
-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+opacity: 0.8;
 }
@@ Ligne 42 : / Ligne 45 : @@
 .nef-doc-header-content strong {
 display: block;
-font-size: 17px;
+font-size: 14px;
 font-weight: 600;
-margin-bottom: 8px;
+margin-bottom: 6px;
-text-shadow: 0 1px 2px rgba(0,0,0,0.2);
+opacity: 0.9;
 }
-/* Actions avec boutons */
+/* Actions avec boutons compacts */
 .nef-doc-header-actions {
 display: flex;
 flex-wrap: wrap;
-gap: 8px;
+gap: 6px;
 }
-/* Boutons style Citizen */
+/* Boutons compacts style Citizen */
 .nef-doc-btn {
 display: inline-flex;
 align-items: center;
-padding: 6px 14px;
+padding: 4px 10px;
-background: rgba(255, 255, 255, 0.2);
+background: var(--background-color-base, #fff);
-border: 1px solid rgba(255, 255, 255, 0.3);
+border: 1px solid var(--border-color-base, #d0d7de);
 border-radius: 6px;
-font-size: 13px;
+font-size: 12px;
 font-weight: 500;
-transition: all 0.2s ease;
+transition: all 0.15s ease;
-backdrop-filter: blur(10px);
+}
+.skin-citizen-dark .nef-doc-btn {
+background: var(--background-color-dp-04, #2d333b);
+border-color: var(--border-color-base, #444c56);
 }
 .nef-doc-btn a {
-color: #fff !important;
+color: var(--color-base, #24292f) !important;
 text-decoration: none !important;
+}
+.skin-citizen-dark .nef-doc-btn a {
+color: var(--color-base, #adbac7) !important;
 }
 .nef-doc-btn:hover {
-background: rgba(255, 255, 255, 0.3);
+background: var(--background-color-interactive, #f3f4f6);
-border-color: rgba(255, 255, 255, 0.5);
+border-color: var(--border-color-interactive, #b1b9c3);
 transform: translateY(-1px);
-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+}
+.skin-citizen-dark .nef-doc-btn:hover {
+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 (vert) */
+/* Bouton création (accent vert subtil) */
 .nef-doc-btn-create {
-background: rgba(52, 211, 153, 0.3);
+border-color: var(--color-success, #1a7f37);
-border-color: rgba(52, 211, 153, 0.5);
+}
+.nef-doc-btn-create a {
+color: var(--color-success, #1a7f37) !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: rgba(52, 211, 153, 0.5);
+background: var(--color-success-subtle, #dafbe1);
+}
+.skin-citizen-dark .nef-doc-btn-create:hover {
+background: rgba(46, 160, 67, 0.15);
 }
-/* Mode sombre - ajustements boutons */
+/* ======================
-.skin-citizen-dark .nef-doc-btn {
+   RESPONSIVE
-background: rgba(255, 255, 255, 0.1);
+   ====================== */
-border-color: rgba(255, 255, 255, 0.2);
+@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;
 }
-.skin-citizen-dark .nef-doc-btn:hover {
+.nef-doc-btn {
-background: rgba(255, 255, 255, 0.2);
+font-size: 11px;
+padding: 4px 8px;
+}
 }