|
|
| Line 1: |
Line 1: |
| − | /* 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; /* Use 'collapse' for uniform borders */
| |
| − | width: 100%;
| |
| − | overflow: hidden; /* To round corners */
| |
| − | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Box shadow */
| |
| − | border-radius: 10px; /* Global border radius */
| |
| − | border: 1px solid rgba(35, 39, 42, 0.5); /* Semi-transparent table border color */
| |
| − | }
| |
| − |
| |
| − | /* ----------------------------- */
| |
| − | /* 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;
| |
| − | }
| |
| − | }
| |