|
|
| Line 1: |
Line 1: |
| − | /* ----------------------------- */
| |
| − | /* Force indentation and margins for lists */
| |
| − | /* Ensures child lists are aligned directly under the parent */
| |
| − | /* ----------------------------- */
| |
| − | .mw-parser-output ul ul,
| |
| − | .mw-parser-output ul ol,
| |
| − | .mw-parser-output ol ul,
| |
| − | .mw-parser-output ol ol {
| |
| − | margin-left: 0px !important;
| |
| − | padding-left: 0px !important;
| |
| − | }
| |
| | | | |
| − | /* ----------------------------- */
| |
| − | /* Wikitable and Prettytable Styles */
| |
| − | /* Styles for tables using the .wikitable and .prettytable classes */
| |
| − | /* ----------------------------- */
| |
| − | table.wikitable,
| |
| − | table.prettytable {
| |
| − | margin: 13px 13px 13px 0;
| |
| − | background: #f9f9f9;
| |
| − | border: 1px #aaa solid;
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − |
| |
| − | .wikitable > tr > th, .wikitable > tr > td,
| |
| − | .wikitable > * > tr > th, .wikitable > * > tr > td,
| |
| − | .prettytable > tr > th, .prettytable > tr > td,
| |
| − | .prettytable > * > tr > th, .prettytable > * > tr > td {
| |
| − | border: 1px #aaa solid;
| |
| − | padding: 3px;
| |
| − | }
| |
| − |
| |
| − | .wikitable > tr > th, .wikitable > * > tr > th,
| |
| − | .prettytable > tr > th, .prettytable > * > tr > th {
| |
| − | background: #f2f2f2;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .wikitable > caption,
| |
| − | .prettytable > caption {
| |
| − | font-weight: bold;
| |
| − | }
| |
| − |
| |
| − | /* ----------------------------- */
| |
| − | /* Styling for Inline Code and C# Syntax Highlighting */
| |
| − | /* ----------------------------- */
| |
| − |
| |
| − | /* Style the backtick text */
| |
| − | .backtick-style {
| |
| − | font-family: monospace;
| |
| − | background-color: #f8f9fa;
| |
| − | 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 */
| |
| − | }
| |
| − |
| |
| − | /* ----------------------------- */
| |
| − | /* Responsive Design for Code Blocks and Tables on Mobile */
| |
| − | /* ----------------------------- */
| |
| − |
| |
| − | /* Responsive Code Blocks */
| |
| − | pre, code, .syntaxhighlight {
| |
| − | white-space: pre-wrap !important;
| |
| − | word-wrap: break-word !important;
| |
| − | max-width: 100% !important; /* Ensures blocks do not exceed screen width */
| |
| − | }
| |
| − |
| |
| − | /* Responsive Tables */
| |
| − | table {
| |
| − | width: 100% !important;
| |
| − | table-layout: auto !important; /* Allows columns to adjust automatically */
| |
| − | word-wrap: break-word !important; /* Forces line breaks within tables */
| |
| − | }
| |
| − |
| |
| − | /* Specific Styles for Small Screens */
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | table {
| |
| − | display: block; /* Allow horizontal scrolling for tables */
| |
| − | overflow-x: auto;
| |
| − | }
| |
| − |
| |
| − | pre, code, .syntaxhighlight {
| |
| − | font-size: 12px !important; /* Reduce font size in code blocks for small screens */
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* Flexible Layout for Code Tables */
| |
| − | .code-table {
| |
| − | width: 100% !important;
| |
| − | table-layout: auto !important; /* Ensures tables with code blocks are flexible */
| |
| − | }
| |
| − |
| |
| − | /* ----------------------------- */
| |
| − | /* Heading Styles */
| |
| − | /* Custom styles for headings (h2, h3, etc.) to adjust their size */
| |
| − | /* ----------------------------- */
| |
| − |
| |
| − | /* Level 2 Heading (== Heading == in MediaWiki) */
| |
| − | h2 {
| |
| − | font-size: 1.75em; /* Adjusts the size of level 2 headings to 1.5 times the base font size */
| |
| − | }
| |
| − |
| |
| − | /* Level 3 Heading (=== Subheading === in MediaWiki) */
| |
| − | h3 {
| |
| − | font-size: 1.5em; /* Adjusts the size of level 3 headings to 1.2 times the base font size */
| |
| − | }
| |
| − |
| |
| − | /* Level 4 Heading (==== Subheading ==== in MediaWiki) */
| |
| − | h4 {
| |
| − | font-size: 1.25em; /* Adjusts the size of level 4 headings to 1.1 times the base font size */
| |
| − | }
| |
| − |
| |
| − | /* ----------------------------- */
| |
| − | /* 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;
| |
| − | }
| |
| − | }
| |
| − | /* ----------------------------- */
| |
| − | /* Styles pour les Sections Pliables */
| |
| − | /* ----------------------------- */
| |
| − |
| |
| − | /* Style pour le bouton de pliage */
| |
| − | .hide-toggle-button {
| |
| − | cursor: pointer;
| |
| − | color: #007bff;
| |
| − | text-decoration: underline;
| |
| − | margin-bottom: 10px;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | /* Changement de couleur au survol */
| |
| − | .hide-toggle-button:hover {
| |
| − | color: #0056b3;
| |
| − | }
| |
| − |
| |
| − | /* Style pour le contenu pliable */
| |
| − | .hide-toggle-content {
| |
| − | padding: 10px;
| |
| − | border: 1px solid #aaa;
| |
| − | border-top: none;
| |
| − | background-color: #fafafa;
| |
| − | border-radius: 0 0 4px 4px;
| |
| − | }
| |
| − |
| |
| − | /* Optionnel : Animation douce pour l'apparition/disparition */
| |
| − | .hide-toggle-content {
| |
| − | transition: max-height 0.3s ease, opacity 0.3s ease;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | /* Ajustement de la mise en page pour les petits écrans (comme les téléphones mobiles) */
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | /* Rendre les tableaux wikitable plus flexibles en prenant toute la largeur de l'écran */
| |
| − | .wikitable {
| |
| − | width: 100% !important;
| |
| − | }
| |
| − | /* Réduire la taille des grandes images à 100px pour mieux les adapter aux petits écrans */
| |
| − | img {
| |
| − | width: 100px; /* Réduire la taille des images */
| |
| − | }
| |
| − | }
| |