187 lines
3.0 KiB
CSS
187 lines
3.0 KiB
CSS
@font-face {
|
|
font-family: "Cyberfall";
|
|
src:url(https://f0ck.it/uploads/Cyberfall.otf) format("opentype");
|
|
src: url("/css/Cyberfall.woff2") format("woff")
|
|
}
|
|
|
|
/*Theming*/
|
|
:root {
|
|
--primary-color: #302AE6;
|
|
--secondary-color: #536390;
|
|
--font-color: #424242;
|
|
--bg-color: #090f13;
|
|
--heading-color: #292922;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--primary-color: #9A97F3;
|
|
--secondary-color: #818cab;
|
|
--font-color: #e1e1ff;
|
|
--bg-color: black;
|
|
--heading-color: #818cab;
|
|
}
|
|
/*End of Theming*/
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background-color: var(--bg-color);
|
|
color: var(--font-color);
|
|
}
|
|
div.pageWrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 0.2fr 2.6fr 0fr;
|
|
}
|
|
div#header, div#footer {
|
|
z-index: 9999;
|
|
background-color: #292922;
|
|
}
|
|
|
|
#header {
|
|
display: grid;
|
|
grid-template-columns: 1fr 6fr 1fr;
|
|
grid-gap: 0;
|
|
}
|
|
|
|
#logoHead {
|
|
margin: 6px 0 0 4px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
}
|
|
#logo {
|
|
padding: 1px 4px 1px 4px;
|
|
height: 48px;
|
|
}
|
|
#itemInfo {
|
|
display: none;
|
|
height: 61px;
|
|
position: absolute;
|
|
left: 200px;
|
|
right: 270px;
|
|
top: 4px;
|
|
}
|
|
#itemInfo div.infoText {
|
|
margin-top: 3px;
|
|
}
|
|
#pagePosition, #itemPosition {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 6px;
|
|
padding: 0;
|
|
color: #7d7b6a;
|
|
background-color: #333;
|
|
}
|
|
#pagePosition span, #itemPosition span {
|
|
color: #9d9b8a;
|
|
}
|
|
/*#pagePosition {
|
|
display: block;
|
|
}
|
|
#itemPosition {
|
|
display: none;
|
|
}*/
|
|
|
|
div#content {
|
|
position: relative;
|
|
}
|
|
|
|
div.wrapper {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
div#howtowrapper {
|
|
overflow: hidden;
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
z-index: 999;
|
|
}
|
|
|
|
#itemInfo {
|
|
position: absolute;
|
|
background: #191b1b;
|
|
border-bottom-right-radius: 5px;
|
|
color: aliceblue;
|
|
padding: 5px;
|
|
left: auto;
|
|
right: auto;
|
|
top: auto;
|
|
border-right: 1px solid white;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
#logoHead {
|
|
margin: 10px;
|
|
}
|
|
|
|
div#header, div#footer {
|
|
z-index: 9999;
|
|
background-color: #23232199;
|
|
box-shadow: 2px 2px 2px black;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
#itemSource {
|
|
|
|
color: #04c33e;
|
|
position: relative;
|
|
top: -3px;
|
|
text-shadow: 1px 1px 1px black;
|
|
|
|
}
|
|
|
|
#itemInfo {
|
|
position: unset;
|
|
background: #191b1b;
|
|
color: aliceblue;
|
|
padding: 5px;
|
|
left: auto;
|
|
right: auto;
|
|
top: auto;
|
|
grid-row-start: 0;
|
|
border: 0;
|
|
}
|
|
|
|
#itemPosition {
|
|
display: block;
|
|
grid-row-start: -1;
|
|
position: absolute;
|
|
color: lime;
|
|
text-shadow: 1px 1px black;
|
|
font-family: monospace;
|
|
}
|
|
|
|
|
|
|
|
#itemInfo {
|
|
position: unset;
|
|
background: #191b1b;
|
|
color: aliceblue;
|
|
padding: 5px;
|
|
left: auto;
|
|
right: auto;
|
|
top: auto;
|
|
height: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.infoText {
|
|
font-family: monospace;
|
|
}
|
|
|
|
div#itemPosition {
|
|
font-family: Cyberfall;
|
|
font-size: 290%;
|
|
background: transparent;
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
text-shadow: 0px 0px 8px #04c33e;
|
|
} |