|
|
| (5 versions intermédiaires par le même utilisateur non affichées) |
| Ligne 1 : |
Ligne 1 : |
| /* ================================ | | /* ================================ |
| ARTICLE DÉTAILLÉ - Citizen Skin | | ARTICLE DÉTAILLÉ - Citizen Skin |
| | Palette : tokens Citizen natifs |
| | Dark mode : automatique via variables |
| ================================ */ | | ================================ */ |
|
| |
|
| .article-detaille { | | .article-detaille { |
| display: flex;
| | display: flex; |
| align-items: center;
| | align-items: center; |
| gap: 12px;
| | gap: var(--space-sm); |
| padding: 12px 16px;
| | padding: var(--space-xs) var(--space-sm); |
| margin: 16px 0;
| | margin: var(--space-sm) 0; |
| background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
| | background-color: var(--color-surface-2); |
| border-left: 4px solid #1976d2;
| | border-left: 3px solid var(--color-progressive); |
| border-radius: 6px;
| | border-radius: var(--border-radius-base); |
| transition: all 0.2s ease;
| | font-size: 0.95em; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
| | line-height: 1.5; |
| | transition: background-color 0.2s ease, box-shadow 0.2s ease; |
| } | | } |
|
| |
|
| .article-detaille:hover { | | .article-detaille:hover { |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
| | background-color: var(--color-surface-3); |
| transform: translateX(2px);
| |
| } | | } |
| | |
| | /* --- Icône --- */ |
|
| |
|
| .article-detaille-icone { | | .article-detaille-icone { |
| font-size: 24px;
| | font-size: 1.1em; |
| color: #1976d2;
| | color: var(--color-progressive); |
| flex-shrink: 0;
| | flex-shrink: 0; |
| line-height: 1;
| | line-height: 1; |
| /* FORCER la suppression des encadrés */
| | opacity: var(--opacity-icon-base); |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| margin: 0 !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: none !important;
| |
| outline: none !important;
| |
| display: inline-flex !important;
| |
| } | | } |
|
| |
|
| /* Cibler TOUS les éléments enfants de l'icône */ | | /* --- Contenu --- */ |
| .article-detaille-icone *,
| |
| .article-detaille-icone span,
| |
| .article-detaille-icone > *,
| |
| .article-detaille-icone svg,
| |
| .article-detaille-icone i {
| |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| margin: 0 !important;
| |
| border-radius: 0 !important;
| |
| box-shadow: none !important;
| |
| outline: none !important;
| |
| color: inherit !important;
| |
| }
| |
|
| |
|
| .article-detaille-contenu { | | .article-detaille-contenu { |
| flex: 1;
| | flex: 1; |
| display: flex;
| | color: var(--color-base); |
| flex-wrap: wrap;
| |
| align-items: baseline;
| |
| gap: 6px;
| |
| } | | } |
|
| |
|
| .article-detaille-label { | | .article-detaille-contenu a { |
| font-weight: 600;
| | color: var(--color-progressive); |
| color: #424242;
| | font-weight: var(--font-weight-medium); |
| white-space: nowrap;
| | text-decoration: none; |
| } | | } |
|
| |
|
| .article-detaille-liens { | | .article-detaille-contenu a:hover { |
| color: #1976d2;
| | color: var(--color-progressive--hover); |
| font-weight: 500;
| | text-decoration: underline; |
| } | | } |
|
| |
|
| .article-detaille-liens a {
| | /* --- Responsive --- */ |
| color: #1976d2;
| |
| text-decoration: none;
| |
| transition: text-decoration 0.2s ease;
| |
| }
| |
|
| |
|
| .article-detaille-liens a:hover { | | @media (max-width: 768px) { |
| text-decoration: underline;
| | .article-detaille { |
| | padding: var(--space-xs); |
| | gap: var(--space-xs); |
| } | | } |
|
| |
|
| /* ================================
| | .article-detaille-icone { |
| MODE SOMBRE
| | font-size: 1em; |
| ================================ */
| |
| | |
| [data-theme="dark"] .article-detaille {
| |
| background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
| |
| border-left-color: #64b5f6;
| |
| }
| |
| | |
| [data-theme="dark"] .article-detaille-icone {
| |
| color: #64b5f6;
| |
| }
| |
| | |
| [data-theme="dark"] .article-detaille-label {
| |
| color: #e0e0e0;
| |
| }
| |
| | |
| [data-theme="dark"] .article-detaille-liens {
| |
| color: #64b5f6;
| |
| }
| |
| | |
| [data-theme="dark"] .article-detaille-liens a {
| |
| color: #64b5f6;
| |
| } | | } |
|
| |
| /* ================================
| |
| RESPONSIVE
| |
| ================================ */
| |
|
| |
| @media (max-width: 768px) {
| |
| .article-detaille {
| |
| gap: 10px;
| |
| padding: 10px 14px;
| |
| }
| |
|
| |
| .article-detaille-icone {
| |
| font-size: 20px;
| |
| }
| |
|
| |
| .article-detaille-contenu {
| |
| flex-direction: column;
| |
| align-items: flex-start;
| |
| gap: 4px;
| |
| }
| |
| } | | } |
