Note: After saving, you may have to bypass your browser's cache to see the changes.
.sign { text-transform: uppercase; color: rgb(238, 255, 230); /* Couleur du texte */ text-shadow: 0 0 0.6rem rgb(243, 255, 230), 0 0 1.5rem rgb(183, 255, 101), 0 -0.2rem 1rem rgb(191, 255, 101), 0 0.5rem 2rem rgb(164, 255, 36), 0 -0.5rem 2rem rgb(145, 255, 36); animation: shine 2s forwards, flicker 3s infinite !important; } @keyframes shine { 0% { color: rgb(69, 70, 50); /* Couleur sombre au début */ text-shadow: none; } 100% { color: rgb(238, 255, 230); /* Couleur finale */ text-shadow: 0 0 0.6rem rgb(243, 255, 230), 0 0 1.5rem rgb(183, 255, 101), 0 0.2rem 1rem rgb(191, 255, 101), 0 0.5rem 3rem rgb(164, 255, 36); /* Ombres finales */ } } /* 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; } }