You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

354 lines
6.1 KiB
CSS

* {
box-sizing: border-box;
}
:root{
--coin: #e2b025;
--bit-click: rgb(238, 194, 99);
--bit-hover: #ffffffb9;
--bit: #dadadab9;
--background: #121212;
--background-main: #333333;
--background-menu: #292929;
--border-idlee: #4C4C4C;
--font: #a0cbff;
--font-small: #585858;
--head: #00497f;
--icons: #000000;
--icon-back: #ffffffb9;
}
body{
max-width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: var(--background-main );
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
background-color: var(--background);
height: 100%;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.header {
user-select: none;
background-color: var(--head );
max-height: 4.4em;
height: 3.1em;
}
.icon-head{
max-width: 2em;
margin-top: 5px;
margin-left: 15px;
float: left;
fill: var(--icons );
}
.icon-head-right{
max-width: 2em;
fill: var(--coin );
vertical-align: -27px;
}
.number{
text-align: center;
font-size: 2em;
margin-left: auto;
margin-right: auto;
vertical-align: -23px;
color: aliceblue;
font-size: 200%;
}
.icon-bit{
display: unset;
border-radius: 100px;
box-sizing: none;
border: none;
text-align: center;
color: inherit;
background: none;
cursor: pointer;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin-left: 13px;
margin-right: 13px;
margin-top: 10%;
}
.icon-bit:after {
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#icon-bit-main{
box-sizing: none;
}
/* Button 1 */
.btn-1 {
fill: var(--bit );
}
.btn-1:hover {
fill: var(--bit-hover );
}
.btn-1:active {
fill: var(--bit-click );
top: 2px;
}
.btn-1:before {
position: absolute;
height: 100%;
left: 0;
top: 0;
line-height: 3;
font-size: 140%;
width: 60px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: var(--background-menu );
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: var(--background-menu );
}
.aside {
background-color: var(--background-menu );
font-size: 14px;
}
#menu-desc{
display: none;
}
#menu-mobi{
display: flex ;
flex-direction: column;
height: unset;
}
.footer {
user-select: none;
background-color: var(--background-menu );
text-align: center;
font-size: 18px;
}
.Fabrik {
color: var(--font );
border: solid 1px;
user-select: none;
text-align: center;
font-size: 1.125rem;
font-family: "Source Sans Pro", sans-serif;
display: block;
text-decoration: none ;
cursor: pointer;
}
.Fabrik:hover {
color: rgb(138, 138, 138);
transition: 0.3s;
cursor: pointer;
}
.top {
border: solid 1px;
user-select: none;
text-align: center;
color: var(--font );
font-size: 1.3rem;
font-family: "Source Sans Pro", sans-serif;
display: block;
text-decoration: none ;
border-color: var(--border-idlee);
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 30%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 95%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
body{width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 70%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body{width: 80%;}
.icon-bit{max-width: 800px;}
#menu-desc{display: unset;}
.icon-bit{
margin-left: unset;
margin-right: unset;
}
#menu-mobi{
display: none ;
}
}
@media only screen and (min-width: 900px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 30%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 70%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
body{width: 60%;}
.icon-bit{max-width: 800px;}
#menu-desc{display: unset;}
.icon-bit{
margin-left: unset;
margin-right: unset;
}
#menu-mobi{
display: none ;
}
}
.short_text{
color: var(--font-small);
font-size: 0.8em;
}
.text-center{
text-align: center !important;
}
.mobil-nav{
background-color: var(--background-menu) ;
margin-left: auto;
margin-right: auto;
text-align: center;
user-select: none;
position: fixed;
bottom: 0px;
width: 100%;
max-height: 30%;
}
.mobil-navsub{
background-color: var(--background-menu) ;
user-select: none;
}
.icon-nav1{
max-width: 25%;
margin-bottom: 5%;
padding: 3%;
user-select: none;
background-color: var(--icon-back);
border-radius: 8px;
}
.icon-nav2{
max-width: 25%;
margin-bottom: 5%;
margin-left: 3%;
margin-right: 3%;
padding: 3%;
user-select: none;
background-color: var(--icon-back);
border-radius: 8px;
}
.icon-nav3{
max-width: 25%;
padding: 3%;
user-select: none;
margin-bottom: 5%;
background-color: var(--icon-back);
border-radius: 8px;
}
.nav-bottom{
bottom: 10px;
}
.text-nav{
background-color: var(--head);
font-size: 20px;
}
#wrench{
background-color: crimson;
border-radius: 10px;
flex-grow: 2;
margin: 5px;
display: none;
}
#bag{
background-color: crimson;
border-radius: 10px;
flex-grow: 2;
margin: 5px;
display: none;
}
#arrow{
background-color: crimson;
border-radius: 10px;
flex-grow: 2;
margin: 5px;
display: none;
}