Note: After saving, you may have to bypass your browser's cache to see the changes.
/* Masquer les bannières pour les smartphones par défaut */ .mobile-template { display: none; /* Cacher par défaut */ } /* Afficher les bannières pour les ordinateurs */ @media (min-width: 810px) { .desktop-template { display: block; /* Afficher sur les écrans plus larges */ } } /* Afficher les bannières pour les smartphones */ @media (max-width: 809px) { .desktop-template { display: none; /* Cacher sur les petits écrans */ } .mobile-template { display: block; /* Afficher sur les petits écrans */ } } /*"Current version" effect*/ .sign { text-transform: uppercase; color: #edffe6; text-shadow: 0 0 0.6rem #f3ffe6, 0 0 1.5rem #ff6565, -0.2rem 0.1rem 1rem #ff6565, 0.2rem 0.1rem 1rem #ff6565, 0 -0.5rem 2rem #ff2424, 0 0.5rem 3rem #ff2424; animation: shine 2s forwards, flicker 3s infinite !important; } @keyframes blink { 0%, 22%, 36%, 75% { color: #f1ffe6; text-shadow: 0 0 0.6rem #efffe6, 0 0 1.5rem #ff6565, -0.2rem 0.1rem 1rem #ff6565, 0.2rem 0.1rem 1rem #ff6565, 0 -0.5rem 2rem #ff2424, 0 0.5rem 3rem #ff2424; } 28%, 33% { color: #ff6565; text-shadow: none; } 82%, 97% { color: #ff2424; text-shadow: none; } } .flicker { animation: shine 2s forwards, blink 3s 2s infinite !important; } .fast-flicker { animation: shine 2s forwards, blink 10s 1s infinite !important; } @keyframes shine { 0% { color: #6b1818; text-shadow: none; } 100% { color: #eeffe6; text-shadow: 0 0 0.6rem #ffe6e6, 0 0 1.5rem #ff6565, -0.2rem 0.1rem 1rem #ff6565, 0.2rem 0.1rem 1rem #ff6565, 0 -0.5rem 2rem #ff2424, 0 0.5rem 3rem #ff2424; } } @keyframes flicker { from { opacity: 1; } 4% { opacity: 0.9; } 6% { opacity: 0.85; } 8% { opacity: 0.95; } 10% { opacity: 0.9; } 11% { opacity: 0.922; } 12% { opacity: 0.9; } 14% { opacity: 0.95; } 16% { opacity: 0.98; } 17% { opacity: 0.9; } 19% { opacity: 0.93; } 20% { opacity: 0.99; } 24% { opacity: 1; } 26% { opacity: 0.94; } 28% { opacity: 0.98; } 37% { opacity: 0.93; } 38% { opacity: 0.5; } 39% { opacity: 0.96; } 42% { opacity: 1; } 44% { opacity: 0.97; } 46% { opacity: 0.94; } 56% { opacity: 0.9; } 58% { opacity: 0.9; } 60% { opacity: 0.99; } 68% { opacity: 1; } 70% { opacity: 0.9; } 72% { opacity: 0.95; } 93% { opacity: 0.93; } 95% { opacity: 0.95; } 97% { opacity: 0.93; } to { opacity: 1; } } /* Classe pour le clignotement */ .flicker { animation: shine 2s forwards, flicker 3s 2s infinite !important; /* Animation de brillance et de clignotement */ } /* Pour les grands écrans */ @media only screen and (min-width: 601px) { .table-2 { flex: 0 0 45%; /* 45% de largeur pour le tableau 2 */ margin-right: 5%; /* Espace entre les tableaux */ } .table-3 { flex: 0 0 45%; /* 45% de largeur pour le tableau 3 */ margin-left: auto; /* Aligne le tableau 3 à droite */ } } /* Pour les petits écrans */ @media only screen and (max-width: 600px) { .table-2, .table-3 { flex: 0 0 100%; /* 100% de largeur pour les petits écrans */ margin-right: 0; /* Réinitialise la marge */ margin-left: 0; /* Réinitialise la marge */ } } /* Barre de navigation position élevée */ .top-bar { position: relative; /* Assurez-vous que la barre de navigation a une position */ z-index: 11; /* Donnez un z-index suffisamment élevé pour le placer au-dessus de l'overlay et du contenu */ } /* Assurez-vous que les menus déroulants sont également au-dessus */ .button.dropdown { position: relative; /* Assurez-vous que les menus déroulants ont une position */ z-index: 12; /* Un z-index plus élevé que la barre de navigation pour les menus déroulants */ } /* Bouton Action position élevée */ .button.dropdown.small.secondary.radius { position: relative; /* Assurez-vous que le bouton a une position */ z-index: 10; /* Donnez un z-index suffisamment élevé pour le placer au-dessus de tout */ } /* Contenu de la page position élevé */ #mw-content-text { position: relative; /* Assurez-vous que le contenu a une position */ z-index: 5; /* Un z-index suffisamment élevé pour être au-dessus de l'overlay */ } /* Titre de la page position élevée */ .title { position: relative; /* Assurez-vous que le titre a une position */ z-index: 7; /* Donnez un z-index suffisamment élevé pour le placer au-dessus de l'overlay */ } /* Tagline position élevé */ #tagline { position: relative; /* Assurez-vous que le tagline a une position */ z-index: 8; /* Donnez un z-index suffisamment élevé pour le placer au-dessus de l'overlay */ } /* Catégorie position élevée */ .namespace.label { position: relative; /* Assurez-vous que la catégorie a une position */ z-index: 7; /* Donnez un z-index suffisamment élevé pour le placer au-dessus de l'overlay, au même niveau que le titre */ } /* Sous-catégorie position élevée */ h2 { position: relative; /* Assurez-vous que les sous-catégories ont une position */ z-index: 7; /* Donnez un z-index suffisamment élevé pour les placer au-dessus de l'overlay, au même niveau que le titre */ } /* Catégorie de normal position élevée */ #mw-normal-catlinks { position: relative; /* Assurez-vous que cet élément a une position */ z-index: 7; /* Donnez un z-index pour être au même niveau que le titre */ } /* Footer position élevé */ footer { position: relative; /* Assurez-vous que le footer a une position */ z-index: 4; /* Un z-index pour être au-dessus de l'overlay */ } /* Tableau bord arrondi avec ombre */ table { border-collapse: collapse; /* Utilisez 'collapse' pour des bordures uniformes */ width: 100%; overflow: hidden; /* Pour arrondir les coins */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Ombre du tableau */ border-radius: 10px; /* Rayon de bordure global pour le tableau */ border: 1px solid rgba(35, 39, 42, 0.5); /* Couleur de bordure semi-transparente */ } /* Ne pas appliquer de border-radius aux cellules */ td, th { /* Ne rien ajouter ici concernant le border-radius */ } /* ----------------------------- */ /* Responsive Design for Code Blocks and Tables on Mobile */ /* ----------------------------- */ /* Responsive Code Blocks */ pre, code, .syntaxhighlight { white-space: pre-wrap !important; /* Permet aux longues lignes de se plier */ word-wrap: break-word !important; /* Force les retours à la ligne */ max-width: 100% !important; /* Assure que les blocs ne dépassent pas la largeur de l'écran */ } /* Responsive Tables */ table { width: 100% !important; /* Assure que le tableau s'adapte à la largeur de l'écran */ table-layout: fixed; /* Fixe la largeur des colonnes */ word-wrap: break-word !important; /* Force les retours à la ligne à l'intérieur des cellules */ } /* Retirer le gras par défaut des éléments de liste */ ul, ol { font-weight: normal; /* Définit le poids de police normal pour toutes les listes */ } /* Appliquer le gras uniquement aux éléments entourés de ''' */ strong, b { font-weight: bold; /* Définit le poids de police en gras pour les éléments spécifiés */ } /*Transition douce pour l'affichage du contenu #monContenu { display: none; transition: all 0.5s ease; /* Transition douce pour l'affichage du contenu */ } a { color: #1e90ff; text-decoration: underline; cursor: pointer; } a:hover { color: #4169e1; } /* Ce bloc de styles ajuste l'alignement du lien "Expand/Collapse" des éléments repliables. Il s'assure que le lien est correctement aligné à gauche, plutôt qu'à droite, tout en conservant un comportement de ligne pour qu'il suive le flux du texte environnant. */ .mw-collapsible-toggle { float: none !important; /* Enlève le flottement à droite pour que le lien ne soit plus aligné à droite. */ text-align: left !important; /* Force l'alignement du texte du lien "Expand/Collapse" à gauche. */ display: inline-block; /* Assure que le lien se comporte comme un élément de ligne et suit le flux du texte. */ } /* Ajustements de style pour les petits écrans (moins de 600px de large) - Les tableaux (.wikitable) prennent toute la largeur de l'écran disponible. - Les images s'ajustent à 100% de la largeur de leur conteneur, tout en conservant leurs proportions. */ @media only screen and (max-width: 600px) { .wikitable { width: 100% !important; } img { max-width: 100% !important; height: auto !important; } } /* ----------------------------- */ /* Styling for Inline Code and C# Syntax Highlighting */ /* ----------------------------- */ /* Style the backtick text */ .backtick-style { font-family: monospace; background-color: #0e1217; padding: 0.2em 0.4em; border: 1px solid #d1d5da; border-radius: 3px; } /* Style parentheses (like () in C#) */ .csharp.source-csharp .br0 { color: hsl(32, 93%, 66%) !important; /* Orange for parentheses */ } /* Style comments in C# syntax */ .csharp.source-csharp .co1 { color: hsl(221, 12%, 69%) !important; /* Light blue for comments */ } /* Style keywords in C# syntax */ .csharp.source-csharp .kw1 { color: hsl(357, 75%, 77%) !important; /* Light red for main keywords */ } .csharp.source-csharp .kw3, .csharp.source-csharp .kw4 { color: hsl(300, 30%, 68%) !important; /* Pink for additional keywords */ } /* Style methods in C# syntax */ .csharp.source-csharp .me1 { color: hsl(210, 50%, 60%) !important; /* Light blue for methods */ } /* Style numbers in C# syntax */ .csharp.source-csharp .nu0 { color: hsl(32, 93%, 66%) !important; /* Orange for numbers */ } /* Style symbols in C# syntax */ .csharp.source-csharp .sy0 { color: hsl(116, 73%, 51%) !important; /* Green for symbols */ } /* Style strings in C# syntax */ .csharp.source-csharp .st0 { color: hsl(114, 31%, 68%) !important; /* Light green for strings */ } /* General background and text color for code blocks */ .syntaxhighlight { background-color: hsl(210, 15%, 22%) !important; /* Background */ color: hsl(219, 28%, 88%) !important; /* General text color */ } /* ----------------------------- */ /* Styles for Card Template */ /* This section contains styles for the card layout, ensuring that the image and table are displayed correctly on both large and small screens. It uses Flexbox for a responsive design. */ /* ----------------------------- */ /* Container for the card image and table */ .card-container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 20px; } /* Style for the card image */ .card-image { flex: 0 0 300px; } /* Style for the card information (table) */ .card-info { flex: 1; min-width: 200px; } /* Responsive adjustments for small screens */ @media (max-width: 600px) { .card-container { display: block; } .card-image, .card-info { width: 100%; margin: 0; } .card-image img { width: 100% !important; height: auto; } }