|
|
| Строка 1: |
Строка 1: |
| $(function () { | | $(function () { |
| const config = { | | const classes = ['theme-stddark', 'theme-nanotrasen', 'theme-syndicate', 'theme-plasmafire', 'theme-clockcult', 'theme-bloodcult', 'theme-heretic', 'theme-default']; |
| 'theme-stddark': { name: 'Standard Dark', logo: '/images/3/3c/Bg-neutral.png', accent: '#00adb5', bgMain: '#161719', bgContent: '#1e2022', bgCard: '#282a2d', bgInput: '#313438', border: '#3f4348', text: '#e3e4e6' },
| |
| 'theme-nanotrasen': { name: 'Nanotrasen TGUI', logo: '/images/5/58/Nanotrasen-logo.png', accent: '#4a90e2', bgMain: '#0c1014', bgContent: '#141a22', bgCard: '#1b2430', bgInput: '#222d3c', border: '#2b3a4e', text: '#dae5f3' },
| |
| 'theme-syndicate': { name: 'Syndicate TGUI', logo: '/images/c/ce/Syndicate-logo.png', accent: '#ff3333', bgMain: '#111111', bgContent: '#1a1a1a', bgCard: '#262626', bgInput: '#333333', border: '#441111', text: '#e0e0e0' },
| |
| 'theme-plasmafire': { name: 'Plasmafire', logo: '/images/b/b3/Bg-synthsunset.png', accent: '#ff41b4', bgMain: '#090312', bgContent: '#150b24', bgCard: '#23123a', bgInput: '#321b51', border: '#a62681', text: '#f3e8f7' },
| |
| 'theme-clockcult': { name: 'Clock Cult', logo: '/images/3/3c/Bg-neutral.png', accent: '#e5af33', bgMain: '#14110c', bgContent: '#201b12', bgCard: '#2d2619', bgInput: '#3a3121', border: '#be9b4a', text: '#f0e6d2' },
| |
| 'theme-bloodcult': { name: 'Blood Cult', logo: '/images/c/c0/Bg-spookycomp.png', accent: '#ff4d4d', bgMain: '#0c0202', bgContent: '#170505', bgCard: '#260a0a', bgInput: '#380e0e', border: '#800c0c', text: '#f0dad0' },
| |
| 'theme-heretic': { name: 'Heretic', logo: '/images/c/c0/Bg-spookycomp.png', accent: '#39ff14', bgMain: '#030a05', bgContent: '#0b1a0e', bgCard: '#122a18', bgInput: '#1a3b21', border: '#1f5f2a', text: '#e2f3e5' },
| |
| 'theme-default': { name: 'Standard Light' }
| |
| };
| |
| const palettePath = '/images/f/f6/Palette.png';
| |
|
| |
|
| function renderThemeStyles(themeId) { | | function applyTheme(themeId) { |
| const active = config[themeId] || config['theme-stddark']; | | classes.forEach(id => document.body.classList.remove(id)); |
| | document.body.classList.remove('theme-active-dark'); |
| | | |
| if (themeId === 'theme-default') { | | if (themeId && classes.includes(themeId)) { |
| $('body, html, #content, .mw-body, .vector-header-container, .vector-header, .mw-header, .mw-sidebar, .vector-dropdown-content, .vector-pinnable-container, .wikitable, .toc, .thumbinner, .infobox, .ambox, .mw-notification, .catlinks, .navbox, .ext-mwe-cdx-card').attr('style', ''); | | document.body.classList.add(themeId); |
| $('a, .vector-icon, .mw-togglebutton, .toggle-link, .mw-collapsible-toggle, .cdx-button--weight-quiet, h1, h2, hr, .vector-menu-portal, .mw-footer, .vector-toc').attr('style', ''); | | if (themeId !== 'theme-default') { |
| $('.cdx-text-input__input, .vector-search-box-input, select, input, textarea, .cdx-button').attr('style', '');
| | document.body.classList.add('theme-active-dark'); |
| $('.vector-logo-img').attr('style', ''); | | } |
| $('.mw-logo, .vector-logo').attr('style', ''); | | localStorage.setItem('mw-tg-theme', themeId); |
| $('.tg-custom-palette-icon').attr('style', `display:block; width:32px; height:32px; background:url("${palettePath}") no-repeat center/contain; cursor:pointer;`);
| |
| return;
| |
| } | | } |
|
| |
| $('html, body').attr('style', `background-color: ${active.bgMain} !important; color: ${active.text} !important;`);
| |
| $('#content, .mw-body').attr('style', `background-color: ${active.bgContent} !important; border-color: ${active.border} !important; color: ${active.text} !important;`);
| |
| $('.vector-header-container, .vector-header, .mw-header, .mw-sidebar').attr('style', `background-color: ${active.bgMain} !important; background-image: none !important; border-bottom: 1px solid ${active.border} !important;`);
| |
| $('.vector-dropdown-content, .vector-pinnable-container, .wikitable, .toc, .thumbinner, .infobox, .ambox, .mw-notification, .catlinks, .navbox, .ext-mwe-cdx-card, div[role="note"]').attr('style', `background-color: ${active.bgCard} !important; border: 1px solid ${active.border} !important; color: ${active.text} !important;`);
| |
|
| |
| // 3. Красим текст, заголовки, разделители и ВСЕ кнопки "Скрыть/Показать"
| |
| $('a, .vector-icon, .mw-togglebutton, .toggle-link, .mw-collapsible-toggle, .cdx-button--weight-quiet').attr('style', `color: ${active.accent} !important;`);
| |
| $('h1, h2').attr('style', `border-bottom: 1px solid ${active.border} !important; color: ${active.text} !important;`);
| |
| $('hr, .vector-menu-portal, .mw-footer, .vector-toc').attr('style', `border-color: ${active.border} !important;`);
| |
|
| |
| // 4. Поля ввода, кнопки поиска и выпадающие списки
| |
| $('.cdx-text-input__input, .vector-search-box-input, select, input, textarea, .cdx-button').attr('style', `background-color: ${active.bgInput} !important; color: ${active.text} !important; border-color: ${active.border} !important;`);
| |
|
| |
| $('code, pre, .mw-code, .mw-highlight pre, .syntaxhighlight').attr('style', `background-color: ${active.bgCard} !important; color: #e2b27a !important; border: 1px solid ${active.border} !important;`);
| |
|
| |
| $('.vector-logo-img').attr('style', 'opacity: 0 !important; width: 0 !important;');
| |
| $('.mw-logo, .vector-logo').attr('style', `background: url("${active.logo}") no-repeat left center/contain !important; display: block !important; min-width: 150px !important; height: 100% !important;`);
| |
|
| |
| $('.tg-custom-palette-icon').attr('style', `display: block !important; width: 32px !important; height: 32px !important; background: url("${palettePath}") no-repeat center/contain !important; filter: drop-shadow(0 0 6px ${active.accent}) !important; cursor: pointer;`);
| |
| } | | } |
|
| |
|
| function injectSelector() { | | function injectSelector() { |
| if (document.getElementById('p-tg-theme')) return; | | if (document.getElementById('p-tg-theme')) return; |
| const currentTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark'; | | const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark'; |
| | applyTheme(activeTheme); |
|
| |
|
| let html = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block; vertical-align: middle; position: relative; width: 36px; height: 36px ; z-index: 9999;">'; | | let selectHtml = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block !important; vertical-align: middle !important; position: relative; width: 36px !important; height: 36px !important;">'; |
| html += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" style="display: none !important;">'; | | selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display: none !important;">'; |
| html += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" style="display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; cursor: pointer; margin: 0; padding: 0; border: none; background: transparent;">'; | | selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display: flex !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;">'; |
| html += '<span class="tg-custom-palette-icon"></span>'; | | selectHtml += '<span class="tg-custom-palette-icon"></span>'; |
| html += '</label>'; | | selectHtml += '</label>'; |
| html += '<div class="vector-dropdown-content " id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000; background: #222; border: 1px solid #444; border-radius: 4px;">'; | | selectHtml += '<div class="vector-dropdown-content" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 1000;">'; |
| html += '<ul style="margin: 0; padding: 0; list-style: none;">'; | | selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">'; |
|
| |
|
| Object.keys(config).forEach(id => { | | const names = { 'theme-stddark': 'Standard Dark', 'theme-nanotrasen': 'Nanotrasen TGUI', 'theme-syndicate': 'Syndicate TGUI', 'theme-plasmafire': 'Plasmafire', 'theme-clockcult': 'Clock Cult', 'theme-bloodcult': 'Blood Cult', 'theme-heretic': 'Heretic', 'theme-default': 'Standard Light' }; |
| html += `<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 ; font-size: 13px; color: #fff;">${ config[id] .name}</a></li>`; | | classes.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;">${ names[id]}</a></li>`; |
| }); | | }); |
| html += '</ul></div></div>'; | | 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')]; | | 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(html); break; } } | | for (let target of targets) { if (target) { $(target).before(selectHtml); break; } } |
| | |
| renderThemeStyles(currentTheme);
| |
| } | | } |
|
| |
|
| injectSelector(); | | injectSelector(); |
|
| |
| setInterval(function() {
| |
| const currentTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
| |
| renderThemeStyles(currentTheme);
| |
| if (!document.getElementById('p-tg-theme')) injectSelector();
| |
| }, 1000);
| |
|
| |
|
| $(document).on('change', '#p-tg-theme-dropdown-checkbox', function() { | | $(document).on('change', '#p-tg-theme-dropdown-checkbox', function() { |
| $('#p-tg-dropdown-menu').css('display', this.checked ? 'block' : 'none'); | | $(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none'); |
| }); | | }); |
|
| |
|
| $(document).on('click', '.tg-theme-item', function (e) { | | $(document).on('click', '.tg-theme-item', function (e) { |
| e.preventDefault(); | | e.preventDefault(); |
| const chosen = $(this).data('theme'); | | applyTheme($(this).data('theme')); |
| localStorage.setItem('mw-tg-theme', chosen);
| |
| renderThemeStyles(chosen);
| |
| $('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change'); | | $('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change'); |
| }); | | }); |
| }); | | }); |
