User:Isy/Sandbox/TestPage

/**

* 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,

1. content,
2. 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 */

1. 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 */

1. mw-head,
2. mw-panel,
3. p-logo,

.portal,

1. 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 */

1. pt-theme-toggle {

   display: inline-block;
   margin: 0;
   padding: 0;

}

1. pt-theme-toggle .theme-toggle-button {

   width: 28px;
   height: 28px;
   padding: 2px;

}

/* No JS fallback styles */ .no-js .theme-toggle-container {

   display: none;

}