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"
|
||||
/>
|
||||
<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="stylesheet" href="assets/fonts/iosevka/iosevka-aile.css" />
|
||||
<link rel="stylesheet" href="style/main.scss" />
|
||||
<link rel="stylesheet" href="style/bgus.scss" />
|
||||
<title>/tg/station Handbook</title>
|
||||
</head>
|
||||
<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,
|
||||
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";
|
||||
|
|
|
|||
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