MediaWiki

Difference between revisions of "Common.css"

From Shadow Era Wiki

m (TOC customization removed)
m
Line 139: Line 139:
 
/* Custom styles for headings (h2, h3, etc.) to adjust their size */
 
/* Custom styles for headings (h2, h3, etc.) to adjust their size */
 
/* ----------------------------- */
 
/* ----------------------------- */
 
/* This section controls the appearance of headings in the wiki */
 
/* You can adjust the 'font-size' values as needed for better readability */
 
/* You can continue adding more heading levels if needed or further customization */
 
  
 
/* Level 2 Heading (== Heading == in MediaWiki) */
 
/* Level 2 Heading (== Heading == in MediaWiki) */
Line 160: Line 156:
  
 
/* ----------------------------- */
 
/* ----------------------------- */
/* This CSS ensures that on larger screens (desktop), the image floats to the right */
+
/* Responsive Design for Images and Text */
/* of the text with some margin. On smaller screens (mobile devices), the image will */
+
/* be centered above the text. The 'clear: both' property ensures that the text */
+
/* always starts below the image on small screens, preventing it from appearing next to it.*/
+
 
/* ----------------------------- */
 
/* ----------------------------- */
  
/* Float image to the right on larger screens */
+
/* Ensure that the image and table are responsive */
.responsive-image {
+
.card-image {
     float: right;
+
     float: left;
     margin-left: 10px;
+
     width: 300px;
     width: auto;
+
     margin-right: 20px;
 
}
 
}
  
/* On small screens (max-width: 768px), stack the content vertically */
+
/* On small screens, stack the content */
@media (max-width: 768px) {
+
@media (max-width: 600px) {
     .responsive-image {
+
     .card-image {
         float: none;
+
         float: none !important;
        margin: 0 auto 20px auto; /* Margin to center image and add spacing */
+
         width: 100% !important;
        display: block;
+
         margin-right: 0 !important;
         width: 100%; /* Ensure the image container takes full width on mobile */
+
         text-align: center;
+
    }
+
    .textcontent {
+
        clear: both;
+
        display: block;
+
 
     }
 
     }
 
}
 
}

Revision as of 05:58, 10 September 2024

/* ----------------------------- */
/* 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 */
}
 
/* ----------------------------- */
/* Responsive Design for Images and Text */
/* ----------------------------- */
 
/* Ensure that the image and table are responsive */
.card-image {
    float: left;
    width: 300px;
    margin-right: 20px;
}
 
/* On small screens, stack the content */
@media (max-width: 600px) {
    .card-image {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
    }
}