MediaWiki

Difference between revisions of "Common.css"

From Shadow Era Wiki

m
m
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
+
/* ----------------------------- */
/* wikitable/prettytable */
+
/* 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 below added by blopi */
+
 
/* style the backtick text */
+
/* ----------------------------- */
 +
/* 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 */
+
     color: hsl(357, 75%, 77%) !important;  /* Light red for keywords */
 
}
 
}
  
/* Style additional keywords (kw3) */
+
/* 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 keyword uniformity */
+
     color: hsl(300, 30%, 68%) !important;  /* Pink for uniformity */
}
+
 
+
/* Style kw4 keywords (other keywords) */
+
.csharp.source-csharp .kw4 {
+
     color: hsl(300, 30%, 68%) !important;  /* Same pink color for uniformity */
+
 
}
 
}
  
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 */
 
}
 
}
  
/* Background and general text color for code blocks */
+
/* 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:
 
}
 
}
  
/* Make code blocks responsive on mobile */
 
pre, code, .syntaxhighlight {
 
    white-space: pre-wrap; /* Allow line breaks */
 
    word-wrap: break-word; /* Allow long words to break */
 
    max-width: 100%; /* Ensure blocks don't exceed screen width */
 
}
 
  
/* Make code blocks responsive on mobile */
+
/* ----------------------------- */
 +
/* 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; /* Allow line breaks */
+
     white-space: pre-wrap !important;
     word-wrap: break-word !important; /* Allow long words to break */
+
     word-wrap: break-word !important;
     max-width: 100% !important; /* Ensure blocks don't exceed screen width */
+
     max-width: 100% !important; /* Ensures blocks do not exceed screen width */
 
}
 
}
  
/* Force tables to be responsive */
+
/* Responsive Tables */
 
table {
 
table {
     width: 100% !important; /* Ensure tables don't exceed the screen width */
+
     width: 100% !important;
     table-layout: auto !important; /* Allow columns to adjust automatically */
+
     table-layout: auto !important; /* Allows columns to adjust automatically */
     word-wrap: break-word !important; /* Force line breaks within the table */
+
     word-wrap: break-word !important; /* Forces line breaks within tables */
 
}
 
}
  
/* Specific styles for small screens */
+
/* 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; /* Enable horizontal scroll if necessary */
+
         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 */
 
     }
 
     }
 
}
 
}
  
/* Apply flexible layout for tables with code blocks */
+
/* 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 */
 
}
 
}
  
/* Specific for numbered lists inside unordered lists */
+
 
 +
/* ----------------------------- */
 +
/* 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: 5px !important; /* Reduce indentation for child numbered lists */
+
     padding-left: 15px !important; /* Adjust this value to change indentation */
     margin-left: 0 !important; /* Ensure no extra margin */
+
     margin-left: 0 !important;
 
}
 
}
  
/* Specific for nested unordered lists */
+
/* Adjust indentation for nested unordered lists */
 
.mw-parser-output ul ul {
 
.mw-parser-output ul ul {
     padding-left: 5px !important; /* Reduce indentation for child unordered lists */
+
     padding-left: 15px !important; /* Adjust this value as needed */
 +
    margin-left: 0 !important;
 
}
 
}

Revision as of 06:27, 7 September 2024

/* ----------------------------- */
/* 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;
}