5et Initial React Skin
This commit is contained in:
boris committed
1 parent
b236390afe
commit
0eb340e1c2
17 files changed
+5079
No files matched your search
@@ -0,0 +1,908 @@
|
||||
import fs from "node:fs";
|
||||
import http from "node:http";
|
||||
import path from "node:path";
|
||||
import { URL } from "node:url";
|
||||
import { app } from "electron";
|
||||
|
||||
const SHOULD_INJECT_RESKIN = process.env.FIVEETOOLS_DESKTOP_RESKIN !== "0";
|
||||
const SHOULD_FORCE_NIGHT_THEME = process.env.FIVEETOOLS_DESKTOP_FORCE_NIGHT !== "0";
|
||||
const SHOULD_USE_EXTERNAL_IMAGE_FALLBACK = process.env.FIVEETOOLS_DESKTOP_EXTERNAL_IMAGES !== "0";
|
||||
const DEFAULT_EXTERNAL_IMAGE_ROOT = "https://5e.tools/img/";
|
||||
const EXTERNAL_IMAGE_ROOT = SHOULD_USE_EXTERNAL_IMAGE_FALLBACK
|
||||
? normalizeExternalBaseUrl(process.env.FIVEETOOLS_DESKTOP_IMG_BASE_URL || DEFAULT_EXTERNAL_IMAGE_ROOT)
|
||||
: null;
|
||||
|
||||
const MIME_TYPES: Record<string, string> = {
|
||||
".avif": "image/avif",
|
||||
".css": "text/css; charset=utf-8",
|
||||
".eot": "application/vnd.ms-fontobject",
|
||||
".gif": "image/gif",
|
||||
".html": "text/html; charset=utf-8",
|
||||
".ico": "image/x-icon",
|
||||
".jpeg": "image/jpeg",
|
||||
".jpg": "image/jpeg",
|
||||
".js": "text/javascript; charset=utf-8",
|
||||
".json": "application/json; charset=utf-8",
|
||||
".map": "application/json; charset=utf-8",
|
||||
".mjs": "text/javascript; charset=utf-8",
|
||||
".mp3": "audio/mpeg",
|
||||
".mp4": "video/mp4",
|
||||
".otf": "font/otf",
|
||||
".pdf": "application/pdf",
|
||||
".png": "image/png",
|
||||
".svg": "image/svg+xml",
|
||||
".ttf": "font/ttf",
|
||||
".txt": "text/plain; charset=utf-8",
|
||||
".wasm": "application/wasm",
|
||||
".webm": "video/webm",
|
||||
".webp": "image/webp",
|
||||
".woff": "font/woff",
|
||||
".woff2": "font/woff2",
|
||||
".webmanifest": "application/manifest+json; charset=utf-8",
|
||||
".xml": "application/xml; charset=utf-8"
|
||||
};
|
||||
|
||||
const DESKTOP_RESKIN_BOOTSTRAP = `
|
||||
(() => {
|
||||
${EXTERNAL_IMAGE_ROOT ? `globalThis.DEPLOYED_IMG_ROOT = ${JSON.stringify(EXTERNAL_IMAGE_ROOT)};` : ""}
|
||||
|
||||
const root = document.documentElement;
|
||||
root.classList.add("desktop-reskin");
|
||||
|
||||
${
|
||||
SHOULD_FORCE_NIGHT_THEME
|
||||
? `
|
||||
root.classList.add("ve-night-mode", "ve-night-mode--standard");
|
||||
try {
|
||||
window.localStorage.setItem("StyleSwitcher_style", "night");
|
||||
} catch {}
|
||||
`
|
||||
: ""
|
||||
}
|
||||
|
||||
const doToastInfo = (content) => {
|
||||
try {
|
||||
if (globalThis.JqueryUtil?.doToast) {
|
||||
globalThis.JqueryUtil.doToast({ type: "info", content });
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
|
||||
console.info("[5ET-D]", content);
|
||||
};
|
||||
|
||||
const closeDropdown = (li, toggle) => {
|
||||
if (typeof NavBar !== "undefined" && typeof NavBar._closeDropdownElement === "function") {
|
||||
NavBar._closeDropdownElement(li);
|
||||
return;
|
||||
}
|
||||
|
||||
li.classList.remove("open");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
};
|
||||
|
||||
const addCharactersMenu = () => {
|
||||
const navbar = document.getElementById("navbar");
|
||||
if (!navbar || navbar.querySelector(".desktop-nav-characters")) return;
|
||||
|
||||
const li = document.createElement("li");
|
||||
li.setAttribute("role", "presentation");
|
||||
li.className = "dropdown dropdown--navbar page__nav-hidden-mobile page__btn-nav-root desktop-nav-characters";
|
||||
|
||||
const toggle = document.createElement("a");
|
||||
toggle.className = "ve-dropdown-toggle";
|
||||
toggle.href = "#";
|
||||
toggle.setAttribute("role", "button");
|
||||
toggle.setAttribute("aria-haspopup", "true");
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
toggle.innerHTML = 'Characters <span class="caret"></span>';
|
||||
|
||||
toggle.onclick = (event) => {
|
||||
if (typeof NavBar !== "undefined" && typeof NavBar._handleDropdownClick === "function") {
|
||||
NavBar._handleDropdownClick(toggle, event, false);
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const isOpen = li.classList.contains("open");
|
||||
[...navbar.querySelectorAll(":scope > li.dropdown--navbar.open")]
|
||||
.forEach((it) => it.classList.remove("open"));
|
||||
|
||||
li.classList.toggle("open", !isOpen);
|
||||
toggle.setAttribute("aria-expanded", String(!isOpen));
|
||||
};
|
||||
|
||||
li.onmouseenter = function () {
|
||||
if (typeof NavBar !== "undefined" && typeof NavBar._handleItemMouseEnter === "function") {
|
||||
NavBar._handleItemMouseEnter(this);
|
||||
}
|
||||
};
|
||||
|
||||
const menu = document.createElement("ul");
|
||||
menu.setAttribute("role", "menu");
|
||||
menu.className = "ve-dropdown-menu ve-dropdown-menu--top";
|
||||
menu.onclick = (event) => event.stopPropagation();
|
||||
|
||||
const addMenuItem = (label, onClick) => {
|
||||
const menuItem = document.createElement("li");
|
||||
menuItem.setAttribute("role", "presentation");
|
||||
|
||||
const link = document.createElement("a");
|
||||
link.href = "#";
|
||||
link.textContent = label;
|
||||
link.onclick = (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onClick();
|
||||
closeDropdown(li, toggle);
|
||||
};
|
||||
|
||||
menuItem.append(link);
|
||||
menu.append(menuItem);
|
||||
};
|
||||
|
||||
addMenuItem("New", () => doToastInfo("Characters: New is coming in a later build."));
|
||||
addMenuItem("Load from JSON", () => doToastInfo("Characters: Load from JSON is coming in a later build."));
|
||||
addMenuItem("My Characters", () => doToastInfo("Characters: My Characters is coming in a later build."));
|
||||
|
||||
li.append(toggle, menu);
|
||||
|
||||
const playerToggle = [...navbar.querySelectorAll(":scope > li.dropdown--navbar > a.ve-dropdown-toggle")]
|
||||
.find((it) => it.textContent?.trim().startsWith("Player"));
|
||||
const playerLi = playerToggle?.parentElement;
|
||||
const helpLi = navbar.querySelector(':scope > li[data-page^="https://wiki.tercept.net/en/5eTools"]');
|
||||
|
||||
if (playerLi?.nextSibling) {
|
||||
navbar.insertBefore(li, playerLi.nextSibling);
|
||||
return;
|
||||
}
|
||||
|
||||
if (playerLi) {
|
||||
navbar.append(li);
|
||||
return;
|
||||
}
|
||||
|
||||
if (helpLi) {
|
||||
navbar.insertBefore(li, helpLi);
|
||||
return;
|
||||
}
|
||||
|
||||
navbar.append(li);
|
||||
};
|
||||
|
||||
window.addEventListener("DOMContentLoaded", addCharactersMenu);
|
||||
window.addEventListener("load", addCharactersMenu);
|
||||
})();
|
||||
`;
|
||||
const DESKTOP_RESKIN_STYLE = `
|
||||
html.desktop-reskin {
|
||||
--desktop-shell-gutter: 14px;
|
||||
--desktop-topbar-pad-x: 18px;
|
||||
}
|
||||
|
||||
html.desktop-reskin body {
|
||||
background:
|
||||
radial-gradient(circle at 13% -2%, rgba(77, 140, 222, 0.3), transparent 40%),
|
||||
radial-gradient(circle at 86% -4%, rgba(241, 176, 92, 0.24), transparent 38%),
|
||||
linear-gradient(180deg, #0c1422 0%, #0a1019 100%) !important;
|
||||
color: #dce7f6;
|
||||
}
|
||||
|
||||
html.desktop-reskin .page__header {
|
||||
margin: 10px var(--desktop-shell-gutter) 0 !important;
|
||||
padding: 0 !important;
|
||||
border: 1px solid rgba(109, 164, 223, 0.32) !important;
|
||||
border-bottom: 0 !important;
|
||||
border-radius: 18px 18px 0 0;
|
||||
background: linear-gradient(115deg, rgba(17, 29, 47, 0.98), rgba(24, 38, 58, 0.96) 64%, rgba(87, 58, 32, 0.88));
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
html.desktop-reskin .page__header .container {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 10px var(--desktop-topbar-pad-x) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .page__header .ve-flex-v-baseline {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
html.desktop-reskin .page__title {
|
||||
margin: 0 !important;
|
||||
color: #ebf4ff !important;
|
||||
font-size: clamp(2.8rem, 4.6vw, 7rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
html.desktop-reskin .page__subtitle {
|
||||
margin: 0 0 0 14px !important;
|
||||
color: #bccce0 !important;
|
||||
font-size: clamp(1.2rem, 1.75vw, 3.1rem);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navigation.page__nav {
|
||||
margin: 0 var(--desktop-shell-gutter) 12px !important;
|
||||
padding: 0 !important;
|
||||
max-width: none !important;
|
||||
width: auto !important;
|
||||
border: 1px solid rgba(109, 164, 223, 0.32) !important;
|
||||
border-top: 0 !important;
|
||||
border-radius: 0 0 18px 18px;
|
||||
background: linear-gradient(180deg, rgba(12, 21, 35, 0.96), rgba(8, 15, 27, 0.98));
|
||||
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
|
||||
position: relative;
|
||||
z-index: 3000 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navigation.page__nav .page__nav-inner {
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 10px var(--desktop-topbar-pad-x) !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar {
|
||||
background: transparent !important;
|
||||
border-bottom: 0 !important;
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
z-index: 3001 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li {
|
||||
float: none !important;
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li > a {
|
||||
border: 1px solid rgba(107, 159, 214, 0.28);
|
||||
background: rgba(19, 31, 49, 0.9);
|
||||
border-radius: 8px;
|
||||
margin: 0 !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.page__btn-nav-root > a {
|
||||
border-color: rgba(116, 174, 233, 0.44) !important;
|
||||
background: linear-gradient(180deg, rgba(22, 37, 58, 0.94), rgba(14, 24, 39, 0.97)) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(162, 214, 255, 0.12);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar > a.ve-dropdown-toggle {
|
||||
border-color: rgba(116, 174, 233, 0.44) !important;
|
||||
background: linear-gradient(180deg, rgba(22, 37, 58, 0.94), rgba(14, 24, 39, 0.97)) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(162, 214, 255, 0.12);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .navbar-brand,
|
||||
html.desktop-reskin #navbar > li > a,
|
||||
html.desktop-reskin #navbar > li > a .caret {
|
||||
color: #e6f1ff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li > a:hover {
|
||||
background: rgba(65, 121, 191, 0.32);
|
||||
border-color: rgba(118, 184, 247, 0.56);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.page__btn-nav-root > a:hover,
|
||||
html.desktop-reskin #navbar > li.page__btn-nav-root > a:focus {
|
||||
background: linear-gradient(145deg, rgba(52, 102, 161, 0.78), rgba(31, 86, 142, 0.82)) !important;
|
||||
border-color: rgba(136, 202, 255, 0.84) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar > a.ve-dropdown-toggle:hover,
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar > a.ve-dropdown-toggle:focus {
|
||||
background: linear-gradient(145deg, rgba(52, 102, 161, 0.78), rgba(31, 86, 142, 0.82)) !important;
|
||||
border-color: rgba(136, 202, 255, 0.84) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.active > a,
|
||||
html.desktop-reskin #navbar > li.open > a {
|
||||
background: linear-gradient(140deg, rgba(33, 126, 209, 0.9), rgba(25, 95, 167, 0.94));
|
||||
border-color: rgba(123, 196, 255, 0.86);
|
||||
color: #f4f9ff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar.open > a.ve-dropdown-toggle,
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar.active > a.ve-dropdown-toggle {
|
||||
background: linear-gradient(140deg, rgba(34, 127, 210, 0.92), rgba(25, 95, 167, 0.96)) !important;
|
||||
border-color: rgba(139, 207, 255, 0.92) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(229, 245, 255, 0.22);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.page__btn-nav-root.active > a,
|
||||
html.desktop-reskin #navbar > li.page__btn-nav-root.open > a {
|
||||
background: linear-gradient(140deg, rgba(34, 127, 210, 0.92), rgba(25, 95, 167, 0.96)) !important;
|
||||
border-color: rgba(139, 207, 255, 0.92) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(229, 245, 255, 0.22);
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > li.dropdown--navbar > a.ve-dropdown-toggle > .caret {
|
||||
border-top-color: #c9e6ff !important;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) {
|
||||
margin-left: auto !important;
|
||||
flex: 1 1 320px;
|
||||
min-width: 220px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) .omni__input {
|
||||
min-width: 0 !important;
|
||||
width: 100%;
|
||||
border-right: 1px solid rgba(102, 155, 210, 0.42) !important;
|
||||
border-top-right-radius: 12px !important;
|
||||
border-bottom-right-radius: 12px !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) .omni__submit {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) .omni__btn-clear {
|
||||
right: 12px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1400px) {
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) {
|
||||
flex-basis: 260px;
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1180px) {
|
||||
html.desktop-reskin {
|
||||
--desktop-topbar-pad-x: 12px;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar {
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar > .omni__wrp-input:not(.omni__wrp-input--scrolled) {
|
||||
margin-left: 0 !important;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .form-control,
|
||||
html.desktop-reskin #navbar input[type="search"] {
|
||||
background: rgba(8, 14, 24, 0.96) !important;
|
||||
border: 1px solid rgba(102, 155, 210, 0.42) !important;
|
||||
color: #e4effb !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .form-control::placeholder,
|
||||
html.desktop-reskin #navbar input[type="search"]::placeholder {
|
||||
color: #96adc8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .btn {
|
||||
border-radius: 12px !important;
|
||||
border-color: rgba(102, 155, 210, 0.42) !important;
|
||||
background: rgba(14, 24, 40, 0.95) !important;
|
||||
color: #d9e8fb !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .omni__submit,
|
||||
html.desktop-reskin #navbar .omni__submit.ve-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .dropdown-menu,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu {
|
||||
border: 1px solid rgba(102, 155, 210, 0.42) !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(180deg, rgba(13, 22, 37, 0.98), rgba(9, 17, 30, 0.99)) !important;
|
||||
padding: 4px !important;
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
|
||||
z-index: 3200 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu--top {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu--side {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .dropdown-menu > li > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > span {
|
||||
color: #dce9fa !important;
|
||||
border-radius: 8px;
|
||||
padding: 6px 12px !important;
|
||||
transition: background-color 100ms ease, color 100ms ease;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .dropdown-menu > li > a:hover,
|
||||
html.desktop-reskin #navbar .dropdown-menu > li > a:focus,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > a:hover,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > a:focus,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > span:hover,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li > span:focus {
|
||||
background: rgba(58, 108, 170, 0.34) !important;
|
||||
color: #f2f8ff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .dropdown-menu > li.active > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li.active > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li.active > span {
|
||||
background: linear-gradient(140deg, rgba(36, 124, 202, 0.92), rgba(28, 95, 161, 0.94)) !important;
|
||||
color: #f5fbff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .dropdown-menu > li.disabled > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li.disabled > a,
|
||||
html.desktop-reskin #navbar .ve-dropdown-menu > li.disabled > span {
|
||||
color: #8aa2bd !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .ve-dropdown-divider,
|
||||
html.desktop-reskin #navbar .dropdown-menu .divider {
|
||||
margin: 6px 4px !important;
|
||||
height: 1px;
|
||||
background: rgba(106, 156, 213, 0.42) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin #navbar .ve-dropdown-ext-link > .glyphicon {
|
||||
color: #9ec9f3 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .input-xs,
|
||||
html.desktop-reskin .form-control,
|
||||
html.desktop-reskin select,
|
||||
html.desktop-reskin input,
|
||||
html.desktop-reskin textarea {
|
||||
border-radius: 8px !important;
|
||||
border-color: rgba(115, 170, 226, 0.45) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .btn,
|
||||
html.desktop-reskin .ve-btn {
|
||||
border-radius: 9px !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__wrp-output {
|
||||
position: relative;
|
||||
z-index: 3400 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__output {
|
||||
border: 1px solid rgba(114, 171, 232, 0.45) !important;
|
||||
border-radius: 12px !important;
|
||||
background: linear-gradient(180deg, rgba(15, 25, 41, 0.98), rgba(9, 17, 29, 0.99)) !important;
|
||||
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.42);
|
||||
color: #dce9f8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__output .ve-btn,
|
||||
html.desktop-reskin .omni__output .btn {
|
||||
border: 1px solid rgba(112, 167, 225, 0.42) !important;
|
||||
background: rgba(22, 36, 56, 0.92) !important;
|
||||
color: #dce9f8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__output .ve-btn.active,
|
||||
html.desktop-reskin .omni__output .btn.active,
|
||||
html.desktop-reskin .omni__output .ve-btn:hover,
|
||||
html.desktop-reskin .omni__output .btn:hover {
|
||||
background: rgba(53, 95, 145, 0.58) !important;
|
||||
border-color: rgba(139, 204, 255, 0.72) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__row-result {
|
||||
padding: 3px 6px;
|
||||
border-radius: 8px;
|
||||
border-bottom: 1px solid rgba(105, 151, 205, 0.3);
|
||||
color: #d7e6f7 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__row-result:nth-child(odd) {
|
||||
background: rgba(43, 71, 105, 0.38) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__row-result:hover {
|
||||
background: rgba(63, 103, 151, 0.52) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__lnk-name {
|
||||
color: #8ec9ff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__disp-srd,
|
||||
html.desktop-reskin .omni__disp-source-marker,
|
||||
html.desktop-reskin .omni__wrp-page {
|
||||
color: #aecaec !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__wrp-paginate {
|
||||
margin-top: 4px;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid rgba(107, 156, 211, 0.35);
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__paginate-ctrl {
|
||||
color: #c8def8;
|
||||
}
|
||||
|
||||
html.desktop-reskin .omni__paginate-ctrl:hover {
|
||||
color: #8dc9ff !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .list,
|
||||
html.desktop-reskin .list-display-only,
|
||||
html.desktop-reskin .lst__row,
|
||||
html.desktop-reskin .ui-list__row,
|
||||
html.desktop-reskin .list li {
|
||||
color: #dce8f8;
|
||||
}
|
||||
|
||||
html.desktop-reskin .lst__row,
|
||||
html.desktop-reskin .ui-list__row,
|
||||
html.desktop-reskin .list li,
|
||||
html.desktop-reskin .lst__row-border,
|
||||
html.desktop-reskin .lst__row-inner,
|
||||
html.desktop-reskin .veapp__list-row {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
html.desktop-reskin .lst__row-border,
|
||||
html.desktop-reskin .lst__row-inner,
|
||||
html.desktop-reskin .veapp__list-row,
|
||||
html.desktop-reskin .lst__wrp-cells {
|
||||
border-color: rgba(112, 165, 222, 0.42) !important;
|
||||
color: #dce8f8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .list .lst__row:nth-child(odd) .lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:nth-child(odd) .lst__row-inner,
|
||||
html.desktop-reskin .list .lst__row:nth-child(odd).lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:nth-child(odd).veapp__list-row {
|
||||
background: rgba(34, 57, 86, 0.36);
|
||||
}
|
||||
|
||||
html.desktop-reskin .list .lst__row:nth-child(even) .lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:nth-child(even) .lst__row-inner,
|
||||
html.desktop-reskin .list .lst__row:nth-child(even).lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:nth-child(even).veapp__list-row {
|
||||
background: rgba(18, 30, 48, 0.38);
|
||||
}
|
||||
|
||||
html.desktop-reskin .list .lst__row:hover .lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:hover .lst__row-inner,
|
||||
html.desktop-reskin .list .lst__row:hover.lst__row-border,
|
||||
html.desktop-reskin .list .lst__row:hover.veapp__list-row {
|
||||
background: rgba(64, 105, 151, 0.48) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .lst__row a,
|
||||
html.desktop-reskin .veapp__list-row a,
|
||||
html.desktop-reskin .lst__wrp-cells a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
html.desktop-reskin .lst__form-top > *,
|
||||
html.desktop-reskin .lst__form-top .form-control,
|
||||
html.desktop-reskin .lst__form-top .btn,
|
||||
html.desktop-reskin .lst__form-top .ve-btn {
|
||||
border-color: rgba(112, 167, 225, 0.48) !important;
|
||||
background: rgba(15, 25, 40, 0.94) !important;
|
||||
color: #dce8f8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .lst__form-top .form-control::placeholder {
|
||||
color: #99b2cf !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .fltr__pill,
|
||||
html.desktop-reskin .fltr__mini-pill,
|
||||
html.desktop-reskin .fltr__btn_nest {
|
||||
border-color: rgba(109, 163, 221, 0.45) !important;
|
||||
background: rgba(20, 32, 50, 0.92) !important;
|
||||
color: #dce8f8 !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .fltr__pill[data-state="yes"],
|
||||
html.desktop-reskin .fltr__mini-pill[data-state="yes"] {
|
||||
background: linear-gradient(140deg, rgba(38, 120, 196, 0.9), rgba(27, 89, 151, 0.94)) !important;
|
||||
border-color: rgba(131, 196, 255, 0.84) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .fltr__pill[data-state="no"],
|
||||
html.desktop-reskin .fltr__mini-pill[data-state="no"] {
|
||||
background: linear-gradient(140deg, rgba(136, 55, 55, 0.92), rgba(109, 44, 44, 0.94)) !important;
|
||||
border-color: rgba(206, 132, 132, 0.7) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .wrp-stats-table {
|
||||
border-top: 1px solid rgba(114, 171, 232, 0.5) !important;
|
||||
border-bottom: 1px solid rgba(114, 171, 232, 0.5) !important;
|
||||
background: rgba(9, 15, 25, 0.5);
|
||||
}
|
||||
|
||||
html.desktop-reskin .table,
|
||||
html.desktop-reskin table {
|
||||
color: #dce8f8;
|
||||
}
|
||||
|
||||
html.desktop-reskin .table > thead > tr > th,
|
||||
html.desktop-reskin .table > tbody > tr > th,
|
||||
html.desktop-reskin .table > tfoot > tr > th,
|
||||
html.desktop-reskin .table > thead > tr > td,
|
||||
html.desktop-reskin .table > tbody > tr > td,
|
||||
html.desktop-reskin .table > tfoot > tr > td,
|
||||
html.desktop-reskin table > thead > tr > th,
|
||||
html.desktop-reskin table > tbody > tr > th,
|
||||
html.desktop-reskin table > tfoot > tr > th,
|
||||
html.desktop-reskin table > thead > tr > td,
|
||||
html.desktop-reskin table > tbody > tr > td,
|
||||
html.desktop-reskin table > tfoot > tr > td {
|
||||
border-color: rgba(104, 154, 209, 0.42) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .table > thead > tr > th,
|
||||
html.desktop-reskin table > thead > tr > th {
|
||||
background: rgba(33, 59, 92, 0.62);
|
||||
color: #e8f2ff;
|
||||
}
|
||||
|
||||
html.desktop-reskin .table-striped > tbody > tr:nth-of-type(odd),
|
||||
html.desktop-reskin .stripe-odd-table > tbody > tr:nth-child(odd),
|
||||
html.desktop-reskin .stripe-even-table > tbody > tr:nth-child(even),
|
||||
html.desktop-reskin .stripe-odd:nth-child(odd),
|
||||
html.desktop-reskin .stripe-even:nth-child(even) {
|
||||
background: rgba(42, 70, 104, 0.38) !important;
|
||||
}
|
||||
|
||||
html.desktop-reskin .hwin,
|
||||
html.desktop-reskin .ve-window,
|
||||
html.desktop-reskin .modal__inner {
|
||||
border: 1px solid rgba(115, 170, 226, 0.35) !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
`;
|
||||
|
||||
export interface WikiServer {
|
||||
readonly rootDir: string;
|
||||
readonly url: string;
|
||||
close: () => Promise<void>;
|
||||
}
|
||||
|
||||
function getWikiRootCandidates(): string[] {
|
||||
const envDir = process.env.FIVEETOOLS_SRC_DIR;
|
||||
|
||||
return [
|
||||
envDir,
|
||||
path.resolve(app.getAppPath(), "..", "5etools-src"),
|
||||
path.resolve(app.getAppPath(), "5etools-src"),
|
||||
path.resolve(process.cwd(), "..", "5etools-src"),
|
||||
path.resolve(process.cwd(), "5etools-src"),
|
||||
path.resolve(process.resourcesPath, "5etools-src")
|
||||
].filter((it): it is string => Boolean(it));
|
||||
}
|
||||
|
||||
function resolveWikiRootDir(): string {
|
||||
const candidates = getWikiRootCandidates();
|
||||
|
||||
for (const candidate of candidates) {
|
||||
const indexPath = path.join(candidate, "5etools.html");
|
||||
const dataPath = path.join(candidate, "data");
|
||||
|
||||
if (fs.existsSync(indexPath) && fs.existsSync(dataPath)) {
|
||||
return candidate;
|
||||
}
|
||||
}
|
||||
|
||||
const formatted = candidates.map((it) => `- ${it}`).join("\n");
|
||||
throw new Error(`Unable to locate 5etools-src directory. Checked:\n${formatted}`);
|
||||
}
|
||||
|
||||
function getMimeType(filePath: string): string {
|
||||
const ext = path.extname(filePath).toLowerCase();
|
||||
return MIME_TYPES[ext] ?? "application/octet-stream";
|
||||
}
|
||||
|
||||
function normalizeExternalBaseUrl(url: string): string {
|
||||
const trimmed = url.trim();
|
||||
return `${trimmed.replace(/\/+$/, "")}/`;
|
||||
}
|
||||
|
||||
function getRequestPath(requestUrl: string): string {
|
||||
const parsed = new URL(requestUrl, "http://127.0.0.1");
|
||||
return decodeURIComponent(parsed.pathname);
|
||||
}
|
||||
|
||||
function getExternalImageUrl(requestUrl: string): URL | null {
|
||||
if (!EXTERNAL_IMAGE_ROOT) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let requestPath: string;
|
||||
try {
|
||||
requestPath = getRequestPath(requestUrl);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!requestPath.startsWith("/img/")) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const relativePath = requestPath.slice("/img/".length);
|
||||
if (!relativePath) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new URL(relativePath, EXTERNAL_IMAGE_ROOT);
|
||||
}
|
||||
|
||||
async function pTryServeExternalImage(requestUrl: string, res: http.ServerResponse): Promise<boolean> {
|
||||
const externalImageUrl = getExternalImageUrl(requestUrl);
|
||||
if (!externalImageUrl) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(externalImageUrl.toString());
|
||||
if (!response.ok) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const responseBuffer = Buffer.from(await response.arrayBuffer());
|
||||
const contentType = response.headers.get("content-type") ?? getMimeType(externalImageUrl.pathname);
|
||||
|
||||
res.writeHead(200, {
|
||||
"Content-Type": contentType,
|
||||
"Cache-Control": "public, max-age=3600"
|
||||
});
|
||||
res.end(responseBuffer);
|
||||
return true;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function injectDesktopReskin(html: string): string {
|
||||
if (html.includes("desktop-reskin-style")) {
|
||||
return html;
|
||||
}
|
||||
|
||||
const injection = [
|
||||
`<script id="desktop-reskin-boot">${DESKTOP_RESKIN_BOOTSTRAP}</script>`,
|
||||
`<style id="desktop-reskin-style">${DESKTOP_RESKIN_STYLE}</style>`
|
||||
].join("");
|
||||
|
||||
if (!/<\/head>/i.test(html)) {
|
||||
return `${injection}${html}`;
|
||||
}
|
||||
|
||||
return html.replace(/<\/head>/i, `${injection}</head>`);
|
||||
}
|
||||
|
||||
function resolveRequestPath(rootDir: string, requestUrl: string): string {
|
||||
const reqPath = getRequestPath(requestUrl);
|
||||
const normalizedReqPath = reqPath === "/" ? "/5etools.html" : reqPath;
|
||||
|
||||
const candidate = path.resolve(rootDir, `.${normalizedReqPath}`);
|
||||
const rootResolved = path.resolve(rootDir);
|
||||
const relative = path.relative(rootResolved, candidate);
|
||||
|
||||
if (relative.startsWith("..") || path.isAbsolute(relative)) {
|
||||
throw new Error("Blocked path traversal attempt");
|
||||
}
|
||||
|
||||
if (fs.existsSync(candidate) && fs.statSync(candidate).isDirectory()) {
|
||||
const indexPath = path.join(candidate, "index.html");
|
||||
if (fs.existsSync(indexPath)) {
|
||||
return indexPath;
|
||||
}
|
||||
}
|
||||
|
||||
return candidate;
|
||||
}
|
||||
|
||||
export async function startWikiServer(): Promise<WikiServer> {
|
||||
const rootDir = resolveWikiRootDir();
|
||||
|
||||
return await new Promise<WikiServer>((resolve, reject) => {
|
||||
const server = http.createServer((req, res) => {
|
||||
const url = req.url ?? "/";
|
||||
|
||||
let filePath: string;
|
||||
try {
|
||||
filePath = resolveRequestPath(rootDir, url);
|
||||
} catch {
|
||||
res.writeHead(403, { "Content-Type": "text/plain; charset=utf-8" });
|
||||
res.end("Forbidden");
|
||||
return;
|
||||
}
|
||||
|
||||
fs.readFile(filePath, (err, data) => {
|
||||
if (err) {
|
||||
if (err.code === "ENOENT") {
|
||||
void pTryServeExternalImage(url, res).then((isServed) => {
|
||||
if (isServed) {
|
||||
return;
|
||||
}
|
||||
|
||||
res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
|
||||
res.end("Not Found");
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
|
||||
res.end("Internal Server Error");
|
||||
return;
|
||||
}
|
||||
|
||||
const extension = path.extname(filePath).toLowerCase();
|
||||
const transformedBody =
|
||||
extension === ".html" && SHOULD_INJECT_RESKIN ? injectDesktopReskin(data.toString("utf8")) : data;
|
||||
|
||||
res.writeHead(200, {
|
||||
"Content-Type": getMimeType(filePath),
|
||||
"Cache-Control": "no-store"
|
||||
});
|
||||
|
||||
if (typeof transformedBody === "string") {
|
||||
res.end(transformedBody, "utf8");
|
||||
return;
|
||||
}
|
||||
|
||||
res.end(transformedBody);
|
||||
});
|
||||
});
|
||||
|
||||
server.once("error", reject);
|
||||
|
||||
server.listen(0, "127.0.0.1", () => {
|
||||
const address = server.address();
|
||||
if (!address || typeof address === "string") {
|
||||
reject(new Error("Failed to resolve local wiki server address"));
|
||||
return;
|
||||
}
|
||||
|
||||
const url = `http://127.0.0.1:${address.port}`;
|
||||
|
||||
resolve({
|
||||
rootDir,
|
||||
url,
|
||||
close: () =>
|
||||
new Promise<void>((closeResolve, closeReject) => {
|
||||
server.close((closeErr) => {
|
||||
if (closeErr) {
|
||||
closeReject(closeErr);
|
||||
return;
|
||||
}
|
||||
closeResolve();
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user