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.
87 lines
1.9 KiB
CSS
87 lines
1.9 KiB
CSS
/*! reset.css v1.1.0 | MIT License | github.com/pyxel-dev/reset-css */html,body,blockquote,button,dd,dl,dt,figure,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,select,textarea,ul{margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal}img{border-style:none}img,video{height:auto;max-width:100%}iframe{border:0}label{display:inline-block}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}ul{list-style:none}
|
|
|
|
|
|
html {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.info {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
cursor: pointer;
|
|
padding: .5rem;
|
|
}
|
|
|
|
.modal {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: all 0.3s ease;
|
|
top: 0;
|
|
left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal.open {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.modal-bg {
|
|
position: absolute;
|
|
background: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.modal-container {
|
|
border-radius: .5rem;
|
|
background: #888;
|
|
position: relative;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
right: .5rem;
|
|
top: .5rem;
|
|
outline: none;
|
|
appearance: none;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.modal-container h1 {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.modal-container h2 {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.modal-container a {
|
|
color: #fff;
|
|
}
|
|
|
|
.feather-info {
|
|
opacity: 0;
|
|
transition: opacity .5s ease-out;
|
|
-moz-transition: opacity .5s ease-out;
|
|
-webkit-transition: opacity .5s ease-out;
|
|
-o-transition: opacity .5s ease-out;
|
|
}
|
|
|
|
.feather-info-hover, .feather-info:hover {
|
|
opacity: 1;
|
|
} |