m |
m |
||
| Line 1: | Line 1: | ||
| − | /* | + | /* ----------------------------- */ |
| − | /* | + | /* Wikitable and Prettytable Styles */ |
| + | /* These styles apply to tables using the .wikitable and .prettytable classes */ | ||
| + | /* ----------------------------- */ | ||
table.wikitable, | table.wikitable, | ||
table.prettytable { | table.prettytable { | ||
| Line 8: | Line 10: | ||
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
| + | |||
.wikitable > tr > th, .wikitable > tr > td, | .wikitable > tr > th, .wikitable > tr > td, | ||
.wikitable > * > tr > th, .wikitable > * > tr > td, | .wikitable > * > tr > th, .wikitable > * > tr > td, | ||
| Line 15: | Line 18: | ||
padding: 3px; | padding: 3px; | ||
} | } | ||
| + | |||
| + | /* Header and Caption Styles */ | ||
.wikitable > tr > th, .wikitable > * > tr > th, | .wikitable > tr > th, .wikitable > * > tr > th, | ||
.prettytable > tr > th, .prettytable > * > tr > th { | .prettytable > tr > th, .prettytable > * > tr > th { | ||
| Line 20: | Line 25: | ||
text-align: center; | text-align: center; | ||
} | } | ||
| + | |||
.wikitable > caption, | .wikitable > caption, | ||
.prettytable > caption { | .prettytable > caption { | ||
| Line 25: | Line 31: | ||
} | } | ||
| − | /* Code | + | |
| − | /* | + | /* ----------------------------- */ |
| + | /* Styling for Inline Code and Parentheses in C# Syntax */ | ||
| + | /* These styles apply to inline code and syntax highlighting */ | ||
| + | /* ----------------------------- */ | ||
| + | |||
| + | /* Style the backtick text */ | ||
.backtick-style { | .backtick-style { | ||
font-family: monospace; | font-family: monospace; | ||
| Line 34: | Line 45: | ||
border-radius: 3px; | border-radius: 3px; | ||
} | } | ||
| − | /* Style parentheses (like () ) */ | + | |
| + | /* Style parentheses (like () in C#) */ | ||
.csharp.source-csharp .br0 { | .csharp.source-csharp .br0 { | ||
color: hsl(32, 93%, 66%) !important; /* Orange for parentheses */ | color: hsl(32, 93%, 66%) !important; /* Orange for parentheses */ | ||
} | } | ||
| − | /* Style comments */ | + | /* Style comments in C# syntax */ |
.csharp.source-csharp .co1 { | .csharp.source-csharp .co1 { | ||
color: hsl(221, 12%, 69%) !important; /* Light blue for comments */ | color: hsl(221, 12%, 69%) !important; /* Light blue for comments */ | ||
| Line 46: | Line 58: | ||
/* Style kw1 keywords (main keywords like public, class, etc.) */ | /* Style kw1 keywords (main keywords like public, class, etc.) */ | ||
.csharp.source-csharp .kw1 { | .csharp.source-csharp .kw1 { | ||
| − | color: hsl(357, 75%, 77%) !important; /* Light red | + | color: hsl(357, 75%, 77%) !important; /* Light red for keywords */ |
} | } | ||
| − | /* Style additional keywords | + | /* Style additional and other keywords */ |
| − | .csharp.source-csharp .kw3 | + | .csharp.source-csharp .kw3, .csharp.source-csharp .kw4 { |
| − | + | color: hsl(300, 30%, 68%) !important; /* Pink for uniformity */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | .csharp.source-csharp .kw4 { | + | |
| − | color: hsl(300, 30%, 68%) !important; /* | + | |
} | } | ||
| Line 64: | Line 71: | ||
} | } | ||
| − | /* Style numbers */ | + | /* Style numbers in C# syntax */ |
.csharp.source-csharp .nu0 { | .csharp.source-csharp .nu0 { | ||
color: hsl(32, 93%, 66%) !important; /* Orange for numbers */ | color: hsl(32, 93%, 66%) !important; /* Orange for numbers */ | ||
| Line 74: | Line 81: | ||
} | } | ||
| − | /* Style strings */ | + | /* Style strings (text in quotes) */ |
.csharp.source-csharp .st0 { | .csharp.source-csharp .st0 { | ||
color: hsl(114, 31%, 68%) !important; /* Light green for strings */ | color: hsl(114, 31%, 68%) !important; /* Light green for strings */ | ||
} | } | ||
| − | /* | + | /* General background and text color for code blocks */ |
.syntaxhighlight { | .syntaxhighlight { | ||
background-color: hsl(210, 15%, 22%) !important; /* Background */ | background-color: hsl(210, 15%, 22%) !important; /* Background */ | ||
| Line 85: | Line 92: | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | /* | + | /* ----------------------------- */ |
| + | /* Responsive Design for Code Blocks and Tables on Mobile */ | ||
| + | /* These styles ensure that code blocks and tables are mobile-friendly */ | ||
| + | /* ----------------------------- */ | ||
| + | |||
| + | /* Responsive Code Blocks */ | ||
pre, code, .syntaxhighlight { | pre, code, .syntaxhighlight { | ||
| − | white-space: pre-wrap !important; | + | white-space: pre-wrap !important; |
| − | word-wrap: break-word !important; | + | word-wrap: break-word !important; |
| − | max-width: 100% !important; /* | + | max-width: 100% !important; /* Ensures blocks do not exceed screen width */ |
} | } | ||
| − | /* | + | /* Responsive Tables */ |
table { | table { | ||
| − | width: 100% !important; | + | width: 100% !important; |
| − | table-layout: auto !important; /* | + | table-layout: auto !important; /* Allows columns to adjust automatically */ |
| − | word-wrap: break-word !important; /* | + | word-wrap: break-word !important; /* Forces line breaks within tables */ |
} | } | ||
| − | /* Specific | + | /* Specific Styles for Small Screens */ |
@media only screen and (max-width: 600px) { | @media only screen and (max-width: 600px) { | ||
table { | table { | ||
display: block; /* Allow horizontal scrolling for tables */ | display: block; /* Allow horizontal scrolling for tables */ | ||
| − | overflow-x: auto; | + | overflow-x: auto; |
} | } | ||
pre, code, .syntaxhighlight { | pre, code, .syntaxhighlight { | ||
| − | font-size: 12px !important; /* Reduce font size in code blocks */ | + | font-size: 12px !important; /* Reduce font size in code blocks for small screens */ |
} | } | ||
} | } | ||
| − | /* | + | /* Flexible Layout for Code Tables */ |
.code-table { | .code-table { | ||
width: 100% !important; | width: 100% !important; | ||
| − | table-layout: auto !important; | + | table-layout: auto !important; /* Ensures tables with code blocks are flexible */ |
} | } | ||
| − | /* | + | |
| + | /* ----------------------------- */ | ||
| + | /* Indentation for Nested Lists */ | ||
| + | /* These styles adjust the indentation for child lists inside parent lists */ | ||
| + | /* ----------------------------- */ | ||
| + | |||
| + | /* Adjust indentation for numbered lists inside unordered lists */ | ||
.mw-parser-output ul ol { | .mw-parser-output ul ol { | ||
| − | padding-left: | + | padding-left: 15px !important; /* Adjust this value to change indentation */ |
| − | margin-left: 0 !important; | + | margin-left: 0 !important; |
} | } | ||
| − | /* | + | /* Adjust indentation for nested unordered lists */ |
.mw-parser-output ul ul { | .mw-parser-output ul ul { | ||
| − | padding-left: | + | padding-left: 15px !important; /* Adjust this value as needed */ |
| + | margin-left: 0 !important; | ||
} | } | ||
/* ----------------------------- */ /* Wikitable and Prettytable Styles */ /* These styles apply to 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; } /* Header and Caption Styles */ .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 Parentheses in C# Syntax */ /* These styles apply to inline code and 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 kw1 keywords (main keywords like public, class, etc.) */ .csharp.source-csharp .kw1 { color: hsl(357, 75%, 77%) !important; /* Light red for keywords */ } /* Style additional and other keywords */ .csharp.source-csharp .kw3, .csharp.source-csharp .kw4 { color: hsl(300, 30%, 68%) !important; /* Pink for uniformity */ } /* Style methods (functions like UnhighlightCards, SetGameState) */ .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 (like ;, =, <, >, .) */ .csharp.source-csharp .sy0 { color: hsl(57, 93%, 66%) !important; /* Yellow for symbols */ } /* Style strings (text in quotes) */ .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 */ /* These styles ensure that code blocks and tables are mobile-friendly */ /* ----------------------------- */ /* 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 */ } /* ----------------------------- */ /* Indentation for Nested Lists */ /* These styles adjust the indentation for child lists inside parent lists */ /* ----------------------------- */ /* Adjust indentation for numbered lists inside unordered lists */ .mw-parser-output ul ol { padding-left: 15px !important; /* Adjust this value to change indentation */ margin-left: 0 !important; } /* Adjust indentation for nested unordered lists */ .mw-parser-output ul ul { padding-left: 15px !important; /* Adjust this value as needed */ margin-left: 0 !important; }