From f51c915874bd19dd7d83192e0b2247f9a97043b7 Mon Sep 17 00:00:00 2001 From: Hamcha Date: Sat, 27 Jun 2020 14:31:30 +0200 Subject: [PATCH] Restructure SCSS tree --- index.html | 2 - style/bgus.scss | 199 ----------------------------- style/main.scss | 250 +------------------------------------ style/pages/chemistry.scss | 127 +++++++++++++++++++ style/pages/global.scss | 31 +++++ style/search.scss | 60 +++++++++ style/ui.scss | 244 ++++++++++++++++++++++++++++++++++++ style/vars.scss | 1 - 8 files changed, 467 insertions(+), 447 deletions(-) delete mode 100644 style/bgus.scss create mode 100644 style/pages/chemistry.scss create mode 100644 style/pages/global.scss create mode 100644 style/search.scss create mode 100644 style/ui.scss delete mode 100644 style/vars.scss 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;