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-alert": "off",
|
||||||
"no-console": "off",
|
"no-console": "off",
|
||||||
"func-names": "off",
|
"func-names": "off",
|
||||||
"dot-notation": ["error", { allowPattern: "^[A-Z][a-z]+$" }],
|
|
||||||
"@typescript-eslint/ban-ts-comment": [
|
"@typescript-eslint/ban-ts-comment": [
|
||||||
"error",
|
"error",
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -36,9 +36,11 @@
|
||||||
as="style"
|
as="style"
|
||||||
/>
|
/>
|
||||||
<link rel="preload" href="style/main.scss" 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="preload" href="src/index.ts" as="script" />
|
||||||
<link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
|
<link rel="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
|
||||||
<link rel="stylesheet" href="style/main.scss" />
|
<link rel="stylesheet" href="style/main.scss" />
|
||||||
|
<link rel="stylesheet" href="style/bgus.scss" />
|
||||||
<title>/tg/station Handbook</title>
|
<title>/tg/station Handbook</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { chemistryScript, processChemistry } from "./pages/chemistry";
|
import { chemistryScript, processChemistry } from "./pages/chemistry";
|
||||||
import { processVirology, virologyScript } from "./pages/virology";
|
import { virologyScript } from "./pages/virology";
|
||||||
import { genericScript } from "./pages/generic";
|
import { genericScript } from "./pages/generic";
|
||||||
import { processGlobal } from "./pages/global";
|
import { processGlobal } from "./pages/global";
|
||||||
|
|
||||||
|
|
@ -40,7 +40,7 @@ export function postProcessHTML(root: HTMLElement, docname: string): void {
|
||||||
|
|
||||||
switch (docname) {
|
switch (docname) {
|
||||||
case "Infections":
|
case "Infections":
|
||||||
processVirology(root);
|
virologyScript(root);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
|
|
@ -49,13 +49,8 @@ export function postProcessHTML(root: HTMLElement, docname: string): void {
|
||||||
export function bindFunctions(root: HTMLElement, docname: string): void {
|
export function bindFunctions(root: HTMLElement, docname: string): void {
|
||||||
switch (docname) {
|
switch (docname) {
|
||||||
case "Guide_to_chemistry":
|
case "Guide_to_chemistry":
|
||||||
genericScript(root, docname);
|
|
||||||
chemistryScript(root);
|
chemistryScript(root);
|
||||||
break;
|
break;
|
||||||
case "Infections":
|
|
||||||
genericScript(root, docname);
|
|
||||||
virologyScript(root);
|
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
genericScript(root, docname);
|
genericScript(root, docname);
|
||||||
break;
|
break;
|
||||||
|
|
|
||||||
|
|
@ -184,14 +184,14 @@ export function chemistryScript(root: HTMLElement): void {
|
||||||
// Init fuzzy search with elements
|
// Init fuzzy search with elements
|
||||||
const el = Array.from(
|
const el = Array.from(
|
||||||
root.querySelectorAll<HTMLElement>(
|
root.querySelectorAll<HTMLElement>(
|
||||||
"table.wikitable > tbody > tr:not(:first-child)"
|
"table.wikitable > tbody > tr:not(:first-child) > th"
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
registerSearchEntries(
|
registerSearchEntries(
|
||||||
el.map((element, id) => ({
|
el.map((element, id) => ({
|
||||||
page: "Guide_to_chemistry",
|
page: "Guide_to_chemistry",
|
||||||
name: element
|
name: element
|
||||||
.querySelector("th .reagent-header")
|
.querySelector(".reagent-header")
|
||||||
.textContent.trim()
|
.textContent.trim()
|
||||||
.replace("▮", ""),
|
.replace("▮", ""),
|
||||||
element,
|
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 {
|
export function virologyScript(root: HTMLElement): void {
|
||||||
// Init fuzzy search with elements
|
const symptoms = document.querySelector("#Symptoms_Table .wikitable");
|
||||||
const el = Array.from(
|
//parseTable(symptoms);
|
||||||
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,
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
processVirology,
|
|
||||||
virologyScript,
|
virologyScript,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -43,9 +43,9 @@ export function searchBox(): HTMLElement {
|
||||||
behavior: "auto",
|
behavior: "auto",
|
||||||
});
|
});
|
||||||
document
|
document
|
||||||
.querySelectorAll(".bgus_fz_selected")
|
.querySelectorAll("table.wikitable .bgus_fz_selected")
|
||||||
.forEach((sel) => sel.classList.remove("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) => {
|
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(
|
export function findParent(
|
||||||
base: HTMLElement,
|
base: HTMLElement,
|
||||||
matchFn: (candidate: HTMLElement) => boolean
|
matchFn: (candidate: HTMLElement) => boolean
|
||||||
|
|
@ -17,71 +12,4 @@ export function findParent(
|
||||||
return parent;
|
return parent;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type TableRowData = Record<string, HTMLElement>;
|
export default { findParent };
|
||||||
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 };
|
|
||||||
|
|
|
||||||
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";
|
html,
|
||||||
@import "search.scss";
|
body {
|
||||||
@import "pages/global.scss";
|
margin: 0;
|
||||||
@import "pages/chemistry.scss";
|
padding: 0;
|
||||||
@import "pages/virology.scss";
|
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