190 lines
2.8 KiB
CSS
190 lines
2.8 KiB
CSS
:root {
|
|
--col-dark: #1C1C1C;
|
|
--col-light: #E3E3E3;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Lato';
|
|
src: url('../fonts/Lato-Regular.ttf');
|
|
src: url('../fonts/Lato-Regular.ttf') format('truetype');
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
|
|
overflow: hidden;
|
|
|
|
background: var(--col-dark);
|
|
}
|
|
|
|
section {
|
|
color: var(--col-light);
|
|
font-family: Lato;
|
|
}
|
|
|
|
a {
|
|
color: var(--col-light);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[rel="author"] {
|
|
justify-self: end;
|
|
}
|
|
a[rel="author"]::before {
|
|
content: " - ";
|
|
}
|
|
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
section {
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
margin: 0 4rem;
|
|
}
|
|
|
|
section * {
|
|
margin: .2rem 0;
|
|
}
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.btn.cbtn {
|
|
display: grid;
|
|
place-content: center;
|
|
place-items: center;
|
|
position: relative;
|
|
|
|
padding: 2.2rem;
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border: none;
|
|
background: none;
|
|
font: unset;
|
|
|
|
border-radius: 100vw;
|
|
}
|
|
.btn.cbtn > i {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
.btn.cbtn > i::after {
|
|
content: "";
|
|
display: grid;
|
|
place-content: center;
|
|
position: absolute;
|
|
|
|
z-index: 1000;
|
|
|
|
overflow: hidden;
|
|
|
|
padding: 0rem;
|
|
|
|
background-color: var(--col-light);
|
|
color: var(--col-dark);
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
border-radius: 100vw;
|
|
transition: padding .2s, background-color .2s, color .2s;
|
|
}
|
|
.btn.cbtn:hover > i::after,
|
|
.btn.cbtn.dragover > i::after {
|
|
padding: var(--padding);
|
|
}
|
|
|
|
@keyframes cbtn-click {
|
|
from {
|
|
padding: 0rem;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
padding: calc(var(--padding) * 1.3);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.btn.cbtn > .click {
|
|
position: absolute;
|
|
padding: 0rem;
|
|
opacity: 1;
|
|
z-index: 10000;
|
|
|
|
border-radius: 100vw;
|
|
width: 0;
|
|
height: 0;
|
|
|
|
/*box-shadow: inset 0 0 2px #FFF;*/
|
|
background: #DDD8;
|
|
border: 4px solid #fff;
|
|
|
|
animation: cbtn-click .2s;
|
|
}
|
|
|
|
.btn.cbtn {
|
|
--padding: 5vmin;
|
|
padding: var(--padding);
|
|
font-size: 3vmin;
|
|
}
|
|
|
|
.btn.cbtn.medium {
|
|
--padding: 5vmin;
|
|
padding: var(--padding);
|
|
font-size: 3vmin;
|
|
}
|
|
|
|
.btn.cbtn.big {
|
|
--padding: 30vmin;
|
|
padding: var(--padding);
|
|
font-size: 8vmin;
|
|
}
|
|
|
|
.btn.cbtn.overlap {
|
|
margin: -1vmin;
|
|
}
|
|
|
|
footer {
|
|
display: grid;
|
|
grid-auto-columns: min-content;
|
|
grid-auto-flow: column;
|
|
padding: 3vmin;
|
|
}
|
|
|
|
#input {
|
|
display: none;
|
|
}
|
|
|
|
#button_text {
|
|
font-style: normal;
|
|
}
|
|
|
|
#button_text::before, #button_text::after {
|
|
content: "Drag & Drop Yuzu Executable here";
|
|
text-align: center;
|
|
}
|
|
|
|
.dragover {
|
|
--col-dark: #1C1C1C;
|
|
--col-light: #82DD90;
|
|
} |