diff --git a/index.html b/index.html
index bf0d605..7afb973 100644
--- a/index.html
+++ b/index.html
@@ -36,11 +36,9 @@
as="style"
/>
-
-
/tg/station Handbook
diff --git a/style/bgus.scss b/style/bgus.scss
deleted file mode 100644
index 8cdfb23..0000000
--- a/style/bgus.scss
+++ /dev/null
@@ -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;
- }
-}
diff --git a/style/main.scss b/style/main.scss
index e840b32..46d46cf 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,246 +1,6 @@
-@import "vars.scss";
+$nanotrasen: #384e68;
-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;
- }
-}
+@import "ui.scss";
+@import "search.scss";
+@import "pages/global.scss";
+@import "pages/chemistry.scss";
diff --git a/style/pages/chemistry.scss b/style/pages/chemistry.scss
new file mode 100644
index 0000000..3a64ce4
--- /dev/null
+++ b/style/pages/chemistry.scss
@@ -0,0 +1,127 @@
+.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;
+ }
+ table.wikitable {
+ border: 0 !important;
+ .table-head {
+ text-align: center;
+ }
+ th {
+ background-color: darken($nanotrasen, 5%) !important;
+ }
+ }
+ .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 ";
+ }
+}
diff --git a/style/pages/global.scss b/style/pages/global.scss
new file mode 100644
index 0000000..a893851
--- /dev/null
+++ b/style/pages/global.scss
@@ -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;
+}
diff --git a/style/search.scss b/style/search.scss
new file mode 100644
index 0000000..a46b345
--- /dev/null
+++ b/style/search.scss
@@ -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%;
+ }
+}
diff --git a/style/ui.scss b/style/ui.scss
new file mode 100644
index 0000000..662fa05
--- /dev/null
+++ b/style/ui.scss
@@ -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;
+ }
+}
diff --git a/style/vars.scss b/style/vars.scss
deleted file mode 100644
index a88f28b..0000000
--- a/style/vars.scss
+++ /dev/null
@@ -1 +0,0 @@
-$nanotrasen: #384e68;