Compare commits

..

2 commits

Author SHA1 Message Date
fcebeda2fd
Refactor search/scss and add basic virology fixes
Some checks failed
continuous-integration/drone/push Build is failing
2020-06-27 15:06:14 +02:00
f51c915874
Restructure SCSS tree 2020-06-27 14:31:30 +02:00
15 changed files with 680 additions and 456 deletions

View file

@ -20,6 +20,7 @@ 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",
{ {

View file

@ -36,11 +36,9 @@
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>

View file

@ -1,5 +1,5 @@
import { chemistryScript, processChemistry } from "./pages/chemistry"; import { chemistryScript, processChemistry } from "./pages/chemistry";
import { virologyScript } from "./pages/virology"; import { processVirology, 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":
virologyScript(root); processVirology(root);
break; break;
default: default:
} }
@ -49,8 +49,13 @@ 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;

View file

@ -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) > th" "table.wikitable > tbody > tr:not(:first-child)"
) )
); );
registerSearchEntries( registerSearchEntries(
el.map((element, id) => ({ el.map((element, id) => ({
page: "Guide_to_chemistry", page: "Guide_to_chemistry",
name: element name: element
.querySelector(".reagent-header") .querySelector("th .reagent-header")
.textContent.trim() .textContent.trim()
.replace("▮", ""), .replace("▮", ""),
element, element,

View file

@ -1,8 +1,53 @@
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 {
const symptoms = document.querySelector("#Symptoms_Table .wikitable"); // Init fuzzy search with elements
//parseTable(symptoms); 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,
}))
);
} }
export default { export default {
processVirology,
virologyScript, virologyScript,
}; };

View file

@ -43,9 +43,9 @@ export function searchBox(): HTMLElement {
behavior: "auto", behavior: "auto",
}); });
document document
.querySelectorAll("table.wikitable .bgus_fz_selected") .querySelectorAll(".bgus_fz_selected")
.forEach((sel) => sel.classList.remove("bgus_fz_selected")); .forEach((sel) => sel.classList.remove("bgus_fz_selected"));
entry.element.parentElement.classList.add("bgus_fz_selected"); entry.element.classList.add("bgus_fz_selected");
}; };
const setSelectedResult = (i) => { const setSelectedResult = (i) => {

View file

@ -1,3 +1,8 @@
/**
* 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
@ -12,4 +17,71 @@ export function findParent(
return parent; return parent;
} }
export default { findParent }; 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 };

View file

@ -1,199 +0,0 @@
@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;
}
}

View file

@ -1,246 +1,7 @@
@import "vars.scss"; $nanotrasen: #384e68;
html, @import "ui.scss";
body { @import "search.scss";
margin: 0; @import "pages/global.scss";
padding: 0; @import "pages/chemistry.scss";
height: 100%; @import "pages/virology.scss";
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;
}
}

136
style/pages/chemistry.scss Normal file
View file

@ -0,0 +1,136 @@
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 ";
}
}
}

31
style/pages/global.scss Normal file
View file

@ -0,0 +1,31 @@
.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;
}

71
style/pages/virology.scss Normal file
View file

@ -0,0 +1,71 @@
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%);
}
}
}
}

60
style/search.scss Normal file
View file

@ -0,0 +1,60 @@
#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 Normal file
View file

@ -0,0 +1,244 @@
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;
}
}

View file

@ -1 +0,0 @@
$nanotrasen: #384e68;