mirror of
https://github.com/tcsenpai/Hop-The-Fence.git
synced 2025-06-05 18:45:21 +00:00
112 lines
2.4 KiB
CSS
112 lines
2.4 KiB
CSS
/* Background data (Original source: https://subtlepatterns.com/grid-me/) */
|
|
/* Animations */
|
|
@-webkit-keyframes bg-scrolling-reverse {
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-moz-keyframes bg-scrolling-reverse {
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-o-keyframes bg-scrolling-reverse {
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@keyframes bg-scrolling-reverse {
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-webkit-keyframes bg-scrolling {
|
|
0% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-moz-keyframes bg-scrolling {
|
|
0% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@-o-keyframes bg-scrolling {
|
|
0% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
@keyframes bg-scrolling {
|
|
0% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
font-size: 1.15em;
|
|
background-color: #fff;
|
|
color: #000;
|
|
|
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
|
|
-webkit-animation: bg-scrolling-reverse 3s infinite;
|
|
/* Safari 4+ */
|
|
-moz-animation: bg-scrolling-reverse 3s infinite;
|
|
/* Fx 5+ */
|
|
-o-animation: bg-scrolling-reverse 3s infinite;
|
|
/* Opera 12+ */
|
|
animation: bg-scrolling-reverse 3s infinite;
|
|
/* IE 10+ */
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
-moz-animation-timing-function: ease-in-out;
|
|
-o-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
|
|
.card {
|
|
margin: 5px;
|
|
padding: 10px;
|
|
border: solid 1px #ccc;
|
|
border-radius: 25px;
|
|
width: fit-content;
|
|
}
|
|
|
|
.centered {
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
font-size: 1.25em !important;
|
|
}
|
|
|
|
.sameline {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
input {
|
|
margin: 5px;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
border: solid 1px #ccc;
|
|
|
|
}
|
|
|
|
button {
|
|
border: solid 1px #ccc;
|
|
background-color: #fff;
|
|
color: #000;
|
|
font-size: 1.15em;
|
|
padding: 5px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.label {
|
|
color: rgb(138, 8, 8);
|
|
font-style: italic;
|
|
} |