Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 04:11, 27 March 2026

/* CSS placed here will be applied to all skins */

Difference between revisions of "MediaWiki:Common.css"

Latest revision as of 04:11, 27 March 2026

Navigation menu

Search

@@ Line 1: / Line 1: @@
 /* CSS placed here will be applied to all skins */
-/* ========================================
-   Dark Mode MediaWiki:Common.css
-   Purple Accent Theme
-   ======================================== */
-/* --- Color Variables for Easy Customization --- */
-:root {
-    --bg-primary: #1a1a2e;
-    --bg-secondary: #16213e;
-    --bg-tertiary: #0f0f1a;
-    --text-primary: #e8e8e8;
-    --text-secondary: #b8b8b8;
-    --accent-purple: #9b59b6;
-    --accent-purple-dark: #8e44ad;
-    --accent-purple-light: #bb86fc;
-    --link-color: #bb86fc;
-    --link-visited: #a569bd;
-    --border-color: #3d3d5c;
-    --code-bg: #252540;
-    --table-header: #2d2d4a;
-    --warning-red: #ff6b6b;
-}
-/* --- General Page Layout --- */
-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    line-height: 1.6;
-    color: var(--text-primary);
-    background-color: var(--bg-primary);
-}
-/* --- Headings --- */
-h1, h2, h3, h4, h5, h6 {
-    color: var(--text-primary);
-    margin-top: 1.5em;
-    margin-bottom: 0.5em;
-}
-h1 {
-    font-size: 2em;
-    border-bottom: 2px solid var(--accent-purple);
-    padding-bottom: 0.3em;
-}
-h2 {
-    font-size: 1.6em;
-    border-bottom: 1px solid var(--accent-purple-dark);
-    padding-bottom: 0.3em;
-}
-h3 { font-size: 1.4em; }
-h4 { font-size: 1.2em; font-weight: bold; }
-/* --- Links --- */
-a {
-    color: var(--link-color);
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-    color: var(--accent-purple-light);
-}
-a:visited {
-    color: var(--link-visited);
-}
-a.new {
-    color: var(--warning-red);
-}
-/* --- Tables --- */
-table {
-    border-collapse: collapse;
-    margin: 1em 0;
-}
-table th {
-    background-color: var(--table-header);
-    color: var(--text-primary);
-    font-weight: bold;
-    padding: 0.5em;
-    border: 1px solid var(--border-color);
-}
-table td {
-    padding: 0.5em;
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-}
-/* --- Infoboxes --- */
-.infobox {
-    border: 1px solid var(--accent-purple-dark);
-    background-color: var(--bg-secondary);
-    padding: 0.5em;
-    width: 300px;
-    float: right;
-    margin: 0.5em 0 0.5em 1em;
-    font-size: 0.9em;
-}
-.infobox-title {
-    font-weight: bold;
-    text-align: center;
-    background-color: var(--accent-purple-dark);
-    color: var(--text-primary);
-    padding: 0.3em;
-}
-/* --- Code Blocks --- */
-pre, code {
-    font-family: monospace, monospace;
-    background-color: var(--code-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 3px;
-}
-pre {
-    padding: 1em;
-    overflow-x: auto;
-}
-code {
-    padding: 0.2em 0.4em;
-}
-/* --- Navigation --- */
-#mw-navigation {
-    margin-bottom: 1em;
-}
-#mw-panel {
-    padding-left: 0.5em;
-}
-/* --- Content Area --- */
-#content {
-    background-color: var(--bg-secondary);
-    padding: 1.5em;
-    border: 1px solid var(--border-color);
-    border-radius: 3px;
-}
-/* --- Footer --- */
-#footer {
-    margin-top: 2em;
-    padding: 1em;
-    background-color: var(--bg-tertiary);
-    border-top: 1px solid var(--border-color);
-    font-size: 0.9em;
-    color: var(--text-secondary);
-}
-/* --- Buttons & Interactive Elements --- */
-.mw-ui-button {
-    background-color: var(--accent-purple);
-    color: var(--text-primary);
-    border: none;
-    border-radius: 3px;
-    padding: 0.5em 1em;
-}
-.mw-ui-button:hover {
-    background-color: var(--accent-purple-dark);
-}
-/* --- Search Box --- */
-input[type="search"], input[type="text"] {
-    background-color: var(--bg-tertiary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-    padding: 0.5em;
-    border-radius: 3px;
-}
-input[type="search"]:focus, input[type="text"]:focus {
-    outline: none;
-    border-color: var(--accent-purple);
-}
-/* --- Responsive Design --- */
-@media screen and (max-width: 768px) {
-    .infobox {
-        float: none;
-        width: 100%;
-        margin: 1em 0;
-    }
-    #content {
-        padding: 1em;
-    }
-}
-/* --- Print Styles (Light Mode for Print) --- */
-@media print {
-    body {
-        background-color: #fff;
-        color: #000;
-    }
-    #footer, #mw-navigation, #mw-panel {
-        display: none;
-    }
-    :root {
-        --bg-primary: #fff;
-        --bg-secondary: #fff;
-        --text-primary: #000;
-        --text-secondary: #333;
-        --accent-purple: #555;
-    }
-}
-/* --- Toggle Switch for Light/Dark Mode (Optional JS Required) --- */
-.dark-mode-toggle {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    background-color: var(--accent-purple);
-    color: var(--text-primary);
-    padding: 10px 15px;
-    border-radius: 50%;
-    cursor: pointer;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-}