|
Метки: очистка ручная отмена |
| (не показано 17 промежуточных версий 2 участников) |
| Строка 1: |
Строка 1: |
| mw.hook('wikipage.content').add(function () {
| |
| const themes = {
| |
| 'theme-nanotrasen': { name: 'Nanotrasen TGUI', logo: '/images/5/58/Nanotrasen-logo.png' },
| |
| 'theme-syndicate': { name: 'Syndicate TGUI', logo: mw.util.getUrl('Special:Redirect/file/Syndicate-logo.png') },
| |
| 'theme-plasmafire': { name: 'Plasmafire' },
| |
| 'theme-clockcult': { name: 'Clock Cult' },
| |
| 'theme-bloodcult': { name: 'Blood Cult' },
| |
| 'theme-heretic': { name: 'Heretic' },
| |
| 'theme-stddark': { name: 'Standard Dark' },
| |
| 'theme-default': { name: 'Standard Light' }
| |
| };
| |
|
| |
|
| function applyTheme(themeId) {
| |
| let styleTag = document.getElementById('tg-dynamic-theme-styles');
| |
| if (!styleTag) {
| |
| styleTag = document.createElement('style');
| |
| styleTag.id = 'tg-dynamic-theme-styles';
| |
| document.head.appendChild(styleTag);
| |
| }
| |
|
| |
| if (themeId === 'theme-default') {
| |
| styleTag.innerHTML = `
| |
| body { scrollbar-color: auto !important; }
| |
| .tg-custom-palette-icon { display:block; width:32px; height:32px; background:url('/images/ЗАМЕНИТЕ_НА_ВАШ_ПУТЬ/Palette.png') no-repeat center/contain; }
| |
| `;
| |
| localStorage.setItem('mw-tg-theme', themeId);
| |
| return;
| |
| }
| |
|
| |
| const t = themes[themeId] || themes['theme-stddark'];
| |
| localStorage.setItem('mw-tg-theme', themeId);
| |
|
| |
| // Переопределяем базовые переменные Вектора 2022 в корне html/body
| |
| styleTag.innerHTML = `
| |
| :root, html, body {
| |
| --background-color-base: ${t.bgContent} !important;
| |
| --background-color-paper: ${t.bgMain} !important;
| |
| --color-base: ${t.text} !important;
| |
| --color-base--subtle: ${t.textMuted} !important;
| |
| --border-color-base: ${t.border} !important;
| |
| --background-color-neutral-subtle: ${t.bgCard} !important;
| |
| --background-color-neutral: ${t.bgInput} !important;
| |
| --color-link: ${t.accent} !important;
| |
| --color-link--visited: #9b72cf !important;
| |
| --background-color-button-quiet: transparent !important;
| |
| --background-color-action: ${t.bgInput} !important;
| |
| --background-color-action-quiet: transparent !important;
| |
| --border-color-action: ${t.border} !important;
| |
| --color-action: ${t.accent} !important;
| |
| --color-icon: ${t.accent} !important;
| |
| --color-base--edit: ${t.accent} !important;
| |
| --color-progressive: ${t.accent} !important;
| |
| --color-primary: ${t.accent} !important;
| |
| --color-progressive--quiet: ${t.accent} !important;
| |
| background-color: ${t.bgMain} !important;
| |
| color: ${t.text} !important;
| |
| scrollbar-color: ${t.bgCard} ${t.bgMain} !important;
| |
| }
| |
| .mw-body { background-color: ${t.bgContent} !important; border-color: ${t.border} !important; }
| |
| .vector-header-container, .vector-header, .mw-header { background-color: ${t.bgMain} !important; background-image: none !important; border-bottom: 1px solid ${t.border} !important; }
| |
| .vector-dropdown-content, .vector-pinnable-container, .wikitable, .toc, .thumbinner, .infobox, .ambox, .mw-notification, .catlinks, .navbox, .ext-mwe-cdx-card, div[role="note"] { background-color: ${t.bgCard} !important; border-color: ${t.border} !important; color: ${t.text} !important; }
| |
| .vector-dropdown-content a { color: ${t.text} !important; }
| |
| .vector-dropdown-content a:hover { background-color: ${t.bgInput} !important; color: ${t.accent} !important; }
| |
| .cdx-text-input__input, .vector-search-box-input, select, input, textarea, .cdx-button { background-color: ${t.bgInput} !important; color: ${t.text} !important; border-color: ${t.border} !important; }
| |
| .cdx-button:not(.cdx-button--weight-quiet):hover { background-color: ${t.bgCard} !important; color: ${t.accent} !important; }
| |
| .mw-sidebar { background-color: ${t.bgMain} !important; }
| |
| a, .vector-icon, .mw-togglebutton, .toggle-link, .mw-collapsible-toggle, .cdx-button--weight-quiet { color: ${t.accent} !important; }
| |
| h1, h2 { border-bottom: 1px solid ${t.border} !important; color: ${t.text} !important; }
| |
| hr, .vector-menu-portal, .mw-footer, .vector-toc { border-color: ${t.border} !important; }
| |
| .tg-custom-palette-icon { display: block; width: 32px; height: 32px; background: url('/images/ЗАМЕНИТЕ_НА_ВАШ_ПУТЬ/Palette.png') no-repeat center/contain; filter: drop-shadow(0 0 6px ${t.accent}); transition: filter 0.3s, transform 0.2s; }
| |
| .tg-custom-palette-icon:hover { transform: scale(1.1); }
| |
| code, pre, .mw-code, .mw-highlight pre, .syntaxhighlight { background-color: ${t.bgCard} !important; color: #e2b27a !important; border: 1px solid ${t.border} !important; }
| |
| `;
| |
|
| |
| // Синхронизация системного логотипа вики
| |
| const logoImg = document.querySelector('.mw-wiki-logo, .vector-header-container .mw-logo-img, .vector-logo-img');
| |
| if (logoImg) {
| |
| if (logoImg.tagName === 'IMG') { logoImg.src = t.logo; }
| |
| else { logoImg.style.backgroundImage = `url(${t.logo})`; }
| |
| }
| |
| }
| |
|
| |
| function injectSelector() {
| |
| if (document.getElementById('p-tg-theme')) return;
| |
| const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
| |
| applyTheme(activeTheme);
| |
|
| |
| let selectHtml = '<div id="p-tg-theme" style="margin:0 10px; display:inline-block; vertical-align:middle; position:relative; width:36px; height:36px; max-width:none; max-height:none; padding:0;">';
| |
| selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display:none !important;">';
| |
| selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display:flex; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; padding:0; margin:0; border:none; background:transparent; max-width:none; max-height:none;">';
| |
| selectHtml += '<span class="tg-custom-palette-icon"></span>';
| |
| selectHtml += '</label>';
| |
| selectHtml += '<div class="vector-dropdown-content" style="padding:8px; min-width:180px; display:none; position:absolute; top:110%; right:0; z-index:1000;">';
| |
| selectHtml += '<ul class="vector-menu-content-list" style="margin:0; padding:0; list-style:none;">';
| |
|
| |
| Object.keys(themes).forEach(id => {
| |
| selectHtml += `<li style="margin:4px 0;"><a href="#" class="tg-theme-item" data-theme="${id}" style="display:block; padding:6px 8px; border-radius:4px; text-decoration:none;">${themes[id].name}</a></li>`;
| |
| });
| |
| selectHtml += '</ul></div></div>';
| |
|
| |
| const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')];
| |
| for (let target of targets) { if (target) { $(target).before(selectHtml); break; } }
| |
| }
| |
|
| |
| const checkExist = setInterval(function() {
| |
| if (document.querySelector('.vector-user-links, .vector-header-end')) { injectSelector(); clearInterval(checkExist); }
| |
| }, 100);
| |
|
| |
| $(document).on('change', '#p-tg-theme-dropdown-checkbox', function() {
| |
| $(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none');
| |
| });
| |
|
| |
| $(document).on('click', '.tg-theme-item', function (e) {
| |
| e.preventDefault();
| |
| applyTheme($(this).data('theme'));
| |
| $('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change');
| |
| });
| |