User:Isy/Sandbox/TestPage

{#css:MyStyles.css}}

/**

* MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design

*

* CSS for light/dark mode toggle with theme variables

* Compatible with MediaWiki styles

*/

/* Theme variables - Light theme (default) */

:root[data-theme="light"] {

    /* Base colors */

    --mw-color-background: #ffffff;

    --mw-color-surface: #f8f9fa;

    --mw-color-text-primary: #202122;

    --mw-color-text-secondary: #54595d;

    --mw-color-border: #c8ccd1;

    --mw-color-link: #0645ad;

    --mw-color-link-visited: #0b0080;

    --mw-color-link-active: #faa700;

    /* UI component colors */

    --mw-color-input-bg: #ffffff;

    --mw-color-input-border: #a2a9b1;

    --mw-color-button-bg: #f8f9fa;

    --mw-color-button-text: #202122;

    --mw-color-button-border: #a2a9b1;

    --mw-color-destructive: #d73333;

    --mw-color-progressive: #3366cc;

    /* Content colors */

    --mw-color-info-box-bg: #eaecf0;

    --mw-color-warning-box-bg: #fee7e6;

    --mw-color-success-box-bg: #d5fdf4;

    --mw-color-note-box-bg: #eaf3ff;

    /* Syntax highlighting */

    --mw-color-code-bg: #f8f9fa;

    --mw-color-code-text: #000000;

    /* Toggle button specific */

    --mw-toggle-button-bg: #f8f9fa;

    --mw-toggle-button-color: #202122;

    --mw-toggle-button-border: #a2a9b1;

    --mw-toggle-button-hover-bg: #ffffff;

}

/* Dark theme variables */

:root[data-theme="dark"] {

    /* Base colors */

    --mw-color-background: #1f1f1f;

    --mw-color-surface: #2a2a2a;

    --mw-color-text-primary: #e0e0e0;

    --mw-color-text-secondary: #b0b0b0;

    --mw-color-border: #555555;

    --mw-color-link: #6699ff;

    --mw-color-link-visited: #b3ccff;

    --mw-color-link-active: #ffcc33;

    /* UI component colors */

    --mw-color-input-bg: #2a2a2a;

    --mw-color-input-border: #555555;

    --mw-color-button-bg: #333333;

    --mw-color-button-text: #e0e0e0;

    --mw-color-button-border: #555555;

    --mw-color-destructive: #ff5555;

    --mw-color-progressive: #6699ff;

    /* Content colors */

    --mw-color-info-box-bg: #333333;

    --mw-color-warning-box-bg: #402020;

    --mw-color-success-box-bg: #203020;

    --mw-color-note-box-bg: #203040;

    /* Syntax highlighting */

    --mw-color-code-bg: #2a2a2a;

    --mw-color-code-text: #e0e0e0;

    /* Toggle button specific */

    --mw-toggle-button-bg: #333333;

    --mw-toggle-button-color: #e0e0e0;

    --mw-toggle-button-border: #555555;

    --mw-toggle-button-hover-bg: #444444;

}

/* Apply theme variables to MediaWiki elements */

:root[data-theme] {

    /* Transitions for smooth theme switching */

    transition: all 0.3s ease;

}

body,

.mw-body,

#content,

#mw-content-text,

.mw-parser-output {

    background-color: var(--mw-color-background);

    color: var(--mw-color-text-primary);

    transition: background-color 0.3s ease, color 0.3s ease;

}

/* Main content styling */

#content,

.mw-body,

.mw-body-content {

    color: var(--mw-color-text-primary);

}

/* Links */

a:link {

    color: var(--mw-color-link);

}

a:visited {

    color: var(--mw-color-link-visited);

}

a:active {

    color: var(--mw-color-link-active);

}

/* Headings */

h1, h2, h3, h4, h5, h6 {

    color: var(--mw-color-text-primary);

    border-color: var(--mw-color-border);

}

/* Tables */

table.wikitable {

    background-color: var(--mw-color-surface);

    color: var(--mw-color-text-primary);

    border-color: var(--mw-color-border);

}

table.wikitable > tr > th,

table.wikitable > * > tr > th {

    background-color: var(--mw-color-surface);

    color: var(--mw-color-text-primary);

    border-color: var(--mw-color-border);

}

table.wikitable > tr > td,

table.wikitable > * > tr > td {

    background-color: var(--mw-color-background);

    color: var(--mw-color-text-primary);

    border-color: var(--mw-color-border);

}

/* Infoboxes */

.infobox,

.mw-highlight,

.notice,

.toccolours,

.messagebox {

    background-color: var(--mw-color-surface);

    color: var(--mw-color-text-primary);

    border-color: var(--mw-color-border);

}

/* Code blocks */

code,

pre,

.mw-code {

    background-color: var(--mw-color-code-bg);

    color: var(--mw-color-code-text);

    border-color: var(--mw-color-border);

}

/* Navigation elements */

#mw-head,

#mw-panel,

#p-logo,

.portal,

#mw-navigation {

    background-color: var(--mw-color-surface);

    color: var(--mw-color-text-primary);

}

/* Theme toggle button styles */

.theme-toggle-container {

    display: inline-block;

    margin: 0 10px;

    vertical-align: middle;

    white-space: nowrap;

}

.theme-toggle-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    padding: 4px;

    border-radius: 50%;

    border: 1px solid var(--mw-toggle-button-border);

    background-color: var(--mw-toggle-button-bg);

    color: var(--mw-toggle-button-color);

    cursor: pointer;

    transition: all 0.3s ease;

}

.theme-toggle-button:hover {

    background-color: var(--mw-toggle-button-hover-bg);

    transform: scale(1.05);

}

.theme-toggle-button:focus {

    outline: 2px solid var(--mw-color-progressive);

    outline-offset: 2px;

}

.theme-toggle-icon {

    display: flex;

    align-items: center;

    justify-content: center;

}

.theme-toggle-icon svg {

    width: 20px;

    height: 20px;

}

/* Fixed position toggle for mobile view */

@media (max-width: 768px) {

    .theme-toggle-container {

        position: fixed;

        bottom: 20px;

        right: 20px;

        z-index: 100;

        margin: 0;

    }

    .theme-toggle-button {

        width: 40px;

        height: 40px;

        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    }

    /* Increase button size for better touch target */

    .theme-toggle-icon svg {

        width: 24px;

        height: 24px;

    }

}

/* Styles for personal tools menu integration */

#pt-theme-toggle {

    display: inline-block;

    margin: 0;

    padding: 0;

}

#pt-theme-toggle .theme-toggle-button {

    width: 28px;

    height: 28px;

    padding: 2px;

}

/* No JS fallback styles */

.no-js .theme-toggle-container {

    display: none;

}