183 lines
3.1 KiB
CSS
183 lines
3.1 KiB
CSS
html{
|
|
font-size: 55.5%;
|
|
|
|
height: auto !important;
|
|
padding-bottom: 300px !important;
|
|
|
|
}
|
|
body{
|
|
background-color: black !important;
|
|
margin:0;
|
|
padding: 0;
|
|
display:flex;
|
|
justify-content:center;
|
|
color: grey;
|
|
overflow: scroll;
|
|
-ms-overflow-style: none;
|
|
/* Internet Explorer 10+ */
|
|
scrollbar-width: none;
|
|
/* Firefox */
|
|
font-family: 'Coda', cursive;
|
|
font-size: 10px;
|
|
|
|
}
|
|
body {
|
|
-ms-overflow-style: none;
|
|
/* for Internet Explorer, Edge */
|
|
scrollbar-width: none;
|
|
/* for Firefox */
|
|
overflow-y: scroll;
|
|
}
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
/* for Chrome, Safari, and Opera */
|
|
}
|
|
.container{
|
|
margin-top: 5rem;
|
|
display:flex;
|
|
flex-direction:column;
|
|
width: 70%;
|
|
height: 100%;
|
|
|
|
}
|
|
.msg{
|
|
color:gray !important;
|
|
font-size: 2rem;
|
|
white-space: pre;
|
|
|
|
}
|
|
.code {
|
|
white-space: pre;
|
|
}
|
|
.msgCtn{
|
|
margin: 1rem 0;
|
|
padding: 1rem 1rem;
|
|
background-color: rgb(34, 33, 33);
|
|
white-space:pre-wrap;
|
|
border-radius: 6px;
|
|
font-size: 2rem;
|
|
color: gray !important;
|
|
display: flex;
|
|
|
|
}
|
|
.msgForm{
|
|
display:flex;
|
|
flex-direction:row;
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
}
|
|
.input{
|
|
position: sticky;
|
|
top: 0;
|
|
height: 40px;
|
|
flex: 4;
|
|
margin-right: 2rem;
|
|
border:none;
|
|
border-radius: .5rem;
|
|
padding: 2px 1rem;
|
|
font-size: 1.5rem;
|
|
color: gray;
|
|
background-color:rgb(19, 18, 18);
|
|
font-family: 'Coda', cursive;
|
|
align-items: center;
|
|
|
|
}
|
|
.input:focus{
|
|
background-color:black
|
|
|
|
}
|
|
.btn{
|
|
|
|
height:5rem;
|
|
flex: 1;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
border-radius: .5rem;
|
|
color: grey !important;
|
|
border:1px solid grey !important;
|
|
font-size: 1.6rem;
|
|
font-family: 'Coda', cursive;
|
|
background-color:black !important;
|
|
}
|
|
.btn2{
|
|
|
|
height:5rem;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
border-radius: .5rem;
|
|
color: grey !important;
|
|
border:1px solid grey !important;
|
|
font-size: 1.6rem;
|
|
font-family: 'Coda', cursive;
|
|
background-color:black !important;
|
|
}
|
|
|
|
|
|
hr {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 10px;
|
|
left: -0.5vw;
|
|
transform-origin: 0 0;
|
|
font-family: 'Coda', cursive;
|
|
}
|
|
|
|
@for $i from 0 through 99 {
|
|
hr:nth-child(#{$i}) {
|
|
@if $i%5==1 {
|
|
@if $i%10==1 {
|
|
width: 25px;
|
|
} @else {
|
|
width: 15px;
|
|
}
|
|
}
|
|
transform: translateX(#{100 * ($i - 1)/98}vw) rotate(90deg);
|
|
}
|
|
}
|
|
|
|
hr:nth-child(100) {
|
|
width: 120%;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.itsme {
|
|
position: fixed;
|
|
bottom: 0;
|
|
height: 1;
|
|
font-family: sans-serif;
|
|
color: #fffc;
|
|
text-decoration: underline;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
background-color: hsl(31deg, 43%, 22%);
|
|
padding: 10px 10px 10px 10px;
|
|
font-size: 14px;
|
|
left: calc(50% - 139px);
|
|
}
|
|
|
|
|
|
footer {
|
|
position: fixed;
|
|
height: 5%;
|
|
bottom: 0;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
header {
|
|
position: fixed;
|
|
height: 5%;
|
|
top: 0;
|
|
width: 100%;
|
|
display:inline-block;
|
|
|
|
}
|
|
|
|
|
|
|