Isy: Test

2025-04-23T01:20:48Z

Test

← Older revision		Revision as of 01:20, 23 April 2025
Line 1:		Line 1:
			<nowiki>{{#css:MediaWiki:</nowiki>


	/**		/**

Line 448:		Line 451:

	}		}

			{{DEFAULTSORT:Isy/Sandbox/Test.css}}

Isy: Created page with "/** * 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-..."

2025-04-23T01:01:27Z

Created page with "* <nowiki>*</nowiki> MediaWiki Theme Toggle Button - Simple UI, not setup to be like example design <nowiki>*</nowiki> <nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables <nowiki>*</nowiki> Compatible with MediaWiki styles <nowiki>*</nowiki>/ /* Theme variables - Light theme (default): <nowiki>:</nowiki>root[data-theme="light"] { Base colors: --mw-color-background: #ffffff; --mw-color-surface: #f8f9fa; --mw-..."

New page

/**

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

<nowiki>*</nowiki>

<nowiki>*</nowiki> CSS for light/dark mode toggle with theme variables

<nowiki>*</nowiki> Compatible with MediaWiki styles

<nowiki>*</nowiki>/

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

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>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 */

<nowiki>:</nowiki>root[data-theme] {

/* Transitions for smooth theme switching */

transition: all 0.3s ease;

}

body,

.mw-body,

<nowiki>#</nowiki>content,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>mw-head,

<nowiki>#</nowiki>mw-panel,

<nowiki>#</nowiki>p-logo,

.portal,

<nowiki>#</nowiki>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 */

<nowiki>#</nowiki>pt-theme-toggle {

display: inline-block;

margin: 0;

padding: 0;

}

<nowiki>#</nowiki>pt-theme-toggle .theme-toggle-button {

width: 28px;

height: 28px;

padding: 2px;

}

/* No JS fallback styles */

.no-js .theme-toggle-container {

display: none;

}

Isy/Sandbox/ - Revision history

Isy: Test