483 lines
No EOL
10 KiB
CSS
483 lines
No EOL
10 KiB
CSS
|
|
main {
|
|
background: linear-gradient(45deg, #0f056b, rgb(133, 20, 20));
|
|
}
|
|
|
|
|
|
.divLogoPerm {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
#logoPermBDE {
|
|
padding: 1rem;
|
|
background-color: white;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
border-radius: 20px;
|
|
opacity: 80%;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 6rem 3rem 1rem 0;
|
|
align-items: center;
|
|
}
|
|
|
|
#logoliste {
|
|
padding: 1rem;
|
|
background-color: #000000;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
border-radius: 20px;
|
|
opacity: 90%;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 6rem 0 1rem 2rem;
|
|
align-items: center;
|
|
}
|
|
|
|
#logoMetzPloreur {
|
|
padding: 1rem;
|
|
background-color: rgba(75,40,108,255);
|
|
width: 10rem;
|
|
height: 10rem;
|
|
border-radius: 20px;
|
|
opacity: 80%;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 2rem 0 0 0;
|
|
align-items: center;
|
|
}
|
|
|
|
#secondDiv {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin: 3rem 0 3rem 0;
|
|
}
|
|
|
|
.button-64 {
|
|
align-items: center;
|
|
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
|
|
border: 0;
|
|
border-radius: 8px;
|
|
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
|
|
box-sizing: border-box;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
font-family: Phantomsans, sans-serif;
|
|
font-size: 20px;
|
|
justify-content: center;
|
|
line-height: 1em;
|
|
max-width: 100%;
|
|
min-width: 140px;
|
|
padding: 3px;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
touch-action: manipulation;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 2;
|
|
opacity: 80%;
|
|
}
|
|
|
|
.button-64:active,
|
|
.button-64:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
.button-64 a {
|
|
background-color: rgb(5, 6, 45);
|
|
color: white;
|
|
padding: 16px 24px;
|
|
border-radius: 6px;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: 300ms;
|
|
}
|
|
|
|
.button-64:hover a {
|
|
background: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.button-64 {
|
|
font-size: 24px;
|
|
min-width: 196px;
|
|
}
|
|
}
|
|
|
|
/* overengeneered pure css action button */
|
|
/* UIVERSE CSS Challenge entry */
|
|
/* by kennyotsu <3 */
|
|
|
|
|
|
|
|
/* container wraps everything together, applies general styles and does nothing else*/
|
|
.container {
|
|
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
width: 200px;
|
|
height: 200px;
|
|
color: rgb(131, 131, 131);
|
|
-webkit-transition: 400ms ease-in-out;
|
|
transition: 400ms ease-in-out;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
/* clickHandler, as the name suggests, handles clicks.
|
|
Its a label for invisible checkbox, positioned absolutely and taking whole container space.
|
|
Comes with insane z-index. Stays above .container
|
|
When clicked, will change input state to checked */
|
|
#shuttle-wrapper {
|
|
position: absolute;
|
|
opacity: 0;
|
|
-webkit-transition: 200ms ease-in;
|
|
transition: 200ms ease-in;
|
|
z-index: 200;
|
|
}
|
|
|
|
#b {
|
|
width: 80px;
|
|
height: auto;
|
|
z-index: 200;
|
|
}
|
|
|
|
#shadow {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 80px;
|
|
-webkit-transform: rotateX(45deg) rotateZ(45deg);
|
|
transform: rotateX(45deg) rotateZ(45deg);
|
|
bottom: -10px;
|
|
z-index: -1;
|
|
background: radial-gradient(rgba(0, 0, 0, 0.382) 0%, rgba(0, 0, 0, 0) 70%);
|
|
}
|
|
|
|
#clickHandler {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
#clickHandler:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.container:hover #shuttle-wrapper {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(-100px) translateZ(140px);
|
|
-ms-transform: translateY(-100px) translateZ(140px);
|
|
transform: translateY(-100px) translateZ(140px);
|
|
-webkit-transition: 400ms ease-in-out;
|
|
transition: 400ms ease-in-out;
|
|
}
|
|
|
|
#checkbox {
|
|
/* comment out to actually see the checkbox state */
|
|
display: none;
|
|
/* */
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 200px;
|
|
}
|
|
|
|
/* this pseudo-selectors will fire animations when
|
|
clickHandler changes checkbox state to checked */
|
|
#checkbox:checked ~ #shuttle-wrapper #b {
|
|
-webkit-animation-name: launch_31;
|
|
animation-name: launch_31;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
-webkit-animation-duration: 6s;
|
|
animation-duration: 6s;
|
|
}
|
|
|
|
#checkbox:checked ~ #shuttle-wrapper #shadow {
|
|
-webkit-animation: shadow-launch 6s ease-in-out;
|
|
animation: shadow-launch 6s ease-in-out;
|
|
}
|
|
|
|
#checkbox:checked ~ #to-hover {
|
|
-webkit-animation-name: fadeout_010;
|
|
animation-name: fadeout_010;
|
|
-webkit-animation-duration: 6s;
|
|
animation-duration: 6s;
|
|
}
|
|
|
|
#checkbox:checked ~ #button #to-launch {
|
|
-webkit-animation-name: fadeout_010;
|
|
animation-name: fadeout_010;
|
|
-webkit-animation-duration: 6s;
|
|
animation-duration: 6s;
|
|
}
|
|
/* and this will take care of hover */
|
|
#clickHandler:hover ~ #button {
|
|
width: 200px;
|
|
height: 200px;
|
|
-webkit-transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
|
|
transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
|
|
-webkit-box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
|
|
28px 28px 28px 0 rgba(28, 27, 88, 0.315);
|
|
box-shadow: 2px 2px 0 2px #b2b2b2, -1px 0 28px 0 rgba(255, 250, 225, 0.512),
|
|
28px 28px 28px 0 rgba(28, 27, 88, 0.315);
|
|
-webkit-transition-delay: 0ms;
|
|
transition-delay: 0ms;
|
|
}
|
|
|
|
.container:hover {
|
|
-webkit-transform: translateY(30%);
|
|
-ms-transform: translateY(30%);
|
|
transform: translateY(30%);
|
|
}
|
|
|
|
#to-launch {
|
|
color: rgb(1, 85, 255);
|
|
font-size: large;
|
|
font-weight: bold;
|
|
-webkit-transition: ease-out 200ms;
|
|
transition: ease-out 200ms;
|
|
}
|
|
|
|
#to-hover {
|
|
margin-top: 1em;
|
|
text-align: center;
|
|
-webkit-transition: ease-out 200ms;
|
|
transition: ease-out 200ms;
|
|
}
|
|
|
|
#tag {
|
|
opacity: 0;
|
|
color: rgb(43, 43, 43);
|
|
position: absolute;
|
|
}
|
|
|
|
#platform {
|
|
position: absolute;
|
|
width: 70%;
|
|
height: 0;
|
|
border-radius: 16px;
|
|
background-color: rgb(234, 234, 234);
|
|
-webkit-transition: 0.3s ease-in-out;
|
|
transition: 0.3s ease-in-out;
|
|
-webkit-transition-delay: 150ms;
|
|
transition-delay: 150ms;
|
|
border: solid 0px rgba(42, 42, 42, 0);
|
|
outline: dashed rgba(255, 173, 57, 0);
|
|
-moz-outline-radius: 16px;
|
|
outline-width: 0px;
|
|
outline-offset: 0px;
|
|
}
|
|
|
|
#clickHandler:hover ~ #button #platform {
|
|
height: 70%;
|
|
background: rgb(244, 244, 244);
|
|
border: solid 4px rgb(42, 42, 42);
|
|
outline: dashed rgb(255, 172, 57);
|
|
outline-width: 4px;
|
|
outline-offset: -4px;
|
|
-webkit-animation: shake_010 80ms infinite;
|
|
animation: shake_010 80ms infinite;
|
|
}
|
|
|
|
.caution {
|
|
-webkit-transform: translateY(-200);
|
|
-ms-transform: translateY(-200);
|
|
transform: translateY(-200);
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#checkbox:checked ~ .caution {
|
|
-webkit-animation-name: fadeout_010;
|
|
animation-name: fadeout_010;
|
|
-webkit-animation-duration: 6s;
|
|
animation-duration: 6s;
|
|
}
|
|
|
|
#caution-left {
|
|
-webkit-transition: 200ms ease;
|
|
transition: 200ms ease;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
|
|
transform: translate3d(83px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
|
|
}
|
|
|
|
#caution-right {
|
|
-webkit-transition: 200ms ease;
|
|
transition: 200ms ease;
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
|
transform: translate3d(0px, 62px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
|
|
}
|
|
|
|
#clickHandler:hover ~ #button .caution #caution-left {
|
|
opacity: 1;
|
|
-webkit-transition: 400ms ease-in;
|
|
transition: 400ms ease-in;
|
|
animation: glow_010 1.2s infinite;
|
|
}
|
|
|
|
#clickHandler:hover ~ #button .caution #caution-right {
|
|
opacity: 1;
|
|
-webkit-transition: 400ms ease-in;
|
|
transition: 400ms ease-in;
|
|
animation: glow_010 1.2s infinite;
|
|
}
|
|
|
|
#button {
|
|
width: 200px;
|
|
height: 80px;
|
|
border: none;
|
|
border-radius: 1.8rem;
|
|
-webkit-transition: 0.4s ease-in-out;
|
|
transition: 0.4s ease-in-out;
|
|
-webkit-box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
|
|
box-shadow: 5px 5px 8px 0 rgba(28, 27, 88, 0.315);
|
|
background: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#ececec));
|
|
background: linear-gradient(125deg, #ffffff 50%, #f5f5ff);
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-family: inherit;
|
|
-webkit-transition-delay: 100ms;
|
|
transition-delay: 100ms;
|
|
}
|
|
|
|
#clickHandler:hover ~ #button #to-launch {
|
|
opacity: 0;
|
|
}
|
|
|
|
#clickHandler:hover ~ #to-hover {
|
|
opacity: 0;
|
|
}
|
|
|
|
#checkbox:checked ~ #button #tag {
|
|
-webkit-animation: tag-transition 5s ease-in-out;
|
|
animation: tag-transition 5s ease-in-out;
|
|
}
|
|
|
|
/* launch sequence, takes only 20% of duration to completely fade out,
|
|
and stays there til 90% */
|
|
|
|
@keyframes launch_31 {
|
|
5% {
|
|
opacity: 1;
|
|
}
|
|
|
|
15%, 90% {
|
|
-webkit-transform: translateY(-200px);
|
|
transform: translateY(-200px);
|
|
-webkit-transition-timing-function: ease-in;
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes shadow-launch {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
10%, 90% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout_010 {
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
0%, 20%, 90% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes shake_010 {
|
|
0%, 50% {
|
|
-webkit-transform: translate3d(1px, 0px, 0px);
|
|
transform: translate3d(1px, 0px, 0px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translate3d(0px, 1px, 0px);
|
|
transform: translate3d(0px, 1px, 0px);
|
|
}
|
|
}
|
|
|
|
@keyframes glow_010 {
|
|
0% {
|
|
color: rgb(94, 94, 94);
|
|
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
|
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
|
}
|
|
|
|
70% {
|
|
color: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
100% {
|
|
color: rgb(94, 94, 94);
|
|
-webkit-filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
|
filter: drop-shadow(0 0 0.75rem rgb(255, 214, 90));
|
|
}
|
|
}
|
|
|
|
@keyframes tag-transition {
|
|
0%, 100% {
|
|
opacity: 0;
|
|
}
|
|
|
|
20%, 80% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.noselect {
|
|
margin: auto;
|
|
-webkit-touch-callout: none;
|
|
/* iOS Safari */
|
|
-webkit-user-select: none;
|
|
/* Safari */
|
|
/* Konqueror HTML */
|
|
-moz-user-select: none;
|
|
/* Old versions of Firefox */
|
|
-ms-user-select: none;
|
|
/* Internet Explorer/Edge */
|
|
user-select: none;
|
|
/* Non-prefixed version, currently
|
|
supported by Chrome, Edge, Opera and Firefox */
|
|
} |