forked from hamcha/tghandbook
Restructure SCSS tree
This commit is contained in:
parent
c6df711bc4
commit
f51c915874
GPG key ID:
41467804B19A3315
8 changed files with 467 additions and 447 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
199
style/bgus.scss
199
style/bgus.scss
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
250
style/main.scss
250
style/main.scss
|
|
@ -1,246 +1,6 @@
|
||||||
@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%;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
127
style/pages/chemistry.scss
Normal file
127
style/pages/chemistry.scss
Normal file
|
|
@ -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 ";
|
||||||
|
}
|
||||||
|
}
|
||||||
31
style/pages/global.scss
Normal file
31
style/pages/global.scss
Normal 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;
|
||||||
|
}
|
||||||
60
style/search.scss
Normal file
60
style/search.scss
Normal 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
244
style/ui.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
$nanotrasen: #384e68;
|
|
||||||
Loading…
Reference in a new issue