„test.css“ löschen
techcrafter
4 years ago
parent
5aeee82a1e
commit
7e5a02c76d
@ -1,353 +0,0 @@
|
|||||||
* {
|
|
||||||
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;
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue