MediaWiki

Difference between revisions of "Common.css"

From Shadow Era Wiki

m
m
 
(84 intermediate revisions by one user not shown)
Line 1: Line 1:
−
table {
+
/* Masquer les bannières pour les smartphones par défaut */
−
    border-collapse: collapse; /* Use 'collapse' for uniform borders */
+
.mobile-template {
−
    width: 100%;
+
     display: none; /* Cacher par défaut */
−
    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 #23272a; /* Table border color */
+
 
}
 
}
  
−
table th {
+
/* Afficher les bannières pour les ordinateurs */
−
    background-image: url('https://www.shadowera.com/images/tf_ideal/misc/t_bg.jpg'); /* Background image */
+
@media (min-width: 810px) {
−
    background-size: cover; /* Fit image to cell */
+
     .desktop-template {
−
     color: white !important; /* Header text color */
+
        display: block; /* Afficher sur les écrans plus larges */
−
    border: none; /* Remove individual header borders */
+
     }
−
     padding: 10px;
+
−
    border-top-left-radius: 10px; /* Top left corner rounding */
+
−
    border-top-right-radius: 10px; /* Top right corner rounding */
+
 
}
 
}
  
−
table td {
+
/* Afficher les bannières pour les smartphones */
−
     border: 1px solid #23272a !important; /* Cell border color */
+
@media (max-width: 809px) {
−
     padding: 10px;
+
     .desktop-template {
−
     text-align: left;
+
        display: none; /* Cacher sur les petits écrans */
−
    color: white !important; /* Cell text color */
+
     }
 +
     .mobile-template {
 +
        display: block; /* Afficher sur les petits écrans */
 +
    }
 
}
 
}
  
−
table tr:nth-child(even) {
+
/*"Current version" effect*/
−
     background-color: #38424c; /* Couleur d'arrière-plan pour les lignes paires */
+
.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;
 
}
 
}
  
−
table tr:nth-child(odd) {
+
@keyframes blink {
−
     background-color: #20242d; /* Couleur d'arrière-plan pour les lignes impaires */
+
    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;
 +
    }
 
}
 
}
  
−
h1, h2, h3, h4, h5, h6 {
+
.flicker {
−
     color: white !important; /* Couleur du texte des titres en blanc */
+
     animation: shine 2s forwards, blink 3s 2s infinite !important;
 
}
 
}
  
−
/* ----------------------------- */
+
.fast-flicker {
−
/* Wiki background color */
+
     animation: shine 2s forwards, blink 10s 1s infinite !important;
−
/* ----------------------------- */
+
−
body {
+
−
     background-color: #171c22; /* Couleur de fond pour toutes les pages */
+
−
    color: white; /* Couleur du texte par défaut (facultatif) */
+
 
}
 
}
  
−
/* ----------------------------- */
+
@keyframes shine {
−
/* White texte */
+
    0% {
−
/* ----------------------------- */
+
        color: #6b1818;
 +
        text-shadow: none;
 +
    }
  
−
body {
+
    100% {
−
    color: white !important; /* Couleur du texte par défaut en blanc */
+
        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;
 +
    }
 
}
 
}
  
−
table {
+
@keyframes flicker {
−
     color: white !important; /* Assurer que le texte des tableaux soit aussi en blanc */
+
     from {
−
}
+
        opacity: 1;
 +
    }
  
−
/* ----------------------------- */
+
    4% {
−
/* Responsive Design for Code Blocks and Tables on Mobile */
+
        opacity: 0.9;
−
/* ----------------------------- */
+
    }
  
−
/* Responsive Code Blocks */
+
    6% {
−
pre, code, .syntaxhighlight {
+
        opacity: 0.85;
−
     white-space: pre-wrap !important;
+
    }
−
     word-wrap: break-word !important;
+
 
−
     max-width: 100% !important; /* Ensures blocks do not exceed screen width */
+
    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;
 +
    }
 
}
 
}
  
−
/* Responsive Tables */
+
/* Classe pour le clignotement */
−
table {
+
.flicker {
−
     width: 100% !important;
+
     animation: shine 2s forwards, flicker 3s 2s infinite !important; /* Animation de brillance et de clignotement */
−
    table-layout: auto !important; /* Allows columns to adjust automatically */
+
−
    word-wrap: break-word !important; /* Forces line breaks within tables */
+
 
}
 
}
  
−
/* Specific Styles for Small Screens */
+
/* Pour les grands écrans */
−
@media only screen and (max-width: 600px) {
+
@media only screen and (min-width: 601px) {
−
     table {
+
     .table-2 {
−
         display: block; /* Allow horizontal scrolling for tables */
+
         flex: 0 0 45%; /* 45% de largeur pour le tableau 2 */
−
         overflow-x: auto;
+
         margin-right: 5%; /* Espace entre les tableaux */
 
     }
 
     }
  
−
     pre, code, .syntaxhighlight {
+
     .table-3 {
−
         font-size: 12px !important; /* Reduce font size in code blocks for small screens */
+
         flex: 0 0 45%; /* 45% de largeur pour le tableau 3 */
 +
        margin-left: auto; /* Aligne le tableau 3 à droite */
 
     }
 
     }
 
}
 
}
  
−
/* Flexible Layout for Code Tables */
+
/* Pour les petits écrans */
−
.code-table {
+
@media only screen and (max-width: 600px) {
−
     width: 100% !important;
+
    .table-2, .table-3 {
−
     table-layout: auto !important; /* Ensures tables with code blocks are flexible */
+
        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 */
 
}
 
}
  
Line 152: Line 389:
 
.backtick-style {
 
.backtick-style {
 
     font-family: monospace;
 
     font-family: monospace;
−
     background-color: #f8f9fa;
+
     background-color: #0e1217;
 
     padding: 0.2em 0.4em;
 
     padding: 0.2em 0.4em;
 
     border: 1px solid #d1d5da;
 
     border: 1px solid #d1d5da;

Latest revision as of 04:30, 12 October 2024

/* 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;
    }
}
Retrieved from "https://www.shadowera.com/wiki/index.php?title=MediaWiki:Common.css&oldid=36584"