Compare commits
No commits in common. "fcebeda2fddb46d924f4538cd9c0daeb55aa4c9b" and "c6df711bc48ec7f899c682f9421229a055b84d93" have entirely different histories.
fcebeda2fd
...
c6df711bc4
15 changed files with 456 additions and 680 deletions
|
|
@ -20,7 +20,6 @@ module.exports = {
|
|||
"no-alert": "off",
|
||||
"no-console": "off",
|
||||
"func-names": "off",
|
||||
"dot-notation": ["error", { allowPattern: "^[A-Z][a-z]+$" }],
|
||||
"@typescript-eslint/ban-ts-comment": [
|
||||
"error",
|
||||
{
|
||||
|
|
|
|||
|
|
@ -36,9 +36,11 @@
|
|||
as="style"
|
||||
/>
|
||||
<link rel="preload" href="style/main.scss" as="style" />
|
||||
<link rel="preload" href="style/bgus.scss" as="style" />
|
||||
<link rel="preload" href="src/index.ts" as="script" />
|
||||
<link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
|
||||
<link rel="stylesheet" href="style/main.scss" />
|
||||
<link rel="stylesheet" href="style/bgus.scss" />
|
||||
<title>/tg/station Handbook</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { chemistryScript, processChemistry } from "./pages/chemistry";
|
||||
import { processVirology, virologyScript } from "./pages/virology";
|
||||
import { virologyScript } from "./pages/virology";
|
||||
import { genericScript } from "./pages/generic";
|
||||
import { processGlobal } from "./pages/global";
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ export function postProcessHTML(root: HTMLElement, docname: string): void {
|
|||
|
||||
switch (docname) {
|
||||
case "Infections":
|
||||
processVirology(root);
|
||||
virologyScript(root);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
|
@ -49,13 +49,8 @@ export function postProcessHTML(root: HTMLElement, docname: string): void {
|
|||
export function bindFunctions(root: HTMLElement, docname: string): void {
|
||||
switch (docname) {
|
||||
case "Guide_to_chemistry":
|
||||
genericScript(root, docname);
|
||||
chemistryScript(root);
|
||||
break;
|
||||
case "Infections":
|
||||
genericScript(root, docname);
|
||||
virologyScript(root);
|
||||
break;
|
||||
default:
|
||||
genericScript(root, docname);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -184,14 +184,14 @@ export function chemistryScript(root: HTMLElement): void {
|
|||
// Init fuzzy search with elements
|
||||
const el = Array.from(
|
||||
root.querySelectorAll<HTMLElement>(
|
||||
"table.wikitable > tbody > tr:not(:first-child)"
|
||||
"table.wikitable > tbody > tr:not(:first-child) > th"
|
||||
)
|
||||
);
|
||||
registerSearchEntries(
|
||||
el.map((element, id) => ({
|
||||
page: "Guide_to_chemistry",
|
||||
name: element
|
||||
.querySelector("th .reagent-header")
|
||||
.querySelector(".reagent-header")
|
||||
.textContent.trim()
|
||||
.replace("▮", ""),
|
||||
element,
|
||||
|
|
|
|||
|
|
@ -1,53 +1,8 @@
|
|||
import { parseTable, makeTable } from "../utils";
|
||||
import { registerSearchEntries } from "../search";
|
||||
|
||||
export function processVirology(root: HTMLElement): void {
|
||||
const diseaseTable = root.querySelector<HTMLElement>(
|
||||
"#Simple_Diseases .wikitable"
|
||||
);
|
||||
const diseases = parseTable(diseaseTable).map((row) => {
|
||||
const diseaseBlock = document.createElement("td");
|
||||
diseaseBlock.innerHTML = `
|
||||
<div class="disease-name">${row["Disease Name"].innerHTML}</div>
|
||||
<p class="vector">${row["Vector Name"].innerHTML}</p>
|
||||
<p class="source">${row["Source"].innerHTML}</p>
|
||||
<p class="spread">${row["Spread"].innerHTML}</p>
|
||||
<p class="description">${row["Description"].innerHTML}</p>
|
||||
`;
|
||||
return {
|
||||
Disease: diseaseBlock,
|
||||
Cure: row["Cure"],
|
||||
};
|
||||
});
|
||||
|
||||
const diseaseBetterTable = makeTable(["Disease", "Cure"], diseases);
|
||||
diseaseBetterTable.className = "disease-ext wikitable";
|
||||
diseaseTable.replaceWith(diseaseBetterTable);
|
||||
|
||||
const symptomsTable = root.querySelector<HTMLElement>(
|
||||
"#Symptoms_Table .wikitable"
|
||||
);
|
||||
const symptoms = parseTable(symptomsTable);
|
||||
//symptomsTable.replaceWith(document.createElement("span"));
|
||||
}
|
||||
|
||||
export function virologyScript(root: HTMLElement): void {
|
||||
// Init fuzzy search with elements
|
||||
const el = Array.from(
|
||||
root.querySelectorAll<HTMLElement>(".disease-ext tr:not(:first-child)")
|
||||
);
|
||||
registerSearchEntries(
|
||||
el.map((element, id) => ({
|
||||
page: "Infections",
|
||||
name: element.querySelector(".disease-name").textContent.trim(),
|
||||
element,
|
||||
alignment: "center",
|
||||
id,
|
||||
}))
|
||||
);
|
||||
const symptoms = document.querySelector("#Symptoms_Table .wikitable");
|
||||
//parseTable(symptoms);
|
||||
}
|
||||
|
||||
export default {
|
||||
processVirology,
|
||||
virologyScript,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@ export function searchBox(): HTMLElement {
|
|||
behavior: "auto",
|
||||
});
|
||||
document
|
||||
.querySelectorAll(".bgus_fz_selected")
|
||||
.querySelectorAll("table.wikitable .bgus_fz_selected")
|
||||
.forEach((sel) => sel.classList.remove("bgus_fz_selected"));
|
||||
entry.element.classList.add("bgus_fz_selected");
|
||||
entry.element.parentElement.classList.add("bgus_fz_selected");
|
||||
};
|
||||
|
||||
const setSelectedResult = (i) => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
/**
|
||||
* Find closest parent that meets a specified condition
|
||||
* @param base Element to start from
|
||||
* @param matchFn Matching function, returns true if condition is met
|
||||
*/
|
||||
export function findParent(
|
||||
base: HTMLElement,
|
||||
matchFn: (candidate: HTMLElement) => boolean
|
||||
|
|
@ -17,71 +12,4 @@ export function findParent(
|
|||
return parent;
|
||||
}
|
||||
|
||||
export type TableRowData = Record<string, HTMLElement>;
|
||||
export type TableData = TableRowData[];
|
||||
|
||||
/**
|
||||
* Parse a HTML table and return a dictionary of rows as dictionaries
|
||||
* @param table Table element or any element from where you can query for "th" etc.
|
||||
*/
|
||||
export function parseTable(table: HTMLElement): TableData {
|
||||
const [headerRow, ...valueRows] = Array.from(table.querySelectorAll("tr"));
|
||||
const headers = Array.from(
|
||||
headerRow.querySelectorAll<HTMLTableRowElement>("th")
|
||||
).map((th) => th.textContent.trim());
|
||||
return valueRows.map((tr) => {
|
||||
const obj = {};
|
||||
tr.querySelectorAll<HTMLElement>("td,th").forEach((val, i) => {
|
||||
obj[headers[i]] = val;
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Make table from generated or mutated (from parseTable) table data
|
||||
* @param headers List of strings to use as table headers, must be keys in object
|
||||
* @param data Table row data
|
||||
* @param decorator (Optional) decorator function to change table row elements
|
||||
*/
|
||||
export function makeTable(
|
||||
headers: string[],
|
||||
data: TableData,
|
||||
decorator?: (data: TableRowData, tr: HTMLTableRowElement) => void
|
||||
): HTMLTableElement {
|
||||
const table = document.createElement("table");
|
||||
if (data.length < 1) {
|
||||
return table;
|
||||
}
|
||||
// Make header row
|
||||
const headerRow = document.createElement("tr");
|
||||
headers.forEach((head) => {
|
||||
const headerCell = document.createElement("th");
|
||||
headerCell.appendChild(document.createTextNode(head));
|
||||
headerRow.appendChild(headerCell);
|
||||
});
|
||||
table.appendChild(headerRow);
|
||||
|
||||
// Make rows
|
||||
data.forEach((row) => {
|
||||
const tableRow = document.createElement("tr");
|
||||
headers.forEach((key) => {
|
||||
let cell = null;
|
||||
if (row[key].tagName === "TD" || row[key].tagName === "TH") {
|
||||
cell = row[key];
|
||||
} else {
|
||||
cell = document.createElement("td");
|
||||
cell.appendChild(row[key]);
|
||||
}
|
||||
tableRow.appendChild(cell);
|
||||
});
|
||||
if (decorator) {
|
||||
decorator(row, tableRow);
|
||||
}
|
||||
table.appendChild(tableRow);
|
||||
});
|
||||
|
||||
return table;
|
||||
}
|
||||
|
||||
export default { findParent, parseTable, makeTable };
|
||||
export default { findParent };
|
||||
|
|
|
|||
199
style/bgus.scss
Normal file
199
style/bgus.scss
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
@import "vars.scss";
|
||||
|
||||
.bgus_hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.bgus_nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#bgus_fz_searchbox {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 999;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
#bgus_fz_searchbox {
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
#bgus_fz_searchbox input {
|
||||
font-size: 10pt;
|
||||
padding: 5pt 8pt;
|
||||
border: 1px solid #555;
|
||||
margin: 5px;
|
||||
margin-bottom: 0;
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
&:focus {
|
||||
border-color: #aaa;
|
||||
}
|
||||
}
|
||||
#bgus_fz_searchbox ul {
|
||||
list-style: none;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
#bgus_fz_searchbox li {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
.source {
|
||||
color: #ccc;
|
||||
font-size: 8pt;
|
||||
display: block;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
}
|
||||
#bgus_fz_searchbox li:hover {
|
||||
background-color: rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
#bgus_fz_searchbox li.selected {
|
||||
border-left: 3px solid white;
|
||||
}
|
||||
.bgus_twistie:after {
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-left: 0.2em;
|
||||
content: "⯆";
|
||||
}
|
||||
.bgus_collapsed > .bgus_twistie:after {
|
||||
content: "⯈";
|
||||
}
|
||||
div.tooltiptext {
|
||||
display: none;
|
||||
border: 1px solid #384e68;
|
||||
background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%));
|
||||
}
|
||||
span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
|
||||
z-index: unset;
|
||||
visibility: inherit;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
border-left-width: 3px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
font-size: 8pt;
|
||||
padding: 5px 8px;
|
||||
line-height: 10pt;
|
||||
|
||||
div.tooltiptext {
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
div[data-tab="Guide_to_chemistry"] table.wikitable > tbody > tr > td:nth-child(2) {
|
||||
width: 45%;
|
||||
padding: 10px;
|
||||
}
|
||||
div[data-tab="Guide_to_chemistry"] table.wikitable {
|
||||
border: 0 !important;
|
||||
.table-head {
|
||||
text-align: center;
|
||||
}
|
||||
th {
|
||||
background-color: darken($nanotrasen, 5%) !important;
|
||||
}
|
||||
}
|
||||
div[data-tab="Guide_to_chemistry"] .bgus_fz_selected {
|
||||
background: $nanotrasen !important;
|
||||
th,
|
||||
td {
|
||||
border-top: 2px solid lighten($nanotrasen, 20%);
|
||||
border-bottom: 2px solid lighten($nanotrasen, 15%);
|
||||
}
|
||||
th {
|
||||
background: lighten($nanotrasen, 5%) !important;
|
||||
}
|
||||
div.tooltiptext {
|
||||
border-color: lighten($nanotrasen, 20%);
|
||||
background: darken($nanotrasen, 10%);
|
||||
}
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"] + span[data-src]:before {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
content: "[_]";
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before {
|
||||
content: "[X]";
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"] + span[data-src] {
|
||||
cursor: pointer;
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"] + span[data-src]:before,
|
||||
body.bgus_cbox input[type="checkbox"] + span[data-src] {
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
body.bgus_cbox input[type="checkbox"]:checked + span[data-src]:before,
|
||||
body.bgus_cbox input[type="checkbox"]:checked + span[data-src] {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.reagent-ext {
|
||||
.reagent-header {
|
||||
font-size: 12pt;
|
||||
text-align: left;
|
||||
padding: 10pt;
|
||||
padding-bottom: 0;
|
||||
span:last-child {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 8pt;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
word-spacing: -0.1em;
|
||||
}
|
||||
.treatment {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.metabolism:before {
|
||||
font-size: 9pt;
|
||||
content: "Metabolism rate: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
.overdose,
|
||||
.addiction {
|
||||
font-size: 9pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.overdose:before {
|
||||
color: #ffae68;
|
||||
content: "Overdose at ";
|
||||
}
|
||||
.addiction:before {
|
||||
color: #ffdf97;
|
||||
content: "Addiction at ";
|
||||
}
|
||||
}
|
||||
|
||||
.page ul,
|
||||
.page ol {
|
||||
padding-left: 25pt;
|
||||
li {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 12pt;
|
||||
}
|
||||
}
|
||||
251
style/main.scss
251
style/main.scss
|
|
@ -1,7 +1,246 @@
|
|||
$nanotrasen: #384e68;
|
||||
@import "vars.scss";
|
||||
|
||||
@import "ui.scss";
|
||||
@import "search.scss";
|
||||
@import "pages/global.scss";
|
||||
@import "pages/chemistry.scss";
|
||||
@import "pages/virology.scss";
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bgimage {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 0;
|
||||
img {
|
||||
opacity: 0.4;
|
||||
width: 80vmin;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
color: #fff;
|
||||
font-family: "Iosevka Aile Web", sans-serif;
|
||||
font-size: 9pt;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.waiting {
|
||||
#tab-list,
|
||||
#section-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 14pt;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
|
||||
border: 1px solid lighten($nanotrasen, 10%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
lighten($nanotrasen, 20%),
|
||||
lighten($nanotrasen, 30%),
|
||||
lighten($nanotrasen, 20%)
|
||||
);
|
||||
border: 1px solid lighten($nanotrasen, 10%);
|
||||
}
|
||||
|
||||
.speen {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12pt;
|
||||
img {
|
||||
width: 60vmin;
|
||||
max-height: 100%;
|
||||
opacity: 0.9;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#tabs {
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
.page {
|
||||
//visibility: hidden;
|
||||
will-change: display;
|
||||
display: none;
|
||||
overflow-y: scroll;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
&.active {
|
||||
//visibility: visible;
|
||||
display: inherit;
|
||||
&.waiting {
|
||||
user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1.pageheader {
|
||||
margin-top: 0;
|
||||
padding: 15pt 10pt;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
padding-left: 10pt;
|
||||
padding-right: 10pt;
|
||||
}
|
||||
a[href] {
|
||||
color: white;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: $nanotrasen;
|
||||
padding: 10pt;
|
||||
z-index: 999;
|
||||
}
|
||||
.mw-headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$section-active: darken($nanotrasen, 5%);
|
||||
$tab-active: lighten($nanotrasen, 10%);
|
||||
|
||||
#section-list {
|
||||
z-index: 2;
|
||||
border-bottom: 2px solid $section-active;
|
||||
display: flex;
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 9pt;
|
||||
padding: 3pt 7pt;
|
||||
text-transform: uppercase;
|
||||
color: lighten($nanotrasen, 60%);
|
||||
flex: 1;
|
||||
&.active {
|
||||
background-color: $section-active;
|
||||
color: white;
|
||||
}
|
||||
&:not(.active) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: darken($section-active, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tab-list {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
background-color: $section-active;
|
||||
border-bottom: 4px solid $tab-active;
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 7pt;
|
||||
padding: 2px 4px;
|
||||
padding-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
flex: 1;
|
||||
max-width: 100px;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
max-height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
&.active {
|
||||
background-color: $tab-active;
|
||||
}
|
||||
&:not(.active) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: darken($tab-active, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
noscript {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 9pt;
|
||||
padding: 3pt 7pt;
|
||||
text-transform: uppercase;
|
||||
flex-wrap: wrap;
|
||||
div {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
img {
|
||||
max-width: 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,136 +0,0 @@
|
|||
div[data-tab="Guide_to_chemistry"] {
|
||||
.bgus_twistie:after {
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-left: 0.2em;
|
||||
content: "⯆";
|
||||
}
|
||||
|
||||
.bgus_collapsed > .bgus_twistie:after {
|
||||
content: "⯈";
|
||||
}
|
||||
|
||||
div.tooltiptext {
|
||||
display: none;
|
||||
border: 1px solid #384e68;
|
||||
background: linear-gradient(to bottom, darken(#384e68, 20%), darken(#384e68, 25%));
|
||||
}
|
||||
|
||||
span.bgus_nested_element:not(.bgus_collapsed) + div.tooltiptext {
|
||||
z-index: unset;
|
||||
visibility: inherit;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
width: auto;
|
||||
border-left-width: 3px;
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
font-size: 8pt;
|
||||
padding: 5px 8px;
|
||||
line-height: 10pt;
|
||||
|
||||
div.tooltiptext {
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
table.wikitable {
|
||||
border: 0 !important;
|
||||
|
||||
.table-head {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: darken($nanotrasen, 5%) !important;
|
||||
}
|
||||
|
||||
& > tbody > tr > td:nth-child(2) {
|
||||
width: 45%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bgus_fz_selected {
|
||||
background: $nanotrasen !important;
|
||||
th,
|
||||
td {
|
||||
border-top: 2px solid lighten($nanotrasen, 20%);
|
||||
border-bottom: 2px solid lighten($nanotrasen, 15%);
|
||||
}
|
||||
th {
|
||||
background: lighten($nanotrasen, 5%) !important;
|
||||
}
|
||||
div.tooltiptext {
|
||||
border-color: lighten($nanotrasen, 20%);
|
||||
background: darken($nanotrasen, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.bgus_cbox {
|
||||
input[type="checkbox"] + span[data-src]:before {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
content: "[_]";
|
||||
}
|
||||
input[type="checkbox"]:checked + span[data-src]:before {
|
||||
content: "[X]";
|
||||
}
|
||||
input[type="checkbox"]:checked + span[data-src] {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
input[type="checkbox"] + span[data-src] {
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type="checkbox"] + span[data-src]:before,
|
||||
input[type="checkbox"] + span[data-src] {
|
||||
color: orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
input[type="checkbox"]:checked + span[data-src]:before,
|
||||
input[type="checkbox"]:checked + span[data-src] {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
|
||||
.reagent-ext {
|
||||
.reagent-header {
|
||||
font-size: 12pt;
|
||||
text-align: left;
|
||||
padding: 10pt;
|
||||
padding-bottom: 0;
|
||||
span:last-child {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 8pt;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
word-spacing: -0.1em;
|
||||
}
|
||||
.treatment {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.metabolism:before {
|
||||
font-size: 9pt;
|
||||
content: "Metabolism rate: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
.overdose,
|
||||
.addiction {
|
||||
font-size: 9pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
.overdose:before {
|
||||
color: #ffae68;
|
||||
content: "Overdose at ";
|
||||
}
|
||||
.addiction:before {
|
||||
color: #ffdf97;
|
||||
content: "Addiction at ";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.bgus_hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.bgus_nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page ul,
|
||||
.page ol {
|
||||
padding-left: 25pt;
|
||||
li {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 12pt;
|
||||
}
|
||||
}
|
||||
|
||||
.disease-ext {
|
||||
p {
|
||||
font-size: 8pt;
|
||||
font-weight: 300;
|
||||
line-height: 1.4em;
|
||||
word-spacing: -0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbinner {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
div[data-tab="Infections"] {
|
||||
.disease-ext {
|
||||
width: 100%;
|
||||
th,
|
||||
td:first-child {
|
||||
background-color: #2f4257;
|
||||
}
|
||||
td:nth-child(2) {
|
||||
width: 30vw;
|
||||
max-width: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
.disease-name {
|
||||
font-size: 12pt;
|
||||
text-align: left;
|
||||
padding: 10pt;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 10pt;
|
||||
}
|
||||
p {
|
||||
font-size: 8pt;
|
||||
font-weight: 300;
|
||||
line-height: 1.2em;
|
||||
word-spacing: -0.1em;
|
||||
}
|
||||
.vector {
|
||||
font-size: 9pt;
|
||||
&:before {
|
||||
content: "Vector: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.source {
|
||||
font-size: 9pt;
|
||||
&:before {
|
||||
content: "Source: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.spread {
|
||||
font-size: 9pt;
|
||||
&:before {
|
||||
content: "Spread: ";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 5pt 0;
|
||||
}
|
||||
.description {
|
||||
margin: 10pt 0;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.bgus_fz_selected {
|
||||
background: $nanotrasen !important;
|
||||
th,
|
||||
td {
|
||||
border-top: 2px solid lighten($nanotrasen, 20%);
|
||||
border-bottom: 2px solid lighten($nanotrasen, 15%);
|
||||
}
|
||||
th {
|
||||
background: lighten($nanotrasen, 5%) !important;
|
||||
}
|
||||
div.tooltiptext {
|
||||
border-color: lighten($nanotrasen, 20%);
|
||||
background: darken($nanotrasen, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
#bgus_fz_searchbox {
|
||||
position: fixed;
|
||||
top: 80px;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
background: rgba(10, 10, 10, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 999;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
input {
|
||||
font-size: 10pt;
|
||||
padding: 5pt 8pt;
|
||||
border: 1px solid #555;
|
||||
margin: 5px;
|
||||
margin-bottom: 0;
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
&:focus {
|
||||
border-color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
|
||||
.source {
|
||||
color: #ccc;
|
||||
font-size: 8pt;
|
||||
display: block;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(100, 100, 100, 0.5);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border-left: 3px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
#bgus_fz_searchbox {
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
}
|
||||
}
|
||||
244
style/ui.scss
244
style/ui.scss
|
|
@ -1,244 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bgimage {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 0;
|
||||
img {
|
||||
opacity: 0.4;
|
||||
width: 80vmin;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, darken($nanotrasen, 20%), darken($nanotrasen, 10%));
|
||||
background-size: 100% 100%;
|
||||
background-attachment: fixed;
|
||||
color: #fff;
|
||||
font-family: "Iosevka Aile Web", sans-serif;
|
||||
font-size: 9pt;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.waiting {
|
||||
#tab-list,
|
||||
#section-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 14pt;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: linear-gradient(to bottom, darken($nanotrasen, 0%), darken($nanotrasen, 10%), darken($nanotrasen, 0%));
|
||||
border: 1px solid lighten($nanotrasen, 10%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
lighten($nanotrasen, 20%),
|
||||
lighten($nanotrasen, 30%),
|
||||
lighten($nanotrasen, 20%)
|
||||
);
|
||||
border: 1px solid lighten($nanotrasen, 10%);
|
||||
}
|
||||
|
||||
.speen {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12pt;
|
||||
img {
|
||||
width: 60vmin;
|
||||
max-height: 100%;
|
||||
opacity: 0.9;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
#tabs {
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
.page {
|
||||
//visibility: hidden;
|
||||
will-change: display;
|
||||
display: none;
|
||||
overflow-y: scroll;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
&.active {
|
||||
//visibility: visible;
|
||||
display: inherit;
|
||||
&.waiting {
|
||||
user-select: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h1.pageheader {
|
||||
margin-top: 0;
|
||||
padding: 15pt 10pt;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
padding-left: 10pt;
|
||||
padding-right: 10pt;
|
||||
}
|
||||
a[href] {
|
||||
color: white;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: $nanotrasen;
|
||||
padding: 10pt;
|
||||
z-index: 999;
|
||||
}
|
||||
.mw-headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$section-active: darken($nanotrasen, 5%);
|
||||
$tab-active: lighten($nanotrasen, 10%);
|
||||
|
||||
#section-list {
|
||||
z-index: 2;
|
||||
border-bottom: 2px solid $section-active;
|
||||
display: flex;
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 9pt;
|
||||
padding: 3pt 7pt;
|
||||
text-transform: uppercase;
|
||||
color: lighten($nanotrasen, 60%);
|
||||
flex: 1;
|
||||
&.active {
|
||||
background-color: $section-active;
|
||||
color: white;
|
||||
}
|
||||
&:not(.active) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: darken($section-active, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tab-list {
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
background-color: $section-active;
|
||||
border-bottom: 4px solid $tab-active;
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 7pt;
|
||||
padding: 2px 4px;
|
||||
padding-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
flex: 1;
|
||||
max-width: 100px;
|
||||
|
||||
img {
|
||||
height: 80%;
|
||||
max-height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
&.active {
|
||||
background-color: $tab-active;
|
||||
}
|
||||
&:not(.active) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: darken($tab-active, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
noscript {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading-icons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
font-size: 9pt;
|
||||
padding: 3pt 7pt;
|
||||
text-transform: uppercase;
|
||||
flex-wrap: wrap;
|
||||
div {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
img {
|
||||
max-width: 32px;
|
||||
}
|
||||
}
|
||||
1
style/vars.scss
Normal file
1
style/vars.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
$nanotrasen: #384e68;
|
||||
Reference in a new issue